From 73d1027acc3998e51e2d4c4159e96b6bec6c89ce Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 25 Feb 2020 17:56:03 +0800 Subject: [PATCH] Rewrite styles with SCSS. --- assets/css/_dark/dark-main.scss | 54 +- assets/css/_module.scss | 84 +++ assets/css/archives.scss | 237 +++--- assets/css/categories.scss | 71 +- assets/css/category-tag.scss | 83 +-- assets/css/home.scss | 146 ++-- assets/css/main.scss | 1209 +++++++++++++++---------------- assets/css/post.scss | 258 ++++--- assets/css/syntax.scss | 112 +-- assets/css/tags.scss | 15 +- 10 files changed, 1165 insertions(+), 1104 deletions(-) create mode 100644 assets/css/_module.scss diff --git a/assets/css/_dark/dark-main.scss b/assets/css/_dark/dark-main.scss index 5183063..bdbfac2 100644 --- a/assets/css/_dark/dark-main.scss +++ b/assets/css/_dark/dark-main.scss @@ -47,6 +47,19 @@ --footnote-target-bg: rgb(63, 81, 181); --btn-sharing: #6c757d; + /* tags */ + --tag-border: rgb(59, 79, 88); + --tag-shadow: rgb(32, 33, 33); + + /* categories */ + --categories-hover-bg: rgb(73, 75, 76); + + /* archives */ + --timeline-node-bg: rgb(150, 152, 156); + + /* Footer */ + ---footer-link: rgb(146, 146, 146); + hr { border-color: var(--main-border); } @@ -68,40 +81,29 @@ background-color: var(--card-bg); } - .categories .card-header { - background-color: var(--card-header-bg); + .categories { + .card-header { + background-color: var(--card-header-bg); + } + .list-group-item { + // @extend %category-bg; + border-left: none; + border-right: none; + padding-left: 2rem; + border-color: var(--main-border); + &:last-child { + border-bottom-color: var(--card-bg); + } + } } - .categories .list-group-item { - border-left: none; - border-right: none; - padding-left: 2rem; - border-color: var(--main-border); - } - - .categories .list-group-item:last-child { - border-bottom-color: var(--card-bg); - } - - /* tags */ - --tag-border: rgb(59, 79, 88); - --tag-shadow: rgb(32, 33, 33); - - /* categories */ - --categories-hover-bg: rgb(73, 75, 76); - - /* archives */ - --timeline-node-bg: rgb(150, 152, 156); #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)); } - /* Footer */ - ---footer-link: rgb(146, 146, 146); - -} +} // dark-scheme @mixin light-mode-invisible { diff --git a/assets/css/_module.scss b/assets/css/_module.scss new file mode 100644 index 0000000..230fcf7 --- /dev/null +++ b/assets/css/_module.scss @@ -0,0 +1,84 @@ +/* +* Mainly scss modules, only imported to `assets/css/main.scss` +* +* v2.1 +* https://github.com/cotes2020/jekyll-theme-chirpy +* © 2020 Cotes Chung +* MIT Licensed +*/ + +/*---------- scss placeholder ---------*/ + +%tag-hover { + background: var(--tag-hover, rgb(222, 226, 230)); + transition: background 0.35s ease-in-out; +} + +%table-cell { + padding: .35rem .8rem; + font-size: 95%; +} + +%link-hover { + color: #d2603a!important; + border-bottom: 1px solid #d2603a; + text-decoration: none; +} + +%link-color { + color: var(--link-color, #2a408e); +} + +%no-bottom-border { + border-bottom: none; +} + +%section { + line-height: 1.2; + margin-bottom: 1rem; +} + +%anchor { + padding-top: 3.5rem; + margin-top: -2.5rem; +} + +%footer-content { + font-weight: 600; + color: var(---footer-link, inherit); +} + + +/*---------- scss mixin ---------*/ + +@mixin no-text-decoration { + text-decoration: none; +} + +@mixin sidebar-icon { + color: rgba(255, 255, 255, 0.5); + transition: color 0.35s ease-in-out; + user-select: none; + margin: 0 .25rem; +} + +@mixin icon-round($diameter) { + border: 1px solid; + border-radius: 50%; + width: $diameter; + height: $diameter; +} + +@mixin ml-mr($value) { + margin-left: $value; + margin-right: $value; +} + +@mixin pl-pr($val) { + padding-left: $val; + padding-right: $val; +} + +@mixin input-placeholder { + opacity: 0.6; +} diff --git a/assets/css/archives.scss b/assets/css/archives.scss index 10784ff..35a656e 100644 --- a/assets/css/archives.scss +++ b/assets/css/archives.scss @@ -8,109 +8,9 @@ MIT License */ -#archives { - letter-spacing: 0.03rem; -} +$dot-color: #c2c6cc; -#archives li { - font-size: 1.1rem; - line-height: 3rem; -} - -#archives li:nth-child(odd) { - background-color: var(--main-wrapper-bg, #fff); - background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff); -} - -#archives li>div { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -#archives span.lead { - font-size: 1.5rem; - font-family: 'Oswald', sans-serif; - position: relative; - left: 8px; -} - -#archives span.lead:not(:first-child) { - position: relative; - left: 4px; -} - -#archives span.lead:not(:first-child)::after { - left: 67px; -} - -#archives span.lead::after { /* Year dot */ - content: ""; - display: block; - position: relative; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border-radius: 50%; - width: 12px; - height: 12px; - top: -26px; - left: 63px; - border: 3px solid; - background-color: var(--main-border, #ffffff); - border-color: var(--timeline-node-bg, #c2c6cc); - box-shadow: 0 0 2px 0 #c2c6cc; - z-index: 1; -} - -#archives .date { - white-space: nowrap; - display: inline-block; -} - -#archives .date.month { - width: 1.4rem; - text-align: center; - font-family: 'Oswald', sans-serif; -} - -#archives .date.day { - font-size: 85%; - font-family: sans-serif; - text-align: center; - margin-right: -2px; - width: 1.2rem; - position: relative; - left: -.15rem; -} - -#archives ul>li>div>a { -/* post title in Archvies */ - margin-left: 2.5rem; - position: relative; - top: .1rem; -} - -#archives .date.month ~ a::before { - /* A dot for Month and Day */ - content: ""; - display: inline-block; - position: relative; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border-radius: 50%; - width: 8px; - height: 8px; - float: left; - top: 1.35rem; - left: 69px; - background-color: var(--timeline-node-bg, #c2c6cc); - box-shadow: 0 0 3px 0 #c2c6cc; - z-index: 1; -} - -/* timeline for date */ -#archives ul>li::after, -#archives ul>li:first-child::before { +%date-timeline { content: ""; width: 4px; left: 75px; @@ -120,30 +20,127 @@ background-color: var(--main-border, rgba(0, 0, 0, 0.075)); } -#archives ul>li::after { - height: 2.8rem; - top: -1.3rem; -} +#archives { + letter-spacing: 0.03rem; + li { + font-size: 1.1rem; + line-height: 3rem; + &:nth-child(odd) { + background-color: var(--main-wrapper-bg, #fff); + background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff); + } + >div { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } -#archives ul>li:first-child::before { - height: 3.06rem; - top: -1.61rem; -} + span.lead { + font-size: 1.5rem; + font-family: 'Oswald', sans-serif; + position: relative; + left: 8px; -#archives ul:not(:last-child)>li:last-child::after { - height: 3.4rem; -} + &:not(:first-child) { + position: relative; + left: 4px; + &::after { + left: 67px; + } + } + + &::after { + /* Year dot */ + content: ""; + display: block; + position: relative; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + width: 12px; + height: 12px; + top: -26px; + left: 63px; + border: 3px solid; + background-color: var(--main-border, #ffffff); + border-color: var(--timeline-node-bg, $dot-color); + box-shadow: 0 0 2px 0 $dot-color; + z-index: 1; + } + } // #archives span.lead + + .date { + white-space: nowrap; + display: inline-block; + &.month { + width: 1.4rem; + text-align: center; + font-family: 'Oswald', sans-serif; + ~a::before { + /* A dot for Month and Day */ + content: ""; + display: inline-block; + position: relative; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + width: 8px; + height: 8px; + float: left; + top: 1.35rem; + left: 69px; + background-color: var(--timeline-node-bg, $dot-color); + box-shadow: 0 0 3px 0 $dot-color; + z-index: 1; + } + } + &.day { + font-size: 85%; + font-family: sans-serif; + text-align: center; + margin-right: -2px; + width: 1.2rem; + position: relative; + left: -.15rem; + } + } // #archives .date + + ul { + >li { + >div>a { + /* post title in Archvies */ + margin-left: 2.5rem; + position: relative; + top: .1rem; + } + &::after { + @extend %date-timeline; + height: 2.8rem; + top: -1.3rem; + } + &:first-child::before { + @extend %date-timeline; + height: 3.06rem; + top: -1.61rem; + } + } + &:not(:last-child)>li:last-child::after { + height: 3.4rem; + } + &:last-child>li:last-child::after { + display: none; + } + } // #archives ul + +} // #archives -#archives ul:last-child>li:last-child::after { - display: none; -} @media all and (max-width: 576px) { #archives { margin-top: -1rem; - } - - #archives ul { - letter-spacing: 0; + ul { + letter-spacing: 0; + } } } diff --git a/assets/css/categories.scss b/assets/css/categories.scss index 9b1804f..f8fa208 100644 --- a/assets/css/categories.scss +++ b/assets/css/categories.scss @@ -8,35 +8,43 @@ MIT License */ -.categories { - margin-bottom: 2rem; -} - -.categories .card-header { - padding-right: 12px; -} - -.categories .card-header>span>i:first-child, -.categories .list-group-item>i { +%category-icon-color { color: gray; } -.categories .list-group-item { - border-left: none; - border-right: none; - padding-left: 2rem; -} +.categories { + margin-bottom: 2rem; + .card-header { + padding-right: 12px; + } + .list-group-item { + border-left: none; + border-right: none; + padding-left: 2rem; + } -.categories .collapsing .list-group-item:first-child, -.categories .collapse .list-group-item:first-child { - border-top-left-radius: 0; - border-top-right-radius: 0; -} + .card-header>span>i:first-child { + @extend %category-icon-color; + } -.categories i.far, -.categories i.fas { // fontawesome icons - font-size: 86%; -} + .list-group-item { + >i { + @extend %category-icon-color; + } + .collapsing &:first-child, + .collapse &:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + } + + i { + &.far, &.fas { + font-size: 86%; // fontawesome icons + } + } + +} // .categories .category-trigger { width: 1.7rem; @@ -44,6 +52,12 @@ border-radius: 50%; text-align: center; color: #6c757d!important; + >i.fas { + position: relative; + height: .7rem; + width: 1rem; + transition: 300ms ease all; + } } @media (hover: hover) { // only works on desktop @@ -52,15 +66,8 @@ } } -.category-trigger>i.fas { - position: relative; - height: .7rem; - width: 1rem; - transition: 300ms ease all; -} - .rotate { -ms-transform: rotate(-90deg); /* IE 9 */ -webkit-transform: rotate(-90deg); /* Safari 3-8 */ transform: rotate(-90deg); -} +} \ No newline at end of file diff --git a/assets/css/category-tag.scss b/assets/css/category-tag.scss index 58c3302..c70b851 100644 --- a/assets/css/category-tag.scss +++ b/assets/css/category-tag.scss @@ -8,33 +8,29 @@ MIT License */ -#page-category ul>li, -#page-tag ul>li { - line-height: 1.5rem; - padding: .6rem 0; -} - -#page-category ul>li::before, -#page-tag ul>li::before { - background: #999; - width: 5px; - height: 5px; - border-radius: 50%; - display: block; - content: ""; - position: relative; - top: .6rem; - margin-right: .5rem; -} - -#page-tag ul>li>a, -#page-category ul>li>a, { /* post's title */ - font-size: 1.1rem; -} - -#page-category ul>li>span:last-child, -#page-tag ul>li>span:last-child { /* post's date */ - white-space: nowrap; +#page-category, #page-tag { + ul>li { + line-height: 1.5rem; + padding: .6rem 0; + &::before { // dot + background: #999; + width: 5px; + height: 5px; + border-radius: 50%; + display: block; + content: ""; + position: relative; + top: .6rem; + margin-right: .5rem; + } + >a { /* post's title */ + font-size: 1.1rem; + } + >span:last-child { + white-space: nowrap; + } + /* post's date */ + } } #page-tag h1>i { // tag icon @@ -45,10 +41,12 @@ font-size: 1.25rem; } -#page-category a:hover, -#page-tag a:hover, -#access-lastmod a:hover { - margin-bottom: -1px; // Avoid jumping +a:hover { + #page-category &, + #page-tag &, + #access-lastmod & { + margin-bottom: -1px; // Avoid jumping + } } .dash { @@ -57,17 +55,16 @@ } @media all and (max-width: 576px) { - - #page-category ul>li::before, - #page-tag ul>li::before { - margin: 0 .5rem; + #page-category, #page-tag { + ul>li { + &::before { + margin: 0 .5rem; + } + >a { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } } - - #page-tag ul>li>a, - #page-category ul>li>a { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } \ No newline at end of file diff --git a/assets/css/home.scss b/assets/css/home.scss index 963f259..a3e3fc0 100644 --- a/assets/css/home.scss +++ b/assets/css/home.scss @@ -1,6 +1,5 @@ --- --- - /*! Style for Homepage v2.0 @@ -12,95 +11,90 @@ #post-list { margin-top: 1rem; padding-right: .5rem; + .post-meta { + i:not(:first-child) { // post-meta icons on HOME + margin-left: 1.5rem; + } + } } .pagination { font-size: 1rem; -} - -.pagination a:hover { - text-decoration: none; + a:hover { + text-decoration: none; + } } .post-preview { padding-top: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(158, 158, 158, 0.17); + >h1 { + font-size: 1.4rem; + margin: 0; + } + i.far { /* fontawesome icons */ + font-size: 86%; + } + .post-content { + margin-top: .6rem; + margin-bottom: .6rem; + color: var(--text-color, dimgray); + >p { /* Make preview shorter in Home page*/ + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + } } -.post-preview>h1 { - font-size: 1.4rem; - margin: 0; -} +.page-item { + .page-link { + color: var(--text-color, #555555); + width: 2.5rem; + height: 2.5rem; + padding: 0; + text-align: center; + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + border-radius: 50%; + border: 1px solid var(--main-border, #f1f1f1); + font-family: 'Lato', sans-serif; + background-color: var(--button-bg); + } + &.active { + .page-link { + background-color: var(--btn-active-bg, #2a408e); + border-color: var(--btn-active-border-color, #007bff); + box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important; + color: var(--text-color, #f8f8f8); + } + } + &.disabled { + cursor: not-allowed; + .page-link { + color: rgba(108, 117, 125, 0.57); + border-color: var(--main-border, #f1f1f1); + background-color: var(--button-bg); + } + } + &:first-child .page-link, + &:last-child .page-link { + border-radius: 50%; + } + &:not(:last-child) { + margin-right: 0.6rem; + } -.post-preview i.far { - /* fontawesome icons */ - font-size: 86%; -} +} // .page-item -.post-preview .post-content { - margin-top: .6rem; - margin-bottom: .6rem; - color: var(--text-color, dimgray); -} - -/* Make preview shorter in Home page*/ -.post-preview .post-content>p { - margin: 0; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -} - -.page-item .page-link { - color: var(--text-color, #555555); - width: 2.5rem; - height: 2.5rem; - padding: 0; - text-align: center; - display: -webkit-box; - display: flex; - -webkit-box-pack: center; - justify-content: center; - -webkit-box-align: center; - align-items: center; - border-radius: 50%; - border: 1px solid var(--main-border, #f1f1f1); - font-family: 'Lato', sans-serif; - background-color: var(--button-bg); -} - -.page-item.active .page-link { - background-color: var(--btn-active-bg, #2a408e); - border-color: var(--btn-active-border-color, #007bff); - box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important; - color: var(--text-color, #f8f8f8); -} - -.page-item.disabled .page-link { - color: rgba(108, 117, 125, 0.57); - border-color: var(--main-border, #f1f1f1); - background-color: var(--button-bg); -} - -.page-item.disabled { - cursor: not-allowed; -} - -.page-item:first-child .page-link, -.page-item:last-child .page-link { - border-radius: 50%; -} - -.page-item:not(:last-child) { - margin-right: 0.6rem; -} - -#post-list .post-meta i:not(:first-child) { // post-meta icons on HOME - margin-left: 1.5rem; -} @media all and (max-width: 576px) { #post-list .post-meta>span i:not(:first-child) { diff --git a/assets/css/main.scss b/assets/css/main.scss index d89bbf2..6b5865a 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -10,20 +10,7 @@ @import "_fonts"; @import "_dark/dark-main"; - -@mixin sidebar-icon { - color: rgba(255, 255, 255, 0.5); - transition: color 0.35s ease-in-out; - user-select: none; - margin: 0 .25rem; -} - -@mixin icon-round($diameter) { - border: 1px solid; - border-radius: 50%; - width: $diameter; - height: $diameter; -} +@import "_module"; html, body { height: 100%; @@ -46,8 +33,7 @@ body { /*--- sidebar layout ---*/ #sidebar { - padding-left: 0; - padding-right: 0; + @include pl-pr(0); position: fixed; top: 0; left: 0; @@ -59,41 +45,76 @@ body { transition: transform 0.4s ease; background: rgb(42, 30, 107); background: var(--sidebar-bg, - radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%)); -} + radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%)); -#sidebar a { - @include sidebar-icon; -} + a { + @include sidebar-icon; + } -#sidebar .sidebar-bottom .icon-border+a { // the icon behide mode-toggle - margin-left: .1rem; -} + .sidebar-bottom { + .icon-border+a { // the icon behide mode-toggle + margin-left: .1rem; + } + } + .nav-link { + border-radius: 0; + font-size: .95rem; + font-weight: 600; + letter-spacing: 1px; + } + .nav-item { + height: 20%; + &:hover { + .nav-link { + color: #f8f9facf; + } + } + &.active { + .nav-link { + color: #fcfcfc; + } + } + } -#sidebar .nav-item { - height: 20%; -} + ul { + height: 16.5rem; + display: -webkit-box; + display: -ms-flexbox; + } -#sidebar .nav-link { - border-radius: 0; - font-size: .95rem; - font-weight: 600; - letter-spacing: 1px; -} + .sidebar-bottom { + font-size: 1.2rem; + margin: 2rem 2.5rem 1.6rem; -#sidebar .nav-item:hover .nav-link { - color: #f8f9facf; -} + a { + margin-bottom: .5rem; // icons may have multi lines + } -#sidebar .nav-item.active .nav-link { - color: #fcfcfc; -} + a:hover, #mode-toggle-wrapper>i:hover { + color: #fff; + } -#sidebar ul { - height: 16.5rem; - display: -webkit-box; - display: -ms-flexbox; -} + #mode-toggle-wrapper { + i { + @include sidebar-icon; + margin-right: 0; + font-size: 1.05rem; + text-align: center; + position: relative; + bottom: 1px; + } + } + + .icon-border { + background: #525354; + width: 3px; + height: 3px; + border-radius: 50%; + margin-top: .8rem; + } + } + +} // #sidebar #sidebar ul > li.active:nth-child(1) ~ li:last-child::after, #sidebar ul > li.nav-item:nth-child(1):hover ~ li:last-child::after { @@ -130,19 +151,21 @@ body { visibility: visible; } -#sidebar ul > li:last-child > a { - margin-right: -3px; - max-width: calc(100% - 3px); -} - -#sidebar ul > li:last-child::after { - visibility: hidden; - content: ""; - position: relative; - width: 3px; - height: 26px; - background-color: var(--nav-cursor, #fcfcfc); - pointer-events: none; +#sidebar ul>li:last-child { + >a { + margin-right: -3px; + max-width: calc(100% - 3px); + } + &::after { + visibility: hidden; + content: ""; + position: relative; + right: 1px; + width: 3px; + height: 26px; + background-color: var(--nav-cursor, #fcfcfc); + pointer-events: none; + } } @media (hover: hover) { @@ -163,54 +186,53 @@ body { margin-top: 2rem; } -#avatar>a { - display: block; - width: 6rem; - height: 6rem; - border-radius: 50%; - border: 2px solid #b6b6b6; - overflow: hidden; - transform: translateZ(0); /* fixed the zoom in Safari */ - -webkit-transition: border-color 0.35s ease-in-out; - -moz-transition: border-color 0.35s ease-in-out; - transition: border-color 0.35s ease-in-out; -} +#avatar { + >a { + display: block; + width: 6rem; + height: 6rem; + border-radius: 50%; + border: 2px solid #b6b6b6; + overflow: hidden; + transform: translateZ(0); // fixed the zoom in Safari + -webkit-transition: border-color 0.35s ease-in-out; + -moz-transition: border-color 0.35s ease-in-out; + transition: border-color 0.35s ease-in-out; + } -#avatar:hover>a { - border-color: #fff; -} + &:hover>a { + border-color: #fff; + } -#avatar img { - width: 100%; - height: 100%; - background-size: cover; - background-repeat: no-repeat; - -webkit-transition: all .5s !important; - -moz-transition: all .5s !important; - transition: all .5s !important; -} - -#avatar img:hover { - -ms-transform: scale(1.2); - -moz-transform: scale(1.2); - -webkit-transform: scale(1.2); - transform: scale(1.2); -} + img { + width: 100%; + height: 100%; + background-size: cover; + background-repeat: no-repeat; + -webkit-transition: all .5s !important; + -moz-transition: all .5s !important; + transition: all .5s !important; + &:hover { + -ms-transform: scale(1.2); + -moz-transform: scale(1.2); + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + } +} // #avatar #site-title { text-align: center; -} - -#site-title a { - color: #b6b6b6; - font-weight: 900; - font-size: 1.5rem; - letter-spacing: .5px; -} - -#site-title a:hover { - color: #fff; - text-decoration: none; + a { + color: #b6b6b6; + font-weight: 900; + font-size: 1.5rem; + letter-spacing: .5px; + &:hover { + color: #fff; + text-decoration: none; + } + } } #site-subtitle { @@ -233,42 +255,8 @@ body { padding-top: 3rem; height: 100%; overflow: auto; -} - -#search-result-wrapper .post-content { - margin-top: 2rem; -} - - -#sidebar .sidebar-bottom { - font-size: 1.2rem; - margin: 2rem 2.5rem 1.6rem; - - a { - margin-bottom: .5rem; // icons may have multi lines - } - - a:hover, #mode-toggle-wrapper>i:hover { - color: #fff; - } - - #mode-toggle-wrapper { - i { - @include sidebar-icon; - margin-right: 0; - font-size: 1.05rem; - text-align: center; - position: relative; - bottom: 1px; - } - } - - .icon-border { - background: #525354; - width: 3px; - height: 3px; - border-radius: 50%; - margin-top: .8rem; + .post-content { + margin-top: 2rem; } } @@ -296,11 +284,17 @@ body { font-size: 1rem; color: gray; padding-left: .5rem; -} - -#breadcrumb span:not(:last-child)::after { - content: "›"; - padding: 0 .3rem; + a:hover { + @extend %link-hover; + } + span { + &:not(:last-child) { + &::after { + content: "›"; + padding: 0 .3rem; + } + } + } } #sidebar-trigger, @@ -316,16 +310,14 @@ body { background: var(--search-wrapper-bg, #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: var(--search-icon, #c2c6cc); -} - -#search-wrapper .fa-times-circle { /* button 'clean up' */ - visibility: hidden; + i { + z-index: 2; + font-size: .9rem; + color: var(--search-icon, #c2c6cc); + } + .fa-times-circle { /* button 'clean up' */ + visibility: hidden; + } } #search-cancel { /* 'Cancel' link */ @@ -342,65 +334,65 @@ body { color: var(--text-color); } -#search-input:focus { - box-shadow: none; - background: center; +#search-input { + &:focus { + box-shadow: none; + background: center; + &.form-control { + &::-webkit-input-placeholder { @include input-placeholder } + &::-moz-placeholder { @include input-placeholder } + &:-ms-input-placeholder { @include input-placeholder } + &::placeholder { @include input-placeholder } + } + } } -#search-input:focus.form-control::-webkit-input-placeholder { opacity: 0.6; } -#search-input:focus.form-control::-moz-placeholder { opacity: 0.6; } -#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: var(--tag-bg, #f8f9fa); - border: none; - padding: .5rem; - margin: 0 1rem 1rem 0; -} - -#search-hints .post-tag::before { - content: "#"; - padding-right: .2rem; + .post-tag { + display: inline-block; + line-height: 1rem; + font-size: 1rem; + background: var(--tag-bg, #f8f9fa); + border: none; + padding: .5rem; + margin: 0 1rem 1rem 0; + &::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; + a { + @extend %link-color; + @extend %no-bottom-border; + font-size: 1.4rem; + font-weight: 400; + line-height: 2.5rem; + &:hover { + @extend %link-hover; + } + } + >div { + &:not(:last-child) { + margin-bottom: 1rem; + } + i { // icons + color: #818182; + margin-right: .15rem; + font-size: 80%; + } + >p { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + } + } } #topbar-title { @@ -429,10 +421,9 @@ body { background: var(--mask-bg, #c1c3c5); opacity: 0.5; z-index: 1; -} - -.sidebar-expand~#mask { - display: block!important; + @at-root .sidebar-expand~& { + display: block!important; + } } /*--- main wrapper ---*/ @@ -444,71 +435,74 @@ $footer-height: 5rem; position: relative; min-height: 100%; padding-bottom: $footer-height; - padding-left: 0; - padding-right: 0; + @include pl-pr(0); margin-left: 260px; transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease; } -#main>div.row:first-child>div:nth-child(1), -#main>div.row:first-child>div:nth-child(2) { - margin-top: 3rem; /* same as the height of topbar */ -} - -#main>div.row:first-child>div:first-child { - /* 3rem for topbar, 6rem for footer */ - min-height: calc(100vh - 3rem - 6rem); +#main>div.row:first-child>div { + &:nth-child(1), &:nth-child(2) { + margin-top: 3rem; /* same as the height of topbar */ + } + &:first-child { + /* 3rem for topbar, 6rem for footer */ + min-height: calc(100vh - 3rem - 6rem); + } } #post-wrapper { /* 350px for post extended block */ min-height: calc(100vh - 3rem - 6rem - 470px) !important; + .post-content { + a:hover { + @extend %link-hover; + } + } } #topbar-wrapper.row, #main>.row, #search-result-wrapper>.row { - margin-left: 0; - margin-right: 0; + @include ml-mr(0); } footer { position: absolute; bottom: 0; padding: 0 1rem; - height: $footer-height; /* see the height of #main-wrapper */ + height: $footer-height; font-size: 0.8rem; color: #7a7b7d; background-color: var(--main-wrapper-bg, #ffffff); -} - - -footer>div.d-flex { - line-height: 1.2rem; - width: 95%; - max-width: 1045px; - border-top: 1px solid var(--footer-border, #f3f3f3); - margin-bottom: 1rem; -} - -footer a:link, -footer a:hover { - text-decoration: none; -} - -footer>.d-flex>div { - width: 350px; -} - -footer .footer-left a, -footer .footer-right a { - font-weight: 600; - color: var(---footer-link, inherit); -} - -footer .footer-right { - text-align: right; + >div.d-flex { + line-height: 1.2rem; + width: 95%; + max-width: 1045px; + border-top: 1px solid var(--footer-border, #f3f3f3); + margin-bottom: 1rem; + >div { + width: 350px; + } + } + a { + &:link { + @include no-text-decoration; + } + &:hover { + @extend %link-hover; + @include no-text-decoration; + } + } + .footer-left a { + @extend %footer-content; + } + .footer-right { + text-align: right; + a { + @extend %footer-content; + } + } } /*--- Panels ---*/ @@ -520,74 +514,79 @@ footer .footer-right { margin-top: 3rem; margin-bottom: 6rem; color: #6c757d; + &:only-child { + position: -webkit-sticky; /* Safari */ + position: sticky; + } + &.topbar-down { + top: 6rem; + } + >div { + padding-left: 1rem; + border-left: 1px solid rgba(158, 158, 158, 0.17); + &:not(:first-child) { + margin-top: 4rem; + } + } + h3 { + padding-top: .5rem; + padding-bottom: .5rem; + margin-top: 0; + margin-bottom: 0; + letter-spacing: -0.02em; + font-size: 1rem; + font-family: 'Oswald', sans-serif; + } + .post-content { + font-size: .9rem; + } } -.access:only-child { - position: -webkit-sticky; /* Safari */ - position: sticky; + +#access-tags { + >div.post-content>div { + max-width: 80%; + } + .post-tag { + display: inline-block; + line-height: 1rem; + font-size: 0.85rem; + background: none; + border: 1px solid var(--main-border, #e9ecef); + border-radius: .8rem; + padding: .3rem .5rem; + margin: 0 .35rem .5rem 0; + &:hover { + background-color: #2a408e; + border-color: #2a408e; + color: #fff; + transition: none; + } + } } -.access.topbar-down { - top: 6rem; -} +#access-lastmod { + ul { + >li { + height: 1.8rem; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + list-style: none; + } + a { + color: #6c757d; + } + } -.access>div { - padding-left: 1rem; - border-left: 1px solid rgba(158, 158, 158, 0.17); -} - -.access>div:not(:first-child) { - margin-top: 4rem; -} - -.access h3 { - padding-top: .5rem; - padding-bottom: .5rem; - margin-top: 0; - margin-bottom: 0; - letter-spacing: -0.02em; - font-size: 1rem; - font-family: 'Oswald', sans-serif; -} - -.access .post-content { - font-size: .9rem; -} - -#access-tags>div.post-content>div { - max-width: 80%; -} - -#access-tags .post-tag { - display: inline-block; - line-height: 1rem; - font-size: 0.85rem; - background: none; - border: 1px solid var(--main-border, #e9ecef); - border-radius: .8rem; - padding: .3rem .5rem; - margin: 0 .35rem .5rem 0; -} - -#access-tags .post-tag:hover { - background-color: #2a408e; - border-color: #2a408e; - color: #fff; - transition: none; -} - -#access-lastmod ul>li { - height: 1.8rem; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - list-style: none; -} - -#access-lastmod ul a { - color: #6c757d; + a { + @extend %no-bottom-border; + &:hover { + @extend %link-hover; + } + } } /*--- button back-to-top ---*/ @@ -620,15 +619,21 @@ h1 { } h2 { + @extend %section; + @extend %anchor; font-size: 1.35rem; font-weight: 400; } h3 { + @extend %section; + @extend %anchor; font-size: 1.25rem; } h4 { + @extend %section; + @extend %anchor; font-size: 1.15rem; } @@ -636,155 +641,162 @@ h5 { font-size: 1.1rem; } -h2, h3, h4 { - line-height: 1.2; - margin-bottom: 1rem; -} - blockquote { border-left: 5px solid var(--blockquote-border, #eee); padding-left: 1rem; color: var(--blockquote-text, #9a9a9a); -} - -.post-content blockquote a { - color: var(--link-color, #2a408e); + .post-content & { + a { + color: var(--link-color, #2a408e); + } + } } kbd { margin: 0 .3rem; } -h2, h3, h4, sup { - padding-top: 3.5rem; - margin-top: -2.5rem; +sup { + @extend %anchor; } .footnotes ol { margin-top: .5rem; + >li { + padding-top: .2rem; + margin-top: -0.2rem; + >p { + padding-left: .2em; + } + &:not(:last-child) { + margin-bottom: -.8rem; + } + &:target>p { + background-color: var(--footnote-target-bg, lightcyan); + width: fit-content; + -webkit-transition: background-color 1.5s ease-in-out; + /* Safari prior 6.1 */ + transition: background-color 1.5s ease-in-out; + } + } } -.footnotes ol>li { - padding-top: .2rem; - margin-top: -0.2rem; +.footnote { + @at-root a#{&} { + margin: 0 .2em; + border-bottom-style: none !important; + -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */ + transition: background-color 1.5s ease-in-out; + } + @at-root sup:target>a#{&} { + background-color: var(--footnote-target-bg, lightcyan); + padding: 0 2px; + } } -.footnotes ol>li>p { - padding-left: .2em; +.reversefootnote { + @at-root a#{&} { + font-size: .6rem; + position: absolute; + line-height: 1; + padding-top: .5em; + margin-left: .5em; + border-bottom-style: none !important; + } } -.footnotes ol>li:not(:last-child) { - margin-bottom: -.8rem; +a { + @at-root p>#{&} { + @extend %link-color; + } + @at-root span>#{&} { + @extend %link-color; + } + .post-preview & { + @extend %link-color; + &:hover { + @extend %link-hover; + } + } + #page .categories & { + @extend %link-color; + @extend %no-bottom-border; + } + #tags & { + @extend %link-color; + } + #page-category & { + @extend %link-color; + @extend %no-bottom-border; + } + #page-tag & { + @extend %link-color; + @extend %no-bottom-border; + } + #archives & { + @extend %link-color; + @extend %no-bottom-border; + } + .license-wrapper .license-text &:hover { + @extend %link-hover; + } + #page .post-content &:hover { + @extend %link-hover; + } + +} // a + +.post { + h1 { + margin-top: 3rem; + } + em { /* MarkDown italic */ + padding-right: .2rem; + } + a:hover { + code { + @extend %link-hover; + } + } } -.footnotes ol>li:target>p { - background-color: var(--footnote-target-bg, lightcyan); - width: fit-content; - -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */ - transition: background-color 1.5s ease-in-out; -} - -a.footnote { - margin: 0 .2em; - border-bottom-style: none !important; - -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */ - transition: background-color 1.5s ease-in-out; -} - -sup:target>a.footnote { - background-color: var(--footnote-target-bg, lightcyan); - padding: 0 2px; -} - -a.reversefootnote { - font-size: .6rem; - position: absolute; - line-height: 1; - padding-top: .5em; - margin-left: .5em; - border-bottom-style: none !important; -} - -.post-content a { - color: var(--link-color, #2a408e); - border-bottom: 1px dotted var(--link-underline-color, #c2c6cc); -} - -p>a, span>a, -.post-preview a, -.categories a, -#tags a, -#page-category a, -#page-tag a, -#archives a, -#search-results a { - color: var(--link-color, #2a408e); -} - -.categories a, -.access a, -#archives a, -#page-tag a, -#page-category a, -#search-results a { - border-bottom: none; -} - -.post h1 { - margin-top: 3rem; -} - -#breadcrumb a:hover, -#search-results a:hover, -.post-preview a:hover, -.post-meta a:hover, -.post-content a:hover, -.post a:hover code, -footer a:hover, -#post-wrapper .post-content a:hover, -.license-wrapper .license-text a:hover, -#page .post-content a:hover, -#access-lastmod a:hover { - color: #d2603a; - border-bottom: 1px solid #d2603a; - text-decoration: none; -} - -.post em { /* MarkDown italic */ - padding-right: .2rem; -} /*--- Begin of Markdown table style ---*/ -div.post-content>table, -div.post-content li>table { - min-width: 60%; - border-collapse: collapse; - border-spacing: 0; - margin-bottom: 1.5rem; +div.post-content { + >table, li>table { + min-width: 60%; + border-collapse: collapse; + border-spacing: 0; + margin-bottom: 1.5rem; + } } -table thead { - border-bottom: solid 2px rgba(210, 215, 217, 0.75); -} +table { + thead { + border-bottom: solid 2px rgba(210, 215, 217, 0.75); + +tbody tr { + &:nth-child(2n) { + background-color: var(--tb-even-bg); + } + &:last-child:nth-child(2n) { + border-bottom: solid 1px var(--tb-odd-bg, rgba(210, 215, 217, 0.75)); + } + &:nth-child(2n + 1) { + background-color: var(--tb-odd-bg, #f8f9fa); + } + } + th { + @extend %table-cell; + } + } -table thead+tbody tr:nth-child(2n) { - background-color: var(--tb-even-bg); -} + tbody td { + @extend %table-cell; + } -table thead+tbody tr:last-child:nth-child(2n) { - border-bottom: solid 1px var(--tb-odd-bg, rgba(210, 215, 217, 0.75)); -} +} // table -table thead+tbody tr:nth-child(2n + 1) { - background-color: var(--tb-odd-bg, #f8f9fa); -} - -table thead th, -table tbody td { - padding: .35rem .8rem; - font-size: 95%; -} /*--- post ---*/ @@ -795,15 +807,16 @@ table tbody td { .post-meta { font-size: 0.85rem; word-spacing: 1px; -} - -.post-meta a { - color: var(--link-color, #2a408e); - border-bottom: 1px dotted var(--link-underline-color, #c2c6cc); -} - -.post-meta a:not(:last-child) { - margin-right: 2px; + a { + color: var(--link-color, #2a408e); + border-bottom: 1px dotted var(--link-underline-color, #c2c6cc); + &:not(:last-child) { + margin-right: 2px; + } + &:hover { + @extend %link-hover; + } + } } .post-content { @@ -812,6 +825,17 @@ table tbody td { margin-top: 2rem; overflow-wrap: break-word; word-wrap: break-word; + a { + @extend %link-color; + border-bottom: 1px dotted var(--link-underline-color, #c2c6cc); + &:hover { + @extend %link-hover; + } + } +} + +.tag:hover { + @extend %tag-hover; } .post-tag { @@ -823,22 +847,15 @@ table tbody td { padding: 0 .4rem; color: #818182; line-height: 1.6rem; -} - -.post-tag:not(:first-child) { - margin-left: .2rem; -} - -.tag:hover, -.post-tag:hover { - background: var(--tag-hover, rgb(222, 226, 230)); - transition: background 0.35s ease-in-out; -} - -.post-tag:hover { - border-bottom: none; - text-decoration: none; - color: #d2603a; + &:not(:first-child) { + margin-left: .2rem; + } + &:hover { + @extend %tag-hover; + border-bottom: none; + text-decoration: none; + color: #d2603a; + } } /* --- buttons --- */ @@ -852,10 +869,9 @@ table tbody td { .loaded { display: block !important; -} - -.d-flex.loaded { - display: flex !important; + @at-root .d-flex#{&} { + display: flex !important; + } } .unloaded { @@ -889,7 +905,7 @@ table tbody td { } .no-text-decoration { - text-decoration: none; + @include no-text-decoration; } .tooltip-inner { /* Overrided BS4 Tooltip */ @@ -924,6 +940,10 @@ table tbody td { #post-wrapper { min-height: calc(100vh - 3rem - 10rem - 470px) !important; + h1 { + margin-top: 2.2rem; + font-size: 1.55rem; + } } #avatar>a { @@ -932,13 +952,7 @@ table tbody td { } #site-subtitle { - margin-left: 1.8rem; - margin-right: 1.8rem; - } - - #post-wrapper h1 { - margin-top: 2.2rem; - font-size: 1.55rem; + @include ml-mr(1.8rem); } .post-content { @@ -960,21 +974,18 @@ table tbody td { footer { height: $footer-height; - } - - footer>div.d-flex { - width: 90%; - padding: 1.5rem 0; - margin-bottom: .3rem; - flex-wrap: wrap; - justify-content: left!important; - -ms-flex-pack: distribute!important; - justify-content: space-around!important; - } - - footer .footer-left, - footer .footer-right { - text-align: center; + >div.d-flex { + width: 90%; + padding: 1.5rem 0; + margin-bottom: .3rem; + flex-wrap: wrap; + justify-content: left!important; + -ms-flex-pack: distribute!important; + justify-content: space-around!important; + } + .footer-left, .footer-right { + text-align: center; + } } } @@ -1027,21 +1038,19 @@ table tbody td { .sidebar-expand { transform: translateX(0) !important; - } - - .sidebar-expand~#main-wrapper { - transform: translateX(260px) !important; + ~#main-wrapper { + transform: translateX(260px) !important; + } } #sidebar { - transform: translateX(-260px); /* hide */ + transform: translateX(-260px); // hide -webkit-transform: translateX(-260px); - } - - #sidebar .cursor { - -webkit-transition: none; - -moz-transition: none; - transition: none; + .cursor { + -webkit-transition: none; + -moz-transition: none; + transition: none; + } } #main-wrapper { @@ -1054,10 +1063,9 @@ table tbody td { #page h1.dynamic-title { display: none; - } - - #page h1.dynamic-title ~ .post-content { - margin-top: 3rem; + ~.post-content { + margin-top: 3rem; + } } #breadcrumb, @@ -1086,12 +1094,13 @@ table tbody td { display: block; } - #search-wrapper.loaded~a { - margin-right: 1rem; - } - - #search-wrapper .fa-times-circle { - right: 5.2rem; + #search-wrapper { + &.loaded~a { + margin-right: 1rem; + } + .fa-times-circle { + right: 5.2rem; + } } #search-input { @@ -1121,10 +1130,9 @@ table tbody td { .footnotes ol>li { padding-top: 3.5rem; margin-top: -4.3rem; - } - - .footnotes ol>li:first-child { - margin-top: -3.5rem; + &:first-child { + margin-top: -3.5rem; + } } } @@ -1142,11 +1150,9 @@ table tbody td { #sidebar { width: 210px; .sidebar-bottom { - margin-left: 1.5rem; - margin-right: 1.5rem; + @include ml-mr(1.5rem); .icon-border { - margin-left: .25rem; - margin-right: .25rem; + @include ml-mr(.25rem); } } } @@ -1166,8 +1172,7 @@ table tbody td { #site-subtitle { font-size: 90%; - margin-left: 1rem; - margin-right: 1rem; + @include ml-mr(1rem); } #main-wrapper { @@ -1243,19 +1248,16 @@ table tbody td { #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%; + &:nth-child(odd) { + margin-right: 1.5rem; + } + &:nth-child(even) { + margin-left: 1.5rem; + } + &:last-child:nth-child(odd) { + position: relative; + right: 24.3%; + } } footer>div.d-felx { @@ -1268,24 +1270,22 @@ table tbody td { #main>div.row { padding-left: calc((100% - 1150px) / 2); - } - - #main>div.row>div.col-xl-8 { - max-width: 850px; + >div.col-xl-8 { + max-width: 850px; + } } #search-result-wrapper { padding-right: 2rem; + >div { + max-width: 1110px; + } } #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) { @@ -1302,15 +1302,16 @@ table tbody td { #main>div.row>div.col-xl-8 { padding-left: 0; + >div:first-child { + padding-left: .55rem !important; + padding-right: 1.9rem !important; + } } - #main>div.row>div.col-xl-8>div:first-child { - padding-left: .55rem !important; - padding-right: 1.9rem !important; - } + $side-bar-width: 350px; #main-wrapper { - margin-left: 350px; + margin-left: $side-bar-width } #panel-wrapper { @@ -1318,7 +1319,7 @@ table tbody td { } #topbar-wrapper { - left: 350px; + left: $side-bar-width } #topbar { @@ -1329,14 +1330,6 @@ table tbody td { margin-right: 3%; } - #sidebar { - width: 350px; - } - - #sidebar ul { - margin-left: 5%; - } - #profile-wrapper { margin-top: 4rem; margin-bottom: 3rem; @@ -1348,11 +1341,10 @@ table tbody td { -webkit-box-pack: normal !important; -ms-flex-pack: normal !important; justify-content: normal !important; - } - - #avatar > a { - width: 6.2rem; - height: 6.2rem; + >a { + width: 6.2rem; + height: 6.2rem; + } } .profile-text { @@ -1385,62 +1377,68 @@ table tbody td { margin: .3rem 0 0 0; } - #sidebar ul>li>a { - padding-left: 2.5rem; - -webkit-box-pack: start!important; - -ms-flex-pack: start!important; - justify-content: flex-start!important; - } + #sidebar { + width: $side-bar-width; + ul { + margin-left: 5%; + >li>a { + padding-left: 2.5rem; + -webkit-box-pack: start!important; + -ms-flex-pack: start!important; + justify-content: flex-start!important; + } + } - #sidebar .nav-link>span { - letter-spacing: 3px; - } + .nav-link { + >span { + letter-spacing: 3px; + } + >i { + @include icon-round(1.65rem); + line-height: 1rem; + font-size: .6rem; + padding: .5em 0 0 .1em; + display: inline-block!important; + } + } - #sidebar .nav-link>i { - @include icon-round(1.65rem); - line-height: 1rem; - font-size: .6rem; - padding: .5em 0 0 .1em; - display: inline-block!important; - } - - #sidebar .sidebar-bottom { - margin-left: 3.5rem; - margin-right: 3rem; - font-size: 1.3rem; - a { - border: 1px solid; - border-radius: 50%; - font-size: 1rem; - width: 2rem; - height: 2rem; - text-align: center; - i { + .sidebar-bottom { + margin-left: 3.5rem; + margin-right: 3rem; + font-size: 1.3rem; + a { + border: 1px solid; + border-radius: 50%; + font-size: 1rem; + width: 2rem; + height: 2rem; text-align: center; - width: 1.25em; - padding-top: .44rem; + i { + text-align: center; + width: 1.25em; + padding-top: .44rem; + } } - } - #mode-toggle-wrapper { - font-size: .9rem; - i { - @include icon-round(2rem); - padding-top: .44rem; - bottom: 0; + #mode-toggle-wrapper { + font-size: .9rem; + i { + @include icon-round(2rem); + padding-top: .44rem; + bottom: 0; + } } - } - .icon-border { - margin-left: .2rem; - margin-right: .2rem; - margin-top: .85rem; - } + .icon-border { + @include ml-mr(.2rem); + margin-top: .85rem; + +a { + margin-left: 0; + } + } - .icon-border+a { - margin-left: 0; - } - } // #sidebar .sidebar-bottom + } // .sidebar-bottom + } // #sidebar footer>div.d-flex { width: 87%; @@ -1449,16 +1447,14 @@ table tbody td { #search-result-wrapper { width: calc(100% - 350px); // 350px is the with of sidebar + >div { + max-width: 1150px; + } } - #search-result-wrapper>div { - max-width: 1150px; - } - -} +} // min-width: 1650px @media all and (min-width: 1700px) { - #topbar-wrapper { padding-right: calc(100% - 350px - 1570px) /* 100% - 350px - (1920px - 350px); */ } @@ -1482,7 +1478,6 @@ table tbody td { } - @media (min-width: 1920px) { #main>div.row { padding-left: 190px; diff --git a/assets/css/post.scss b/assets/css/post.scss index 43dfece..2853c76 100644 --- a/assets/css/post.scss +++ b/assets/css/post.scss @@ -11,6 +11,20 @@ $prompt-older: "{{ site.data.label.post.button.previous }}"; $prompt-newer: "{{ site.data.label.post.button.next }}"; +@mixin btn-sharing-color($light-color, $important: false) { + @if $important { + color: var(--btn-sharing, $light-color)!important; + } @else { + color: var(--btn-sharing, $light-color); + } +} + +@mixin btn-post-nav { + width: 50%; + position: relative; + border-color: var(--main-border, #e9ecef); +} + .post img { margin-top: .5rem; margin-bottom: 1.5rem; @@ -34,37 +48,27 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; padding-top: 3rem; padding-bottom: 2rem; - @mixin post-nav-btn { - width: 50%; - position: relative; - border-color: var(--main-border, #e9ecef); - } - .btn { - @include post-nav-btn; + @include btn-post-nav; color: var(--link-color, #2a408e); - } - - .btn:hover { - background: #2a408e; - color: #fff; - border-color: #2a408e; - } - - .btn.disabled { - @include post-nav-btn; - pointer-events: auto; - cursor: not-allowed; - background: none; - color: gray; - } - - .btn.disabled:hover { - border-color: none; - } - - .btn.btn-outline-primary.disabled:focus { - box-shadow: none; + &:hover { + background: #2a408e; + color: #fff; + border-color: #2a408e; + } + &.disabled { + @include btn-post-nav; + pointer-events: auto; + cursor: not-allowed; + background: none; + color: gray; + &:hover { + border-color: none; + } + } + &.btn-outline-primary.disabled:focus { + box-shadow: none; + } } p { @@ -74,38 +78,30 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; white-space: normal; } - a::before, - span::before { - color: var(--text-muted-color, gray); - font-size: .65rem; - text-transform: uppercase; + a, span { + &::before { + color: var(--text-muted-color, gray); + font-size: .65rem; + text-transform: uppercase; + } + &:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + left: .5px; + &::before { + content: $prompt-older + } + } + &:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + right: .5px; + &::before { + content: $prompt-newer + } + } } - - a:first-child, - span:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - left: .5px; - } - - a:last-child, - span:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - right: .5px; - } - - a:first-child::before, - span:first-child::before { - content: $prompt-older - } - - a:last-child::before, - span:last-child::before { - content: $prompt-newer - } -} - +} // .post-navigation @keyframes fade-up { from { @@ -127,16 +123,14 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; top: 2rem; transition: top 0.2s ease-in-out; animation: fade-up .8s; -} - -#toc-wrapper.topbar-down { - top: 6rem; -} - -#toc-wrapper>h3 { - font-size: 1rem; - font-family: 'Oswald', sans-serif; - color: gray; + &.topbar-down { + top: 6rem; + } + >h3 { + font-size: 1rem; + font-family: 'Oswald', sans-serif; + color: gray; + } } #toc li>a { @@ -148,13 +142,12 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; /*--- Related Posts ---*/ -#related-posts > h3 { - color: gray; - font-size: 1.1rem; - font-family: 'Oswald', sans-serif; -} - #related-posts { + >h3 { + color: gray; + font-size: 1.1rem; + font-family: 'Oswald', sans-serif; + } .card { border: 1px solid var(--main-wrapper-bg, #f1f1f1); background-color: var(--card-bg); @@ -165,12 +158,11 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; h3 { color: var(--relate-post-title, #353a3d); } - } - - .card:hover { - -webkit-transform: translate3d(0, -3px, 0); - transform: translate3d(0, -3px, 0); - filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08)); + &:hover { + -webkit-transform: translate3d(0, -3px, 0); + transform: translate3d(0, -3px, 0); + filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08)); + } } .timeago { @@ -194,18 +186,17 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; ul { list-style-type: none; padding-inline-start: 1.5rem; - } - - ul>li::before { - background: #c2c9d4; - width: 5px; - height: 5px; - border-radius: 1px; - display: block; - content: ""; - position: relative; - top: 1rem; - right: 1rem; + >li::before { + background: #c2c9d4; + width: 5px; + height: 5px; + border-radius: 1px; + display: block; + content: ""; + position: relative; + top: 1rem; + right: 1rem; + } } } @@ -223,32 +214,31 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; a:hover, i:hover { + @include btn-sharing-color(#2a408e, true); text-decoration: none; - color: var(--link-color, #2a408e)!important; } .share-icon { font-size: 1.2rem; - - .fab.fa-twitter { - color: var(--btn-sharing, rgba(29, 161, 242, 1.00)); - } - - .fab.fa-facebook-square { - color: var(--btn-sharing, rgb(66, 95, 156)); - } - .fab.fa-telegram { - color: var(--btn-sharing, rgb(39, 159, 217)); - } - - .fab.fa-weibo { - color: var(--btn-sharing, rgb(229, 20, 43)); + .fab { + &.fa-twitter { + @include btn-sharing-color(rgba(29, 161, 242, 1.00)); + } + &.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)); + } } } // .share-icon .fas.fa-link { - color: var(--btn-sharing, rgb(171, 171, 171)); + @include btn-sharing-color(rgb(171, 171, 171)); } } // .share-wrapper @@ -256,23 +246,19 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; .share-label { font-family: 'Oswald', sans-serif; -} - -.share-label::after { - content: ":"; + &::after { + content: ":"; + } } .license-wrapper { line-height: 1.2rem; - .license-text>a { font-weight: 600; } - i { font-weight: 400; } - span:last-child { font-size: .85rem; } @@ -283,10 +269,9 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; .post-tail-bottom { -ms-flex-wrap: wrap!important; flex-wrap: wrap!important; - } - - .post-tail-bottom>div:first-child { - margin-bottom: 1rem; + >div:first-child { + margin-bottom: 1rem; + } } } @@ -297,20 +282,23 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; } @media all and (min-width: 768px) { - .post .post-meta > div:not(:first-child)::before { - content: "\2022"; - color: rgba(158, 158, 158, 0.8); - font-weight: bold; - padding-left: .5rem; - padding-right: .3rem; - } - - .post .post-meta.flex-column { - -webkit-box-orient: horizontal!important; - -webkit-box-direction: normal!important; - -ms-flex-direction: row!important; - flex-direction: row!important; - } + .post { + .post-meta { + >div:not(:first-child)::before { + content: "\2022"; + color: rgba(158, 158, 158, 0.8); + font-weight: bold; + padding-left: .5rem; + padding-right: .3rem; + } + &.flex-column { + -webkit-box-orient: horizontal!important; + -webkit-box-direction: normal!important; + -ms-flex-direction: row!important; + flex-direction: row!important; + } + } + } // .post } @media all and (min-width: 768px) and (max-width: 830px) { diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss index 6002f8d..6a6fe69 100644 --- a/assets/css/syntax.scss +++ b/assets/css/syntax.scss @@ -77,68 +77,77 @@ /*-- Codes Snippet --*/ -div.highlight, -figure.highlight, -.highlighter-rouge { +%highlight-pre-bg { background: var(--highlight-pre-bg, #f7f7f7) } -.highlight { - overflow: auto; +%code-snippet-radius { + border-radius: 5px; } -.highlight .lineno { - margin: .8rem 0rem; - padding: 0 .5rem; - min-width: 2.2rem; - text-align: right; - color: var(--highlight-lineno, #c2c6cc); - border-right: 1px solid var(--highlight-lineno-border, #e9ecef); - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; -} -.highlight table { - padding: 0; - border: 0; -} - -.highlight td { - padding: 0; - border: 0; -} - -.highlight pre { - margin-bottom: 0; - font-size: .85rem; - line-height: 1.4rem; - word-wrap: normal; /* Fixed Safari overflow-x */ -} - -.highlight table td pre { - overflow: visible; /* Fixed iOS safari overflow-x */ - word-break: normal; /* Fixed iOS safari linenos code break */ -} - -/* Override BS Inline-code style */ .highlighter-rouge { - margin-bottom: 1.2em; + @extend %highlight-pre-bg; + @extend %code-snippet-radius; + margin-bottom: 1.2em; /* Override BS Inline-code style */ } +.highlight { + @extend %code-snippet-radius; + @at-root div#{&} { + @extend %highlight-pre-bg; + } + @at-root figure#{&} { + @extend %highlight-pre-bg; + } + overflow: auto; + + .lineno { + margin: .8rem 0rem; + padding: 0 .5rem; + min-width: 2.2rem; + text-align: right; + color: var(--highlight-lineno, #c2c6cc); + border-right: 1px solid var(--highlight-lineno-border, #e9ecef); + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + } + table { + padding: 0; + border: 0; + td pre { + overflow: visible; /* Fixed iOS safari overflow-x */ + word-break: normal; /* Fixed iOS safari linenos code break */ + } + } + td { + padding: 0; + border: 0; + } + pre { + margin-bottom: 0; + font-size: .85rem; + line-height: 1.4rem; + word-wrap: normal; + /* Fixed Safari overflow-x */ + } + +} // .highlight + code { -webkit-hyphens: none; -ms-hyphens: none; -moz-hyphens: none; hyphens: none; -} -code.highlighter-rouge { - padding: 2px 4px; - margin: 0 .3rem; - border-radius: 4px; + &.highlighter-rouge { + padding: 2px 4px; + margin: 0 .3rem; + border-radius: 4px; + } } td.rouge-code { @@ -146,11 +155,6 @@ td.rouge-code { padding-right: 1rem; } -/* code snippet radius */ -.highlighter-rouge, -.highlight { - border-radius: 5px; -} /* Hide line numbers for defualt, console, and terminal code snippets */ div[class^='highlighter-rouge'] pre.lineno, @@ -171,11 +175,9 @@ div.language-terminal.highlighter-rouge td.rouge-code { -webkit-box-shadow: inset 0 0 2px #c2c6cc; box-shadow: inset 0 0 2px #c2c6cc; } - .highlighter-rouge { color: black; } - code.highlighter-rouge { border: 1px solid #e9ecef; } diff --git a/assets/css/tags.scss b/assets/css/tags.scss index 8dc4613..3f4b3fd 100644 --- a/assets/css/tags.scss +++ b/assets/css/tags.scss @@ -17,14 +17,9 @@ letter-spacing: 0; border: 1px solid var(--tag-border, #dee2e6) !important; box-shadow: 0 0 3px 0 var(--tag-shadow, #e9ecef); -} - -.tag span { - margin-left: 0.6em; - font-size: 0.7em; - font-family: 'Oswald', sans-serif; -} - -a.tag:hover { - text-decoration: none; + span { + margin-left: 0.6em; + font-size: 0.7em; + font-family: 'Oswald', sans-serif; + } } \ No newline at end of file