asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

style: improve SCSS style

Browse source
This commit is contained in:
Cotes Chung 2022-10-20 02:05:29 +08:00
parent 294e2985c1
commit a6ce765082
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
15 changed files with 242 additions and 296 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
.stylelintrc.json
View file

@ -1,3 +1,22 @@
{ {
"extends": "stylelint-config-standard-scss" "extends": "stylelint-config-standard-scss",
"rules": {
"no-descending-specificity": null,
"shorthand-property-no-redundant-values": null,
"at-rule-no-vendor-prefix": null,
"property-no-vendor-prefix": null,
"selector-no-vendor-prefix": null,
"value-no-vendor-prefix": null,
"color-function-notation": "legacy",
"alpha-value-notation": "number",
"selector-not-notation": "simple",
"color-hex-length": "long",
"declaration-block-single-line-max-declarations": 3,
"font-family-no-missing-generic-family-keyword": [
true,
{
"ignoreFontFamilies": ["Font Awesome 5 Free"]
}
]
}
} }

69
_sass/addon/commons.scss
View file

@ -5,22 +5,22 @@
html { html {
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
&:not([data-mode]), &:not([data-mode]),
&[data-mode=light] { &[data-mode="light"] {
@include light-scheme; @include light-scheme;
} }
&[data-mode=dark] { &[data-mode="dark"] {
@include dark-scheme; @include dark-scheme;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
&:not([data-mode]), &:not([data-mode]),
&[data-mode=dark] { &[data-mode="dark"] {
@include dark-scheme; @include dark-scheme;
} }
&[data-mode=light] { &[data-mode="light"] {
@include light-scheme; @include light-scheme;
} }
} }
@ -32,7 +32,7 @@ body {
background: var(--body-bg); background: var(--body-bg);
color: var(--text-color); color: var(--text-color);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif; font-family: "Source Sans Pro", "Microsoft Yahei", sans-serif;
line-height: 1.75; line-height: 1.75;
} }
@ -114,11 +114,8 @@ blockquote {
} }
@include prompt("tip", "\f0eb", 400); @include prompt("tip", "\f0eb", 400);
@include prompt("info", "\f06a"); @include prompt("info", "\f06a");
@include prompt("warning", "\f06a"); @include prompt("warning", "\f06a");
@include prompt("danger", "\f071"); @include prompt("danger", "\f071");
} }
@ -167,7 +164,6 @@ footer {
&:hover { &:hover {
@extend %link-hover; @extend %link-hover;
@include no-text-decoration; @include no-text-decoration;
} }
} }
@ -192,7 +188,7 @@ i { /* fontawesome icons */
img[data-src] { img[data-src] {
margin: 0.5rem 0; margin: 0.5rem 0;
&[data-loaded=true] { &[data-loaded="true"] {
animation: fade-in linear 0.5s; animation: fade-in linear 0.5s;
} }
@ -239,7 +235,6 @@ img[data-src] {
.post-content { .post-content {
font-size: 0.9rem; font-size: 0.9rem;
} }
} }
#panel-wrapper { #panel-wrapper {
@ -261,12 +256,12 @@ img[data-src] {
&:hover { &:hover {
background-color: #2a408e; background-color: #2a408e;
border-color: #2a408e; border-color: #2a408e;
color: #fff; color: #ffffff;
transition: none; transition: none;
} }
} }
[data-topbar-visible=true] & > div { [data-topbar-visible="true"] & > div {
top: 6rem; top: 6rem;
} }
} }
@ -291,7 +286,6 @@ img[data-src] {
color: inherit; color: inherit;
} }
} }
.footnotes > ol { .footnotes > ol {
@ -311,7 +305,7 @@ img[data-src] {
/* [scroll-focus] added by `smooth-scroll.js` */ /* [scroll-focus] added by `smooth-scroll.js` */
&:target:not([scroll-focus]), &:target:not([scroll-focus]),
&[scroll-focus=true] > p { &[scroll-focus="true"] > p {
background-color: var(--footnote-target-bg); background-color: var(--footnote-target-bg);
width: fit-content; width: fit-content;
-webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */ -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
@ -416,7 +410,6 @@ img[data-src] {
} }
} }
} /* a */ } /* a */
} }
.pageviews .fa-spinner { .pageviews .fa-spinner {
@ -459,7 +452,6 @@ img[data-src] {
&.img-link { &.img-link {
@extend %img-caption; @extend %img-caption;
} }
} }
> ol, > ol,
@ -492,20 +484,17 @@ img[data-src] {
color: var(--checkbox-checked-color); color: var(--checkbox-checked-color);
} }
} }
} }
input[type=checkbox] { input[type="checkbox"] {
margin: 0 0.5rem 0.2rem -1.3rem; margin: 0 0.5rem 0.2rem -1.3rem;
vertical-align: middle; vertical-align: middle;
} }
} /* ul */ } /* ul */
dl > dd { dl > dd {
margin-left: 1rem; margin-left: 1rem;
} }
} /* .post-content */ } /* .post-content */
.tag:hover { .tag:hover {
@ -697,7 +686,7 @@ $sidebar-display: "sidebar-display";
font-weight: 900; font-weight: 900;
font-size: 1.5rem; font-size: 1.5rem;
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: rgba(134, 133, 133, 99%); color: rgba(134, 133, 133, 0.99);
} }
} }
@ -788,9 +777,7 @@ $sidebar-display: "sidebar-display";
@include fix-cursor($top); @include fix-cursor($top);
} }
} }
} /* @for */ } /* @for */
} /* ul */ } /* ul */
.sidebar-bottom { .sidebar-bottom {
@ -841,9 +828,7 @@ $sidebar-display: "sidebar-display";
height: 3px; height: 3px;
border-radius: 50%; border-radius: 50%;
} }
} /* .sidebar-bottom */ } /* .sidebar-bottom */
} /* #sidebar */ } /* #sidebar */
@media (hover: hover) { @media (hover: hover) {
@ -884,14 +869,14 @@ $sidebar-display: "sidebar-display";
border-bottom: 1px solid rgba(0, 0, 0, 0.07); border-bottom: 1px solid rgba(0, 0, 0, 0.07);
background-color: var(--topbar-wrapper-bg); background-color: var(--topbar-wrapper-bg);
[data-topbar-visible=false] & { [data-topbar-visible="false"] & {
top: -$topbar-height; /* same as topbar height. */ top: -$topbar-height; /* same as topbar height. */
} }
} }
#topbar { #topbar {
i { /* icons */ i { /* icons */
color: #999; color: #999999;
} }
#breadcrumb { #breadcrumb {
@ -1139,7 +1124,7 @@ $sidebar-display: "sidebar-display";
} }
.toast-body { .toast-body {
font-family: 'Lato'; font-family: Lato, sans-serif;
line-height: 1.25rem; line-height: 1.25rem;
button { button {
@ -1166,7 +1151,6 @@ $sidebar-display: "sidebar-display";
animation: popup 0.8s; animation: popup 0.8s;
} }
} }
} }
/* /*
@ -1208,7 +1192,7 @@ $sidebar-display: "sidebar-display";
} }
.post-content { .post-content {
> blockquote[class^=prompt-] { > blockquote[class^="prompt-"] {
@include pl-pr(1.25rem); @include pl-pr(1.25rem);
@include ml-mr(-1.25rem); @include ml-mr(-1.25rem);
@ -1216,7 +1200,6 @@ $sidebar-display: "sidebar-display";
max-width: none; max-width: none;
} }
} }
} }
#avatar > a { #avatar > a {
@ -1227,7 +1210,6 @@ $sidebar-display: "sidebar-display";
.site-subtitle { .site-subtitle {
@include ml-mr(1.8rem); @include ml-mr(1.8rem);
} }
} }
@media all and (max-width: 768px) { @media all and (max-width: 768px) {
@ -1249,6 +1231,7 @@ $sidebar-display: "sidebar-display";
@media all and (max-width: 849px) { @media all and (max-width: 849px) {
@mixin slide($append: null) { @mixin slide($append: null) {
$basic: transform 0.4s ease; $basic: transform 0.4s ease;
@if $append { @if $append {
-webkit-transition: $basic, $append; -webkit-transition: $basic, $append;
transition: $basic, $append; transition: $basic, $append;
@ -1347,11 +1330,10 @@ $sidebar-display: "sidebar-display";
margin-top: 3rem; margin-top: 3rem;
} }
} }
} /* max-width: 849px */ } /* max-width: 849px */
@media all and (max-width: 849px) and (orientation: portrait) { @media all and (max-width: 849px) and (orientation: portrait) {
[data-topbar-visible=false] #topbar-wrapper { [data-topbar-visible="false"] #topbar-wrapper {
top: 0; top: 0;
} }
} }
@ -1370,7 +1352,8 @@ $sidebar-display: "sidebar-display";
overflow-y: scroll; overflow-y: scroll;
} }
#main-wrapper, footer { #main-wrapper,
footer {
margin-left: $sidebar-width; margin-left: $sidebar-width;
} }
@ -1404,7 +1387,6 @@ $sidebar-display: "sidebar-display";
#topbar-title { #topbar-title {
text-align: left; text-align: left;
} }
} }
/* Pad horizontal */ /* Pad horizontal */
@ -1458,7 +1440,8 @@ $sidebar-display: "sidebar-display";
font-size: 90%; font-size: 90%;
} }
#main-wrapper, footer { #main-wrapper,
footer {
margin-left: $sidebar-width-small; margin-left: $sidebar-width-small;
} }
@ -1469,7 +1452,6 @@ $sidebar-display: "sidebar-display";
word-break: keep-all; word-break: keep-all;
white-space: nowrap; white-space: nowrap;
} }
} }
/* panel hidden */ /* panel hidden */
@ -1527,7 +1509,6 @@ $sidebar-display: "sidebar-display";
width: 85%; width: 85%;
} }
} }
} }
@media all and (min-width: 1400px) { @media all and (min-width: 1400px) {
@ -1537,7 +1518,8 @@ $sidebar-display: "sidebar-display";
} }
@media all and (min-width: 1650px) { @media all and (min-width: 1650px) {
#main-wrapper, footer { #main-wrapper,
footer {
margin-left: $sidebar-width-large; margin-left: $sidebar-width-large;
} }
@ -1609,7 +1591,6 @@ $sidebar-display: "sidebar-display";
word-spacing: 0; word-spacing: 0;
margin-top: 0; margin-top: 0;
} }
} /* .profile-wrapper (min-width: 1650px) */ } /* .profile-wrapper (min-width: 1650px) */
ul { ul {
@ -1635,7 +1616,6 @@ $sidebar-display: "sidebar-display";
} }
} }
} }
} }
} }
@ -1679,9 +1659,6 @@ $sidebar-display: "sidebar-display";
.icon-border { .icon-border {
top: 0.9rem; top: 0.9rem;
} }
} /* .sidebar-bottom */ } /* .sidebar-bottom */
} /* #sidebar */ } /* #sidebar */
} /* min-width: 1650px */ } /* min-width: 1650px */

