mirror of
https://github.com/cotes2020/jekyll-theme-chirpy.git
synced 2025-12-18 05:41:31 +00:00
A super huge improvement in search.
- Added a cleanup button within input form. - Optimized TopBar responsive effect(for search layout). - Redesign the search results layout.
This commit is contained in:
Cotes Chung
@@ -133,12 +133,12 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
#nav-wrap {
|
||||
#nav-wrapper {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#profile-wrap {
|
||||
#profile-wrapper {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@@ -205,20 +205,16 @@ body {
|
||||
box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.2), 6px 0 20px 0 rgba(0, 0, 0, 0.19) !important;
|
||||
}
|
||||
|
||||
#search-result-wrap {
|
||||
#search-result-wrapper {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 3rem;
|
||||
top: 0;
|
||||
padding-top: 3rem;
|
||||
height: 100%;
|
||||
width: calc(100% - 260px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#search-result-wrap>div.row>div {
|
||||
min-height: calc(100vh - 3rem - 2rem);
|
||||
}
|
||||
|
||||
#search-result-wrap .post-content {
|
||||
#search-result-wrapper .post-content {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@@ -237,7 +233,7 @@ body {
|
||||
|
||||
/*--- top-bar ---*/
|
||||
|
||||
#topbar {
|
||||
#topbar-wrapper {
|
||||
height: 3rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -249,7 +245,7 @@ body {
|
||||
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
#topbar i.fas { // icons
|
||||
#topbar i { // icons
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@@ -266,32 +262,45 @@ body {
|
||||
|
||||
#sidebar-trigger,
|
||||
#search-trigger {
|
||||
margin: 0 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search-wrap i.fas {
|
||||
position: relative;
|
||||
top: 1rem;
|
||||
left: .5rem;
|
||||
#search-wrapper {
|
||||
display: flex;
|
||||
width: 95%;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid #fff;
|
||||
background: #f5f5f5;
|
||||
padding: 0 .5rem;
|
||||
transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
|
||||
}
|
||||
|
||||
#search-wrapper i {
|
||||
z-index: 2;
|
||||
font-size: .9rem;
|
||||
color: #c2c6cc;
|
||||
}
|
||||
|
||||
#search-wrapper .fa-times-circle { /* button 'clean up' */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#search-wrapper+a { /* 'Cancel' link */
|
||||
color: #2a408e;
|
||||
margin-left: 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
position: relative;
|
||||
top: -.86rem;
|
||||
background: #f5f5f5;
|
||||
border-color: #fff;
|
||||
border-radius: 0.9rem;
|
||||
padding: .18rem .75rem .18rem 2rem;
|
||||
background: center;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: .18rem .3rem;
|
||||
}
|
||||
|
||||
#search-input:focus {
|
||||
box-shadow: none;
|
||||
background: center;
|
||||
border-color: #e9ecef;
|
||||
}
|
||||
|
||||
#search-input:focus.form-control::-webkit-input-placeholder { opacity: 0.6; }
|
||||
@@ -299,6 +308,57 @@ body {
|
||||
#search-input:focus.form-control:-ms-input-placeholder { opacity: 0.6; }
|
||||
#search-input:focus.form-control::placeholder { opacity: 0.6; }
|
||||
|
||||
#search-hints {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search-hints .post-tag {
|
||||
display: inline-block;
|
||||
line-height: 1rem;
|
||||
font-size: 1rem;
|
||||
background: #f8f9fa;
|
||||
border: none;
|
||||
padding: .5rem;
|
||||
margin: 0 1rem 1rem 0;
|
||||
}
|
||||
|
||||
#search-hints .post-tag::before {
|
||||
content: "#";
|
||||
padding-right: .2rem;
|
||||
}
|
||||
|
||||
#search-results {
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
#search-results a {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
#search-results>div:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#search-results>div i { /* icons */
|
||||
color: #818182;
|
||||
margin-right: .15rem;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#search-results>div i:not(:first-child) {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
#search-results>div>p{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
#topbar-title {
|
||||
display: none;
|
||||
font-size: 1.1rem;
|
||||
@@ -313,11 +373,6 @@ body {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#search-wrap+a {
|
||||
color: #2a408e;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mask {
|
||||
display: none;
|
||||
position: fixed;
|
||||
@@ -336,9 +391,9 @@ body {
|
||||
display: block!important;
|
||||
}
|
||||
|
||||
/*--- main wrap ---*/
|
||||
/*--- main wrapper ---*/
|
||||
|
||||
#main-wrap {
|
||||
#main-wrapper {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
padding-bottom: 6rem; /* equals to or greatter than footer's height */
|
||||
@@ -359,14 +414,14 @@ body {
|
||||
min-height: calc(100vh - 3rem - 6rem);
|
||||
}
|
||||
|
||||
#post-wrap {
|
||||
#post-wrapper {
|
||||
/* 350px for post extended block */
|
||||
min-height: calc(100vh - 3rem - 6rem - 470px) !important;
|
||||
}
|
||||
|
||||
#topbar.row,
|
||||
#topbar-wrapper.row,
|
||||
#main>.row,
|
||||
#search-result-wrap>.row {
|
||||
#search-result-wrapper>.row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -374,7 +429,7 @@ body {
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 6rem; /* see the height of #main-wrap */
|
||||
height: 6rem; /* see the height of #main-wrapper */
|
||||
padding: 1rem;
|
||||
font-size: 0.8rem;
|
||||
color: #7a7b7d;
|
||||
@@ -602,11 +657,6 @@ a.reversefootnote {
|
||||
border-bottom: 1px dotted #c2c6cc;
|
||||
}
|
||||
|
||||
#search-results a {
|
||||
font-size: 1.1rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
p>a, span>a,
|
||||
.post-preview a,
|
||||
.categories a,
|
||||
@@ -638,7 +688,7 @@ p>a, span>a,
|
||||
.post-content a:hover,
|
||||
.post a:hover code,
|
||||
footer a:hover,
|
||||
#post-wrap .post-content a:hover,
|
||||
#post-wrapper .post-content a:hover,
|
||||
#page .post-content a:hover,
|
||||
#access-lastmod a:hover {
|
||||
color: #d2603a;
|
||||
@@ -732,12 +782,24 @@ table tbody td {
|
||||
|
||||
/* --- Effects classes --- */
|
||||
|
||||
.hidden {
|
||||
display: none!important;
|
||||
.loaded {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.shown {
|
||||
display: block!important;
|
||||
.d-flex.loaded {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.unloaded {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.visable {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.no-scroll {
|
||||
@@ -777,12 +839,17 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
border-bottom: none!important;
|
||||
}
|
||||
|
||||
.input-focus {
|
||||
box-shadow: none;
|
||||
border-color: #e9ecef !important;
|
||||
background: center !important;
|
||||
}
|
||||
|
||||
/*--- Responsive Design ---*/
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
|
||||
#main-wrap {
|
||||
#main-wrapper {
|
||||
padding-bottom: 10rem; /* footer height */
|
||||
}
|
||||
|
||||
@@ -790,7 +857,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
min-height: calc(100vh - 3rem - 10rem); /* topbar is 3rem and footer is 10rem */
|
||||
}
|
||||
|
||||
#post-wrap {
|
||||
#post-wrapper {
|
||||
min-height: calc(100vh - 3rem - 10rem - 470px) !important;
|
||||
}
|
||||
|
||||
@@ -804,7 +871,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
margin-right: 1.8rem;
|
||||
}
|
||||
|
||||
#post-wrap h1 {
|
||||
#post-wrapper h1 {
|
||||
margin-top: 2.2rem;
|
||||
font-size: 1.55rem;
|
||||
}
|
||||
@@ -820,7 +887,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* footer and #main-wrap expand vertical */
|
||||
/* footer and #main-wrapper expand vertical */
|
||||
footer {
|
||||
height: 10rem;
|
||||
}
|
||||
@@ -841,7 +908,13 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
}
|
||||
|
||||
|
||||
/* Sidebar is visibal */
|
||||
@media all and (min-width: 831px) {
|
||||
#search-wrapper {
|
||||
width: 22%;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
/* button 'back-to-Top' position */
|
||||
#back-to-top {
|
||||
bottom: 9.2rem;
|
||||
@@ -864,7 +937,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
|
||||
/* iPad 9.7" horizontal */
|
||||
@media all and (min-width: 992px) and (max-width: 1024px) {
|
||||
#main-wrap .col-lg-11 {
|
||||
#main-wrapper .col-lg-11 {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 96%;
|
||||
flex: 0 0 96%;
|
||||
@@ -880,7 +953,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
transform: translateX(0) !important;
|
||||
}
|
||||
|
||||
.sidebar-expand~#main-wrap {
|
||||
.sidebar-expand~#main-wrapper {
|
||||
transform: translateX(260px) !important;
|
||||
}
|
||||
|
||||
@@ -895,12 +968,12 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#main-wrap {
|
||||
#main-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#search-result-wrap {
|
||||
width: 100%
|
||||
#search-result-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#page h1.dynamic-title {
|
||||
@@ -912,11 +985,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
}
|
||||
|
||||
#breadcrumb,
|
||||
#search-wrap {
|
||||
#search-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
#topbar-wrapper {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
@@ -937,12 +1010,12 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
display: block;
|
||||
}
|
||||
|
||||
#search-wrap.shown {
|
||||
padding-left: 1rem;
|
||||
#search-wrapper.loaded~a {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#search-wrap.shown~a {
|
||||
padding-right: 1rem;
|
||||
#search-wrapper .fa-times-circle {
|
||||
right: 5.2rem;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
@@ -950,10 +1023,15 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
#search-result-wrap .post-content {
|
||||
#search-result-wrapper .post-content {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
#search-hints {
|
||||
display: block;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
#tags {
|
||||
-webkit-box-pack: center!important;
|
||||
-ms-flex-pack: center!important;
|
||||
@@ -981,11 +1059,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
#topbar-wrapper {
|
||||
left: 210px;
|
||||
}
|
||||
|
||||
#search-result-wrap {
|
||||
#search-result-wrapper {
|
||||
width: calc(100% - 210px);
|
||||
}
|
||||
|
||||
@@ -1004,7 +1082,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
padding: 0 0.6rem;
|
||||
}
|
||||
|
||||
#main-wrap {
|
||||
#main-wrapper {
|
||||
margin-left: 210px;
|
||||
}
|
||||
|
||||
@@ -1020,11 +1098,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
|
||||
/* Pannel hidden */
|
||||
@media all and (max-width: 1199px) {
|
||||
#panel-wrap {
|
||||
#panel-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#topbar-main {
|
||||
#topbar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -1033,6 +1111,10 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
-ms-flex-pack: center!important;
|
||||
justify-content: center!important;
|
||||
}
|
||||
|
||||
#search-results>div {
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1048,12 +1130,13 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
padding-left: 3%;
|
||||
}
|
||||
|
||||
#panel-wrap {
|
||||
max-width: 300px;
|
||||
#topbar {
|
||||
padding: 0;
|
||||
max-width: 1070px;
|
||||
}
|
||||
|
||||
#topbar-main {
|
||||
padding: 0 calc((100% - 1150px) / 2)!important;
|
||||
#panel-wrapper {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
#back-to-top {
|
||||
@@ -1061,17 +1144,32 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
right: 4.3rem;
|
||||
}
|
||||
|
||||
#search-wrap {
|
||||
width: 22%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
width: 100%;
|
||||
-webkit-transition: all .3s ease-in-out;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
#search-result-wrapper {
|
||||
width: calc(100% - 260px);
|
||||
}
|
||||
|
||||
#search-results>div {
|
||||
max-width: 46%;
|
||||
}
|
||||
|
||||
#search-results>div:nth-child(odd) {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
#search-results>div:nth-child(even) {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
#search-results>div:last-child:nth-child(odd) {
|
||||
position: relative;
|
||||
right: 24.3%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media all and (min-width: 1400px) {
|
||||
@@ -1084,6 +1182,24 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
max-width: 850px;
|
||||
}
|
||||
|
||||
#search-result-wrapper {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
#search-wrapper .fa-times-circle {
|
||||
right: 2.6rem;
|
||||
}
|
||||
|
||||
#search-result-wrapper>div {
|
||||
max-width: 1110px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media all and (min-width: 1400px) and (max-width: 1650px) {
|
||||
#topbar {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1650px) {
|
||||
@@ -1101,23 +1217,23 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
padding-right: 1.9rem !important;
|
||||
}
|
||||
|
||||
#main-wrap {
|
||||
#main-wrapper {
|
||||
margin-left: 350px;
|
||||
}
|
||||
|
||||
#panel-wrap {
|
||||
#panel-wrapper {
|
||||
margin-left: calc((100% - 1150px) / 10);
|
||||
}
|
||||
|
||||
#topbar {
|
||||
#topbar-wrapper {
|
||||
left: 350px;
|
||||
}
|
||||
|
||||
#topbar-main {
|
||||
padding: 0 calc((100% - 1150px - 8%) / 2) !important;
|
||||
#topbar {
|
||||
max-width: 1150px;
|
||||
}
|
||||
|
||||
#search-wrap {
|
||||
#search-wrapper {
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
@@ -1125,7 +1241,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
#profile-wrap {
|
||||
#profile-wrapper {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 5rem;
|
||||
-ms-flex-direction: column!important;
|
||||
@@ -1218,15 +1334,19 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
max-width: 1130px;
|
||||
}
|
||||
|
||||
#search-result-wrapper {
|
||||
width: calc(100% - 350px); // 350px is the with of sidebar
|
||||
}
|
||||
|
||||
#search-result-wrapper>div {
|
||||
max-width: 1150px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media all and (min-width: 1700px) {
|
||||
|
||||
#topbar-main {
|
||||
padding: 0 calc((100% - 1150px - 10%) / 2) !important;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
#topbar-wrapper {
|
||||
padding-right: calc(100% - 350px - 1570px) /* 100% - 350px - (1920px - 350px); */
|
||||
}
|
||||
|
||||
@@ -1234,7 +1354,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
padding-left: calc((100% - 1150px - 2%) / 2);
|
||||
}
|
||||
|
||||
#panel-wrap {
|
||||
#panel-wrapper {
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
@@ -1258,7 +1378,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
||||
padding-left: 190px;
|
||||
}
|
||||
|
||||
#panel-wrap {
|
||||
#search-result-wrapper {
|
||||
padding-right: calc(100% - 350px - 1530px);
|
||||
}
|
||||
|
||||
#panel-wrapper {
|
||||
margin-left: 41px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
#toc-wrap {
|
||||
#toc-wrapper {
|
||||
border-left: 1px solid rgba(158, 158, 158, 0.17);
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
@@ -65,11 +65,11 @@
|
||||
animation: fade-up .8s;
|
||||
}
|
||||
|
||||
#toc-wrap.topbar-down {
|
||||
#toc-wrapper.topbar-down {
|
||||
top: 6rem;
|
||||
}
|
||||
|
||||
#toc-wrap>h3 {
|
||||
#toc-wrapper>h3 {
|
||||
font-size: 1rem;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
color: gray;
|
||||
@@ -144,7 +144,7 @@
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
#post-extend-wrap {
|
||||
#post-extend-wrapper {
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
@@ -190,28 +190,28 @@
|
||||
}
|
||||
|
||||
/*
|
||||
The following resposive design aim to make #post-extend-wrap margin-right same as pannel's width
|
||||
The following resposive design aim to make #post-extend-wrapper margin-right same as pannel's width
|
||||
*/
|
||||
@media all and (min-width: 1200px) {
|
||||
#post-extend-wrap {
|
||||
#post-extend-wrapper {
|
||||
margin-right: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1460px) {
|
||||
#post-extend-wrap {
|
||||
#post-extend-wrapper {
|
||||
margin-right: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1650px) {
|
||||
#post-extend-wrap {
|
||||
#post-extend-wrapper {
|
||||
margin-right: calc((100% - 1150px) / 10 + 300px);
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1700px) {
|
||||
#post-extend-wrap {
|
||||
#post-extend-wrapper {
|
||||
margin-right: calc((100% - 1150px) / 8 + 300px);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user