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

Improve the way of using color schemes.

Browse source 
- Gracefully switch code color scheme in the future.
- Also uniform border color.
This commit is contained in:
Cotes Chung 2020-02-27 21:05:50 +08:00
parent 4f903b3041
commit 259a6624ed
15 changed files with 513 additions and 330 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
assets/css/_colors/dark-syntax.scss Normal file
View file

@ -0,0 +1,93 @@
/*!
* The syntax dark mode styles.
* v2.0
* https://github.com/cotes2020/jekyll-theme-chirpy
* © 2018-2019 Cotes Chung
* MIT Licensed
*/
@mixin dark-syntax {
/* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
.highlight pre { background-color: #272822; }
.highlight .hll { background-color: #272822; }
.highlight .c { color: #75715e } /* Comment */
.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
.highlight .k { color: #66d9ef } /* Keyword */
.highlight .l { color: #ae81ff } /* Literal */
.highlight .n { color: #f8f8f2 } /* Name */
.highlight .o { color: #f92672 } /* Operator */
.highlight .p { color: #f8f8f2 } /* Punctuation */
.highlight .cm { color: #75715e } /* Comment.Multiline */
.highlight .cp { color: #75715e } /* Comment.Preproc */
.highlight .c1 { color: #75715e } /* Comment.Single */
.highlight .cs { color: #75715e } /* Comment.Special */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.highlight .kn { color: #f92672 } /* Keyword.Namespace */
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.highlight .kt { color: #66d9ef } /* Keyword.Type */
.highlight .ld { color: #e6db74 } /* Literal.Date */
.highlight .m { color: #ae81ff } /* Literal.Number */
.highlight .s { color: #e6db74 } /* Literal.String */
.highlight .na { color: #a6e22e } /* Name.Attribute */
.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.highlight .nc { color: #a6e22e } /* Name.Class */
.highlight .no { color: #66d9ef } /* Name.Constant */
.highlight .nd { color: #a6e22e } /* Name.Decorator */
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
.highlight .ne { color: #a6e22e } /* Name.Exception */
.highlight .nf { color: #a6e22e } /* Name.Function */
.highlight .nl { color: #f8f8f2 } /* Name.Label */
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.highlight .nx { color: #a6e22e } /* Name.Other */
.highlight .py { color: #f8f8f2 } /* Name.Property */
.highlight .nt { color: #f92672 } /* Name.Tag */
.highlight .nv { color: #f8f8f2 } /* Name.Variable */
.highlight .ow { color: #f92672 } /* Operator.Word */
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
.highlight .sc { color: #e6db74 } /* Literal.String.Char */
.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
.highlight .se { color: #ae81ff } /* Literal.String.Escape */
.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
.highlight .sx { color: #e6db74 } /* Literal.String.Other */
.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
.highlight .gh { } /* Generic Heading & Diff Header */
.highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
.highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
.highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
/*----- My styles ------*/
--code-highlighter-rouge: #272822;
--highlight-bg-color: #272822;
--highlighter-rouge-color: #de6b18;
--highlight-lineno-color: #6c6c6d;
--highlight-lineno-border-color: #3c4042;
.highlight {
@include highlight-box-shadow(none);
.gp { color: #818c96; }
}
pre { color: #818c96 } /* override Bootstrap */
kbd { background-color: black; }
}

104
assets/css/_dark/dark-main.scss → assets/css/_colors/dark-typography.scss
View file

@ -9,68 +9,94 @@
@mixin dark-scheme { @mixin dark-scheme {
/* framework */ /* framework */
--main-wrapper-bg: rgb(27, 27, 30); --main-wrapper-bg: rgb(27, 27, 30);
--body-bg: var(--main-wrapper-bg);
--topbar-wrapper-bg: rgb(39, 40, 43); --topbar-wrapper-bg: rgb(39, 40, 43);
--search-wrapper-bg: rgb(34, 34, 39); --search-wrapper-bg: rgb(34, 34, 39);
--search-icon: rgb(100, 102, 105); --search-icon-color: rgb(100, 102, 105);
--input-focus-border: rgb(112, 114, 115); --input-focus-border-color: rgb(112, 114, 115);
--footer-border: rgb(44, 45, 45);
--mask-bg: rgb(68, 69, 70); --mask-bg: rgb(68, 69, 70);
--footer-bg-color: var(--main-wrapper-bg);
/* sidebar */
--nav-cursor: rgb(183, 182, 182);
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
/* common color */ /* common color */
--text-color: rgb(175, 176, 177); --text-color: rgb(175, 176, 177);
--text-muted-color: rgb(107, 116, 124); --text-muted-color: rgb(107, 116, 124);
--link-color: rgb(138, 180, 248); --link-color: rgb(138, 180, 248);
--link-underline-color: rgb(99, 131, 182); --link-underline-color: rgb(99, 131, 182);
--main-border: rgb(63, 65, 68); --main-border-color: rgb(44, 45, 45);
--button-bg: rgb(39, 40, 33); --button-bg: rgb(39, 40, 33);
--blockquote-border: rgb(66, 66, 66); --blockquote-border-color: rgb(66, 66, 66);
--blockquote-text: rgb(117, 117, 117); --blockquote-text-color: rgb(117, 117, 117);
--btn-border-color: rgb(63, 65, 68);
--btn-backtotop-color: var(--text-color);
--btn-backtotop-border-color: var(--btn-border-color);
--btn-box-shadow: var(--main-wrapper-bg);
--card-bg: rgb(39, 40, 33); --card-bg: rgb(39, 40, 33);
--card-header-bg: rgb(51, 50, 50); --card-header-bg: rgb(51, 50, 50);
--relate-post-title: rgb(164, 175, 181); --label-relate-post: rgb(164, 175, 181);
/* Sidebar */
--nav-cursor-color: rgb(183, 182, 182);
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
/* Top Bar */
--topbar-text-color: var(--text-color);
/* Home page */ /* Home page */
--btn-active-bg: #1c345e; --post-list-text-color: rgb(175, 176, 177);
--btn-active-border-color: #8ab4f8; --btn-patinator-text-color: var(--text-color);
--btn-active-bg: rgba(28, 52, 94, 1);
--btn-active-border-color: rgb(66, 94, 138);
--btn-text-color: var(--text-color);
--btn-paginator-border-color: var(--btn-border-color);
--btn-paginator-shadow: var(--main-wrapper-bg);
/* posts */ /* Posts */
--toc-highlight: rgb(116, 178, 243); --toc-highlight: rgb(116, 178, 243);
--tag-bg: rgb(41, 40, 40); --tag-bg: rgb(41, 40, 40);
--tag-hover: rgb(43, 56, 62); --tag-hover: rgb(43, 56, 62);
--tb-odd-bg: rgba(52, 53, 42, 0.52); /* odd rows of the posts' table */ --tb-odd-bg: rgba(52, 53, 42, 0.52); /* odd rows of the posts' table */
--tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */ --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
--tb-even-border-color: var(--tb-odd-bg);
--tb-even-border-color: var(--tb-odd-bg);
--footnote-target-bg: rgb(63, 81, 181); --footnote-target-bg: rgb(63, 81, 181);
--btn-sharing: #6c757d; --btn-share-color: #6c757d;
--btn-share-hover-color: #bfc1ca;
--relate-post-date: var(--text-muted-color);
--card-border-color: var(--main-wrapper-bg);
--card-box-shadow: var(--main-wrapper-bg);
/* tags */ /* tags */
--tag-border: rgb(59, 79, 88); --tag-border: rgb(59, 79, 88);
--tag-shadow: rgb(32, 33, 33); --tag-shadow: rgb(32, 33, 33);
--search-tag-bg: var(--tag-bg);
--dash-color: rgb(63, 65, 68);
/* categories */ /* categories */
--categories-border: rgb(64, 66, 69);
--categories-hover-bg: rgb(73, 75, 76); --categories-hover-bg: rgb(73, 75, 76);
/* archives */ /* archives */
--timeline-node-bg: rgb(150, 152, 156); --timeline-node-bg: rgb(150, 152, 156);
--timeline-color: rgb(63, 65, 68);
--timeline-year-dot-color: var(--timeline-color);
/* Footer */ /* Footer */
---footer-link: rgb(146, 146, 146); ---footer-link: rgb(146, 146, 146);
hr { hr {
border-color: var(--main-border); border-color: var(--main-border-color);
} }
/* posts' toc */ /* 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 {
/* Override BS */
color: var(--toc-highlight)!important; color: var(--toc-highlight)!important;
border-left-color: var(--toc-highlight)!important; border-left-color: var(--toc-highlight)!important;
} }
@ -86,59 +112,19 @@
background-color: var(--card-header-bg); background-color: var(--card-header-bg);
} }
.list-group-item { .list-group-item {
// @extend %category-bg;
border-left: none; border-left: none;
border-right: none; border-right: none;
padding-left: 2rem; padding-left: 2rem;
border-color: var(--main-border); border-color: var(--categories-border);
&:last-child { &:last-child {
border-bottom-color: var(--card-bg); border-bottom-color: var(--card-bg);
} }
} }
} }
#archives li:nth-child(odd) { #archives li:nth-child(odd) {
background-image: linear-gradient(to left, 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)); rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
} }
} // dark-scheme } // dark-scheme
@mixin set-visible($light-display, $dark-display) {
[light-mode-invisible] {
display: $light-display;
}
[dark-mode-invisible] {
display: $dark-display;
}
}
@mixin mode-toggle($dark-mode: false) {
@if $dark-mode {
@include set-visible(inline-block, none);
@include dark-scheme;
} @else {
@include set-visible(none, inline-block);
}
}
html:not([mode]), html[mode=light] {
@include mode-toggle();
}
html[mode=dark] {
@include mode-toggle(true);
}
@media (prefers-color-scheme: dark) {
html:not([mode]), html[mode=dark] {
@include mode-toggle(true);
}
html[mode=light] {
@include mode-toggle();
}
}

80
assets/css/_colors/light-syntax.scss Normal file
View file

@ -0,0 +1,80 @@
/*!
* The syntax light mode code snippet colors.
* v2.1
* https://github.com/cotes2020/jekyll-theme-chirpy
* © 2020 Cotes Chung
* MIT Licensed
*/
@mixin light-syntax {
/* see: <https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css> */
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #999988; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #000000; font-weight: bold } /* Keyword */
.highlight .o { color: #000000; font-weight: bold } /* Operator */
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #999999 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #009999 } /* Literal.Number */
.highlight .s { color: #d01040 } /* Literal.String */
.highlight .na { color: #008080 } /* Name.Attribute */
.highlight .nb { color: #0086B3 } /* Name.Builtin */
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
.highlight .no { color: #008080 } /* Name.Constant */
.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #800080 } /* Name.Entity */
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
.highlight .nn { color: #555555 } /* Name.Namespace */
.highlight .nt { color: #000080 } /* Name.Tag */
.highlight .nv { color: #008080 } /* Name.Variable */
.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #009999 } /* Literal.Number.Float */
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
.highlight .sb { color: #d01040 } /* Literal.String.Backtick */
.highlight .sc { color: #d01040 } /* Literal.String.Char */
.highlight .sd { color: #d01040 } /* Literal.String.Doc */
.highlight .s2 { color: #d01040 } /* Literal.String.Double */
.highlight .se { color: #d01040 } /* Literal.String.Escape */
.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
.highlight .si { color: #d01040 } /* Literal.String.Interpol */
.highlight .sx { color: #d01040 } /* Literal.String.Other */
.highlight .sr { color: #009926 } /* Literal.String.Regex */
.highlight .s1 { color: #d01040 } /* Literal.String.Single */
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #008080 } /* Name.Variable.Class */
.highlight .vg { color: #008080 } /* Name.Variable.Global */
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
/*--- custom light colors ---*/
--code-highlighter-rouge: #e9ecef;
--highlight-bg-color: #f7f7f7;
--highlighter-rouge-color: black;
--highlight-lineno-color: #c2c6cc;
--highlight-lineno-border-color: #e9ecef;
} // light-syntax

124
assets/css/_colors/light-typography.scss Normal file
View file

@ -0,0 +1,124 @@
/*!
* The syntax light mode typography colors
* v2.1
* https://github.com/cotes2020/jekyll-theme-chirpy
* © 2020 Cotes Chung
* MIT Licensed
*/
@mixin light-scheme {
--body-bg: #fafafa;
--mask-bg: #c1c3c5;
--main-wrapper-bg: white;
--main-border-color: #f3f3f3;
--btn-border-color: #e9ecef;
--text-color: #212529;
--blockquote-border-color: #eee;
--blockquote-text-color: #9a9a9a;
--link-color: #2a408e;
--link-underline-color: #c2c6cc;
--text-muted-color: gray;
--tb-odd-bg: #f8f9fa;
--tb-even-border-color: rgba(210, 215, 217, 0.75);
--button-bg: #fff;
--btn-backtotop-color: #686868;
--btn-backtotop-border-color: #f1f1f1; //--main-border-color,
--btn-box-shadow: #eaeaea;
/* Sidebar */
--sidebar-bg: radial-gradient(
circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
--nav-cursor-color: #fcfcfc;
/* Topbar */
--topbar-wrapper-bg: white;
--topbar-text-color: rgb(78, 78, 78);
--search-wrapper-bg: #fff;
--search-wrapper-bg: #f5f5f5;
--search-tag-bg: #f8f9fa;
--search-icon-color: #c2c6cc;
--input-focus-border-color: var(--btn-border-color);
/* Home */
--post-list-text-color: dimgray;
--btn-patinator-text-color: #555555;
--btn-active-bg: #2a408e;
--btn-active-border-color: #007bff;
--btn-text-color: #f8f8f8;
--btn-paginator-border-color: #f1f1f1;
--btn-paginator-shadow: #4b92d2;
/* Posts */
--btn-share-hover-color: var(--link-color);
--card-border-color: #f1f1f1;
--card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
--label-relate-post: #353a3d;
--relate-post-date: rgba(30, 55, 70, .4);
--tag-bg: rgba(0, 0, 0, 0.075);
--tag-border: #dee2e6;
--tag-shadow: var(--btn-border-color);
--tag-hover: rgb(222, 226, 230);
--categories-hover-bg: var(--btn-border-color);
--dash-color: silver;
/* Archive */
--timeline-color: rgba(0, 0, 0, 0.075);
--timeline-node-bg: #c2c6cc;
--timeline-year-dot-color: #ffffff;
/* Footer */
--footer-bg-color: #ffffff;
--footnote-target-bg: lightcyan;
---footer-link: inherit;
}

98
assets/css/_dark/dark-syntax.scss
View file

@ -1,98 +0,0 @@
/*!
* The syntax dark mode styles
* v2.0
* https://github.com/cotes2020/jekyll-theme-chirpy
* © 2018-2019 Cotes Chung
* MIT Licensed
*/
@mixin box-shadow($val) {
-moz-box-shadow: $val;
-webkit-box-shadow: $val;
box-shadow: $val;
}
@mixin dark-syntax-scheme {
/* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
--highlight-pre-bg: #272822;
--highlight-hll-bg: #272822;
--highlight-c: #75715e; /* Comment */
--highlight-err: #960050; /* Error */
--highlight-err-bg: #1e0010; /* Error background */
--highlight-k: #66d9ef; /* Keyword */
--highlight-l: #ae81ff; /* Literal */
--highlight-n: #f8f8f2; /* Name */
--highlight-o: #f92672; /* Operator */
--highlight-p: #f8f8f2; /* Punctuation */
--highlight-cm: #75715e; /* Comment.Multiline */
--highlight-cp: #75715e; /* Comment.Preproc */
--highlight-c1: #75715e; /* Comment.Single */
--highlight-cs: #75715e; /* Comment.Special */
--highlight-kc: #66d9ef; /* Keyword.Constant */
--highlight-kd: #66d9ef; /* Keyword.Declaration */
--highlight-kn: #f92672; /* Keyword.Namespace */
--highlight-kp: #66d9ef; /* Keyword.Pseudo */
--highlight-kr: #66d9ef; /* Keyword.Reserved */
--highlight-kt: #66d9ef; /* Keyword.Type */
--highlight-ld: #e6db74; /* Literal.Date */
--highlight-m: #ae81ff; /* Literal.Number */
--highlight-s: #e6db74; /* Literal.String */
--highlight-na: #a6e22e; /* Name.Attribute */
--highlight-nb: #f8f8f2; /* Name.Builtin */
--highlight-nc: #a6e22e; /* Name.Class */
--highlight-no: #66d9ef; /* Name.Constant */
--highlight-nd: #a6e22e; /* Name.Decorator */
--highlight-ni: #f8f8f2; /* Name.Entity */
--highlight-ne: #a6e22e; /* Name.Exception */
--highlight-nf: #a6e22e; /* Name.Function */
--highlight-nl: #f8f8f2; /* Name.Label */
--highlight-nn: #f8f8f2; /* Name.Namespace */
--highlight-nx: #a6e22e; /* Name.Other */
--highlight-py: #f8f8f2; /* Name.Property */
--highlight-nt: #f92672; /* Name.Tag */
--highlight-nv: #f8f8f2; /* Name.Variable */
--highlight-ow: #f92672; /* Operator.Word */
--highlight-w: #f8f8f2; /* Text.Whitespace */
--highlight-mf: #ae81ff; /* Literal.Number.Float */
--highlight-mh: #ae81ff; /* Literal.Number.Hex */
--highlight-mi: #ae81ff; /* Literal.Number.Integer */
--highlight-mo: #ae81ff; /* Literal.Number.Oct */
--highlight-sb: #e6db74; /* Literal.String.Backtick */
--highlight-sc: #e6db74; /* Literal.String.Char */
--highlight-sd: #e6db74; /* Literal.String.Doc */
--highlight-s2: #e6db74; /* Literal.String.Double */
--highlight-se: #ae81ff; /* Literal.String.Escape */
--highlight-sh: #e6db74; /* Literal.String.Heredoc */
--highlight-si: #e6db74; /* Literal.String.Interpol */
--highlight-sx: #e6db74; /* Literal.String.Other */
--highlight-sr: #e6db74; /* Literal.String.Regex */
--highlight-s1: #e6db74; /* Literal.String.Single */
--highlight-ss: #e6db74; /* Literal.String.Symbol */
--highlight-bp: #f8f8f2; /* Name.Builtin.Pseudo */
--highlight-vc: #f8f8f2; /* Name.Variable.Class */
--highlight-vg: #f8f8f2; /* Name.Variable.Global */
--highlight-vi: #f8f8f2; /* Name.Variable.Instance */
--highlight-il: #ae81ff; /* Literal.Number.Integer.Long */
// --highlight-gh: none; /* Generic Heading & Diff Header */
--highlight-gu: #75715e; /* Generic.Subheading & Diff Unified/Comment? */
--highlight-gd: #f92672; /* Generic.Deleted & Diff Deleted */
/* My styles */
--highlight-lineno: #6c6c6d;
--highlight-lineno-border: #3c4042;
--highlighter-rouge: #de6b18;
pre {
color: #818c96; /* override Bootstrap */
}
kbd {
background-color: black;
}
.highlight {
@include box-shadow(none);
}
} // mixin dark-syntax-scheme

6
assets/css/_module.scss
View file

@ -10,7 +10,7 @@
/*---------- scss placeholder ---------*/ /*---------- scss placeholder ---------*/
%tag-hover { %tag-hover {
background: var(--tag-hover, rgb(222, 226, 230)); background: var(--tag-hover);
transition: background 0.35s ease-in-out; transition: background 0.35s ease-in-out;
} }
@ -26,7 +26,7 @@
} }
%link-color { %link-color {
color: var(--link-color, #2a408e); color: var(--link-color);
} }
%no-bottom-border { %no-bottom-border {
@ -45,7 +45,7 @@
%footer-content { %footer-content {
font-weight: 600; font-weight: 600;
color: var(---footer-link, inherit); color: var(---footer-link);
} }

2
assets/css/_variables.scss
View file

@ -7,6 +7,8 @@
* MIT Licensed * MIT Licensed
*/ */
/*--- ↓ width and height ----*/
$sidebar-width-small: 210px; $sidebar-width-small: 210px;
$sidebar-width-medium: 260px; $sidebar-width-medium: 260px;
$sidebar-width-large: 350px; $sidebar-width-large: 350px;

17
assets/css/archives.scss
View file

@ -8,8 +8,6 @@
MIT License MIT License
*/ */
$dot-color: #c2c6cc;
%date-timeline { %date-timeline {
content: ""; content: "";
width: 4px; width: 4px;
@ -17,7 +15,7 @@ $dot-color: #c2c6cc;
display: inline-block; display: inline-block;
float: left; float: left;
position: relative; position: relative;
background-color: var(--main-border, rgba(0, 0, 0, 0.075)); background-color: var(--timeline-color);
} }
#archives { #archives {
@ -27,7 +25,8 @@ $dot-color: #c2c6cc;
line-height: 3rem; line-height: 3rem;
&:nth-child(odd) { &:nth-child(odd) {
background-color: var(--main-wrapper-bg, #fff); background-color: var(--main-wrapper-bg, #fff);
background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff); background-image: linear-gradient(
to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
} }
>div { >div {
white-space: nowrap; white-space: nowrap;
@ -63,9 +62,9 @@ $dot-color: #c2c6cc;
top: -26px; top: -26px;
left: 63px; left: 63px;
border: 3px solid; border: 3px solid;
background-color: var(--main-border, #ffffff); background-color: var(--timeline-year-dot-color);
border-color: var(--timeline-node-bg, $dot-color); border-color: var(--timeline-node-bg);
box-shadow: 0 0 2px 0 $dot-color; box-shadow: 0 0 2px 0 #c2c6cc;
z-index: 1; z-index: 1;
} }
} // #archives span.lead } // #archives span.lead
@ -90,8 +89,8 @@ $dot-color: #c2c6cc;
float: left; float: left;
top: 1.35rem; top: 1.35rem;
left: 69px; left: 69px;
background-color: var(--timeline-node-bg, $dot-color); background-color: var(--timeline-node-bg);
box-shadow: 0 0 3px 0 $dot-color; box-shadow: 0 0 3px 0 #c2c6cc;
z-index: 1; z-index: 1;
} }
} }

2
assets/css/categories.scss
View file

@ -62,7 +62,7 @@
@media (hover: hover) { // only works on desktop @media (hover: hover) { // only works on desktop
.category-trigger:hover { .category-trigger:hover {
background-color: var(--categories-hover-bg, #e9ecef); background-color: var(--categories-hover-bg);
} }
} }

2
assets/css/category-tag.scss
View file

@ -51,7 +51,7 @@ a:hover {
.dash { .dash {
margin: 0 .5rem .6rem .5rem; margin: 0 .5rem .6rem .5rem;
border-bottom: 2px dotted var(--main-border, silver); border-bottom: 2px dotted var(--dash-color);
} }
@media all and (max-width: 576px) { @media all and (max-width: 576px) {

19
assets/css/home.scss
View file

@ -8,6 +8,7 @@
MIT License MIT License
*/ */
#post-list { #post-list {
margin-top: 1rem; margin-top: 1rem;
padding-right: .5rem; padding-right: .5rem;
@ -28,7 +29,7 @@
.post-preview { .post-preview {
padding-top: 1.5rem; padding-top: 1.5rem;
padding-bottom: 1rem; padding-bottom: 1rem;
border-bottom: 1px solid rgba(158, 158, 158, 0.17); border-bottom: 1px solid var(--main-border-color);
>h1 { >h1 {
font-size: 1.4rem; font-size: 1.4rem;
margin: 0; margin: 0;
@ -39,7 +40,7 @@
.post-content { .post-content {
margin-top: .6rem; margin-top: .6rem;
margin-bottom: .6rem; margin-bottom: .6rem;
color: var(--text-color, dimgray); color: var(--post-list-text-color);
>p { /* Make preview shorter in Home page*/ >p { /* Make preview shorter in Home page*/
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
@ -53,7 +54,7 @@
.page-item { .page-item {
.page-link { .page-link {
color: var(--text-color, #555555); color: var(--btn-patinator-text-color);
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
padding: 0; padding: 0;
@ -65,23 +66,23 @@
-webkit-box-align: center; -webkit-box-align: center;
align-items: center; align-items: center;
border-radius: 50%; border-radius: 50%;
border: 1px solid var(--main-border, #f1f1f1); border: 1px solid var(--btn-paginator-border-color);
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
background-color: var(--button-bg); background-color: var(--button-bg);
} }
&.active { &.active {
.page-link { .page-link {
background-color: var(--btn-active-bg, #2a408e); background-color: var(--btn-active-bg);
border-color: var(--btn-active-border-color, #007bff); border-color: var(--btn-active-border-color);
box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important; box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
color: var(--text-color, #f8f8f8); color: var(--btn-text-color);
} }
} }
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;
.page-link { .page-link {
color: rgba(108, 117, 125, 0.57); color: rgba(108, 117, 125, 0.57);
border-color: var(--main-border, #f1f1f1); border-color: var(--btn-paginator-border-color);
background-color: var(--button-bg); background-color: var(--button-bg);
} }
} }

108
assets/css/main.scss
View file

@ -9,9 +9,48 @@
*/ */
@import "_fonts"; @import "_fonts";
@import "_dark/dark-main";
@import "_module"; @import "_module";
@import "_variables"; @import "_variables";
@import "_colors/light-typography";
@import "_colors/dark-typography";
@mixin set-visible($light-display, $dark-display) {
[light-mode-invisible] {
display: $light-display;
}
[dark-mode-invisible] {
display: $dark-display;
}
}
@mixin mode-toggle($dark-mode: false) {
@if $dark-mode {
@include set-visible(inline-block, none);
@include dark-scheme;
} @else {
@include set-visible(none, inline-block);
@include light-scheme;
}
}
html:not([mode]), html[mode=light] {
@include mode-toggle();
}
html[mode=dark] {
@include mode-toggle(true);
}
@media (prefers-color-scheme: dark) {
html:not([mode]), html[mode=dark] {
@include mode-toggle(true);
}
html[mode=light] {
@include mode-toggle();
}
}
html, body { html, body {
height: 100%; height: 100%;
@ -25,8 +64,8 @@ html {
body { body {
line-height: 1.75rem; line-height: 1.75rem;
background: var(--main-wrapper-bg, #fafafa); background: var(--body-bg);
color: var(--text-color, #212529); 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;
} }
@ -49,8 +88,7 @@ $tab-count: {{ site.data.tabs | size }};
-webkit-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease;
transition: transform 0.4s ease; transition: transform 0.4s ease;
background: rgb(42, 30, 107); background: rgb(42, 30, 107);
background: var(--sidebar-bg, background: var(--sidebar-bg);
radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%));
a { a {
@include sidebar-icon; @include sidebar-icon;
} }
@ -95,7 +133,7 @@ $tab-count: {{ site.data.tabs | size }};
right: 1px; right: 1px;
width: 3px; width: 3px;
height: $tab-cursor-height; height: $tab-cursor-height;
background-color: var(--nav-cursor, #fcfcfc); background-color: var(--nav-cursor-color);
pointer-events: none; pointer-events: none;
} }
} }
@ -263,7 +301,7 @@ $tab-count: {{ site.data.tabs | size }};
z-index: 50; z-index: 50;
border-bottom: 1px solid rgba(0, 0, 0, 0.07); border-bottom: 1px solid rgba(0, 0, 0, 0.07);
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
background-color: var(--topbar-wrapper-bg, white); background-color: var(--topbar-wrapper-bg);
} }
#topbar i { // icons #topbar i { // icons
@ -296,14 +334,14 @@ $tab-count: {{ site.data.tabs | size }};
display: flex; display: flex;
width: 95%; width: 95%;
border-radius: 1rem; border-radius: 1rem;
border: 1px solid var(--search-wrapper-bg, #fff); border: 1px solid var(--search-wrapper-bg);
background: var(--search-wrapper-bg, #f5f5f5); background: var(--search-wrapper-bg);
padding: 0 .5rem; padding: 0 .5rem;
transition: background-color .15s ease-in-out,border-color .15s ease-in-out; transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
i { i {
z-index: 2; z-index: 2;
font-size: .9rem; font-size: .9rem;
color: var(--search-icon, #c2c6cc); color: var(--search-icon-color);
} }
.fa-times-circle { /* button 'clean up' */ .fa-times-circle { /* button 'clean up' */
visibility: hidden; visibility: hidden;
@ -311,7 +349,7 @@ $tab-count: {{ site.data.tabs | size }};
} }
#search-cancel { /* 'Cancel' link */ #search-cancel { /* 'Cancel' link */
color: var(--link-color, #2a408e); color: var(--link-color);
margin-left: 1rem; margin-left: 1rem;
display: none; display: none;
} }
@ -343,7 +381,7 @@ $tab-count: {{ site.data.tabs | size }};
display: inline-block; display: inline-block;
line-height: 1rem; line-height: 1rem;
font-size: 1rem; font-size: 1rem;
background: var(--tag-bg, #f8f9fa); background: var(--search-tag-bg);
border: none; border: none;
padding: .5rem; padding: .5rem;
margin: 0 1rem 1rem 0; margin: 0 1rem 1rem 0;
@ -390,7 +428,7 @@ $tab-count: {{ site.data.tabs | size }};
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
font-family: sans-serif; font-family: sans-serif;
color: var(--text-color, rgb(78, 78, 78)); color: var(--topbar-text-color);
text-align: center; text-align: center;
width: 70%; width: 70%;
overflow: hidden; overflow: hidden;
@ -408,7 +446,7 @@ $tab-count: {{ site.data.tabs | size }};
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: var(--mask-bg, #c1c3c5); background: var(--mask-bg);
opacity: 0.5; opacity: 0.5;
z-index: 1; z-index: 1;
@at-root .sidebar-expand~& { @at-root .sidebar-expand~& {
@ -419,7 +457,7 @@ $tab-count: {{ site.data.tabs | size }};
/*--- main wrapper ---*/ /*--- main wrapper ---*/
#main-wrapper { #main-wrapper {
background-color: var(--main-wrapper-bg, white); background-color: var(--main-wrapper-bg);
position: relative; position: relative;
min-height: 100%; min-height: 100%;
padding-bottom: $footer-height; padding-bottom: $footer-height;
@ -462,12 +500,12 @@ footer {
height: $footer-height; height: $footer-height;
font-size: 0.8rem; font-size: 0.8rem;
color: #7a7b7d; color: #7a7b7d;
background-color: var(--main-wrapper-bg, #ffffff); background-color: var(--footer-bg-color);
>div.d-flex { >div.d-flex {
line-height: 1.2rem; line-height: 1.2rem;
width: 95%; width: 95%;
max-width: 1045px; max-width: 1045px;
border-top: 1px solid var(--footer-border, #f3f3f3); border-top: 1px solid var(--main-border-color);
margin-bottom: 1rem; margin-bottom: 1rem;
>div { >div {
width: 350px; width: 350px;
@ -511,7 +549,7 @@ footer {
} }
>div { >div {
padding-left: 1rem; padding-left: 1rem;
border-left: 1px solid rgba(158, 158, 158, 0.17); border-left: 1px solid var(--main-border-color);
&:not(:first-child) { &:not(:first-child) {
margin-top: 4rem; margin-top: 4rem;
} }
@ -540,7 +578,7 @@ footer {
line-height: 1rem; line-height: 1rem;
font-size: 0.85rem; font-size: 0.85rem;
background: none; background: none;
border: 1px solid var(--main-border, #e9ecef); border: 1px solid var(--btn-border-color);
border-radius: .8rem; border-radius: .8rem;
padding: .3rem .5rem; padding: .3rem .5rem;
margin: 0 .35rem .5rem 0; margin: 0 .35rem .5rem 0;
@ -584,12 +622,12 @@ footer {
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
position: fixed; position: fixed;
background: var(--button-bg, #fff); background: var(--button-bg);
color: var(--text-color, #686868); color: var(--btn-backtotop-color);
height: 2.6em; height: 2.6em;
width: 2.7em; width: 2.7em;
border-radius: 50%; border-radius: 50%;
border: 1px solid var(--main-border, #f1f1f1); border: 1px solid var(--btn-backtotop-border-color);
transition: 0.2s ease-out; transition: 0.2s ease-out;
-webkit-transition: 0.2s ease-out; -webkit-transition: 0.2s ease-out;
} }
@ -630,12 +668,12 @@ h5 {
} }
blockquote { blockquote {
border-left: 5px solid var(--blockquote-border, #eee); border-left: 5px solid var(--blockquote-border-color);
padding-left: 1rem; padding-left: 1rem;
color: var(--blockquote-text, #9a9a9a); color: var(--blockquote-text-color);
.post-content & { .post-content & {
a { a {
color: var(--link-color, #2a408e); color: var(--link-color);
} }
} }
} }
@ -660,7 +698,7 @@ sup {
margin-bottom: -.8rem; margin-bottom: -.8rem;
} }
&:target>p { &:target>p {
background-color: var(--footnote-target-bg, lightcyan); background-color: var(--footnote-target-bg);
width: fit-content; width: fit-content;
-webkit-transition: background-color 1.5s ease-in-out; -webkit-transition: background-color 1.5s ease-in-out;
/* Safari prior 6.1 */ /* Safari prior 6.1 */
@ -677,7 +715,7 @@ sup {
transition: background-color 1.5s ease-in-out; transition: background-color 1.5s ease-in-out;
} }
@at-root sup:target>a#{&} { @at-root sup:target>a#{&} {
background-color: var(--footnote-target-bg, lightcyan); background-color: var(--footnote-target-bg);
padding: 0 2px; padding: 0 2px;
} }
} }
@ -768,10 +806,10 @@ table {
background-color: var(--tb-even-bg); background-color: var(--tb-even-bg);
} }
&:last-child:nth-child(2n) { &:last-child:nth-child(2n) {
border-bottom: solid 1px var(--tb-odd-bg, rgba(210, 215, 217, 0.75)); border-bottom: solid 1px var(--tb-even-border-color);
} }
&:nth-child(2n + 1) { &:nth-child(2n + 1) {
background-color: var(--tb-odd-bg, #f8f9fa); background-color: var(--tb-odd-bg);
} }
} }
th { th {
@ -796,8 +834,8 @@ table {
font-size: 0.85rem; font-size: 0.85rem;
word-spacing: 1px; word-spacing: 1px;
a { a {
color: var(--link-color, #2a408e); color: var(--link-color);
border-bottom: 1px dotted var(--link-underline-color, #c2c6cc); border-bottom: 1px dotted var(--link-underline-color);
&:not(:last-child) { &:not(:last-child) {
margin-right: 2px; margin-right: 2px;
} }
@ -815,7 +853,7 @@ table {
word-wrap: break-word; word-wrap: break-word;
a { a {
@extend %link-color; @extend %link-color;
border-bottom: 1px dotted var(--link-underline-color, #c2c6cc); border-bottom: 1px dotted var(--link-underline-color);
&:hover { &:hover {
@extend %link-hover; @extend %link-hover;
} }
@ -830,7 +868,7 @@ table {
display: inline-block; display: inline-block;
min-width: 2rem; min-width: 2rem;
text-align: center; text-align: center;
background: var(--tag-bg, rgba(0, 0, 0, 0.075)); background: var(--tag-bg);
border-radius: .34rem; border-radius: .34rem;
padding: 0 .4rem; padding: 0 .4rem;
color: #818182; color: #818182;
@ -885,7 +923,7 @@ table {
} }
.btn-box-shadow { .btn-box-shadow {
box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #eaeaea) !important; box-shadow: 0 0 8px 0 var(--btn-box-shadow)!important;
} }
.topbar-up { .topbar-up {
@ -914,7 +952,7 @@ table {
.input-focus { .input-focus {
box-shadow: none; box-shadow: none;
border-color: var(--input-focus-border, #e9ecef) !important; border-color: var(--input-focus-border-color) !important;
background: center !important; background: center !important;
} }

41
assets/css/post.scss
View file

@ -7,22 +7,23 @@
© 2019 Cotes Chung © 2019 Cotes Chung
MIT License MIT License
*/ */
@import "_variables";
$prompt-older: "{{ site.data.label.post.button.previous }}"; $prompt-older: "{{ site.data.label.post.button.previous }}";
$prompt-newer: "{{ site.data.label.post.button.next }}"; $prompt-newer: "{{ site.data.label.post.button.next }}";
@mixin btn-sharing-color($light-color, $important: false) { @mixin btn-sharing-color($light-color, $important: false) {
@if $important { @if $important {
color: var(--btn-sharing, $light-color)!important; color: var(--btn-share-color, $light-color)!important;
} @else { } @else {
color: var(--btn-sharing, $light-color); color: var(--btn-share-color, $light-color);
} }
} }
@mixin btn-post-nav { @mixin btn-post-nav {
width: 50%; width: 50%;
position: relative; position: relative;
border-color: var(--main-border, #e9ecef); border-color: var(--btn-border-color);
} }
.post img { .post img {
@ -40,7 +41,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
.post-tail-wrapper { .post-tail-wrapper {
margin-top: 5rem; margin-top: 5rem;
border-bottom: 1px double var(--main-border, #e9ecef); border-bottom: 1px double var(--main-border-color);
font-size: 0.85rem; font-size: 0.85rem;
} }
@ -50,7 +51,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
.btn { .btn {
@include btn-post-nav; @include btn-post-nav;
color: var(--link-color, #2a408e); color: var(--link-color);
&:hover { &:hover {
background: #2a408e; background: #2a408e;
color: #fff; color: #fff;
@ -80,7 +81,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
a, span { a, span {
&::before { &::before {
color: var(--text-muted-color, gray); color: var(--text-muted-color);
font-size: .65rem; font-size: .65rem;
text-transform: uppercase; text-transform: uppercase;
} }
@ -149,14 +150,14 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
font-family: 'Oswald', sans-serif; font-family: 'Oswald', sans-serif;
} }
.card { .card {
border: 1px solid var(--main-wrapper-bg, #f1f1f1); border: 1px solid var(--card-border-color);
background-color: var(--card-bg); background-color: var(--card-bg);
box-shadow: 0 0 5px 0 var(--main-wrapper-bg, rgba(234, 234, 234, 0.7686274509803922)); box-shadow: 0 0 5px 0 var(--card-box-shadow);
-webkit-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; transition: all .3s ease-in-out;
h3 { h3 {
color: var(--relate-post-title, #353a3d); color: var(--label-relate-post);
} }
&:hover { &:hover {
-webkit-transform: translate3d(0, -3px, 0); -webkit-transform: translate3d(0, -3px, 0);
@ -166,7 +167,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
} }
.timeago { .timeago {
color: var(--text-muted-color, rgba(30, 55, 70, .4)); color: var(--relate-post-date);
} }
p { p {
@ -208,18 +209,24 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
color: inherit; color: inherit;
} }
%btn-share-hovor {
color: var(--btn-share-hover-color)!important;
}
.share-wrapper { .share-wrapper {
vertical-align: middle; vertical-align: middle;
user-select: none; user-select: none;
a:hover,
i:hover {
@include btn-sharing-color(#2a408e, true);
text-decoration: none;
}
.share-icon { .share-icon {
font-size: 1.2rem; font-size: 1.2rem;
a:hover {
text-decoration: none;
>i {
@extend %btn-share-hovor;
}
}
i:hover {
@extend %btn-share-hovor;
}
.fab { .fab {
&.fa-twitter { &.fa-twitter {
@include btn-sharing-color(rgba(29, 161, 242, 1.00)); @include btn-sharing-color(rgba(29, 161, 242, 1.00));

137
assets/css/syntax.scss
View file

@ -8,77 +8,38 @@
* MIT Licensed * MIT Licensed
*/ */
@import "_dark/dark-syntax"; @import "_colors/light-syntax";
@import "_colors/dark-syntax";
/* the fallback color from https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css */
.highlight pre { background-color: var(--highlight-pre-bg) }
.highlight .hll { background-color: var(--highlight-hll-bg, #ffffcc) }
.highlight .c { color: var(--highlight-c, #999988); font-style: italic } /* Comment */
.highlight .err { color: var(--highlight-err, #a61717); background-color: var(--highlight-err-bg, #e3d2d2) } /* Error */
.highlight .k { color: var(--highlight-k, #000000); font-weight: bold } /* Keyword */
.highlight .o { color: var(--highlight-o, #000000); font-weight: bold } /* Operator */
.highlight .cm { color: var(--highlight-cm, #999988); font-style: italic } /* Comment.Multiline */
.highlight .cp { color: var(--highlight-cp, #999999); font-weight: bold; font-style: italic } /* Comment.Preproc */
.highlight .c1 { color: var(--highlight-c1, #999988); font-style: italic } /* Comment.Single */
.highlight .cs { color: var(--highlight-cs, #999999); font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { color: var(--highlight-gd, #000000); background-color: var(#ffdddd) } /* Generic.Deleted */
.highlight .ge { color: var(--highlight-ge, #000000); font-style: italic } /* Generic.Emph */
.highlight .gr { color: var(--highlight-gr, #aa0000) } /* Generic.Error */
.highlight .gh { color: var(--highlight-gh, #999999) } /* Generic.Heading */
.highlight .gi { color: var(--highlight-gi, #000000); background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: var(#888888) } /* Generic.Output */
.highlight .gp { color: var(#555555) } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: var(--highlight-gu, #aaaaaa) } /* Generic.Subheading */
.highlight .gt { color: var(--highlight-gt, #aa0000) } /* Generic.Traceback */
.highlight .kc { color: var(--highlight-kc, #000000); font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: var(--highlight-kd, #000000); font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: var(--highlight-kn, #000000); font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: var(--highlight-kp, #000000); font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { color: var(--highlight-kr, #000000); font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: var(--highlight-kt, #445588); font-weight: bold } /* Keyword.Type */
.highlight .m { color: var(--highlight-m, #009999) } /* Literal.Number */
.highlight .s { color: var(--highlight-s, #d01040) } /* Literal.String */
.highlight .na { color: var(--highlight-na, #008080) } /* Name.Attribute */
.highlight .nb { color: var(--highlight-nb, #0086B3) } /* Name.Builtin */
.highlight .nc { color: var(--highlight-nc, #445588); font-weight: bold } /* Name.Class */
.highlight .no { color: var(--highlight-no, #008080) } /* Name.Constant */
.highlight .nd { color: var(--highlight-nd, #3c5d5d); font-weight: bold } /* Name.Decorator */
.highlight .ni { color: var(--highlight-ni, #800080) } /* Name.Entity */
.highlight .ne { color: var(--highlight-ne, #990000); font-weight: bold } /* Name.Exception */
.highlight .nf { color: var(--highlight-nf, #990000); font-weight: bold } /* Name.Function */
.highlight .nl { color: var(--highlight-nl, #990000); font-weight: bold } /* Name.Label */
.highlight .nn { color: var(--highlight-nn, #555555) } /* Name.Namespace */
.highlight .nt { color: var(--highlight-nt, #000080) } /* Name.Tag */
.highlight .nv { color: var(--highlight-nv, #008080) } /* Name.Variable */
.highlight .ow { color: var(--highlight-ow, #000000); font-weight: bold } /* Operator.Word */
.highlight .w { color: var(--highlight-w, #bbbbbb) } /* Text.Whitespace */
.highlight .mf { color: var(--highlight-mf, #009999) } /* Literal.Number.Float */
.highlight .mh { color: var(--highlight-mh, #009999) } /* Literal.Number.Hex */
.highlight .mi { color: var(--highlight-mi, #009999) } /* Literal.Number.Integer */
.highlight .mo { color: var(--highlight-mo, #009999) } /* Literal.Number.Oct */
.highlight .sb { color: var(--highlight-sb, #d01040) } /* Literal.String.Backtick */
.highlight .sc { color: var(--highlight-sc, #d01040) } /* Literal.String.Char */
.highlight .sd { color: var(--highlight-sd, #d01040) } /* Literal.String.Doc */
.highlight .s2 { color: var(--highlight-s2, #d01040) } /* Literal.String.Double */
.highlight .se { color: var(--highlight-se, #d01040) } /* Literal.String.Escape */
.highlight .sh { color: var(--highlight-sh, #d01040) } /* Literal.String.Heredoc */
.highlight .si { color: var(--highlight-si, #d01040) } /* Literal.String.Interpol */
.highlight .sx { color: var(--highlight-sx, #d01040) } /* Literal.String.Other */
.highlight .sr { color: var(--highlight-sr, #009926) } /* Literal.String.Regex */
.highlight .s1 { color: var(--highlight-s1, #d01040) } /* Literal.String.Single */
.highlight .ss { color: var(--highlight-ss, #990073) } /* Literal.String.Symbol */
.highlight .bp { color: var(--highlight-bp, #999999) } /* Name.Builtin.Pseudo */
.highlight .vc { color: var(--highlight-vc, #008080) } /* Name.Variable.Class */
.highlight .vg { color: var(--highlight-vg, #008080) } /* Name.Variable.Global */
.highlight .vi { color: var(--highlight-vi, #008080) } /* Name.Variable.Instance */
.highlight .il { color: var(--highlight-il, #009999) } /* Literal.Number.Integer.Long */
@mixin highlight-box-shadow($val) {
-moz-box-shadow: $val;
-webkit-box-shadow: $val;
box-shadow: $val;
}
html:not([mode]), html[mode=light] {
@include light-syntax;
}
html[mode=dark] {
@include dark-syntax;
}
@media (prefers-color-scheme: dark) {
html:not([mode]), html[mode=dark] {
@include dark-syntax;
}
html[mode=light] {
@include light-syntax;
}
}
/*-- Codes Snippet --*/ /*-- Codes Snippet --*/
%highlight-pre-bg { %highlight-pre-bg {
background: var(--highlight-pre-bg, #f7f7f7) background: var(--highlight-bg-color);
} }
%code-snippet-radius { %code-snippet-radius {
@ -86,29 +47,28 @@
} }
.highlighter-rouge { .highlighter-rouge {
@extend %highlight-pre-bg; background: var(--highlight-bg-color);
@extend %code-snippet-radius; @extend %code-snippet-radius;
color: var(--highlighter-rouge, black); color: var(--highlighter-rouge-color);
margin-bottom: 1.2em; /* Override BS Inline-code style */ margin-bottom: 1.2em; /* Override BS Inline-code style */
} }
.highlight { .highlight {
@extend %code-snippet-radius; @extend %code-snippet-radius;
@at-root div#{&} { background: var(--highlight-bg-color);
@extend %highlight-pre-bg;
}
@at-root figure#{&} { @at-root figure#{&} {
@extend %highlight-pre-bg; background: var(--highlight-bg-color);
} }
overflow: auto; overflow: auto;
@include box-shadow(inset 0 0 2px #c2c6cc); @include highlight-box-shadow(inset 0 0 2px #c2c6cc);
.lineno { .lineno {
margin: .8rem 0rem; margin: .8rem 0rem;
padding: 0 .5rem; padding: 0 .5rem;
min-width: 2.2rem; min-width: 2.2rem;
text-align: right; text-align: right;
color: var(--highlight-lineno, #c2c6cc); color: var(--highlight-lineno-color);
border-right: 1px solid var(--highlight-lineno-border, #e9ecef); border-right: 1px solid var(--highlight-lineno-border-color);
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -136,7 +96,7 @@
/* Fixed Safari overflow-x */ /* Fixed Safari overflow-x */
} }
} // .highlight } //.highlight
code { code {
-webkit-hyphens: none; -webkit-hyphens: none;
@ -147,7 +107,7 @@ code {
padding: 2px 4px; padding: 2px 4px;
margin: 0 .3rem; margin: 0 .3rem;
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--highlight-pre-bg, #e9ecef); border: 1px solid var(--code-highlighter-rouge); //var(--highlight-pre-bg, #e9ecef);
} }
} }
@ -157,24 +117,15 @@ td.rouge-code {
} }
/* Hide line numbers for defualt, console, and terminal code snippets */ /* Hide line numbers for defualt, console, and terminal code snippets */
div[class^='highlighter-rouge'] pre.lineno, div {
div.language-console.highlighter-rouge pre.lineno, &[class^='highlighter-rouge'],
div.language-terminal.highlighter-rouge pre.lineno { &.language-console.highlighter-rouge,
&.language-terminal.highlighter-rouge {
pre.lineno {
display: none; display: none;
} }
td.rouge-code {
div[class^='highlighter-rouge'] td.rouge-code,
div.language-console.highlighter-rouge td.rouge-code,
div.language-terminal.highlighter-rouge td.rouge-code {
padding: .8rem 1rem; padding: .8rem 1rem;
} }
html[mode=dark] {
@include dark-syntax-scheme;
}
@media (prefers-color-scheme: dark) {
html:not([mode]), html[mode=dark] {
@include dark-syntax-scheme;
} }
} }

4
assets/css/tags.scss
View file

@ -15,8 +15,8 @@
margin-right: .8rem; margin-right: .8rem;
line-height: 3rem; line-height: 3rem;
letter-spacing: 0; letter-spacing: 0;
border: 1px solid var(--tag-border, #dee2e6) !important; border: 1px solid var(--tag-border) !important;
box-shadow: 0 0 3px 0 var(--tag-shadow, #e9ecef); box-shadow: 0 0 3px 0 var(--tag-shadow);
span { span {
margin-left: 0.6em; margin-left: 0.6em;
font-size: 0.7em; font-size: 0.7em;