Improve the way of using color schemes.
- Gracefully switch code color scheme in the future. - Also uniform border color.
This commit is contained in:
Cotes Chung
parent
4f903b3041
commit
259a6624ed
15 changed files with 513 additions and 330 deletions
93
assets/css/_colors/dark-syntax.scss
Normal file
93
assets/css/_colors/dark-syntax.scss
Normal 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; }
|
||||
}
|
||||
|
|
@ -9,68 +9,94 @@
|
|||
@mixin dark-scheme {
|
||||
/* framework */
|
||||
--main-wrapper-bg: rgb(27, 27, 30);
|
||||
--body-bg: var(--main-wrapper-bg);
|
||||
--topbar-wrapper-bg: rgb(39, 40, 43);
|
||||
--search-wrapper-bg: rgb(34, 34, 39);
|
||||
--search-icon: rgb(100, 102, 105);
|
||||
--input-focus-border: rgb(112, 114, 115);
|
||||
--footer-border: rgb(44, 45, 45);
|
||||
--search-icon-color: rgb(100, 102, 105);
|
||||
--input-focus-border-color: rgb(112, 114, 115);
|
||||
--mask-bg: rgb(68, 69, 70);
|
||||
|
||||
/* sidebar */
|
||||
--nav-cursor: rgb(183, 182, 182);
|
||||
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
|
||||
--footer-bg-color: var(--main-wrapper-bg);
|
||||
|
||||
/* common color */
|
||||
--text-color: rgb(175, 176, 177);
|
||||
--text-muted-color: rgb(107, 116, 124);
|
||||
--link-color: rgb(138, 180, 248);
|
||||
--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);
|
||||
--blockquote-border: rgb(66, 66, 66);
|
||||
--blockquote-text: rgb(117, 117, 117);
|
||||
--blockquote-border-color: rgb(66, 66, 66);
|
||||
--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-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 */
|
||||
--btn-active-bg: #1c345e;
|
||||
--btn-active-border-color: #8ab4f8;
|
||||
--post-list-text-color: rgb(175, 176, 177);
|
||||
--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);
|
||||
--tag-bg: rgb(41, 40, 40);
|
||||
--tag-hover: rgb(43, 56, 62);
|
||||
--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-border-color: var(--tb-odd-bg);
|
||||
--tb-even-border-color: var(--tb-odd-bg);
|
||||
--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 */
|
||||
--tag-border: rgb(59, 79, 88);
|
||||
--tag-shadow: rgb(32, 33, 33);
|
||||
--search-tag-bg: var(--tag-bg);
|
||||
|
||||
--dash-color: rgb(63, 65, 68);
|
||||
|
||||
/* categories */
|
||||
--categories-border: rgb(64, 66, 69);
|
||||
--categories-hover-bg: rgb(73, 75, 76);
|
||||
|
||||
/* archives */
|
||||
--timeline-node-bg: rgb(150, 152, 156);
|
||||
--timeline-color: rgb(63, 65, 68);
|
||||
--timeline-year-dot-color: var(--timeline-color);
|
||||
|
||||
/* Footer */
|
||||
---footer-link: rgb(146, 146, 146);
|
||||
|
||||
|
||||
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:focus,
|
||||
nav[data-toggle=toc] .nav-link.active:hover,
|
||||
nav[data-toggle=toc] .nav>li>a:focus,
|
||||
nav[data-toggle=toc] .nav>li>a:hover {
|
||||
/* Override BS */
|
||||
color: var(--toc-highlight)!important;
|
||||
border-left-color: var(--toc-highlight)!important;
|
||||
}
|
||||
|
|
@ -86,59 +112,19 @@
|
|||
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);
|
||||
border-color: var(--categories-border);
|
||||
&:last-child {
|
||||
border-bottom-color: var(--card-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#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));
|
||||
}
|
||||
|
||||
} // 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
80
assets/css/_colors/light-syntax.scss
Normal 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
124
assets/css/_colors/light-typography.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
/*---------- scss placeholder ---------*/
|
||||
|
||||
%tag-hover {
|
||||
background: var(--tag-hover, rgb(222, 226, 230));
|
||||
background: var(--tag-hover);
|
||||
transition: background 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
|
||||
%link-color {
|
||||
color: var(--link-color, #2a408e);
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
%no-bottom-border {
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
%footer-content {
|
||||
font-weight: 600;
|
||||
color: var(---footer-link, inherit);
|
||||
color: var(---footer-link);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
* MIT Licensed
|
||||
*/
|
||||
|
||||
/*--- ↓ width and height ----*/
|
||||
|
||||
$sidebar-width-small: 210px;
|
||||
$sidebar-width-medium: 260px;
|
||||
$sidebar-width-large: 350px;
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@
|
|||
MIT License
|
||||
*/
|
||||
|
||||
$dot-color: #c2c6cc;
|
||||
|
||||
%date-timeline {
|
||||
content: "";
|
||||
width: 4px;
|
||||
|
|
@ -17,7 +15,7 @@ $dot-color: #c2c6cc;
|
|||
display: inline-block;
|
||||
float: left;
|
||||
position: relative;
|
||||
background-color: var(--main-border, rgba(0, 0, 0, 0.075));
|
||||
background-color: var(--timeline-color);
|
||||
}
|
||||
|
||||
#archives {
|
||||
|
|
@ -27,7 +25,8 @@ $dot-color: #c2c6cc;
|
|||
line-height: 3rem;
|
||||
&:nth-child(odd) {
|
||||
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 {
|
||||
white-space: nowrap;
|
||||
|
|
@ -63,9 +62,9 @@ $dot-color: #c2c6cc;
|
|||
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;
|
||||
background-color: var(--timeline-year-dot-color);
|
||||
border-color: var(--timeline-node-bg);
|
||||
box-shadow: 0 0 2px 0 #c2c6cc;
|
||||
z-index: 1;
|
||||
}
|
||||
} // #archives span.lead
|
||||
|
|
@ -90,8 +89,8 @@ $dot-color: #c2c6cc;
|
|||
float: left;
|
||||
top: 1.35rem;
|
||||
left: 69px;
|
||||
background-color: var(--timeline-node-bg, $dot-color);
|
||||
box-shadow: 0 0 3px 0 $dot-color;
|
||||
background-color: var(--timeline-node-bg);
|
||||
box-shadow: 0 0 3px 0 #c2c6cc;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
@media (hover: hover) { // only works on desktop
|
||||
.category-trigger:hover {
|
||||
background-color: var(--categories-hover-bg, #e9ecef);
|
||||
background-color: var(--categories-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ a:hover {
|
|||
|
||||
.dash {
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
MIT License
|
||||
*/
|
||||
|
||||
|
||||
#post-list {
|
||||
margin-top: 1rem;
|
||||
padding-right: .5rem;
|
||||
|
|
@ -28,7 +29,7 @@
|
|||
.post-preview {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(158, 158, 158, 0.17);
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
>h1 {
|
||||
font-size: 1.4rem;
|
||||
margin: 0;
|
||||
|
|
@ -39,7 +40,7 @@
|
|||
.post-content {
|
||||
margin-top: .6rem;
|
||||
margin-bottom: .6rem;
|
||||
color: var(--text-color, dimgray);
|
||||
color: var(--post-list-text-color);
|
||||
>p { /* Make preview shorter in Home page*/
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -53,7 +54,7 @@
|
|||
|
||||
.page-item {
|
||||
.page-link {
|
||||
color: var(--text-color, #555555);
|
||||
color: var(--btn-patinator-text-color);
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0;
|
||||
|
|
@ -65,23 +66,23 @@
|
|||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--main-border, #f1f1f1);
|
||||
border: 1px solid var(--btn-paginator-border-color);
|
||||
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);
|
||||
background-color: var(--btn-active-bg);
|
||||
border-color: var(--btn-active-border-color);
|
||||
box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
|
||||
color: var(--btn-text-color);
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
.page-link {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,48 @@
|
|||
*/
|
||||
|
||||
@import "_fonts";
|
||||
@import "_dark/dark-main";
|
||||
@import "_module";
|
||||
@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 {
|
||||
height: 100%;
|
||||
|
|
@ -25,8 +64,8 @@ html {
|
|||
|
||||
body {
|
||||
line-height: 1.75rem;
|
||||
background: var(--main-wrapper-bg, #fafafa);
|
||||
color: var(--text-color, #212529);
|
||||
background: var(--body-bg);
|
||||
color: var(--text-color);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
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;
|
||||
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%));
|
||||
background: var(--sidebar-bg);
|
||||
a {
|
||||
@include sidebar-icon;
|
||||
}
|
||||
|
|
@ -95,7 +133,7 @@ $tab-count: {{ site.data.tabs | size }};
|
|||
right: 1px;
|
||||
width: 3px;
|
||||
height: $tab-cursor-height;
|
||||
background-color: var(--nav-cursor, #fcfcfc);
|
||||
background-color: var(--nav-cursor-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -263,7 +301,7 @@ $tab-count: {{ site.data.tabs | size }};
|
|||
z-index: 50;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
|
||||
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
|
||||
|
|
@ -296,14 +334,14 @@ $tab-count: {{ site.data.tabs | size }};
|
|||
display: flex;
|
||||
width: 95%;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--search-wrapper-bg, #fff);
|
||||
background: var(--search-wrapper-bg, #f5f5f5);
|
||||
border: 1px solid var(--search-wrapper-bg);
|
||||
background: var(--search-wrapper-bg);
|
||||
padding: 0 .5rem;
|
||||
transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
|
||||
i {
|
||||
z-index: 2;
|
||||
font-size: .9rem;
|
||||
color: var(--search-icon, #c2c6cc);
|
||||
color: var(--search-icon-color);
|
||||
}
|
||||
.fa-times-circle { /* button 'clean up' */
|
||||
visibility: hidden;
|
||||
|
|
@ -311,7 +349,7 @@ $tab-count: {{ site.data.tabs | size }};
|
|||
}
|
||||
|
||||
#search-cancel { /* 'Cancel' link */
|
||||
color: var(--link-color, #2a408e);
|
||||
color: var(--link-color);
|
||||
margin-left: 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -343,7 +381,7 @@ $tab-count: {{ site.data.tabs | size }};
|
|||
display: inline-block;
|
||||
line-height: 1rem;
|
||||
font-size: 1rem;
|
||||
background: var(--tag-bg, #f8f9fa);
|
||||
background: var(--search-tag-bg);
|
||||
border: none;
|
||||
padding: .5rem;
|
||||
margin: 0 1rem 1rem 0;
|
||||
|
|
@ -390,7 +428,7 @@ $tab-count: {{ site.data.tabs | size }};
|
|||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
font-family: sans-serif;
|
||||
color: var(--text-color, rgb(78, 78, 78));
|
||||
color: var(--topbar-text-color);
|
||||
text-align: center;
|
||||
width: 70%;
|
||||
overflow: hidden;
|
||||
|
|
@ -408,7 +446,7 @@ $tab-count: {{ site.data.tabs | size }};
|
|||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: var(--mask-bg, #c1c3c5);
|
||||
background: var(--mask-bg);
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
@at-root .sidebar-expand~& {
|
||||
|
|
@ -419,7 +457,7 @@ $tab-count: {{ site.data.tabs | size }};
|
|||
/*--- main wrapper ---*/
|
||||
|
||||
#main-wrapper {
|
||||
background-color: var(--main-wrapper-bg, white);
|
||||
background-color: var(--main-wrapper-bg);
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
padding-bottom: $footer-height;
|
||||
|
|
@ -462,12 +500,12 @@ footer {
|
|||
height: $footer-height;
|
||||
font-size: 0.8rem;
|
||||
color: #7a7b7d;
|
||||
background-color: var(--main-wrapper-bg, #ffffff);
|
||||
background-color: var(--footer-bg-color);
|
||||
>div.d-flex {
|
||||
line-height: 1.2rem;
|
||||
width: 95%;
|
||||
max-width: 1045px;
|
||||
border-top: 1px solid var(--footer-border, #f3f3f3);
|
||||
border-top: 1px solid var(--main-border-color);
|
||||
margin-bottom: 1rem;
|
||||
>div {
|
||||
width: 350px;
|
||||
|
|
@ -511,7 +549,7 @@ footer {
|
|||
}
|
||||
>div {
|
||||
padding-left: 1rem;
|
||||
border-left: 1px solid rgba(158, 158, 158, 0.17);
|
||||
border-left: 1px solid var(--main-border-color);
|
||||
&:not(:first-child) {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
|
@ -540,7 +578,7 @@ footer {
|
|||
line-height: 1rem;
|
||||
font-size: 0.85rem;
|
||||
background: none;
|
||||
border: 1px solid var(--main-border, #e9ecef);
|
||||
border: 1px solid var(--btn-border-color);
|
||||
border-radius: .8rem;
|
||||
padding: .3rem .5rem;
|
||||
margin: 0 .35rem .5rem 0;
|
||||
|
|
@ -584,12 +622,12 @@ footer {
|
|||
z-index: 1;
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
background: var(--button-bg, #fff);
|
||||
color: var(--text-color, #686868);
|
||||
background: var(--button-bg);
|
||||
color: var(--btn-backtotop-color);
|
||||
height: 2.6em;
|
||||
width: 2.7em;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--main-border, #f1f1f1);
|
||||
border: 1px solid var(--btn-backtotop-border-color);
|
||||
transition: 0.2s ease-out;
|
||||
-webkit-transition: 0.2s ease-out;
|
||||
}
|
||||
|
|
@ -630,12 +668,12 @@ h5 {
|
|||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid var(--blockquote-border, #eee);
|
||||
border-left: 5px solid var(--blockquote-border-color);
|
||||
padding-left: 1rem;
|
||||
color: var(--blockquote-text, #9a9a9a);
|
||||
color: var(--blockquote-text-color);
|
||||
.post-content & {
|
||||
a {
|
||||
color: var(--link-color, #2a408e);
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -660,7 +698,7 @@ sup {
|
|||
margin-bottom: -.8rem;
|
||||
}
|
||||
&:target>p {
|
||||
background-color: var(--footnote-target-bg, lightcyan);
|
||||
background-color: var(--footnote-target-bg);
|
||||
width: fit-content;
|
||||
-webkit-transition: background-color 1.5s ease-in-out;
|
||||
/* Safari prior 6.1 */
|
||||
|
|
@ -677,7 +715,7 @@ sup {
|
|||
transition: background-color 1.5s ease-in-out;
|
||||
}
|
||||
@at-root sup:target>a#{&} {
|
||||
background-color: var(--footnote-target-bg, lightcyan);
|
||||
background-color: var(--footnote-target-bg);
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -768,10 +806,10 @@ table {
|
|||
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));
|
||||
border-bottom: solid 1px var(--tb-even-border-color);
|
||||
}
|
||||
&:nth-child(2n + 1) {
|
||||
background-color: var(--tb-odd-bg, #f8f9fa);
|
||||
background-color: var(--tb-odd-bg);
|
||||
}
|
||||
}
|
||||
th {
|
||||
|
|
@ -796,8 +834,8 @@ table {
|
|||
font-size: 0.85rem;
|
||||
word-spacing: 1px;
|
||||
a {
|
||||
color: var(--link-color, #2a408e);
|
||||
border-bottom: 1px dotted var(--link-underline-color, #c2c6cc);
|
||||
color: var(--link-color);
|
||||
border-bottom: 1px dotted var(--link-underline-color);
|
||||
&:not(:last-child) {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
|
@ -815,7 +853,7 @@ table {
|
|||
word-wrap: break-word;
|
||||
a {
|
||||
@extend %link-color;
|
||||
border-bottom: 1px dotted var(--link-underline-color, #c2c6cc);
|
||||
border-bottom: 1px dotted var(--link-underline-color);
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
|
|
@ -830,7 +868,7 @@ table {
|
|||
display: inline-block;
|
||||
min-width: 2rem;
|
||||
text-align: center;
|
||||
background: var(--tag-bg, rgba(0, 0, 0, 0.075));
|
||||
background: var(--tag-bg);
|
||||
border-radius: .34rem;
|
||||
padding: 0 .4rem;
|
||||
color: #818182;
|
||||
|
|
@ -885,7 +923,7 @@ table {
|
|||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -914,7 +952,7 @@ table {
|
|||
|
||||
.input-focus {
|
||||
box-shadow: none;
|
||||
border-color: var(--input-focus-border, #e9ecef) !important;
|
||||
border-color: var(--input-focus-border-color) !important;
|
||||
background: center !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,22 +7,23 @@
|
|||
© 2019 Cotes Chung
|
||||
MIT License
|
||||
*/
|
||||
@import "_variables";
|
||||
|
||||
$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;
|
||||
color: var(--btn-share-color, $light-color)!important;
|
||||
} @else {
|
||||
color: var(--btn-sharing, $light-color);
|
||||
color: var(--btn-share-color, $light-color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btn-post-nav {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
border-color: var(--main-border, #e9ecef);
|
||||
border-color: var(--btn-border-color);
|
||||
}
|
||||
|
||||
.post img {
|
||||
|
|
@ -40,7 +41,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
|
||||
.post-tail-wrapper {
|
||||
margin-top: 5rem;
|
||||
border-bottom: 1px double var(--main-border, #e9ecef);
|
||||
border-bottom: 1px double var(--main-border-color);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +51,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
|
||||
.btn {
|
||||
@include btn-post-nav;
|
||||
color: var(--link-color, #2a408e);
|
||||
color: var(--link-color);
|
||||
&:hover {
|
||||
background: #2a408e;
|
||||
color: #fff;
|
||||
|
|
@ -80,7 +81,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
|
||||
a, span {
|
||||
&::before {
|
||||
color: var(--text-muted-color, gray);
|
||||
color: var(--text-muted-color);
|
||||
font-size: .65rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -149,14 +150,14 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
.card {
|
||||
border: 1px solid var(--main-wrapper-bg, #f1f1f1);
|
||||
border: 1px solid var(--card-border-color);
|
||||
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;
|
||||
-moz-transition: all .3s ease-in-out;
|
||||
transition: all .3s ease-in-out;
|
||||
h3 {
|
||||
color: var(--relate-post-title, #353a3d);
|
||||
color: var(--label-relate-post);
|
||||
}
|
||||
&:hover {
|
||||
-webkit-transform: translate3d(0, -3px, 0);
|
||||
|
|
@ -166,7 +167,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
}
|
||||
|
||||
.timeago {
|
||||
color: var(--text-muted-color, rgba(30, 55, 70, .4));
|
||||
color: var(--relate-post-date);
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -208,18 +209,24 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
%btn-share-hovor {
|
||||
color: var(--btn-share-hover-color)!important;
|
||||
}
|
||||
|
||||
.share-wrapper {
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
|
||||
a:hover,
|
||||
i:hover {
|
||||
@include btn-sharing-color(#2a408e, true);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.share-icon {
|
||||
font-size: 1.2rem;
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
>i {
|
||||
@extend %btn-share-hovor;
|
||||
}
|
||||
}
|
||||
i:hover {
|
||||
@extend %btn-share-hovor;
|
||||
}
|
||||
.fab {
|
||||
&.fa-twitter {
|
||||
@include btn-sharing-color(rgba(29, 161, 242, 1.00));
|
||||
|
|
|
|||
|
|
@ -8,77 +8,38 @@
|
|||
* 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 --*/
|
||||
|
||||
%highlight-pre-bg {
|
||||
background: var(--highlight-pre-bg, #f7f7f7)
|
||||
background: var(--highlight-bg-color);
|
||||
}
|
||||
|
||||
%code-snippet-radius {
|
||||
|
|
@ -86,29 +47,28 @@
|
|||
}
|
||||
|
||||
.highlighter-rouge {
|
||||
@extend %highlight-pre-bg;
|
||||
background: var(--highlight-bg-color);
|
||||
@extend %code-snippet-radius;
|
||||
color: var(--highlighter-rouge, black);
|
||||
color: var(--highlighter-rouge-color);
|
||||
margin-bottom: 1.2em; /* Override BS Inline-code style */
|
||||
}
|
||||
|
||||
.highlight {
|
||||
@extend %code-snippet-radius;
|
||||
@at-root div#{&} {
|
||||
@extend %highlight-pre-bg;
|
||||
}
|
||||
background: var(--highlight-bg-color);
|
||||
|
||||
@at-root figure#{&} {
|
||||
@extend %highlight-pre-bg;
|
||||
background: var(--highlight-bg-color);
|
||||
}
|
||||
overflow: auto;
|
||||
@include box-shadow(inset 0 0 2px #c2c6cc);
|
||||
@include highlight-box-shadow(inset 0 0 2px #c2c6cc);
|
||||
.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);
|
||||
color: var(--highlight-lineno-color);
|
||||
border-right: 1px solid var(--highlight-lineno-border-color);
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
|
@ -136,7 +96,7 @@
|
|||
/* Fixed Safari overflow-x */
|
||||
}
|
||||
|
||||
} // .highlight
|
||||
} //.highlight
|
||||
|
||||
code {
|
||||
-webkit-hyphens: none;
|
||||
|
|
@ -147,7 +107,7 @@ code {
|
|||
padding: 2px 4px;
|
||||
margin: 0 .3rem;
|
||||
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 */
|
||||
div[class^='highlighter-rouge'] pre.lineno,
|
||||
div.language-console.highlighter-rouge pre.lineno,
|
||||
div.language-terminal.highlighter-rouge pre.lineno {
|
||||
display: none;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
html[mode=dark] {
|
||||
@include dark-syntax-scheme;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html:not([mode]), html[mode=dark] {
|
||||
@include dark-syntax-scheme;
|
||||
div {
|
||||
&[class^='highlighter-rouge'],
|
||||
&.language-console.highlighter-rouge,
|
||||
&.language-terminal.highlighter-rouge {
|
||||
pre.lineno {
|
||||
display: none;
|
||||
}
|
||||
td.rouge-code {
|
||||
padding: .8rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
margin-right: .8rem;
|
||||
line-height: 3rem;
|
||||
letter-spacing: 0;
|
||||
border: 1px solid var(--tag-border, #dee2e6) !important;
|
||||
box-shadow: 0 0 3px 0 var(--tag-shadow, #e9ecef);
|
||||
border: 1px solid var(--tag-border) !important;
|
||||
box-shadow: 0 0 3px 0 var(--tag-shadow);
|
||||
span {
|
||||
margin-left: 0.6em;
|
||||
font-size: 0.7em;
|
||||
|
|
|
|||
Loading…
Reference in a new issue