2
_sass/addon/module.scss
View file

@ -7,7 +7,7 @@
%heading { %heading {
color: var(--heading-color); color: var(--heading-color);
font-weight: 400; font-weight: 400;
font-family: 'Lato', 'Microsoft Yahei', sans-serif; font-family: Lato, "Microsoft Yahei", sans-serif;
} }
%section { %section {

28
_sass/addon/syntax.scss
View file

@ -8,22 +8,22 @@
html { html {
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
&:not([data-mode]), &:not([data-mode]),
&[data-mode=light] { &[data-mode="light"] {
@include light-syntax; @include light-syntax;
} }
&[data-mode=dark] { &[data-mode="dark"] {
@include dark-syntax; @include dark-syntax;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
&:not([data-mode]), &:not([data-mode]),
&[data-mode=dark] { &[data-mode="dark"] {
@include dark-syntax; @include dark-syntax;
} }
&[data-mode=light] { &[data-mode="light"] {
@include light-syntax; @include light-syntax;
} }
} }
@ -98,7 +98,6 @@ $code-radius: 6px;
.gp { .gp {
user-select: none; user-select: none;
} }
} /* .highlight */ } /* .highlight */
code { code {
@ -152,16 +151,15 @@ td.rouge-code {
border-bottom: none !important; border-bottom: none !important;
pointer-events: none; pointer-events: none;
} }
} }
/* Hide line numbers for default, console, and terminal code snippets */ /* Hide line numbers for default, console, and terminal code snippets */
div { div {
&[class^='highlighter-rouge'], &[class^="highlighter-rouge"],
&.nolineno,
&.language-plaintext.highlighter-rouge, &.language-plaintext.highlighter-rouge,
&.language-console.highlighter-rouge, &.language-console.highlighter-rouge,
&.language-terminal.highlighter-rouge, &.language-terminal.highlighter-rouge {
&.nolineno {
pre.lineno { pre.lineno {
display: none; display: none;
} }
@ -252,6 +250,10 @@ div {
} }
} }
&:focus {
outline: none;
}
&:not([timeout]):hover { &:not([timeout]):hover {
background-color: rgba(128, 128, 128, 0.37); background-color: rgba(128, 128, 128, 0.37);
@ -259,18 +261,12 @@ div {
color: white; color: white;
} }
} }
&:focus {
outline: none;
}
} }
} }
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
.post-content { .post-content {
> div[class^='language-'] { > div[class^="language-"] {
@include ml-mr(-1.25rem); @include ml-mr(-1.25rem);
border-radius: 0; border-radius: 0;

4
_sass/addon/variables.scss
View file

@ -13,20 +13,16 @@ $sidebar-width-large: 350px !default; /* screen width: >= 1650px */
$tab-count: 5 !default; /* backward compatible (version <= 4.0.2) */ $tab-count: 5 !default; /* backward compatible (version <= 4.0.2) */
$tab-height: 3rem !default; $tab-height: 3rem !default;
$tab-cursor-height: 1.6rem !default; $tab-cursor-height: 1.6rem !default;
$cursor-width: 2px !default; /* the cursor width of the selected tab */ $cursor-width: 2px !default; /* the cursor width of the selected tab */
/* other framework sizes */ /* other framework sizes */
$topbar-height: 3rem !default; $topbar-height: 3rem !default;
$search-max-width: 210px !default; $search-max-width: 210px !default;
$footer-height: 5rem !default; $footer-height: 5rem !default;
$footer-height-mobile: 6rem !default; /* screen width: <= 576px */ $footer-height-mobile: 6rem !default; /* screen width: <= 576px */
$main-content-max-width: 1250px !default; $main-content-max-width: 1250px !default;
$bottom-min-height: 35rem !default; $bottom-min-height: 35rem !default;
/* syntax highlight */ /* syntax highlight */

35
_sass/colors/dark-syntax.scss
View file

@ -3,7 +3,24 @@
*/ */
@mixin dark-syntax { @mixin dark-syntax {
--highlight-bg-color: #252525;
--highlighter-rouge-color: #de6b18;
--highlight-lineno-color: #6c6c6d;
--inline-code-bg: #272822;
--code-header-text-color: #6a6a6a;
--code-header-muted-color: rgb(60, 60, 60);
--code-header-icon-color: rgb(86, 86, 86);
--clipboard-checked-color: #2bcc2b;
--filepath-text-color: #bdbdbd;
pre { color: #bfbfbf; } /* override Bootstrap */
.highlight {
.gp { color: #818c96; }
}
/* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */ /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
.highlight pre { background-color: var(--highlight-bg-color); } .highlight pre { background-color: var(--highlight-bg-color); }
.highlight .hll { background-color: var(--highlight-bg-color); } .highlight .hll { background-color: var(--highlight-bg-color); }
.highlight .c { color: #75715e; } /* Comment */ .highlight .c { color: #75715e; } /* Comment */
@ -67,22 +84,4 @@
.highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
.highlight .gd { color: #f92672; background-color: #561c08; } /* Generic.Deleted & Diff Deleted */ .highlight .gd { color: #f92672; background-color: #561c08; } /* Generic.Deleted & Diff Deleted */
.highlight .gi { color: #a6e22e; background-color: #0b5858; } /* Generic.Inserted & Diff Inserted */ .highlight .gi { color: #a6e22e; background-color: #0b5858; } /* Generic.Inserted & Diff Inserted */
/* ----- custom styles ------ */
--highlight-bg-color: #252525;
--highlighter-rouge-color: #de6b18;
--highlight-lineno-color: #6c6c6d;
--inline-code-bg: #272822;
--code-header-text-color: #6a6a6a;
--code-header-muted-color: rgb(60 60 60);
--code-header-icon-color: rgb(86 86 86);
--clipboard-checked-color: #2bcc2b;
--filepath-text-color: #bdbdbd;
.highlight {
.gp { color: #818c96; }
}
pre { color: #bfbfbf; } /* override Bootstrap */
} }

35
_sass/colors/dark-typography.scss
View file

@ -24,15 +24,15 @@
--btn-box-shadow: var(--main-bg); --btn-box-shadow: var(--main-bg);
--card-header-bg: rgb(51, 50, 50); --card-header-bg: rgb(51, 50, 50);
--label-color: rgb(108, 117, 125); --label-color: rgb(108, 117, 125);
--checkbox-color: rgb(118 120 121); --checkbox-color: rgb(118, 120, 121);
--checkbox-checked-color: var(--link-color); --checkbox-checked-color: var(--link-color);
/* Sidebar */ /* Sidebar */
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
--sidebar-muted-color: #6d6c6b; --sidebar-muted-color: #6d6c6b;
--sidebar-active-color: rgb(255 255 255 / 80%); --sidebar-active-color: rgb(255, 255, 255, 0.8);
--nav-cursor-color: rgb(183, 182, 182); --nav-cursor-color: rgb(183, 182, 182);
--sidebar-btn-bg: rgb(117 116 116 / 20%); --sidebar-btn-bg: rgb(117, 116, 116, 0.2);
/* Topbar */ /* Topbar */
--topbar-text-color: var(--text-color); --topbar-text-color: var(--text-color);
@ -48,7 +48,7 @@
--btn-paginator-hover-color: rgb(64, 65, 66); --btn-paginator-hover-color: rgb(64, 65, 66);
--btn-paginator-border-color: var(--btn-border-color); --btn-paginator-border-color: var(--btn-border-color);
--btn-text-color: var(--text-color); --btn-text-color: var(--text-color);
--pin-bg: rgb(34 35 37); --pin-bg: rgb(34, 35, 37);
--pin-color: inherit; --pin-color: inherit;
/* Posts */ /* Posts */
@ -65,18 +65,18 @@
--card-bg: rgb(39, 40, 43); --card-bg: rgb(39, 40, 43);
--card-border-color: rgb(53, 53, 60); --card-border-color: rgb(53, 53, 60);
--card-box-shadow: var(--main-bg); --card-box-shadow: var(--main-bg);
--preview-img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%); --preview-img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
--kbd-wrap-color: #6a6a6a; --kbd-wrap-color: #6a6a6a;
--kbd-text-color: #d3d3d3; --kbd-text-color: #d3d3d3;
--kbd-bg-color: #242424; --kbd-bg-color: #242424;
--prompt-text-color: rgb(216 212 212 / 75%); --prompt-text-color: rgb(216, 212, 212, 0.75);
--prompt-tip-bg: rgba(77, 187, 95, 0.2); --prompt-tip-bg: rgba(77, 187, 95, 0.2);
--prompt-tip-icon-color: rgb(5 223 5 / 68%); --prompt-tip-icon-color: rgb(5, 223, 5, 0.68);
--prompt-info-bg: rgb(7 59 104 / 80%); --prompt-info-bg: rgb(7, 59, 104, 0.8);
--prompt-info-icon-color: #0075d1; --prompt-info-icon-color: #0075d1;
--prompt-warning-bg: rgb(90 69 3 / 95%); --prompt-warning-bg: rgb(90, 69, 3, 0.95);
--prompt-warning-icon-color: rgb(255 165 0 / 80%); --prompt-warning-icon-color: rgb(255, 165, 0, 0.8);
--prompt-danger-bg: rgb(86 28 8 / 80%); --prompt-danger-bg: rgb(86, 28, 8, 0.8);
--prompt-danger-icon-color: #cd0202; --prompt-danger-icon-color: #cd0202;
/* tags */ /* tags */
@ -104,11 +104,11 @@
} }
/* posts' toc, override BS */ /* posts' toc, override BS */
nav[data-toggle=toc] .nav-link.active, nav[data-toggle="toc"] .nav-link.active,
nav[data-toggle=toc] .nav-link.active:focus, nav[data-toggle="toc"] .nav-link.active:focus,
nav[data-toggle=toc] .nav-link.active:hover, nav[data-toggle="toc"] .nav-link.active:hover,
nav[data-toggle=toc] .nav > li > a:focus, nav[data-toggle="toc"] .nav > li > a:focus,
nav[data-toggle=toc] .nav > li > a:hover { nav[data-toggle="toc"] .nav > li > a:hover {
color: var(--toc-highlight) !important; color: var(--toc-highlight) !important;
border-left-color: var(--toc-highlight) !important; border-left-color: var(--toc-highlight) !important;
} }
@ -150,8 +150,7 @@
color-scheme: dark; color-scheme: dark;
#disqus_thread { #disqus_thread { /* stylelint-disable-line selector-id-pattern */
color-scheme: none; color-scheme: none;
} }
} /* dark-scheme */ } /* dark-scheme */

5
_sass/colors/light-syntax.scss
View file

@ -76,9 +76,8 @@
--code-header-icon-color: #d1d1d1; --code-header-icon-color: #d1d1d1;
--clipboard-checked-color: #43c743; --clipboard-checked-color: #43c743;
[class^=prompt-] { [class^="prompt-"] {
--inline-code-bg: #fbfafa; --inline-code-bg: #fbfafa;
--highlighter-rouge-color: rgb(82 82 82); --highlighter-rouge-color: rgb(82, 82, 82);
} }
} /* light-syntax */ } /* light-syntax */

25
_sass/colors/light-typography.scss
View file

@ -13,11 +13,11 @@
--text-color: #34343c; --text-color: #34343c;
--text-muted-color: gray; --text-muted-color: gray;
--heading-color: black; --heading-color: black;
--blockquote-border-color: #eee; --blockquote-border-color: #eeeeee;
--blockquote-text-color: #9a9a9a; --blockquote-text-color: #9a9a9a;
--link-color: #2a408e; --link-color: #2a408e;
--link-underline-color: #dee2e6; --link-underline-color: #dee2e6;
--button-bg: #fff; --button-bg: #ffffff;
--btn-border-color: #e9ecef; --btn-border-color: #e9ecef;
--btn-backtotop-color: #686868; --btn-backtotop-color: #686868;
--btn-backtotop-border-color: #f1f1f1; --btn-backtotop-border-color: #f1f1f1;
@ -35,8 +35,8 @@
/* Topbar */ /* Topbar */
--topbar-text-color: rgb(78, 78, 78); --topbar-text-color: rgb(78, 78, 78);
--topbar-wrapper-bg: white; --topbar-wrapper-bg: white;
--search-wrapper-bg: rgb(245 245 245 / 50%); --search-wrapper-bg: rgb(245, 245, 245, 0.5);
--search-wrapper-border-color: rgb(245 245 245); --search-wrapper-border-color: rgb(245, 245, 245);
--search-tag-bg: #f8f9fa; --search-tag-bg: #f8f9fa;
--search-icon-color: #c2c6cc; --search-icon-color: #c2c6cc;
--input-focus-border-color: var(--btn-border-color); --input-focus-border-color: var(--btn-border-color);
@ -53,7 +53,7 @@
/* Posts */ /* Posts */
--btn-share-hover-color: var(--link-color); --btn-share-hover-color: var(--link-color);
--card-border-color: #f1f1f1; --card-border-color: #f1f1f1;
--card-box-shadow: rgba(234, 234, 234, 0.7686274509803922); --card-box-shadow: rgba(234, 234, 234, 0.76);
--label-color: #616161; --label-color: #616161;
--relate-post-date: rgba(30, 55, 70, 0.4); --relate-post-date: rgba(30, 55, 70, 0.4);
--footnote-target-bg: lightcyan; --footnote-target-bg: lightcyan;
@ -64,22 +64,22 @@
--tb-odd-bg: #fbfcfd; --tb-odd-bg: #fbfcfd;
--tb-border-color: #eaeaea; --tb-border-color: #eaeaea;
--dash-color: silver; --dash-color: silver;
--preview-img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(249 249 249) 100%); --preview-img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%);
--kbd-wrap-color: #bdbdbd; --kbd-wrap-color: #bdbdbd;
--kbd-text-color: var(--text-color); --kbd-text-color: var(--text-color);
--kbd-bg-color: white; --kbd-bg-color: white;
--prompt-text-color: rgb(46 46 46 / 77%); --prompt-text-color: rgb(46, 46, 46, 0.77);
--prompt-tip-bg: rgb(123 247 144 / 20%); --prompt-tip-bg: rgb(123, 247, 144, 0.2);
--prompt-tip-icon-color: #03b303; --prompt-tip-icon-color: #03b303;
--prompt-info-bg: #e1f5fe; --prompt-info-bg: #e1f5fe;
--prompt-info-icon-color: #0070cb; --prompt-info-icon-color: #0070cb;
--prompt-warning-bg: rgb(255 243 205); --prompt-warning-bg: rgb(255, 243, 205);
--prompt-warning-icon-color: #ef9c03; --prompt-warning-icon-color: #ef9c03;
--prompt-danger-bg: rgb(248 215 218 / 56%); --prompt-danger-bg: rgb(248, 215, 218, 0.56);
--prompt-danger-icon-color: #df3c30; --prompt-danger-icon-color: #df3c30;
[class^=prompt-] { [class^="prompt-"] {
--link-underline-color: rgb(219 216 216); --link-underline-color: rgb(219, 216, 216);
} }
/* Categories */ /* Categories */
@ -90,5 +90,4 @@
--timeline-color: rgba(0, 0, 0, 0.075); --timeline-color: rgba(0, 0, 0, 0.075);
--timeline-node-bg: #c2c6cc; --timeline-node-bg: #c2c6cc;
--timeline-year-dot-color: #ffffff; --timeline-year-dot-color: #ffffff;
} /* light-scheme */ } /* light-scheme */

