From e12f35a1b4ec2a7536353f628e071efea2bea42c Mon Sep 17 00:00:00 2001 From: Matt-wzy Date: Tue, 3 Jan 2023 23:36:08 +0800 Subject: [PATCH 1/3] 1.add dark mode with auto detect 2.add a back to top button @sulibo 3.link jump to the next page rather than inside the current page 4.add hitokoto at the bottom of the website 5.add Aplayer and meeting js 6.upgrade open color to version 1.9.1 --- _includes/head.html | 61 +++ _includes/nav.html | 2 + _layouts/default.html | 12 +- _sass/_highlights.scss | 234 +++++--- _sass/_open-color.scss | 25 +- _sass/_variables.scss | 23 + assets/js/back-to-top.js | 16 + images/moon.ico | Bin 0 -> 67646 bytes images/sun.ico | Bin 0 -> 67646 bytes style.scss | 1104 ++++++++++++++++++++++++++++---------- 10 files changed, 1103 insertions(+), 374 deletions(-) create mode 100644 assets/js/back-to-top.js create mode 100644 images/moon.ico create mode 100644 images/sun.ico diff --git a/_includes/head.html b/_includes/head.html index 8d75326d3..d21e97f20 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -16,6 +16,17 @@ + + + + + + + + + + + + + + diff --git a/_includes/nav.html b/_includes/nav.html index 5b8c13943..736bd15c2 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -24,6 +24,8 @@

{{ site.name }}

{% include footer.html %} + +

:D 获取中...

\ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 4fa06c5ac..dcbef7dde 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,7 +1,7 @@ {% include head.html %} - + {% include nav.html %} {% if page.toc==true %} @@ -17,6 +17,14 @@ {% include analytics.html %} + + + + + {% if page.toc==true %} @@ -28,6 +36,8 @@
{% include footer.html %} + +

:D 获取中...

