From 5ffc6bd411065c53b963c8109692289b981ba244 Mon Sep 17 00:00:00 2001 From: Patrick Spek Date: Mon, 14 Feb 2022 18:26:08 +0100 Subject: Update highlighting themes --- assets/theme/main.scss | 16 +++++--- config.toml | 2 +- static/css/highlight-emacs.css | 82 ++++++++++++++++++++++++++++++++++++++++ static/css/highlight-monokai.css | 82 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 176 insertions(+), 6 deletions(-) create mode 100644 static/css/highlight-emacs.css create mode 100644 static/css/highlight-monokai.css diff --git a/assets/theme/main.scss b/assets/theme/main.scss index fd244ce..d0c203d 100644 --- a/assets/theme/main.scss +++ b/assets/theme/main.scss @@ -1,21 +1,27 @@ // Variables $mainWidth: 900px; + // Colors +@import url("/css/highlight-emacs.css") screen and (prefers-color-scheme: light); +@import url("/css/highlight-monokai.css") screen and (prefers-color-scheme: dark); + @media (prefers-color-scheme: light) { :root { + --blockBackgroundColor: #c2beb9; --bodyBackgroundColor: #d7d5d1; --bodyForegroundColor: #2a2e2f; - --blockBackgroundColor: #c2beb9; + --codeBackgroundColor: #f8f8f8; --linkForegroundColor: #07a; } } @media (prefers-color-scheme: dark) { :root { - --BodyBackgroundColor: #131516; - --BodyForegroundColor: #bcb7ae; - --BlockBackgroundColor: #1c1e1f; + --blockBackgroundColor: #1c1e1f; + --bodyBackgroundColor: #131516; + --bodyForegroundColor: #bcb7ae; + --codeBackgroundColor: #272822; --linkForegroundColor: #07a; } } @@ -165,7 +171,7 @@ a, a:visited { // Syntax highlighting div.highlight { border: 2px solid var(--bodyForegroundColor); - background-color: var(--blockBackgroundColor); + background-color: var(--codeBackgroundColor); width: 90%; margin: 0 auto; overflow-x: auto; diff --git a/config.toml b/config.toml index 9737295..202095a 100644 --- a/config.toml +++ b/config.toml @@ -4,8 +4,8 @@ title = "Tyil" assetDir = "assets" [markup.highlight] +noClasses = false codeFences = true -style = "emacs" tabwidth = 8 [permalinks] diff --git a/static/css/highlight-emacs.css b/static/css/highlight-emacs.css new file mode 100644 index 0000000..a72faa8 --- /dev/null +++ b/static/css/highlight-emacs.css @@ -0,0 +1,82 @@ +/* Background */ .chroma { background-color: #f8f8f8 } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { } +/* 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: #aa22ff; font-weight: bold } +/* KeywordConstant */ .chroma .kc { color: #aa22ff; font-weight: bold } +/* KeywordDeclaration */ .chroma .kd { color: #aa22ff; font-weight: bold } +/* KeywordNamespace */ .chroma .kn { color: #aa22ff; font-weight: bold } +/* KeywordPseudo */ .chroma .kp { color: #aa22ff } +/* KeywordReserved */ .chroma .kr { color: #aa22ff; font-weight: bold } +/* KeywordType */ .chroma .kt { color: #00bb00; font-weight: bold } +/* Name */ .chroma .n { } +/* NameAttribute */ .chroma .na { color: #bb4444 } +/* NameBuiltin */ .chroma .nb { color: #aa22ff } +/* NameBuiltinPseudo */ .chroma .bp { } +/* NameClass */ .chroma .nc { color: #0000ff } +/* NameConstant */ .chroma .no { color: #880000 } +/* NameDecorator */ .chroma .nd { color: #aa22ff } +/* NameEntity */ .chroma .ni { color: #999999; font-weight: bold } +/* NameException */ .chroma .ne { color: #d2413a; font-weight: bold } +/* NameFunction */ .chroma .nf { color: #00a000 } +/* NameFunctionMagic */ .chroma .fm { } +/* NameLabel */ .chroma .nl { color: #a0a000 } +/* NameNamespace */ .chroma .nn { color: #0000ff; font-weight: bold } +/* NameOther */ .chroma .nx { } +/* NameProperty */ .chroma .py { } +/* NameTag */ .chroma .nt { color: #008000; font-weight: bold } +/* NameVariable */ .chroma .nv { color: #b8860b } +/* NameVariableClass */ .chroma .vc { } +/* NameVariableGlobal */ .chroma .vg { } +/* NameVariableInstance */ .chroma .vi { } +/* NameVariableMagic */ .chroma .vm { } +/* Literal */ .chroma .l { } +/* LiteralDate */ .chroma .ld { } +/* LiteralString */ .chroma .s { color: #bb4444 } +/* LiteralStringAffix */ .chroma .sa { color: #bb4444 } +/* LiteralStringBacktick */ .chroma .sb { color: #bb4444 } +/* LiteralStringChar */ .chroma .sc { color: #bb4444 } +/* LiteralStringDelimiter */ .chroma .dl { color: #bb4444 } +/* LiteralStringDoc */ .chroma .sd { color: #bb4444; font-style: italic } +/* LiteralStringDouble */ .chroma .s2 { color: #bb4444 } +/* LiteralStringEscape */ .chroma .se { color: #bb6622; font-weight: bold } +/* LiteralStringHeredoc */ .chroma .sh { color: #bb4444 } +/* LiteralStringInterpol */ .chroma .si { color: #bb6688; font-weight: bold } +/* LiteralStringOther */ .chroma .sx { color: #008000 } +/* LiteralStringRegex */ .chroma .sr { color: #bb6688 } +/* LiteralStringSingle */ .chroma .s1 { color: #bb4444 } +/* LiteralStringSymbol */ .chroma .ss { color: #b8860b } +/* LiteralNumber */ .chroma .m { color: #666666 } +/* LiteralNumberBin */ .chroma .mb { color: #666666 } +/* LiteralNumberFloat */ .chroma .mf { color: #666666 } +/* LiteralNumberHex */ .chroma .mh { color: #666666 } +/* LiteralNumberInteger */ .chroma .mi { color: #666666 } +/* LiteralNumberIntegerLong */ .chroma .il { color: #666666 } +/* LiteralNumberOct */ .chroma .mo { color: #666666 } +/* Operator */ .chroma .o { color: #666666 } +/* OperatorWord */ .chroma .ow { color: #aa22ff; font-weight: bold } +/* Punctuation */ .chroma .p { } +/* Comment */ .chroma .c { color: #008800; font-style: italic } +/* CommentHashbang */ .chroma .ch { color: #008800; font-style: italic } +/* CommentMultiline */ .chroma .cm { color: #008800; font-style: italic } +/* CommentSingle */ .chroma .c1 { color: #008800; font-style: italic } +/* CommentSpecial */ .chroma .cs { color: #008800; font-weight: bold } +/* CommentPreproc */ .chroma .cp { color: #008800 } +/* CommentPreprocFile */ .chroma .cpf { color: #008800 } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color: #a00000 } +/* GenericEmph */ .chroma .ge { font-style: italic } +/* GenericError */ .chroma .gr { color: #ff0000 } +/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold } +/* GenericInserted */ .chroma .gi { color: #00a000 } +/* GenericOutput */ .chroma .go { color: #888888 } +/* GenericPrompt */ .chroma .gp { color: #000080; font-weight: bold } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold } +/* GenericTraceback */ .chroma .gt { color: #0044dd } +/* GenericUnderline */ .chroma .gl { text-decoration: underline } +/* TextWhitespace */ .chroma .w { color: #bbbbbb } diff --git a/static/css/highlight-monokai.css b/static/css/highlight-monokai.css new file mode 100644 index 0000000..1262441 --- /dev/null +++ b/static/css/highlight-monokai.css @@ -0,0 +1,82 @@ +/* Background */ .chroma { color: #f8f8f2; background-color: #272822 } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { color: #960050; background-color: #1e0010 } +/* 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: #66d9ef } +/* KeywordConstant */ .chroma .kc { color: #66d9ef } +/* KeywordDeclaration */ .chroma .kd { color: #66d9ef } +/* KeywordNamespace */ .chroma .kn { color: #f92672 } +/* KeywordPseudo */ .chroma .kp { color: #66d9ef } +/* KeywordReserved */ .chroma .kr { color: #66d9ef } +/* KeywordType */ .chroma .kt { color: #66d9ef } +/* Name */ .chroma .n { } +/* NameAttribute */ .chroma .na { color: #a6e22e } +/* NameBuiltin */ .chroma .nb { } +/* NameBuiltinPseudo */ .chroma .bp { } +/* NameClass */ .chroma .nc { color: #a6e22e } +/* NameConstant */ .chroma .no { color: #66d9ef } +/* NameDecorator */ .chroma .nd { color: #a6e22e } +/* NameEntity */ .chroma .ni { } +/* NameException */ .chroma .ne { color: #a6e22e } +/* NameFunction */ .chroma .nf { color: #a6e22e } +/* NameFunctionMagic */ .chroma .fm { } +/* NameLabel */ .chroma .nl { } +/* NameNamespace */ .chroma .nn { } +/* NameOther */ .chroma .nx { color: #a6e22e } +/* NameProperty */ .chroma .py { } +/* NameTag */ .chroma .nt { color: #f92672 } +/* NameVariable */ .chroma .nv { } +/* NameVariableClass */ .chroma .vc { } +/* NameVariableGlobal */ .chroma .vg { } +/* NameVariableInstance */ .chroma .vi { } +/* NameVariableMagic */ .chroma .vm { } +/* Literal */ .chroma .l { color: #ae81ff } +/* LiteralDate */ .chroma .ld { color: #e6db74 } +/* LiteralString */ .chroma .s { color: #e6db74 } +/* LiteralStringAffix */ .chroma .sa { color: #e6db74 } +/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 } +/* LiteralStringChar */ .chroma .sc { color: #e6db74 } +/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 } +/* LiteralStringDoc */ .chroma .sd { color: #e6db74 } +/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 } +/* LiteralStringEscape */ .chroma .se { color: #ae81ff } +/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 } +/* LiteralStringInterpol */ .chroma .si { color: #e6db74 } +/* LiteralStringOther */ .chroma .sx { color: #e6db74 } +/* LiteralStringRegex */ .chroma .sr { color: #e6db74 } +/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 } +/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 } +/* LiteralNumber */ .chroma .m { color: #ae81ff } +/* LiteralNumberBin */ .chroma .mb { color: #ae81ff } +/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff } +/* LiteralNumberHex */ .chroma .mh { color: #ae81ff } +/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff } +/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff } +/* LiteralNumberOct */ .chroma .mo { color: #ae81ff } +/* Operator */ .chroma .o { color: #f92672 } +/* OperatorWord */ .chroma .ow { color: #f92672 } +/* Punctuation */ .chroma .p { } +/* Comment */ .chroma .c { color: #75715e } +/* CommentHashbang */ .chroma .ch { color: #75715e } +/* CommentMultiline */ .chroma .cm { color: #75715e } +/* CommentSingle */ .chroma .c1 { color: #75715e } +/* CommentSpecial */ .chroma .cs { color: #75715e } +/* CommentPreproc */ .chroma .cp { color: #75715e } +/* CommentPreprocFile */ .chroma .cpf { color: #75715e } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color: #f92672 } +/* GenericEmph */ .chroma .ge { font-style: italic } +/* GenericError */ .chroma .gr { } +/* GenericHeading */ .chroma .gh { } +/* GenericInserted */ .chroma .gi { color: #a6e22e } +/* GenericOutput */ .chroma .go { } +/* GenericPrompt */ .chroma .gp { } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #75715e } +/* GenericTraceback */ .chroma .gt { } +/* GenericUnderline */ .chroma .gl { } +/* TextWhitespace */ .chroma .w { } -- cgit v1.1