16
_sass/layout/archives.scss
View file

@ -41,8 +41,6 @@
content: ""; content: "";
display: inline-block; display: inline-block;
position: relative; position: relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; border-radius: 50%;
width: 12px; width: 12px;
height: 12px; height: 12px;
@ -53,7 +51,6 @@
box-shadow: 0 0 2px 0 #c2c6cc; box-shadow: 0 0 2px 0 #c2c6cc;
z-index: 1; z-index: 1;
} }
} }
ul { ul {
@ -65,8 +62,8 @@
text-overflow: ellipsis; text-overflow: ellipsis;
&:nth-child(odd) { &:nth-child(odd) {
background-color: var(--main-bg, #fff); background-color: var(--main-bg, #ffffff);
background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff); background-image: linear-gradient(to left, #ffffff, #fbfbfb, #fbfbfb, #fbfbfb, #ffffff);
} }
&::before { &::before {
@ -81,7 +78,6 @@
&:last-child li:last-child::before { &:last-child li:last-child::before {
height: 1.5rem; height: 1.5rem;
} }
} /* #archives ul */ } /* #archives ul */
.date { .date {
@ -97,8 +93,7 @@
&.day { &.day {
font-size: 85%; font-size: 85%;
font-family: 'Lato', sans-serif; font-family: Lato, sans-serif;
} }
} }
@ -117,8 +112,6 @@
content: ""; content: "";
display: inline-block; display: inline-block;
position: relative; position: relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; border-radius: 50%;
width: 8px; width: 8px;
height: 8px; height: 8px;
@ -130,8 +123,7 @@
z-index: 1; z-index: 1;
} }
} }
} /* #archives */
} // #archives
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
#archives { #archives {

