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 # diff --git a/_includes/head.html b/_includes/head.html index 8d75326d3..b08642d88 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 }}

\ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 4fa06c5ac..ba34a41a7 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -2,6 +2,9 @@ {% include head.html %} + {% include nav.html %} {% if page.toc==true %} @@ -17,6 +20,14 @@ {% include analytics.html %} + + + + + {% if page.toc==true %} @@ -28,6 +39,8 @@
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 000000000..955ed52d9 Binary files /dev/null and b/images/moon.ico differ diff --git a/images/sun.ico b/images/sun.ico new file mode 100644 index 000000000..9e2219f30 Binary files /dev/null and b/images/sun.ico differ 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";