diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss index f63c119..afffc45 100644 --- a/_sass/colors/dark-syntax.scss +++ b/_sass/colors/dark-syntax.scss @@ -3,89 +3,286 @@ */ @mixin dark-syntax { - --highlight-bg-color: #252525; - --highlighter-rouge-color: #de6b18; - --highlight-lineno-color: #6c6c6d; - --inline-code-bg: #272822; - --code-header-text-color: #6a6a6a; - --code-header-muted-color: rgb(60, 60, 60); - --code-header-icon-color: rgb(86, 86, 86); - --clipboard-checked-color: #2bcc2b; - --filepath-text-color: #FFFFFF; + --highlight-bg-color: #252525; + --highlighter-rouge-color: #de6b18; + --highlight-lineno-color: #6c6c6d; + --inline-code-bg: #272822; + --code-header-text-color: #6a6a6a; + --code-header-muted-color: rgb(60, 60, 60); + --code-header-icon-color: rgb(86, 86, 86); + --clipboard-checked-color: #2bcc2b; + --filepath-text-color: #FFFFFF; - pre { color: #FFFFFF; } /* override Bootstrap */ + pre { + color: #FFFFFF; + } + /* override Bootstrap */ - .highlight { - .gp { color: #FFFFFF; } - } + .highlight { + .gp { + color: #FFFFFF; + } + } strong { - color: #088A4B; + color: #F6db7F; } - /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */ + /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */ - .highlight pre { background-color: var(--highlight-bg-color); } - .highlight .hll { background-color: var(--highlight-bg-color); } - .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: #FFFFFF; } /* Name */ - .highlight .o { color: #f92672; } /* Operator */ - .highlight .p { color: #FFFFFF; } /* 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 { color: inherit; font-style: italic; } /* Generic.Emph */ - .highlight .gs { color: #F6db7F; 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: #FFFFFF; } /* Name.Builtin */ - .highlight .nc { color: #a6e22e; } /* Name.Class */ - .highlight .no { color: #66d9ef; } /* Name.Constant */ - .highlight .nd { color: #a6e22e; } /* Name.Decorator */ - .highlight .ni { color: #FFFFFF; } /* Name.Entity */ - .highlight .ne { color: #a6e22e; } /* Name.Exception */ - .highlight .nf { color: #a6e22e; } /* Name.Function */ - .highlight .nl { color: #FFFFFF; } /* Name.Label */ - .highlight .nn { color: #FFFFFF; } /* Name.Namespace */ - .highlight .nx { color: #a6e22e; } /* Name.Other */ - .highlight .py { color: #FFFFFF; } /* Name.Property */ - .highlight .nt { color: #f92672; } /* Name.Tag */ - .highlight .nv { color: #FFFFFF; } /* Name.Variable */ - .highlight .ow { color: #f92672; } /* Operator.Word */ - .highlight .w { color: #FFFFFF; } /* 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: #FFFFFF; } /* Name.Builtin.Pseudo */ - .highlight .vc { color: #FFFFFF; } /* Name.Variable.Class */ - .highlight .vg { color: #FFFFFF; } /* Name.Variable.Global */ - .highlight .vi { color: #FFFFFF; } /* Name.Variable.Instance */ - .highlight .il { color: #ae81ff; } /* Literal.Number.Integer.Long */ - .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ - .highlight .gd { color: #f92672; background-color: #561c08; } /* Generic.Deleted & Diff Deleted */ - .highlight .gi { color: #a6e22e; background-color: #0b5858; } /* Generic.Inserted & Diff Inserted */ + .highlight pre { + background-color: var(--highlight-bg-color); + } + .highlight .hll { + background-color: var(--highlight-bg-color); + } + .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: #FFFFFF; + } + /* Name */ + .highlight .o { + color: #f92672; + } + /* Operator */ + .highlight .p { + color: #FFFFFF; + } + /* 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 { + color: inherit; + font-style: italic; + } + /* Generic.Emph */ + .highlight .gs { + color: #F6db7F; + 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: #FFFFFF; + } + /* Name.Builtin */ + .highlight .nc { + color: #a6e22e; + } + /* Name.Class */ + .highlight .no { + color: #66d9ef; + } + /* Name.Constant */ + .highlight .nd { + color: #a6e22e; + } + /* Name.Decorator */ + .highlight .ni { + color: #FFFFFF; + } + /* Name.Entity */ + .highlight .ne { + color: #a6e22e; + } + /* Name.Exception */ + .highlight .nf { + color: #a6e22e; + } + /* Name.Function */ + .highlight .nl { + color: #FFFFFF; + } + /* Name.Label */ + .highlight .nn { + color: #FFFFFF; + } + /* Name.Namespace */ + .highlight .nx { + color: #a6e22e; + } + /* Name.Other */ + .highlight .py { + color: #FFFFFF; + } + /* Name.Property */ + .highlight .nt { + color: #f92672; + } + /* Name.Tag */ + .highlight .nv { + color: #FFFFFF; + } + /* Name.Variable */ + .highlight .ow { + color: #f92672; + } + /* Operator.Word */ + .highlight .w { + color: #FFFFFF; + } + /* 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: #FFFFFF; + } + /* Name.Builtin.Pseudo */ + .highlight .vc { + color: #FFFFFF; + } + /* Name.Variable.Class */ + .highlight .vg { + color: #FFFFFF; + } + /* Name.Variable.Global */ + .highlight .vi { + color: #FFFFFF; + } + /* Name.Variable.Instance */ + .highlight .il { + color: #ae81ff; + } + /* Literal.Number.Integer.Long */ + .highlight .gu { + color: #75715e; + } + /* Generic.Subheading & Diff Unified/Comment? */ + .highlight .gd { + color: #f92672; + background-color: #561c08; + } + /* Generic.Deleted & Diff Deleted */ + .highlight .gi { + color: #a6e22e; + background-color: #0b5858; + } + /* Generic.Inserted & Diff Inserted */ } diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index e895a8f..e431559 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -3,155 +3,156 @@ */ @mixin dark-scheme { - /* Framework color */ - --body-bg: var(--main-bg); - --mask-bg: rgb(68, 69, 70); - --main-bg: rgb(27, 27, 30); - --main-border-color: rgb(44, 45, 45); - - /* Common color */ - --text-color: #FFFFFF ; - --text-muted-color: rgb(107, 116, 124); - --heading-color: #F5FFFA; - --blockquote-border-color: rgb(66, 66, 66); - --blockquote-text-color: rgb(117, 117, 117); - --link-color: rgb(138, 180, 248); - --link-underline-color: rgb(82, 108, 150); - --button-bg: rgb(39, 40, 43); - --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-bg); - --card-header-bg: rgb(51, 50, 50); - --label-color: rgb(108, 117, 125); - --checkbox-color: rgb(118, 120, 121); - --checkbox-checked-color: var(--link-color); - - /* Sidebar */ - --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); - --sidebar-muted-color: #6d6c6b; - --sidebar-active-color: rgb(255, 255, 255, 0.8); - --nav-cursor-color: rgb(183, 182, 182); - --sidebar-btn-bg: rgb(117, 116, 116, 0.2); - - /* Topbar */ - --topbar-text-color: var(--text-color); - --topbar-wrapper-bg: rgb(39, 40, 43); - --search-wrapper-bg: rgb(34, 34, 39); - --search-wrapper-border-color: rgb(34, 34, 39); - --search-icon-color: rgb(100, 102, 105); - --input-focus-border-color: rgb(112, 114, 115); - - /* Home page */ - --post-list-text-color: rgb(175, 176, 177); - --btn-patinator-text-color: var(--text-color); - --btn-paginator-hover-color: rgb(64, 65, 66); - --btn-paginator-border-color: var(--btn-border-color); - --btn-text-color: var(--text-color); - --pin-bg: rgb(34, 35, 37); - --pin-color: inherit; - - /* Posts */ - --toc-highlight: rgb(116, 178, 243); - --tag-bg: rgb(41, 40, 40); - --tag-hover: rgb(43, 56, 62); - --tb-odd-bg: rgba(42, 47, 53, 0.52); /* odd rows of the posts' table */ - --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */ - --tb-border-color: var(--tb-odd-bg); - --footnote-target-bg: rgb(63, 81, 181); - --btn-share-color: #6c757d; - --btn-share-hover-color: #bfc1ca; - --relate-post-date: var(--text-muted-color); - --card-bg: rgb(39, 40, 43); - --card-border-color: rgb(53, 53, 60); - --card-box-shadow: var(--main-bg); - --preview-img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%); - --kbd-wrap-color: #6a6a6a; - --kbd-text-color: #d3d3d3; - --kbd-bg-color: #242424; - --prompt-text-color: rgb(216, 212, 212, 0.75); - --prompt-tip-bg: rgba(77, 187, 95, 0.2); - --prompt-tip-icon-color: rgb(5, 223, 5, 0.68); - --prompt-info-bg: rgb(7, 59, 104, 0.8); - --prompt-info-icon-color: #0075d1; - --prompt-warning-bg: rgb(90, 69, 3, 0.95); - --prompt-warning-icon-color: rgb(255, 165, 0, 0.8); - --prompt-danger-bg: rgb(86, 28, 8, 0.8); - --prompt-danger-icon-color: #cd0202; - - /* 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); - --categories-icon-hover-color: white; - - /* archives */ - --timeline-node-bg: rgb(150, 152, 156); - --timeline-color: rgb(63, 65, 68); - --timeline-year-dot-color: var(--timeline-color); - - .post img[data-src] { - -webkit-filter: brightness(95%); - filter: brightness(95%); - } - - hr { - border-color: var(--main-border-color); - } - - /* 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 { - color: var(--toc-highlight) !important; - border-left-color: var(--toc-highlight) !important; - } - - /* categories */ - .categories.card, - .list-group-item { - background-color: var(--card-bg); - } - - .categories { - .card-header { - background-color: var(--card-header-bg); + /* Framework color */ + --body-bg: var(--main-bg); + --mask-bg: rgb(68, 69, 70); + --main-bg: rgb(27, 27, 30); + --main-border-color: rgb(44, 45, 45); + + /* Common color */ + --text-color: #FFFFFF; + --text-muted-color: rgb(107, 116, 124); + --heading-color: #F5FFFA; + --blockquote-border-color: rgb(66, 66, 66); + --blockquote-text-color: rgb(117, 117, 117); + --link-color: rgb(138, 180, 248); + --link-underline-color: rgb(82, 108, 150); + --button-bg: rgb(39, 40, 43); + --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-bg); + --card-header-bg: rgb(51, 50, 50); + --label-color: rgb(108, 117, 125); + --checkbox-color: rgb(118, 120, 121); + --checkbox-checked-color: var(--link-color); + + /* Sidebar */ + --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); + --sidebar-muted-color: #6d6c6b; + --sidebar-active-color: rgb(255, 255, 255, 0.8); + --nav-cursor-color: rgb(183, 182, 182); + --sidebar-btn-bg: rgb(117, 116, 116, 0.2); + + /* Topbar */ + --topbar-text-color: var(--text-color); + --topbar-wrapper-bg: rgb(39, 40, 43); + --search-wrapper-bg: rgb(34, 34, 39); + --search-wrapper-border-color: rgb(34, 34, 39); + --search-icon-color: rgb(100, 102, 105); + --input-focus-border-color: rgb(112, 114, 115); + + /* Home page */ + --post-list-text-color: rgb(175, 176, 177); + --btn-patinator-text-color: var(--text-color); + --btn-paginator-hover-color: rgb(64, 65, 66); + --btn-paginator-border-color: var(--btn-border-color); + --btn-text-color: var(--text-color); + --pin-bg: rgb(34, 35, 37); + --pin-color: inherit; + + /* Posts */ + --toc-highlight: rgb(116, 178, 243); + --tag-bg: rgb(41, 40, 40); + --tag-hover: rgb(43, 56, 62); + --tb-odd-bg: rgba(42, 47, 53, 0.52); /* odd rows of the posts' table */ + --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */ + --tb-border-color: var(--tb-odd-bg); + --footnote-target-bg: rgb(63, 81, 181); + --btn-share-color: #6c757d; + --btn-share-hover-color: #bfc1ca; + --relate-post-date: var(--text-muted-color); + --card-bg: rgb(39, 40, 43); + --card-border-color: rgb(53, 53, 60); + --card-box-shadow: var(--main-bg); + --preview-img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%); + --kbd-wrap-color: #6a6a6a; + --kbd-text-color: #d3d3d3; + --kbd-bg-color: #242424; + --prompt-text-color: rgb(216, 212, 212, 0.75); + --prompt-tip-bg: rgba(77, 187, 95, 0.2); + --prompt-tip-icon-color: rgb(5, 223, 5, 0.68); + --prompt-info-bg: rgb(7, 59, 104, 0.8); + --prompt-info-icon-color: #0075d1; + --prompt-warning-bg: rgb(90, 69, 3, 0.95); + --prompt-warning-icon-color: rgb(255, 165, 0, 0.8); + --prompt-danger-bg: rgb(86, 28, 8, 0.8); + --prompt-danger-icon-color: #cd0202; + + /* 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); + --categories-icon-hover-color: white; + + /* archives */ + --timeline-node-bg: rgb(150, 152, 156); + --timeline-color: rgb(63, 65, 68); + --timeline-year-dot-color: var(--timeline-color); + + .post img[data-src] { + -webkit-filter: brightness(95%); + filter: brightness(95%); } + hr { + border-color: var(--main-border-color); + } + + /* 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 { + color: var(--toc-highlight) !important; + border-left-color: var(--toc-highlight) !important; + } + + /* categories */ + .categories.card, .list-group-item { - border-left: none; - border-right: none; - padding-left: 2rem; - border-color: var(--categories-border); - - &:last-child { - border-bottom-color: var(--card-bg); - } + background-color: var(--card-bg); + } + + .categories { + .card-header { + background-color: var(--card-header-bg); + } + + .list-group-item { + border-left: none; + border-right: none; + padding-left: 2rem; + 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) - ); - } - - color-scheme: dark; - - #disqus_thread { /* stylelint-disable-line selector-id-pattern */ - color-scheme: none; - } -} /* dark-scheme */ + + #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) + ); + } + + color-scheme: dark; + + #disqus_thread { /* stylelint-disable-line selector-id-pattern */ + color-scheme: none; + } +} + +/* dark-scheme */