16
_sass/layout/categories.scss
View file

@ -28,10 +28,8 @@
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
} }
} /* .categories */
} // .categories
.category-trigger { .category-trigger {
width: 1.7rem; width: 1.7rem;
@ -40,18 +38,18 @@
text-align: center; text-align: center;
color: #6c757d !important; color: #6c757d !important;
&:hover {
i {
color: var(--categories-icon-hover-color);
}
}
i { i {
position: relative; position: relative;
height: 0.7rem; height: 0.7rem;
width: 1rem; width: 1rem;
transition: transform 300ms ease; transition: transform 300ms ease;
} }
&:hover {
i {
color: var(--categories-icon-hover-color);
}
}
} }
@media (hover: hover) { // only works on desktop @media (hover: hover) { // only works on desktop

2
_sass/layout/category-tag.scss
View file

@ -14,7 +14,7 @@
padding: 0.6rem 0; padding: 0.6rem 0;
&::before { // dot &::before { // dot
background: #999; background: #999999;
width: 5px; width: 5px;
height: 5px; height: 5px;
border-radius: 50%; border-radius: 50%;

43
_sass/layout/home.scss
View file

@ -4,7 +4,7 @@
.pagination { .pagination {
color: var(--btn-patinator-text-color); color: var(--btn-patinator-text-color);
font-family: 'Lato', sans-serif; font-family: Lato, sans-serif;
a:hover { a:hover {
text-decoration: none; text-decoration: none;
@ -49,9 +49,8 @@
&:last-child .page-link { &:last-child .page-link {
border-radius: 50%; border-radius: 50%;
} }
} // .page-item } /* .page-item */
} /* .pagination */
} // .pagination
#post-list { #post-list {
margin-top: 1rem; margin-top: 1rem;
@ -83,6 +82,18 @@
em { em {
@extend %normal-font-style; @extend %normal-font-style;
} }
.pin {
i {
transform: rotate(45deg);
padding-left: 3px;
color: var(--pin-color);
}
span {
display: none;
}
}
} }
.post-content { .post-content {
@ -100,21 +111,8 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
} }
} /* .post-preview */
.pin { } /* #post-list */
> i {
transform: rotate(45deg);
padding-left: 3px;
color: var(--pin-color);
}
> span {
display: none;
}
}
} // .post-preview
} // #post-list
/* Hide SideBar and TOC */ /* Hide SideBar and TOC */
@media all and (max-width: 830px) { @media all and (max-width: 830px) {
@ -125,9 +123,7 @@
&:not(:first-child):not(:last-child) { &:not(:first-child):not(:last-child) {
display: none; display: none;
} }
} }
} }
} }
@ -165,15 +161,12 @@
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
} }
} }
.page-index { .page-index {
display: none; display: none;
} }
} /* .pagination */
} // .pagination
} }
/* Panel hidden */ /* Panel hidden */

