diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 8a76614..c75712e 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -6,12 +6,9 @@ @mixin mode-toggle($dark-mode: false) { @if $dark-mode { @include dark-scheme; - } @else { @include light-scheme; - } - } html:not([mode]), @@ -175,15 +172,18 @@ footer { a { color: var(--footer-link); + &:link { @include no-text-decoration; } + &:hover { @extend %link-hover; @include no-text-decoration; } } + .footer-right { text-align: right; } @@ -202,22 +202,28 @@ footer { position: -webkit-sticky; /* Safari */ position: sticky; } + &.topbar-down { top: 6rem; } + > div { padding-left: 1rem; border-left: 1px solid var(--main-border-color); + &:not(:last-child) { margin-bottom: 4rem; } } + span { @include panel-label; } + .post-content { font-size: 0.9rem; } + } #access-tags { @@ -234,6 +240,7 @@ footer { border-radius: 0.8rem; padding: 0.3rem 0.5rem; margin: 0 0.35rem 0.5rem 0; + &:hover { background-color: #2a408e; border-color: #2a408e; @@ -244,7 +251,6 @@ footer { } #access-lastmod { - li { height: 1.8rem; overflow: hidden; @@ -270,15 +276,18 @@ footer { .footnotes > ol { padding-left: 2rem; margin-top: 0.5rem; + > li { &:not(:last-child) { margin-bottom: 0.3rem; } + > p { margin-left: 0.25em; margin-top: 0; margin-bottom: 0; } + // [scroll-focus] added by `smooth-scroll.js` &:target:not([scroll-focus]), &[scroll-focus=true] > p { @@ -323,9 +332,11 @@ footer { margin-top: 3rem; margin-bottom: 1rem; } + em { /* MarkDown italic */ padding-right: 0.2rem; } + a:hover { code { @extend %link-hover; @@ -346,6 +357,7 @@ footer { thead { border-bottom: solid 2px rgba(210, 215, 217, 0.75); + th { @extend %table-cell; } @@ -354,18 +366,21 @@ footer { tbody { tr { border-bottom: 1px solid var(--tb-border-color); + &:nth-child(2n) { background-color: var(--tb-even-bg); } + &:nth-child(2n + 1) { background-color: var(--tb-odd-bg); } + td { @extend %table-cell; } } - } - } + } // tbody + }// table } /* --- post --- */ @@ -377,12 +392,15 @@ footer { .post-meta { font-size: 0.85rem; word-spacing: 1px; + a { @extend %link-color; @extend %link-underline; + &:not(:last-child) { margin-right: 2px; } + &:hover { @extend %link-hover; } @@ -416,7 +434,7 @@ footer { margin: 0.5rem 0; &[data-loaded=true] { - animation: fade-in linear .5s; + animation: fade-in linear 0.5s; } &.left { @@ -445,6 +463,7 @@ footer { &:not(.img-link) { @extend %link-color; @extend %link-underline; + &:hover { @extend %link-hover; } @@ -473,6 +492,7 @@ footer { margin: 0 0.4rem 0.2rem -1.4rem; vertical-align: middle; color: var(--checkbox-color); + &.checked { color: var(--checkbox-checked-color); } @@ -546,6 +566,7 @@ footer { padding: 1px 3px; border-radius: 3px; color: var(--link-color); + &:focus { box-shadow: none; } @@ -755,7 +776,6 @@ $sidebar-display: "sidebar-display"; width: 100%; &:last-child { - a { position: relative; left: $cursor-width / 2; @@ -871,6 +891,7 @@ $sidebar-display: "sidebar-display"; display: none; height: 100%; overflow: auto; + .post-content { margin-top: 2rem; } @@ -959,6 +980,7 @@ $sidebar-display: "sidebar-display"; &:focus { box-shadow: none; background: center; + &.form-control { &::-webkit-input-placeholder { @include input-placeholder; } &::-moz-placeholder { @include input-placeholder; } @@ -979,6 +1001,7 @@ $sidebar-display: "sidebar-display"; border: none; padding: 0.5rem; margin: 0 1rem 1rem 0; + &::before { content: "#"; color: var(--text-muted-color); @@ -989,6 +1012,7 @@ $sidebar-display: "sidebar-display"; #search-results { padding-bottom: 6rem; + a { &:hover { @extend %link-hover; @@ -1081,6 +1105,7 @@ $sidebar-display: "sidebar-display"; &:nth-child(2) { margin-top: $topbar-height; /* same as the height of topbar */ } + &:first-child { /* 3rem for topbar, 6rem for footer */ min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}); @@ -1088,8 +1113,7 @@ $sidebar-display: "sidebar-display"; } #post-wrapper { - min-height: calc( - 100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important; + min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important; } #topbar-wrapper.row, @@ -1147,8 +1171,8 @@ $sidebar-display: "sidebar-display"; } #post-wrapper { - min-height: calc( - 100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important; + min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important; + h1 { margin-top: 2.2rem; font-size: 1.55rem; @@ -1170,6 +1194,7 @@ $sidebar-display: "sidebar-display"; footer { height: $footer-height; + > div.d-flex { width: 100%; padding: 1.5rem 0; @@ -1178,6 +1203,7 @@ $sidebar-display: "sidebar-display"; -ms-flex-pack: distribute !important; justify-content: space-around !important; } + .footer-left, .footer-right { text-align: center; @@ -1201,13 +1227,13 @@ $sidebar-display: "sidebar-display"; .footnotes ol > li { padding-top: 3.5rem; margin-top: -3.2rem; + &:first-child { margin-top: -3.5rem; } } [#{$sidebar-display}] { - #sidebar { transform: translateX(0); } @@ -1272,6 +1298,7 @@ $sidebar-display: "sidebar-display"; &.loaded ~ a { margin-right: 1rem; } + .fa-times-circle { right: 5.2rem; } @@ -1299,6 +1326,7 @@ $sidebar-display: "sidebar-display"; #page h1.dynamic-title { display: none; + ~ .post-content { margin-top: 3rem; } @@ -1373,7 +1401,6 @@ $sidebar-display: "sidebar-display"; /* Compact icons in sidebar & panel hidden */ @media all and (min-width: 850px) and (max-width: 1199px) { - #sidebar { width: $sidebar-width-small; @@ -1387,6 +1414,7 @@ $sidebar-display: "sidebar-display"; span { width: 2rem; } + .icon-border { left: -3px; } @@ -1446,7 +1474,6 @@ $sidebar-display: "sidebar-display"; /* --- desktop mode, both sidebar and panel are visible --- */ @media all and (min-width: 1200px) { - #main > div.row > div.col-xl-8 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; @@ -1476,12 +1503,15 @@ $sidebar-display: "sidebar-display"; #search-results > div { width: 46%; + &:nth-child(odd) { margin-right: 1.5rem; } + &:nth-child(even) { margin-left: 1.5rem; } + &:last-child:nth-child(odd) { position: relative; right: 24.3%; @@ -1499,9 +1529,9 @@ $sidebar-display: "sidebar-display"; } @media all and (min-width: 1400px) { - #main > div.row { padding-left: calc((100% - #{$main-content-max-width}) / 2); + > div.col-xl-8 { max-width: 850px; } @@ -1509,6 +1539,7 @@ $sidebar-display: "sidebar-display"; #search-result-wrapper { padding-right: 2rem; + > div { max-width: 1110px; } @@ -1527,13 +1558,13 @@ $sidebar-display: "sidebar-display"; } @media all and (min-width: 1650px) { - #breadcrumb { padding-left: 0; } #main > div.row > div.col-xl-8 { padding-left: 0; + > div:first-child { padding-left: 0.55rem !important; padding-right: 1.9rem !important; @@ -1581,6 +1612,7 @@ $sidebar-display: "sidebar-display"; > a { width: 6.2rem; height: 6.2rem; + &.mx-auto { margin-left: 0 !important; } diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index 551ec9a..fd79339 100644 --- a/_sass/addon/syntax.scss +++ b/_sass/addon/syntax.scss @@ -76,6 +76,7 @@ div > pre { table { padding: 0; border: 0; + td pre { overflow: visible; /* Fixed iOS safari overflow-x */ word-break: normal; /* Fixed iOS safari linenos code break */ @@ -157,6 +158,7 @@ div { pre.lineno { display: none; } + td.rouge-code { @extend %code-snippet-padding; } diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 2842739..6b2fbd7 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -116,11 +116,13 @@ .card-header { background-color: var(--card-header-bg); } + .list-group-item { border-left: none; border-right: none; padding-left: 2rem; border-color: var(--categories-border); + &:last-child { border-bottom-color: var(--card-bg); } @@ -128,13 +130,16 @@ } #archives li:nth-child(odd) { - background-image: linear-gradient( - to left, - rgb(26, 26, 30), - rgb(39, 39, 45), - rgb(39, 39, 45), - rgb(39, 39, 45), - rgb(26, 26, 30)); + background-image: + linear-gradient( + to left, + rgb(26, 26, 30), + rgb(39, 39, 45), + rgb(39, 39, 45), + rgb(39, 39, 45), + rgb(26, 26, 30) + ); + } } // dark-scheme diff --git a/_sass/layout/archives.scss b/_sass/layout/archives.scss index 3da4d44..9df652f 100644 --- a/_sass/layout/archives.scss +++ b/_sass/layout/archives.scss @@ -41,6 +41,7 @@ &:not(:first-child) { position: relative; left: 4px; + &::after { left: 67px; } @@ -98,6 +99,7 @@ .date { white-space: nowrap; display: inline-block; + &.month { width: 1.4rem; text-align: center; @@ -120,6 +122,7 @@ z-index: 1; } } + &.day { font-size: 85%; font-family: 'Lato', sans-serif; @@ -127,7 +130,7 @@ margin-right: -2px; width: 1.2rem; position: relative; - left: -.15rem; + left: -0.15rem; } } // #archives .date @@ -136,6 +139,7 @@ @media all and (max-width: 576px) { #archives { margin-top: -1rem; + ul { letter-spacing: 0; } diff --git a/_sass/layout/category-tag.scss b/_sass/layout/category-tag.scss index 3549c91..e6d12d2 100644 --- a/_sass/layout/category-tag.scss +++ b/_sass/layout/category-tag.scss @@ -3,7 +3,7 @@ */ .dash { - margin: 0 .5rem .6rem .5rem; + margin: 0 0.5rem 0.6rem 0.5rem; border-bottom: 2px dotted var(--dash-color); } @@ -60,8 +60,9 @@ #page-tag { ul > li { &::before { - margin: 0 .5rem; + margin: 0 0.5rem; } + > a { white-space: nowrap; overflow: hidden; diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index 7a5b24f..7382fbb 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -22,24 +22,29 @@ border-radius: 50%; border: 1px solid var(--btn-paginator-border-color); background-color: var(--button-bg); + &:hover { background-color: var(--btn-paginator-hover-color); } } + &.active { .page-link { background-color: var(--btn-paginator-hover-color); color: var(--btn-text-color); } } + &.disabled { cursor: not-allowed; + .page-link { color: rgba(108, 117, 125, 0.57); border-color: var(--btn-paginator-border-color); background-color: var(--button-bg); } } + &:first-child .page-link, &:last-child .page-link { border-radius: 50%; @@ -70,6 +75,7 @@ i { font-size: 0.73rem; } + span:not(:last-child) { margin-right: 1.2rem; } @@ -79,6 +85,7 @@ margin-top: 0.6rem; margin-bottom: 0.6rem; color: var(--post-list-text-color); + > p { /* Make preview shorter on the homepage */ margin: 0; @@ -96,13 +103,13 @@ padding-left: 3px; color: var(--pin-color); } + > span { display: none; } } } // .post-preview - } // #post-list /* Hide SideBar and TOC */ @@ -122,9 +129,9 @@ /* Sidebar is visible */ @media all and (min-width: 831px) { - #post-list { margin-top: 1.5rem; + .post-preview .post-meta { .pin { background: var(--pin-bg); diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 57d3847..39e72d9 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -131,9 +131,11 @@ top: 4rem; transition: top 0.2s ease-in-out; animation: fade-up 0.8s; + &.topbar-down { top: 6rem; } + > span { @include panel-label; } @@ -162,6 +164,7 @@ nav[data-toggle=toc] { > h3 { @include label(1.1rem, 600); } + .card { border-color: var(--card-border-color); background-color: var(--card-bg); @@ -169,9 +172,11 @@ nav[data-toggle=toc] { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; + h3 { color: var(--text-color); } + &:hover { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0); @@ -200,6 +205,7 @@ nav[data-toggle=toc] { ul { list-style-type: none; padding-inline-start: 1.5rem; + > li::before { background: #c2c9d4; width: 5px; @@ -238,17 +244,21 @@ nav[data-toggle=toc] { .share-icons { font-size: 1.2rem; + a { &:not(:last-child) { margin-right: 0.25rem; } + &:hover { text-decoration: none; + > i { @extend %btn-share-hovor; } } } + > i { position: relative; bottom: 1px; @@ -259,16 +269,20 @@ nav[data-toggle=toc] { @extend %btn-share-hovor; } } + .fab { &.fa-twitter { @include btn-sharing-color(rgba(29, 161, 242, 1)); } + &.fa-facebook-square { @include btn-sharing-color(rgb(66, 95, 156)); } + &.fa-telegram { @include btn-sharing-color(rgb(39, 159, 217)); } + &.fa-weibo { @include btn-sharing-color(rgb(229, 20, 43)); } @@ -292,8 +306,10 @@ nav[data-toggle=toc] { .license-wrapper { line-height: 1.2rem; + > a { font-weight: 600; + &:hover { @extend %link-hover; } @@ -308,7 +324,8 @@ nav[data-toggle=toc] { .post-tail-bottom { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; - >div:first-child { + + > div:first-child { width: 100%; margin-top: 1rem; } @@ -324,9 +341,10 @@ nav[data-toggle=toc] { @media all and (min-width: 768px) { #post-wrapper { .post-meta { - >div:not(:first-child)::before { + > div:not(:first-child)::before { @include dot(0.5rem, 0.2rem); } + &.flex-column { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; @@ -342,7 +360,7 @@ nav[data-toggle=toc] { .post-navigation { padding-left: 0; padding-right: 0; - margin-left: -.5rem; - margin-right: -.5rem; + margin-left: -0.5rem; + margin-right: -0.5rem; } } diff --git a/_sass/layout/tags.scss b/_sass/layout/tags.scss index 7c3bff4..ab6c7b5 100644 --- a/_sass/layout/tags.scss +++ b/_sass/layout/tags.scss @@ -10,6 +10,7 @@ letter-spacing: 0; border: 1px solid var(--tag-border) !important; box-shadow: 0 0 3px 0 var(--tag-shadow); + span { margin-left: 0.6em; font-size: 0.7em;