From d0c216165e3e484e44ae8a229da934fba7cdb5f8 Mon Sep 17 00:00:00 2001 From: BBaoVanC Date: Thu, 18 Nov 2021 17:26:02 -0600 Subject: [PATCH] Add light mode and improve print compatibility --- assets/css/bobastyle.css | 99 +++++++++++++++++++++++++++++++++--- assets/css/syntax-light.css | 87 +++++++++++++++++++++++++++++++ layouts/_default/single.html | 4 +- layouts/partials/head.html | 3 ++ 4 files changed, 185 insertions(+), 8 deletions(-) create mode 100644 assets/css/syntax-light.css diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css index c2534bd..89b1a34 100644 --- a/assets/css/bobastyle.css +++ b/assets/css/bobastyle.css @@ -458,23 +458,108 @@ li.disabled > .page-link:hover { -/* Print compatibility */ -@media print { - .top, - .section-header-link { - display: none; +/* Light mode */ +@media print, (prefers-color-scheme: light) { + /* Basic elements */ + body { + background-color: #eee; + color: black; + } + + a { + color: #0057bf; } .icon { color: black; } + .post-media > figure.border img, + .post-media > figure.border video, + figure.border img, + figure.border video { + border-color: #2e7bc9; + } + + aside, :not(pre) > code { - background-color: lightgray; + background-color: #ddd; + } + + hr { + border-color: #ccc; + } + + + .topbar, + .section, + .page-list li, + .series-taxonomy li, + .series-box, + .prevnext > *, + #table-of-contents { + background-color: #ddd; + } + + .section:hover { + color: inherit; + } + + .section:hover, + .navbar-item:hover, + .langpicker summary:hover, + .langpicker[open] summary, + .prevnext > a:hover { + background-color: #bbb; + } + + .langpicker .languages { + background-color: #bbb; + border-color: #999; + } + + .series-pages ul { + background-color: #eee; + } + + + /* Pagination */ + .page-link { + color: black; + } + + .page-item.active .page-link { + background-color: #3977bd; + color: white; + } + + .page-item.active .page-link:hover { + background-color: #154172; + color: white; + } + + :not(li.disabled) > .page-link:hover { + background-color: #bbb; + color: inherit; + } + + li.disabled { + opacity: .25; + } +} + + + +/* Print compatibility */ +@media print { + .top, + .section-header-link, + .prevnext, + .comments { + display: none; } body { background-color: white; - color: black; } } diff --git a/assets/css/syntax-light.css b/assets/css/syntax-light.css new file mode 100644 index 0000000..adb6e1e --- /dev/null +++ b/assets/css/syntax-light.css @@ -0,0 +1,87 @@ +@media print, (prefers-color-scheme: light) { + .chroma { + color: black; + } +/* Background */ .chroma { background-color: #f8f8f8 } +/* Other */ .chroma .x { color: #000000 } +/* Error */ .chroma .err { color: #a40000 } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } +/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* Keyword */ .chroma .k { color: #204a87; font-weight: bold } +/* KeywordConstant */ .chroma .kc { color: #204a87; font-weight: bold } +/* KeywordDeclaration */ .chroma .kd { color: #204a87; font-weight: bold } +/* KeywordNamespace */ .chroma .kn { color: #204a87; font-weight: bold } +/* KeywordPseudo */ .chroma .kp { color: #204a87; font-weight: bold } +/* KeywordReserved */ .chroma .kr { color: #204a87; font-weight: bold } +/* KeywordType */ .chroma .kt { color: #204a87; font-weight: bold } +/* Name */ .chroma .n { color: #000000 } +/* NameAttribute */ .chroma .na { color: #c4a000 } +/* NameBuiltin */ .chroma .nb { color: #204a87 } +/* NameBuiltinPseudo */ .chroma .bp { color: #3465a4 } +/* NameClass */ .chroma .nc { color: #000000 } +/* NameConstant */ .chroma .no { color: #000000 } +/* NameDecorator */ .chroma .nd { color: #5c35cc; font-weight: bold } +/* NameEntity */ .chroma .ni { color: #ce5c00 } +/* NameException */ .chroma .ne { color: #cc0000; font-weight: bold } +/* NameFunction */ .chroma .nf { color: #000000 } +/* NameFunctionMagic */ .chroma .fm { color: #000000 } +/* NameLabel */ .chroma .nl { color: #f57900 } +/* NameNamespace */ .chroma .nn { color: #000000 } +/* NameOther */ .chroma .nx { color: #000000 } +/* NameProperty */ .chroma .py { color: #000000 } +/* NameTag */ .chroma .nt { color: #204a87; font-weight: bold } +/* NameVariable */ .chroma .nv { color: #000000 } +/* NameVariableClass */ .chroma .vc { color: #000000 } +/* NameVariableGlobal */ .chroma .vg { color: #000000 } +/* NameVariableInstance */ .chroma .vi { color: #000000 } +/* NameVariableMagic */ .chroma .vm { color: #000000 } +/* Literal */ .chroma .l { color: #000000 } +/* LiteralDate */ .chroma .ld { color: #000000 } +/* LiteralString */ .chroma .s { color: #4e9a06 } +/* LiteralStringAffix */ .chroma .sa { color: #4e9a06 } +/* LiteralStringBacktick */ .chroma .sb { color: #4e9a06 } +/* LiteralStringChar */ .chroma .sc { color: #4e9a06 } +/* LiteralStringDelimiter */ .chroma .dl { color: #4e9a06 } +/* LiteralStringDoc */ .chroma .sd { color: #8f5902; font-style: italic } +/* LiteralStringDouble */ .chroma .s2 { color: #4e9a06 } +/* LiteralStringEscape */ .chroma .se { color: #4e9a06 } +/* LiteralStringHeredoc */ .chroma .sh { color: #4e9a06 } +/* LiteralStringInterpol */ .chroma .si { color: #4e9a06 } +/* LiteralStringOther */ .chroma .sx { color: #4e9a06 } +/* LiteralStringRegex */ .chroma .sr { color: #4e9a06 } +/* LiteralStringSingle */ .chroma .s1 { color: #4e9a06 } +/* LiteralStringSymbol */ .chroma .ss { color: #4e9a06 } +/* LiteralNumber */ .chroma .m { color: #0000cf; font-weight: bold } +/* LiteralNumberBin */ .chroma .mb { color: #0000cf; font-weight: bold } +/* LiteralNumberFloat */ .chroma .mf { color: #0000cf; font-weight: bold } +/* LiteralNumberHex */ .chroma .mh { color: #0000cf; font-weight: bold } +/* LiteralNumberInteger */ .chroma .mi { color: #0000cf; font-weight: bold } +/* LiteralNumberIntegerLong */ .chroma .il { color: #0000cf; font-weight: bold } +/* LiteralNumberOct */ .chroma .mo { color: #0000cf; font-weight: bold } +/* Operator */ .chroma .o { color: #ce5c00; font-weight: bold } +/* OperatorWord */ .chroma .ow { color: #204a87; font-weight: bold } +/* Punctuation */ .chroma .p { color: #000000; font-weight: bold } +/* Comment */ .chroma .c { color: #8f5902; font-style: italic } +/* CommentHashbang */ .chroma .ch { color: #8f5902; font-style: italic } +/* CommentMultiline */ .chroma .cm { color: #8f5902; font-style: italic } +/* CommentSingle */ .chroma .c1 { color: #8f5902; font-style: italic } +/* CommentSpecial */ .chroma .cs { color: #8f5902; font-style: italic } +/* CommentPreproc */ .chroma .cp { color: #8f5902; font-style: italic } +/* CommentPreprocFile */ .chroma .cpf { color: #8f5902; font-style: italic } +/* Generic */ .chroma .g { color: #000000 } +/* GenericDeleted */ .chroma .gd { color: #a40000 } +/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic } +/* GenericError */ .chroma .gr { color: #ef2929 } +/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold } +/* GenericInserted */ .chroma .gi { color: #00a000 } +/* GenericOutput */ .chroma .go { color: #000000; font-style: italic } +/* GenericPrompt */ .chroma .gp { color: #8f5902 } +/* GenericStrong */ .chroma .gs { color: #000000; font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold } +/* GenericTraceback */ .chroma .gt { color: #a40000; font-weight: bold } +/* GenericUnderline */ .chroma .gl { color: #000000; text-decoration: underline } +/* TextWhitespace */ .chroma .w { color: #f8f8f8; text-decoration: underline } +} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 3d9acff..2dc19ef 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -94,7 +94,9 @@ {{ end }} {{ if .Params.comments }} -{{ partial "comments.html" . }} +
+ {{ partial "comments.html" . }} +
{{ end }} {{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 6f759f3..88f9f8c 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -9,6 +9,9 @@ {{ with resources.Get "css/syntax.css" | fingerprint "sha512" }} {{ end }} + {{ with resources.Get "css/syntax-light.css" | fingerprint "sha512" }} + + {{ end }} {{ with .Site.Params.faviconICO }}