235
_sass/layout/post.scss
View file

@ -26,6 +26,15 @@
color: var(--text-color); color: var(--text-color);
} }
img.preview-img {
margin: 0;
border-radius: 6px;
&.bg[data-loaded="true"] {
background: var(--preview-img-bg);
}
}
h1 + .post-meta { h1 + .post-meta {
span + span::before { span + span::before {
@include dot; @include dot;
@ -40,23 +49,94 @@ h1 + .post-meta {
} }
} }
img.preview-img {
margin: 0;
border-radius: 6px;
&.bg[data-loaded=true] {
background: var(--preview-img-bg);
}
}
.post-tail-wrapper { .post-tail-wrapper {
margin-top: 6rem; margin-top: 6rem;
border-bottom: 1px double var(--main-border-color); border-bottom: 1px double var(--main-border-color);
font-size: 0.85rem; font-size: 0.85rem;
.post-tail-bottom a {
color: inherit;
}
.license-wrapper {
line-height: 1.2rem;
> a {
color: var(--text-color);
&:hover {
@extend %link-hover;
}
}
span:last-child {
font-size: 0.85rem;
}
} /* .license-wrapper */
.post-meta a:not(:hover) { .post-meta a:not(:hover) {
@extend %link-underline; @extend %link-underline;
} }
.share-wrapper {
vertical-align: middle;
user-select: none;
.share-icons {
font-size: 1.2rem;
> i {
position: relative;
bottom: 1px;
@extend %cursor-pointer;
&:hover {
@extend %btn-share-hovor;
}
}
a {
&:not(:last-child) {
margin-right: 0.25rem;
}
&:hover {
text-decoration: none;
>i {
@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-linkedin {
@include btn-sharing-color(rgb(0, 119, 181));
}
&.fa-weibo {
@include btn-sharing-color(rgb(229, 20, 43));
}
}
} /* .share-icons */
.fas.fa-link {
@include btn-sharing-color(rgb(171, 171, 171));
}
} /* .share-wrapper */
} }
.post-tags { .post-tags {
@ -74,7 +154,7 @@ img.preview-img {
&:hover { &:hover {
background: #2a408e; background: #2a408e;
color: #fff; color: #ffffff;
border-color: #2a408e; border-color: #2a408e;
} }
@ -121,7 +201,6 @@ img.preview-img {
margin-top: 0.3rem; margin-top: 0.3rem;
white-space: normal; white-space: normal;
} }
} /* .post-navigation */ } /* .post-navigation */
@keyframes fade-up { @keyframes fade-up {
@ -130,6 +209,7 @@ img.preview-img {
position: relative; position: relative;
top: 2rem; top: 2rem;
} }
to { to {
opacity: 1; opacity: 1;
position: relative; position: relative;
@ -158,7 +238,7 @@ img.preview-img {
} }
} }
nav[data-toggle=toc] { nav[data-toggle="toc"] {
.nav { .nav {
.nav > li > a.active { .nav > li > a.active {
font-weight: 600 !important; font-weight: 600 !important;
@ -179,6 +259,20 @@ nav[data-toggle=toc] {
color: var(--relate-post-date); color: var(--relate-post-date);
} }
p {
font-size: 0.9rem;
margin-bottom: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
a:hover {
text-decoration: none;
}
.card { .card {
border-color: var(--card-border-color); border-color: var(--card-border-color);
background-color: var(--card-bg); background-color: var(--card-bg);
@ -197,37 +291,6 @@ nav[data-toggle=toc] {
box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15); box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
} }
} }
p {
font-size: 0.9rem;
margin-bottom: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
a:hover {
text-decoration: none;
}
ul {
list-style-type: none;
padding-inline-start: 1.5rem;
> li::before {
background: #c2c9d4;
width: 5px;
height: 5px;
border-radius: 1px;
display: block;
content: "";
position: relative;
top: 1rem;
right: 1rem;
}
}
} }
#tail-wrapper { #tail-wrapper {
@ -237,82 +300,15 @@ nav[data-toggle=toc] {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
#disqus_thread { #disqus_thread { /* stylelint-disable-line selector-id-pattern */
min-height: 8.5rem; min-height: 8.5rem;
} }
}
.post-tail-bottom a {
color: inherit;
} }
%btn-share-hovor { %btn-share-hovor {
color: var(--btn-share-hover-color) !important; color: var(--btn-share-hover-color) !important;
} }
.share-wrapper {
vertical-align: middle;
user-select: none;
.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;
@extend %cursor-pointer;
&:hover {
@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-linkedin {
@include btn-sharing-color(rgb(0, 119, 181));
}
&.fa-weibo {
@include btn-sharing-color(rgb(229, 20, 43));
}
}
} /* .share-icons */
.fas.fa-link {
@include btn-sharing-color(rgb(171, 171, 171));
}
} /* .share-wrapper */
.share-label { .share-label {
@include label(inherit, 400, inherit); @include label(inherit, 400, inherit);
@ -321,23 +317,6 @@ nav[data-toggle=toc] {
} }
} }
.license-wrapper {
line-height: 1.2rem;
> a {
color: var(--text-color);
&:hover {
@extend %link-hover;
}
}
span:last-child {
font-size: 0.85rem;
}
} /* .license-wrapper */
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
.preview-img[data-src] { .preview-img[data-src] {
margin-top: 2.2rem; margin-top: 2.2rem;

2
_sass/layout/tags.scss
View file

@ -14,6 +14,6 @@
span { span {
margin-left: 0.6em; margin-left: 0.6em;
font-size: 0.7em; font-size: 0.7em;
font-family: 'Oswald', sans-serif; font-family: Oswald, sans-serif;
} }
} }