diff --git a/_sass/_highlights.scss b/_sass/_highlights.scss index dfaa3168d..e657f07dc 100644 --- a/_sass/_highlights.scss +++ b/_sass/_highlights.scss @@ -2,81 +2,163 @@ pre, code { font-family: $code-font; } -code.highlighter-rouge { - font-size: 90%; - color: $oc-indigo-9; - background-color: $oc-gray-1; - padding: .1em .2em; - border-radius: 3px; -} + code.highlighter-rouge { + font-size: 90%; + color: $oc-indigo-9; + background-color: $oc-gray-1; + padding: .1em .2em; + border-radius: 3px; + } -pre.highlight { - font-size: $small-font-size; - padding: .45em .45em .45em .625em; - border: 1px solid $oc-gray-3; - border-radius: 3px; - margin: 1em 0; - overflow: auto; - -webkit-overflow-scrolling: touch; -} + pre.highlight { + font-size: $small-font-size; + padding: .45em .45em .45em .625em; + border: 1px solid $oc-gray-3; + border-radius: 3px; + margin: 1em 0; + overflow: auto; + -webkit-overflow-scrolling: touch; + } + + .highlight { background: $oc-gray-0; } + .highlight .c { color: #999988; font-style: italic } /* Comment */ + .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ + .highlight .k { font-weight: bold } /* Keyword */ + .highlight .o { font-weight: bold } /* Operator */ + .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ + .highlight .cp { color: #999999; font-weight: bold } /* 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 .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ + .highlight .ge { 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 .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ + .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 { font-weight: bold } /* Keyword.Constant */ + .highlight .kd { font-weight: bold } /* Keyword.Declaration */ + .highlight .kp { font-weight: bold } /* Keyword.Pseudo */ + .highlight .kr { font-weight: bold } /* Keyword.Reserved */ + .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ + .highlight .m { color: #009999 } /* Literal.Number */ + .highlight .s { color: #d14 } /* 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 .ni { color: #800080 } /* Name.Entity */ + .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ + .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ + .highlight .nn { color: #555555 } /* Name.Namespace */ + .highlight .nt { color: #000080 } /* Name.Tag */ + .highlight .nv { color: #008080 } /* Name.Variable */ + .highlight .ow { 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: #d14 } /* Literal.String.Backtick */ + .highlight .sc { color: #d14 } /* Literal.String.Char */ + .highlight .sd { color: #d14 } /* Literal.String.Doc */ + .highlight .s2 { color: #d14 } /* Literal.String.Double */ + .highlight .se { color: #d14 } /* Literal.String.Escape */ + .highlight .sh { color: #d14 } /* Literal.String.Heredoc */ + .highlight .si { color: #d14 } /* Literal.String.Interpol */ + .highlight .sx { color: #d14 } /* Literal.String.Other */ + .highlight .sr { color: #009926 } /* Literal.String.Regex */ + .highlight .s1 { color: #d14 } /* 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 */ + +.dark-mode{ + + code.highlighter-rouge { + font-size: 90%; + color: $oc-indigo-2; + background-color: $oc-gray-8; + padding: .1em .2em; + border-radius: 3px; + } + + pre.highlight { + font-size: $small-font-size; + padding: .45em .45em .45em .625em; + border: 1px solid $oc-gray-6; + border-radius: 3px; + margin: 1em 0; + overflow: auto; + -webkit-overflow-scrolling: touch; + } -.highlight { background: $oc-gray-0; } -.highlight .c { color: #999988; font-style: italic } /* Comment */ -.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ -.highlight .k { font-weight: bold } /* Keyword */ -.highlight .o { font-weight: bold } /* Operator */ -.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #999999; font-weight: bold } /* 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 .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ -.highlight .ge { 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 .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ -.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 { font-weight: bold } /* Keyword.Constant */ -.highlight .kd { font-weight: bold } /* Keyword.Declaration */ -.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ -.highlight .kr { font-weight: bold } /* Keyword.Reserved */ -.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ -.highlight .m { color: #009999 } /* Literal.Number */ -.highlight .s { color: #d14 } /* 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 .ni { color: #800080 } /* Name.Entity */ -.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ -.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ -.highlight .nn { color: #555555 } /* Name.Namespace */ -.highlight .nt { color: #000080 } /* Name.Tag */ -.highlight .nv { color: #008080 } /* Name.Variable */ -.highlight .ow { 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: #d14 } /* Literal.String.Backtick */ -.highlight .sc { color: #d14 } /* Literal.String.Char */ -.highlight .sd { color: #d14 } /* Literal.String.Doc */ -.highlight .s2 { color: #d14 } /* Literal.String.Double */ -.highlight .se { color: #d14 } /* Literal.String.Escape */ -.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ -.highlight .si { color: #d14 } /* Literal.String.Interpol */ -.highlight .sx { color: #d14 } /* Literal.String.Other */ -.highlight .sr { color: #009926 } /* Literal.String.Regex */ -.highlight .s1 { color: #d14 } /* 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 */ \ No newline at end of file + .highlight { background: $oc-gray-7; } + .highlight .c { color: #9999884f; font-style: italic } /* Comment */ + .highlight .err { color: #f3ccccf6; background-color: #675555 } /* Error */ + .highlight .k { font-weight: bold } /* Keyword */ + .highlight .o { font-weight: bold } /* Operator */ + .highlight .cm { color: #9999884f; font-style: italic } /* Comment.Multiline */ + .highlight .cp { color: #9999884f; font-weight: bold } /* Comment.Preproc */ + .highlight .c1 { color: #d1d18664; font-style: italic } /* Comment.Single */ + .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ + .highlight .gd { color: #969696; background-color: #a38a8a } /* Generic.Deleted */ + .highlight .gd .x { color: #ffffff; background-color: #a26c6c } /* Generic.Deleted.Specific */ + .highlight .ge { font-style: italic } /* Generic.Emph */ + .highlight .gr { color: #470101 } /* Generic.Error */ + .highlight .gh { color: #999999 } /* Generic.Heading */ + .highlight .gi { color: #ffffff; background-color: #88a188 } /* Generic.Inserted */ + .highlight .gi .x { color: #ffffff; background-color: #8ddb8d } /* Generic.Inserted.Specific */ + .highlight .go { color: #c4c4c4 } /* Generic.Output */ + .highlight .gp { color: #888888 } /* Generic.Prompt */ + .highlight .gs { font-weight: bold } /* Generic.Strong */ + .highlight .gu { color: #d7d5d5 } /* Generic.Subheading */ + .highlight .gt { color: #6c0000 } /* Generic.Traceback */ + .highlight .kc { font-weight: bold } /* Keyword.Constant */ + .highlight .kd { font-weight: bold } /* Keyword.Declaration */ + .highlight .kp { font-weight: bold } /* Keyword.Pseudo */ + .highlight .kr { font-weight: bold } /* Keyword.Reserved */ + .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ + .highlight .m { color: #009999 } /* Literal.Number */ + .highlight .s { color: #d14 } /* Literal.String */ + .highlight .na { color: #008080 } /* Name.Attribute */ + .highlight .nb { color: #0086B3 } /* Name.Builtin */ + .highlight .nc { color: #558ca4; font-weight: bold } /* Name.Class */ + .highlight .no { color: #008080 } /* Name.Constant */ + .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 .nn { color: #555555 } /* Name.Namespace */ + .highlight .nt { color: #7ce3f5a8 } /* Name.Tag */ + .highlight .nv { color: #008080 } /* Name.Variable */ + .highlight .ow { 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: #d14 } /* Literal.String.Backtick */ + .highlight .sc { color: #d14 } /* Literal.String.Char */ + .highlight .sd { color: #d14 } /* Literal.String.Doc */ + .highlight .s2 { color: #d14 } /* Literal.String.Double */ + .highlight .se { color: #d14 } /* Literal.String.Escape */ + .highlight .sh { color: #d14 } /* Literal.String.Heredoc */ + .highlight .si { color: #d14 } /* Literal.String.Interpol */ + .highlight .sx { color: #d14 } /* Literal.String.Other */ + .highlight .sr { color: #009926 } /* Literal.String.Regex */ + .highlight .s1 { color: #d14 } /* 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 */ +} \ No newline at end of file diff --git a/_sass/_open-color.scss b/_sass/_open-color.scss index e86bf4033..114f2c7bd 100644 --- a/_sass/_open-color.scss +++ b/_sass/_open-color.scss @@ -1,7 +1,8 @@ // +// // 𝗖 𝗢 𝗟 𝗢 𝗥 -// v 1.5.1 -// https://github.com/yeun/open-color/blob/master/open-color.scss +// v 1.9.1 +// // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -184,16 +185,16 @@ $oc-indigo-9: map-get($oc-indigo-list, "9"); // ─────────────────────────────────── $oc-blue-list: ( - "0": #e8f7ff, - "1": #ccedff, - "2": #a3daff, - "3": #72c3fc, - "4": #4dadf7, - "5": #329af0, - "6": #228ae6, - "7": #1c7cd6, - "8": #1b6ec2, - "9": #1862ab + "0": #e7f5ff, + "1": #d0ebff, + "2": #a5d8ff, + "3": #74c0fc, + "4": #4dabf7, + "5": #339af0, + "6": #228be6, + "7": #1c7ed6, + "8": #1971c2, + "9": #1864ab ); $oc-blue-0: map-get($oc-blue-list, "0"); diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 097cb44f6..46b949138 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -36,35 +36,58 @@ $small-font-size: 14px; $base-color: $oc-gray-8; $base-lighten-color: $oc-gray-6; $base-lightener-color: $oc-gray-4; +$base-color-dark: $oc-gray-1; +$base-lighten-color-dark: $oc-gray-2; +$base-lightener-color-dark: $oc-gray-8; +$page-background-color-dark:#303030; $background-color: $oc-gray-0; $background-lighten-color: hsla(210, 17%, 98%, 0.42); +$background-color-dark: $oc-gray-9; +$background-lighten-color-dark: hsl(0, 0%, 0%); $text-color: $base-color; $link-color: $oc-teal-8; $link-lighten-color: $oc-teal-6; $link-bghv-color: $oc-teal-0; $divider-color: $oc-gray-1; +$text-color-dark: $base-color-dark; +$link-color-dark: $oc-teal-3; +$link-lighten-color-dark: $oc-teal-4; +$divider-color-dark: $oc-gray-9; +$link-bghv-color-dark: $oc-teal-9; $error-color:$oc-red-8; +$error-color-dark:$oc-red-2; $table-border-color: $oc-gray-2; $table-background-color: $oc-gray-1; +$table-border-color-dark: $oc-gray-8; +$table-background-color-dark: $oc-gray-9; $blockquote-color: $base-lighten-color; $blockquote-border-color: $oc-gray-3; +$blockquote-color-dark: $base-lighten-color-dark; +$blockquote-border-color-dark: $oc-gray-7; $footnote-link-border-color: $oc-gray-1; $footnote-link-background-over-color: $oc-gray-1; +$footnote-link-border-color-dark: $oc-gray-9; +$footnote-link-background-over-color-dark: $oc-gray-9; // $selection-color: $oc-black; $selection-background-color: $oc-gray-3; +$selection-background-color-dark: $oc-gray-7; $tag-index-label-background-color: $oc-gray-2; $tag-index-count-background-color: hsla(210, 7%, 56%, 0.102); +$tag-index-label-background-color-dark: $oc-gray-7; +$tag-index-count-background-color-dark: hsla(210, 7%, 56%, 0.89); $footer-border-color: $oc-gray-2; $footer-background-color: $oc-gray-0; +$footer-border-color-dark: $oc-gray-7; +$footer-background-color-dark: $oc-gray-9; // List $li-bottom-space: 0.4em; diff --git a/assets/js/back-to-top.js b/assets/js/back-to-top.js new file mode 100644 index 000000000..a0e475bd4 --- /dev/null +++ b/assets/js/back-to-top.js @@ -0,0 +1,16 @@ +$(document).ready(function(){ + // move down 20px, show the back to top button + $(window).scroll(function(){ + if ($(window).scrollTop() > 20) { + $('#btn-top').fadeIn(500); + } else { + $('#btn-top').fadeOut(500); + } + }); + + // scroll back to top + $('#btn-top').click(function(){ + $('html, body').animate({scrollTop : 0}, 800); + return false; + }); +}); \ No newline at end of file diff --git a/images/moon.ico b/images/moon.ico new file mode 100644 index 0000000000000000000000000000000000000000..955ed52d9b7c15af0c0b0e42527d918b010de2f4 GIT binary patch literal 67646 zcmeI44YVCqd4}i4L=vD7enTOYB%pv;rBp-(%msx=LBi^fwjySUw1t)e3RINVT%rgR zl~k(KB25YrSX~NgSE+UhL4E`+Dq_&35HNrUh)^*|NRynt@9h2DyEC4@d+#~t&bgVL z_08Vjp8fNE@B8gNb7tly%LepsXeiThPPX6lfo#_-%l4C~%9VM&i!ROGCd(!0r9V!Q zg;OOjsblFh)y&BJlJ`pnCEH8V)X2uP zO;sKp0$$_Abv{RRe=fOE@}#65*IwHjqIiv4TxY4*-gTUJTlzY0)aPlPyGi1G=H-$! zVYg$VN~1%7b(CT^OGBJ0xkd7VB<0Zj{GY^J!E<`P6J^gqTzD>*({X)0`G({y$?r%= z^?c!6m2Zwf5i75uBP7>Je0@&wW__BMw7!>R&uu##59z$Wmi|S_F%s?>ioWSol_CN~ zYG|R~#75etowEC-HaHIcO0t#2Da9ewOztE5pS?8y z@02_wF_vI%%-X>=?bB+H@HN@L{Z~uAFZs5_&jc*K&iJ?88p*Q~-^(?c-?oh#0g9$`!ykr^+V+M-IA2Uc6o<`dhPvt@HWX668|ncR&tPJPl@;5mrCm4Y};l? zc9iTbdA;OqlJg~>lQ>3xB`L-Q`&7GojBQT$gD**+D{)Hk2{n`BXuSQr&dK*dmrLNz zSWqrvo9d1B2CwNGC1*$+Q(RwFY?*9Vy;!K%(d}kQj+QKud|l$_h^dY23u#@WGI8MZ zezs)$vBhyPS(5j7{5eu(_IlP$BYdbg@5R0SQPp{UFObyZ+c-MjEUYQp;d(^H%@Xy_ zu{j;X^~JP@Di%q+hSR;l+!k%dpJJZI|4Q|nCvo!J_2$e^_Q}E6gXc$8#`kuxDPp)z z{f+bS65lU6fsf~bYwGd_9X@z$=5mZUG2iYgpDwvaf}izbmvd=OJJ{M*qMxs-?{AH+H^LW&Ad;DbK}nx;}gzT_V{*;>4K7w_lR?Z3}Vm zN|kSr;J5K;wHCZry1m!W>m*KK8?6bEZBLOnl_>_`%XWQ2(vDBWwf*w%g7iM8pZ0l~KB|<)!OPV1R*CU4 z9&l{EDCt@`L+72!5(BLJkIAN1+^6?8tJVH6JED~05^5&z(d#AU&iA;i2l68S*3)Zc zSz-V`E|7h2U(a^z=bpyDjkcFKd5p=l*XK^Pap3;OO%InmCTRylV&pH}Q3(!$*1IF~ zIu^0J**z`ihN6k7|Gl%iTr;J6!EQ3`HVIfduP4TlYsDX_>;xA<>;94XJil$UJ@8w! znR@@OJ6__HUgL=akLl}x^(}2b;2P?0g_cWj_(5qnWseh2tXk z);afKmFGzglS@P>#xSzwGR(T^o(tdtsxLV?S#P>-KkxZAQ$+2L;p7dP5m(v*V znlLu-oZ>_o4*oeh&K}Zf92oacqD{<;9qs0h0mOTOee+nBMt-i*x#bc+1M@e6B(UoC zzQ=sM%JIwd4M~h`GrYm=B(-y54+&alj_`k#hHGU{yRlHOons@73-%0hzYn}dvOtnv zCv4wjiUY?0m|w1PGt9x}8MX8E)2Y)~V9RGUb~9V*aXQ{Q$3wb5;O_&f_w$oIBu-$~ zY2U->y+7I?eDU8CG{c=e;49Hg_w8hYe}5BaJN!43@Zj8Ho>;rKrzo7K{aE6{eH{xP zi~jy?d8OnP5~s-&2k`ITOZQ3aGhE|8xp8sX-xoV|@;X2~Ilonc9p;1iN1MB^eX-rn z&FN^yb9?utkMA9?mH5586LEm;p|<~ytUbR+_V+=?8J|3EKFM;JBNH z@oxa)&>TE1c~Ek%#NRF4F8O*Cm%k}-{5~wPeda2)JuMRx?Z$)swhinF9{WnkY>AUG z0K>eZ4-c&6lVrQG0{axVw0=eOvD1D#28e@sD!)OppTy7er%9S6_w(;mf7`K-DA(m8p8epr`SDs!dGht#&mq4df$NlG>WVr0 zhxdgKNt}!cc;*#-Z~%+Bveoy}_R~HU{Ut6=(mAJo^D|gIawHbgI6hLRS4!~RJ`?-Y zrMb@$2REs_qr}NE)=vq0&zI5m51)#@TK8|S$&}20aZm8`;BQOpZ>zn)YX!U>Q2A97 zCom0KxsR*?|L$5X!S9s+wC>pGPQUK~MON$&`=QIHNc?WuzPH*7hynjjJVxTwPceY4 zr^{~qE%MJbz|U)(z$$2y=V{ooIzKPs{RUh80y;^VS012?ZFr+$e6>^w&{+n0K= z&OW!qjw#V6Xp`^g_{PVbRK7t1Ht<}G0mlZ|ovE@DV+5_7NA`eOGLP$CG0yS%hlx-0 zE2meTu`1mQ&eo8|#R4A9V&JrBLO;X+*S%)n2@n%UM8D`0)k&MBd%@B2@)r{Jf+GLc zjT8F-&(6vo16BF2V!OWkieEygT|t{NfAxWPcXa4mZTWE^5500bbxn43zzMA?tZb^as1~ zgKOHOI=_v?iI@r6mUScs=E?2HB*qDhz|1-OsJ~4*SmH$Apq1l@O-IO_)b7+5%D*2? zF7tlY3shM%hiWpuJ%ewsa?alA`^K%JVP#u8*yHP3qh~?*@t)`d{zr9-%)sE?@;>D{ z<=Mfc2djF2WbgF1MLZj*cP{{bE2D|@>%GPGXN3Ph(`m;p_7cbVv|8uNdL66p zS@&zXfAYQ23ld|-ng_oWQ?8-(>%N7pXJ9=a6zxy#PW@S{^Sj64$`-?|z3g5K*3Snt zMap%GBWvg(weh`{Q&}*?j-6%Gvyzna)CZUO4N#`|m01&-z|V2Oa}@Ya@#FqrakQ4W znNZ_3Ire)WxL;zMi}rI(SfF!G75@PTj^Ob|RT#f|*8uALe&DxbN3f6Tgk@XUoyL+Ii<*0Lvv+K zqw6Spz*B1DcZyDB*aL_|zw1xqw8;O3xy4)Vd!Xok!weih+yKWE+YgoqOYFX&f!(bC z>KRZ&>hlw<AVxyi=b7<6alatQf0c{ z!O}VRSAOQ=G|_lsv)@aiYp|lcNAPL%Zh(03x+=rpSipa)^?z-I9RJG8z{Fa{Zvj6qgX?tvPuJLo zqN#8&5tcJ|tLy*rXk5jAYnIs4zow?t%vG*3;16WZRL88t>~YQme9WI zhV}6TVD#>YX_0@hb$(#SgGvaz4%fzONOgfWG0@FgC;5}oWdw%B)Kv=4i*kNxQ(ov*(CizJOAV?STm z0^c<{KO>IIo-vAP#@rPCKdup)#plg&hF-_#m>nxgNAQ{}dtQ(jWA@av?0sQhi4%Q- z*4-m>-KuG9PjUUTUu~)X55RcQXDv_DKtGBYv!@#G6!T-^Wb7GH?OKLyzV~bNjDmPr z6s=&t=$cWJaA5fS5BZkz4gajMvwDm%b{!S%D#m5HPw{^qvR_O>n!4r^Yo^gP7XClc zWB#%0qR2mX5SPTmYMrm{{l*?1;N0l_I(zIF;uNgQvClZVp7*G^Ifrlf$FA$*aJ{x` zbY7IVHMkuw6OApn7ID5ky3mU~mO1?W0rsT(eQM`>qFuysRI98_1mOR5YHwVNIJ53n z=^XcDSl21cTcvdxc6h@i#qqRI65&C)hcTf0dU)2?dz>I_+O**y?zGpEzN2E zvB6~vcKZK3a_V+GhFK=(5&rj-d-dJ}u-5z=Z2Jg7H}S@v*K02LF6Qh9=S6$iFQQsy zqd)*I{X6@Y5@QYLY1!x8#)&>b>+F&1(Wf-5=Z9-z0NY&eJpFde7NdZ{~lGIC!_#8~gY< znkVJjWd#1Y?`OY=rd8P}5rBWM|7Rq|8P3zP`S0d;AlTu*J9;46QM~WNuE%wLCy5jN zf>s?zivalTs*bI$|GUJ&=`-57nzd&gpQ=WVJJvbt-Z}RIOXEQFiE5RN0Ri^%z0|ka zJHT$<{}WH!%7#Yop;-I=&3{1j6WgO&Wn(}942>!KEm(WaQTK?--TM7Mn(Kb`ymt&F zH|fG2dZ^l@e7l_L_e&>MSg%cnZTl2s`QGA5iRVn?4?C!PLmU}fqFQBRL;(IzP=8}x zyzZj=8$l=d3flOO%zuT3syBaH$2+Ks`|;z>2<*LQMEtqOV%@?2mtqI_qW^eu#+o1J zW{op$y+)CD>z|Q0 z5i>!nj^jlDJX?MLb8eidQ~Wc|B^tM0+_{eZz`s5AjPnyWQLVCZAOM!$Pkn!9%!_M~ z{onToPQ**l#&%?k1?ryi>~bpXJ!i*hh?%j?TJv>6$3)Y|OUllvkC#s{) z=o=-xXYlB8Jhrd*#ktb?f2H%UlsFNiL933PLV!K>SPcj#@Sbw9UguvPCmjnHaPPk{ z^xEdyp3X&?J>ldy-&o@V^XpN7)M!@}FtISx9xaWTF$7(w(4m+0XOzc`^Z6E-bSF5f0 zfdiM}%lS_v{wBkzo%QH(X~+8n);?pWIWgh;&jUP(61D}cI(8ZX_?fMNpOu)8;=MR~ z|G&h^TXEtsS@S!oe3QiEdYt0e@DKO?uJAC46JrFeI(7pAF#cN&ZZ3*zKaGbsM+2Ji z?{l0#T;+!)9)lQixhQbIPUrj%zzMs8Rvo*60Be714gMpEd4UT!LSLnGa6&&-4X5-v z@B92E68hGQDaPmA3u^EC4=3gcT6OFe0<6=MHG%nn3%GI4y8S>jqR0(=~t%UdY z9*-DE$E3`B&#B#;Bu>TgLv3~JGy<&Qtu*lWB<7^Z71wHi2R=vQ1kXj@{oL@=5;%2E zfA~&w;_7E=cd*2%;y&Qeiz8V7r6w~k@Ro8!-Br;b?-%e+{P@~&j)cF@av%DoV^MZY z!2S1C-do~?JwdCE-9!NHW@?g$B<7~L_EWxCpD$HA`uaPqQzWY;^f&L#*1YF{`x{l> zPU6IMC}`EO+X%4MF4RQk4o=|QIcwNFIl+-*=5HhqO5DzTyKSTRVNB0KZ2Y~-PQI3K zJ;^JoL)Q@i?^kQ4UrXQ+o>JYs{$8}`ca?u!!amN?Gb4k%IUt~Ym4tM zcwb=Nu|dTu^$-EBvwpvOkHmbn%PHJ8%GnpVW_a8cl6exRYRv~6Ci2L-^S2b{F};>I z;kZSG*gE@+J1+-DTP{5_8G^ZLZC+bqi}7zMcEs&rK4)CzvfslVgkV z)B37hE(BPcTmy>hI_29ja;L=4`i_(Myrzz8UuK=2B2yogI0nr1cO}RipHE(-dli-SH82Y7K#(6eL0`L#n)pBHq0dXp`c%$T27tkCM3zsSd{Df zEM`Y7x}j{~)z&u*W!duiwOdcfvMa2wAIzq1qiVI^-@1mMxlH-;p=?L%PwJt&^R;ub z8H<(QmksP>edF|O>PqD+vZ)KL*Y?S#EK>Fs?D$?j;ijcov~z8iU8H&DWXHO7ttP+T zu3-iTwhFph9w2jureyO&#hh%HT1__%uNVmWec9Hvnm_iC`A$z}1B-Kg>)bI}K6Pv|!COzAGu`4#t8CVqb>C3EdS~{>--aebMul3pq*^NQZF3t7pvxWKi zx=qdXRoMcaKUD+fNYoz5_N}e|UBf8VVkrN zaxOOny(X@9cK?lonX{S#CZAx_;M81KMC4F!S|0S;)dA|-oGFX*22TtHZkI+~oaWpv z6+liKXBz5S?e2m3&Pma*Tj{J;`<9`u39Mz#%)+$A%7*pzhT3E-(@|-o zp|-wAN2N{61$Cke+GWz$3(%0R7t{)YVf~K0G@=`7pAXC$S{uA^SP#&S=<9L^M)dVL zv>S%#zhThOkLUr~4MTx=8*FGt^Z@Oq;q$c<3~i$4P$&AuhBnc2s1yB;ft8z$pF^3< z7j^6n(2m#}pdIl~`oa{C0A+GMhjIkJ0Obh20m`C2!cTx|n9peXZ|cixG3Blf$A_Vq zmBdTb?;!r7J{*q?bmCcaG$*bP^uf*bjf2ypwP8HgpDS(u`k@_?^ZP35 z^Yxq8nX2cqy@$`6nx`_tCs45}tg^g~sklDdez?7<7|eq{R0(?RKZ}y{3$-=QAJ)b1 zy0EB1m7rfclrKW`ho8(w-0{-9FPk#l-FjTqq3*HlmbmDHe)quP`Tk3fy9W+R&8saP zn2{ys)s{|~mrYql>zdZb#o4s^!@AbboNVjGBl_Ufp|Giis*QvC(&yOW(}H?>+!RCI zx*=`b!@-|#`*BkZ=l$L|Y`Q`BwjQr5d4=_`X@~RLljEj7tWSS96!W9b&t1HkJ}@m& S1>e>q-0H+5+02#s`Tqy}9+1TV literal 0 HcmV?d00001 diff --git a/images/sun.ico b/images/sun.ico new file mode 100644 index 0000000000000000000000000000000000000000..9e2219f30d4545ab7a7bc214980a83854e5dffbf GIT binary patch literal 67646 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 literal 0 HcmV?d00001 diff --git a/style.scss b/style.scss index 45051dbbf..b620a8a22 100644 --- a/style.scss +++ b/style.scss @@ -24,7 +24,14 @@ body { color: $base-color; line-height: 1.7em; } +.dark-mode{ + font-family: $base-font; + color: $base-color-dark; + line-height: 1.7em; + background-color: $page-background-color-dark; + +} .container { margin: 0 auto; max-width: 1000px; @@ -61,34 +68,63 @@ h3 { font-size: 20px; } -h4 { - font-size: 20px; - color: $base-lighten-color; -} + h4 { + font-size: 20px; + color: $base-lighten-color; + } -h6 { - color: $base-lighten-color; -} + h6 { + color: $base-lighten-color; + } + p { + color: $text-color; + margin: 1em 0; + } + a { + color: $link-color; + text-decoration: none; + cursor: pointer; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + -o-transition: all 0.5s; + transition: all 0.5s; + + &:hover, &:active { + color: $link-lighten-color; + } + } +.dark-mode{ + h4 { + font-size: 20px; + color: $base-lighten-color-dark; + } -p { - color: $text-color; - margin: 1em 0; + h6 { + color: $base-lighten-color-dark; + } + p { + color: $text-color-dark; + margin: 1em 0; + } + a { + color: $link-color-dark; + text-decoration: none; + cursor: pointer; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + -o-transition: all 0.5s; + transition: all 0.5s; + + &:hover, &:active { + color: $link-lighten-color-dark; + } + } } -a { - color: $link-color; - text-decoration: none; - cursor: pointer; - -webkit-transition: all 0.5s; - -moz-transition: all 0.5s; - -ms-transition: all 0.5s; - -o-transition: all 0.5s; - transition: all 0.5s; - &:hover, &:active { - color: $link-lighten-color; - } -} + em, i { font-style: italic; @@ -108,12 +144,18 @@ sup { font-size: smaller; } -hr { - border: 0; - border-top: 1px solid $divider-color; - margin: 1.5em auto; + hr { + border: 0; + border-top: 1px solid $divider-color; + margin: 1.5em auto; + } +.dark-mode{ + hr { + border: 0; + border-top: 1px solid $divider-color-dark; + margin: 1.5em auto; + } } - // Yeun's list style // https://gist.github.com/yeun/d824fc7b04b756508f4b0143535cec30 @@ -201,73 +243,146 @@ dd { } } -// Table -table { - margin-bottom: 1rem; - width: 100%; - border: 1px solid $table-border-color; - border-collapse: collapse; -} + // Table + table { + margin-bottom: 1rem; + width: 100%; + border: 1px solid $table-border-color; + border-collapse: collapse; + } -td, th { - padding: .25rem .5rem; - border: 1px solid $table-border-color; -} + td, th { + padding: .25rem .5rem; + border: 1px solid $table-border-color; + } -tbody tr:nth-child(odd) td, -tbody tr:nth-child(odd) th { - background-color: $table-background-color; -} + tbody tr:nth-child(odd) td, + tbody tr:nth-child(odd) th { + background-color: $table-background-color; + } -// Blockquote -blockquote { - font-weight: 300; - padding: 0 0 0 1.4rem; - margin: 0 2rem 1rem 0; - border-left: .2em solid $blockquote-border-color; + // Blockquote + blockquote { + font-weight: 300; + padding: 0 0 0 1.4rem; + margin: 0 2rem 1rem 0; + border-left: .2em solid $blockquote-border-color; - p { - color: $blockquote-color; + p { + color: $blockquote-color; + } + + p:last-child { + margin-bottom: 0; + } } - p:last-child { - margin-bottom: 0; + // Footnote + a.footnote { + &, + .post p &, + .post ol &, + .post ul & { + margin: 0 3px; + padding: 0 2px; + font-size: $small-font-size; + text-align: center; + border: 1px solid $footnote-link-border-color; + border-radius: 2px; + -webkit-text-stroke: 0.25px; + -webkit-transition: 0.2s ease-out all; + text-decoration: none; + + &:hover { + background: $footnote-link-background-over-color; + } + } } -} -// Footnote -a.footnote { - &, - .post p &, - .post ol &, - .post ul & { - margin: 0 3px; - padding: 0 2px; + .footnotes { + border-top: 1px solid $divider-color; font-size: $small-font-size; - text-align: center; - border: 1px solid $footnote-link-border-color; - border-radius: 2px; - -webkit-text-stroke: 0.25px; - -webkit-transition: 0.2s ease-out all; - text-decoration: none; + } +.dark-mode{ + // Table + table { + margin-bottom: 1rem; + width: 100%; + border: 1px solid $table-border-color-dark; + border-collapse: collapse; + } - &:hover { - background: $footnote-link-background-over-color; + td, th { + padding: .25rem .5rem; + border: 1px solid $table-border-color-dark; + } + + tbody tr:nth-child(odd) td, + tbody tr:nth-child(odd) th { + background-color: $table-background-color-dark; + } + + // Blockquote + blockquote { + font-weight: 300; + padding: 0 0 0 1.4rem; + margin: 0 2rem 1rem 0; + border-left: .2em solid $blockquote-border-color-dark; + + p { + color: $blockquote-color-dark; + } + + p:last-child { + margin-bottom: 0; } } -} -.footnotes { - border-top: 1px solid $divider-color; - font-size: $small-font-size; + // Footnote + a.footnote { + &, + .post p &, + .post ol &, + .post ul & { + margin: 0 3px; + padding: 0 2px; + font-size: $small-font-size; + text-align: center; + border: 1px solid $footnote-link-border-color-dark; + border-radius: 2px; + -webkit-text-stroke: 0.25px; + -webkit-transition: 0.2s ease-out all; + text-decoration: none; + + &:hover { + background: $footnote-link-background-over-color-dark; + } + } + } + + .footnotes { + border-top: 1px solid $divider-color-dark; + font-size: $small-font-size; + } } -// Image -img { - display: block; - max-width: 100%; - margin: 0 0 1em; - border-radius: 5px; + + // Image + img { + display: block; + max-width: 100%; + margin: 0 0 1em; + border-radius: 5px; + } +.dark-mode{ + // Image + img { + display: block; + max-width: 100%; + margin: 0 0 1em; + border-radius: 5px; + filter: brightness(.8); + } } // Fixes images in popup boxes from Google Translate @@ -275,14 +390,26 @@ img { max-width: none; } -// Specify the color of the selection -::-moz-selection { -// color: $selection-color; - background: $selection-background-color; -} -::selection { -// color: $selection-color; - background: $selection-background-color; + + // Specify the color of the selection + ::-moz-selection { + // color: $selection-color; + background: $selection-background-color; + } + ::selection { + // color: $selection-color; + background: $selection-background-color; + } +.dark-mode{ + // Specify the color of the selection + ::-moz-selection { + // color: $selection-color; + background: $selection-background-color-dark; + } + ::selection { + // color: $selection-color; + background: $selection-background-color-dark; + } } // Nicolas Gallagher's micro clearfix hack @@ -319,25 +446,51 @@ img { // .sidebar // -.wrapper-sidebar { - width: 30%; - -webkit-background-size: cover; - background-size: cover; - background-color: $background-color; - height: 100%; - top: 0; - left:0; - position: fixed; - z-index: 4; - border-right: 1px solid $divider-color; - @include mobile { - width: 100%; - height: auto; - padding-bottom: 24px; - position: relative; - border-bottom: 1px solid $divider-color; - border-right: 0; + .wrapper-sidebar { + width: 30%; + -webkit-background-size: cover; + background-size: cover; + background-color: $background-color; + height: 100%; + top: 0; + left:0; + position: fixed; + z-index: 4; + border-right: 1px solid $divider-color; + + @include mobile { + width: 100%; + height: auto; + padding-bottom: 24px; + position: relative; + border-bottom: 1px solid $divider-color; + border-right: 0; + } + } + + +.dark-mode{ + .wrapper-sidebar { + width: 30%; + -webkit-background-size: cover; + background-size: cover; + background-color: $background-color-dark; + height: 100%; + top: 0; + left:0; + position: fixed; + z-index: 4; + border-right: 1px solid $divider-color-dark; + + @include mobile { + width: 100%; + height: auto; + padding-bottom: 24px; + position: relative; + border-bottom: 1px solid $divider-color-dark; + border-right: 0; + } } } @@ -377,23 +530,46 @@ img { } } -.site-name { - margin: 0 auto; - color: $base-color; - cursor: pointer; - font-family: $base-font; - font-weight: 700; - font-size: 28px; - letter-spacing: 1px; -} -.site-description { - margin: 15px auto; - color: $base-lighten-color; - font-size: 16px; - @include mobile { - margin: 10px auto; + .site-name { + margin: 0 auto; + color: $base-color; + cursor: pointer; + font-family: $base-font; + font-weight: 700; + font-size: 28px; + letter-spacing: 1px; + } + + .site-description { + margin: 15px auto; + color: $base-lighten-color; + font-size: 16px; + + @include mobile { + margin: 10px auto; + } + } +.dark-mode{ + .site-name { + margin: 0 auto; + color: $base-color-dark; + cursor: pointer; + font-family: $base-font; + font-weight: 700; + font-size: 28px; + letter-spacing: 1px; + } + + .site-description { + margin: 15px auto; + color: $base-lighten-color-dark; + font-size: 16px; + + @include mobile { + margin: 10px auto; + } } } @@ -454,26 +630,50 @@ nav { li { display: inline; margin: 0; - - > a { - margin: 3px 3px 3px 0; - padding: .5px 4px; - color: $base-color; - background-color: $tag-index-label-background-color; - border-radius: 3px; - - &:hover { - color: $link-color; - background-color:$link-bghv-color; + + > a { + margin: 3px 3px 3px 0; + padding: .5px 4px; + color: $base-color; + background-color: $tag-index-label-background-color; + border-radius: 3px; + + &:hover { + color: $link-color; + background-color:$link-bghv-color; + } + } + } + .dark-mode{ + > a { + margin: 3px 3px 3px 0; + padding: .5px 4px; + color: $base-color-dark; + background-color: $tag-index-label-background-color-dark; + border-radius: 3px; + + &:hover { + color: $link-color-dark; + background-color:$link-bghv-color-dark; + } } } } } -} -.posts > .post { - padding-bottom: 2em; - border-bottom: 1px solid $divider-color; + + + + .posts > .post { + padding-bottom: 2em; + border-bottom: 1px solid $divider-color; + } +.dark-mode{ + + .posts > .post { + padding-bottom: 2em; + border-bottom: 1px solid $divider-color-dark; + } } .posts > .post:last-child { @@ -482,28 +682,50 @@ nav { } -.pinned .feather-anchor { - color: $base-lighten-color; - padding: 2px; - margin-right: 8px; -} + .pinned .feather-anchor { + color: $base-lighten-color; + padding: 2px; + margin-right: 8px; + } -.date { - font-weight: 300; - font-size: $small-font-size; - color: $base-lighten-color; - margin-right: 4px; -} -.author{ - font-weight:700; - font-size:$small-font-size; - color: $base-lighten-color; - margin-right: 4px; -} + .date { + font-weight: 300; + font-size: $small-font-size; + color: $base-lighten-color; + margin-right: 4px; + } + + .author{ + font-weight:700; + font-size:$small-font-size; + color: $base-lighten-color; + margin-right: 4px; + } +.dark-mode{ + .pinned .feather-anchor { + color: $base-lighten-color-dark; + padding: 2px; + margin-right: 8px; + } + .date { + font-weight: 300; + font-size: $small-font-size; + color: $base-lighten-color-dark; + margin-right: 4px; + } + + .author{ + font-weight:700; + font-size:$small-font-size; + color: $base-lighten-color-dark; + margin-right: 4px; + } +} + .post { h1 { @@ -564,195 +786,507 @@ nav { } } -// pagination -.pagination { - border-top: 1px solid $divider-color; - font-weight: 300; - padding: 40px 0; - width: 100%; - display: inline-block; - @include mobile { - font-size: $small-font-size; - padding: 24px 0; - } - > .prev { - float: left; - width: 50%; - a { - color: $base-lighten-color; - border: 1px solid $divider-color; - padding: 10px 20px; - background: $background-color; - - &:hover, &:focus { - color: $link-lighten-color; - border: 1px solid $link-lighten-color; - background-color: $link-bghv-color; + // pagination + .pagination { + border-top: 1px solid $divider-color; + font-weight: 300; + padding: 40px 0; + width: 100%; + display: inline-block; + + @include mobile { + font-size: $small-font-size; + padding: 24px 0; + } + + > .prev { + float: left; + width: 50%; + a { + color: $base-lighten-color; + border: 1px solid $divider-color; + padding: 10px 20px; + background: $background-color; + + &:hover, &:focus { + color: $link-lighten-color; + border: 1px solid $link-lighten-color; + background-color: $link-bghv-color; + } + } + } + + > .next { + float: right; + text-align: right; + width: 50%; + a { + color: $base-lighten-color; + border: 1px solid $divider-color; + padding: 10px 20px; + background: $background-color; + + &:hover, &:focus { + color: $link-lighten-color; + border: 1px solid $link-lighten-color; + background-color: $link-bghv-color; + } } } } - > .next { - float: right; - text-align: right; - width: 50%; + // Archive + .archive { a { + color: $base-color; + } + time { color: $base-lighten-color; - border: 1px solid $divider-color; - padding: 10px 20px; - background: $background-color; - - &:hover, &:focus { - color: $link-lighten-color; - border: 1px solid $link-lighten-color; - background-color: $link-bghv-color; + font-size: $small-font-size; + font-weight: 300; + margin-left: 3px; + } + } + + // Tags + .tags > .label { + > li:before { + content: ""; + } + + > li { + margin: 0; + font-size: $small-font-size; + font-weight: 300; + display: inline; + + > a { + display: inline-block; + margin: 1px; + color: $base-color; + background-color: $tag-index-label-background-color; + border-radius: 3px; + + &:hover { + background-color: $link-bghv-color; + } + + span { + float: left; + padding: .5px 5px; + + &.count { + background-color: $tag-index-count-background-color; + border-radius: 0 3px 3px 0; + + } + } } } } -} -// Archive -.archive { - a { - color: $base-color; + .tags > .tag { + a { + color: $base-color; + } + time { + color: $base-lighten-color; + font-size: $small-font-size; + font-weight: 300; + margin-left: 3px; + } } - time { - color: $base-lighten-color; - font-size: $small-font-size; +.dark-mode{ + // pagination + .pagination { + border-top: 1px solid $divider-color-dark; font-weight: 300; - margin-left: 3px; + padding: 40px 0; + width: 100%; + display: inline-block; + + @include mobile { + font-size: $small-font-size; + padding: 24px 0; + } + + > .prev { + float: left; + width: 50%; + a { + color: $base-lighten-color-dark; + border: 1px solid $divider-color-dark; + padding: 10px 20px; + background: $background-color-dark; + + &:hover, &:focus { + color: $link-lighten-color-dark; + border: 1px solid $link-lighten-color-dark; + background-color: $link-bghv-color-dark; + } + } + } + + > .next { + float: right; + text-align: right; + width: 50%; + a { + color: $base-lighten-color-dark; + border: 1px solid $divider-color-dark; + padding: 10px 20px; + background: $background-color-dark; + + &:hover, &:focus { + color: $link-lighten-color-dark; + border: 1px solid $link-lighten-color-dark; + background-color: $link-bghv-color-dark; + } + } + } } -} -// Tags -.tags > .label { - > li:before { - content: ""; + // Archive + .archive { + a { + color: $base-color-dark; + } + time { + color: $base-lighten-color-dark; + font-size: $small-font-size; + font-weight: 300; + margin-left: 3px; + } } - > li { - margin: 0; - font-size: $small-font-size; - font-weight: 300; - display: inline; + // Tags + .tags > .label { + > li:before { + content: ""; + } - > a { - display: inline-block; - margin: 1px; - color: $base-color; - background-color: $tag-index-label-background-color; - border-radius: 3px; + > li { + margin: 0; + font-size: $small-font-size; + font-weight: 300; + display: inline; - &:hover { - background-color: $link-bghv-color; - } + > a { + display: inline-block; + margin: 1px; + color: $base-color-dark; + background-color: $tag-index-label-background-color-dark; + border-radius: 3px; + + &:hover { + background-color: $link-bghv-color-dark; + } - span { - float: left; - padding: .5px 5px; + span { + float: left; + padding: .5px 5px; - &.count { - background-color: $tag-index-count-background-color; - border-radius: 0 3px 3px 0; + &.count { + background-color: $tag-index-count-background-color-dark; + border-radius: 0 3px 3px 0; + } } } } } -} -.tags > .tag { - a { - color: $base-color; - } - time { - color: $base-lighten-color; - font-size: $small-font-size; - font-weight: 300; - margin-left: 3px; + .tags > .tag { + a { + color: $base-color-dark; + } + time { + color: $base-lighten-color-dark; + font-size: $small-font-size; + font-weight: 300; + margin-left: 3px; + } } } -// Footer -.wrapper-footer-desktop { - margin-top: 50px; - border-top: 1px solid $footer-border-color; - background-color: $footer-background-color; - position: absolute; - clear:both; - width:100%; - bottom:0; - - @include mobile { + + // Footer + .wrapper-footer-desktop { + margin-top: 50px; + border-top: 1px solid $footer-border-color; + background-color: $footer-background-color; + position: absolute; + clear:both; + width:100%; + bottom:0; + + @include mobile { + display: none; + } + + } + + .wrapper-footer-mobile { display: none; + + @include mobile { + display: block; + width: 100%; + border-top: 1px solid $footer-border-color; + background-color: $footer-background-color; + } } -} + footer { + padding: 20px 0; + text-align: center; -.wrapper-footer-mobile { - display: none; - - @include mobile { - display: block; - width: 100%; - border-top: 1px solid $footer-border-color; - background-color: $footer-background-color; + p { + font-size: $small-font-size; + color: $base-lighten-color; + } + + .svg-icon { + display: block; + font-size: 0; + list-style: none; + margin: 0; + text-align: center; + + li { + display: inline-block; + margin: 10px; + } + + svg { + height: 20px; + width: 20px; + fill: $base-lighten-color; + + &:hover { + fill: $link-lighten-color; + } + } + + em { + font-size: 18px; + line-height: 1.5; + margin-top: -.75em; + position: absolute; + text-align: center; + top: 50%; + right: 0; + bottom: 0; + left: 0; + } + } } -} +.dark-mode{ + // Footer + .wrapper-footer-desktop { + margin-top: 50px; + border-top: 1px solid $footer-border-color-dark; + background-color: $footer-background-color-dark; + position: absolute; + clear:both; + width:100%; + bottom:0; + + @include mobile { + display: none; + } -footer { - padding: 20px 0; - text-align: center; + } - p { - font-size: $small-font-size; - color: $base-lighten-color; + .wrapper-footer-mobile { + display: none; + + @include mobile { + display: block; + width: 100%; + border-top: 1px solid $footer-border-color-dark; + background-color: $footer-background-color-dark; + } } - .svg-icon { - display: block; - font-size: 0; - list-style: none; - margin: 0; + footer { + padding: 20px 0; text-align: center; - li { - display: inline-block; - margin: 10px; + p { + font-size: $small-font-size; + color: $base-lighten-color-dark; } - svg { - height: 20px; - width: 20px; - fill: $base-lighten-color; - - &:hover { - fill: $link-lighten-color; + .svg-icon { + display: block; + font-size: 0; + list-style: none; + margin: 0; + text-align: center; + + li { + display: inline-block; + margin: 10px; + } + + svg { + height: 20px; + width: 20px; + fill: $base-lighten-color-dark; + + &:hover { + fill: $link-lighten-color-dark; + } + } + + em { + font-size: 18px; + line-height: 1.5; + margin-top: -.75em; + position: absolute; + text-align: center; + top: 50%; + right: 0; + bottom: 0; + left: 0; } } + } +} +.dark-mode{ + .aplayer-info{ + background-color: $background-color-dark; + color: $text-color-dark; + } + .aplayer .aplayer-lrc:before{ + height:0 !important; + } + .aplayer .aplayer-lrc:after{ + height:0 !important; + } + .aplayer .aplayer-list ol li.aplayer-list-light{background:#212529 !important;} + .aplayer .aplayer-list ol li:hover{background:#212529 !important;} + .aplayer{background:#212529 !important;} - em { - font-size: 18px; - line-height: 1.5; - margin-top: -.75em; - position: absolute; - text-align: center; - top: 50%; - right: 0; - bottom: 0; - left: 0; +} + +// Back to Top button +.btn-top { + display: none; /* hide the button at the beginning */ + position: fixed; /* Fixed/sticky position */ + bottom: 80px; /* Place the button at the bottom of the page */ + right: 30px; /* Place the button 30px from the right */ + z-index: 233; /* Make sure it does not overlap */ + border-width: 2px; + border-style: solid; + border-color: $link-color; + background-color: $link-color; + color: $white; + height: 40px; + width: 40px; + border-radius: 50%; /* make it round */ + text-align: center; + &:visited { + color: $white; + border-color: $link-color; + } + &:hover { + background-color: $white; + color: $link-color; + border-color: $link-color; + } + +} +.dark-mode{ + .btn-top { + border-color: $link-color-dark; + background-color: $link-color-dark; + color: $black; + + &:visited { + color: $black; + border-color: $link-color-dark; + } + &:hover { + background-color: $black; + color: $link-color-dark; + border-color: $link-color-dark; } + + } +} +.btn-dark { + position: fixed; /* 固定按钮位置 */ + bottom: 20px; /* 将按钮置于页面底部 */ + right: 30px; /* 将按钮置于页面右侧 */ + z-index: 99; /* 让按钮显示在其他内容的上面 */ + border-width: 2px; + border-style: solid; + border-color: $link-color; + background-color: $link-color; + height: 40px; + width: 40px; + border-radius: 50%; /* make it round */ + + + &:visited { + border-color: $link-color; + } + &:hover { + background-color: $white; + border-color: $link-color; + } +#dark-mode-button img { + width: 100%; + height: 100%; + filter: invert(100%); /* 反转图片的颜色 */ +} + +} +.dark-mode{ + .btn-dark { + border-color: $link-color-dark; + background-color: $link-color-dark; + color: $black; + &:visited { + color: $black; + border-color: $link-color-dark; + } + &:hover { + background-color: $black; + color: $link-color-dark; + border-color: $link-color-dark; + } } + #dark-mode-button img { + filter: none + } +} + +/* 隐藏月亮图标 */ +#moon-icon { + display: none; } +body.dark-mode #moon-icon { + display: inline-block; +} +body.dark-mode #sun-icon { + display: none; +} + + + // Settled on moving the import of syntax highlighting to the bottom of the CSS // ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start @import "highlights"; @import "gitalk"; +// @import "dark-Aplayer"; From d3a1d4a104f8476e2319f3a4d3febad2b34e03f1 Mon Sep 17 00:00:00 2001 From: Matt-wzy Date: Tue, 3 Jan 2023 23:38:39 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E9=85=8D=E7=BD=AE=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_config.yml b/_config.yml index 15d49d49e..47c45a1c8 100644 --- a/_config.yml +++ b/_config.yml @@ -16,7 +16,7 @@ url: # 添加你的博客的二级域名，一般来说是你的repository名 # 如果你的博客的URL是：(http://yourusername.github.io/repository-name) # 那么就写成 "/repository-name" -baseurl: /LOFFER +baseurl: /LOFFER_addDarkMode # From 1374dc0e0daec274c58157c188631d97ca599e4d Mon Sep 17 00:00:00 2001 From: Matt-wzy Date: Sat, 21 Jan 2023 10:43:25 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E9=97=AA=E7=83=81=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _includes/head.html | 2 +- _layouts/default.html | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index d21e97f20..b08642d88 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -84,7 +84,7 @@ } } - window.addEventListener('load', detectDarkMode); + // window.addEventListener('load', detectDarkMode); window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', detectDarkMode); diff --git a/_layouts/default.html b/_layouts/default.html index dcbef7dde..ba34a41a7 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,7 +1,10 @@ {% include head.html %} - + + {% include nav.html %} {% if page.toc==true %}