From 5e2a81105c7f59c787e2cd75f39491856a855f0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ng=C3=B4=20Ng=E1=BB=8Dc=20=C4=90=E1=BB=A9c=20Huy?= Date: Sun, 23 Oct 2022 23:35:37 +0700 Subject: [PATCH] Update highlighting and table --- assets/css/main.css | 10 ++- assets/css/syntax-dark.css | 109 ++++++++++++------------ assets/css/syntax-light.css | 159 ++++++++++++++++++------------------ 3 files changed, 144 insertions(+), 134 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index faa30be..dd6f14c 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -4,7 +4,9 @@ {{ $syntaxDark := resources.Get "css/syntax-dark.css" }} {{ $light.Content }} -{{ $syntaxLight.Content }} +@media (prefers-color-scheme: light) { + {{ $syntaxLight.Content }} +} {{ if eq site.Params.style "dark-without-switcher" }} :root { @@ -142,12 +144,14 @@ thead { } .table-wrapper { - overflow-x: auto; + overflow: auto; } table { + display: block; max-width: 100%; - border-spacing: 0; + border-collapse: collapse; + overflow: auto; } diff --git a/assets/css/syntax-dark.css b/assets/css/syntax-dark.css index 668af5c..d172503 100644 --- a/assets/css/syntax-dark.css +++ b/assets/css/syntax-dark.css @@ -1,82 +1,85 @@ -/* Background */ .chroma { color: #ffffff; background-color: #111111 } +/* Background */ .bg { color: #ffffff; background-color: #1f1f24; } +/* PreWrapper */ .chroma { color: #ffffff; background-color: #1f1f24; } /* Other */ .chroma .x { } -/* Error */ .chroma .err { } +/* Error */ .chroma .err { color: #960050 } +/* CodeLine */ .chroma .cl { } /* 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: #fb660a; font-weight: bold } -/* KeywordConstant */ .chroma .kc { color: #fb660a; font-weight: bold } -/* KeywordDeclaration */ .chroma .kd { color: #fb660a; font-weight: bold } -/* KeywordNamespace */ .chroma .kn { color: #fb660a; font-weight: bold } -/* KeywordPseudo */ .chroma .kp { color: #fb660a } -/* KeywordReserved */ .chroma .kr { color: #fb660a; font-weight: bold } -/* KeywordType */ .chroma .kt { color: #cdcaa9; font-weight: bold } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } +/* LineHighlight */ .chroma .hl { background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* Line */ .chroma .line { display: flex; } +/* Keyword */ .chroma .k { color: #fc5fa3 } +/* KeywordConstant */ .chroma .kc { color: #fc5fa3 } +/* KeywordDeclaration */ .chroma .kd { color: #fc5fa3 } +/* KeywordNamespace */ .chroma .kn { color: #fc5fa3 } +/* KeywordPseudo */ .chroma .kp { color: #fc5fa3 } +/* KeywordReserved */ .chroma .kr { color: #fc5fa3 } +/* KeywordType */ .chroma .kt { color: #fc5fa3 } /* Name */ .chroma .n { } -/* NameAttribute */ .chroma .na { color: #ff0086; font-weight: bold } -/* NameBuiltin */ .chroma .nb { } -/* NameBuiltinPseudo */ .chroma .bp { } -/* NameClass */ .chroma .nc { } -/* NameConstant */ .chroma .no { color: #0086d2 } +/* NameAttribute */ .chroma .na { } +/* NameBuiltin */ .chroma .nb { color: #d0a8ff } +/* NameBuiltinPseudo */ .chroma .bp { color: #a167e6 } +/* NameClass */ .chroma .nc { color: #5dd8ff } +/* NameConstant */ .chroma .no { } /* NameDecorator */ .chroma .nd { } /* NameEntity */ .chroma .ni { } /* NameException */ .chroma .ne { } -/* NameFunction */ .chroma .nf { color: #ff0086; font-weight: bold } +/* NameFunction */ .chroma .nf { color: #41a1c0 } /* NameFunctionMagic */ .chroma .fm { } /* NameLabel */ .chroma .nl { } /* NameNamespace */ .chroma .nn { } /* NameOther */ .chroma .nx { } /* NameProperty */ .chroma .py { } -/* NameTag */ .chroma .nt { color: #fb660a; font-weight: bold } -/* NameVariable */ .chroma .nv { color: #fb660a } +/* NameTag */ .chroma .nt { } +/* NameVariable */ .chroma .nv { color: #41a1c0 } /* NameVariableClass */ .chroma .vc { } /* NameVariableGlobal */ .chroma .vg { } /* NameVariableInstance */ .chroma .vi { } /* NameVariableMagic */ .chroma .vm { } /* Literal */ .chroma .l { } /* LiteralDate */ .chroma .ld { } -/* LiteralString */ .chroma .s { color: #0086d2 } -/* LiteralStringAffix */ .chroma .sa { color: #0086d2 } -/* LiteralStringBacktick */ .chroma .sb { color: #0086d2 } -/* LiteralStringChar */ .chroma .sc { color: #0086d2 } -/* LiteralStringDelimiter */ .chroma .dl { color: #0086d2 } -/* LiteralStringDoc */ .chroma .sd { color: #0086d2 } -/* LiteralStringDouble */ .chroma .s2 { color: #0086d2 } -/* LiteralStringEscape */ .chroma .se { color: #0086d2 } -/* LiteralStringHeredoc */ .chroma .sh { color: #0086d2 } -/* LiteralStringInterpol */ .chroma .si { color: #0086d2 } -/* LiteralStringOther */ .chroma .sx { color: #0086d2 } -/* LiteralStringRegex */ .chroma .sr { color: #0086d2 } -/* LiteralStringSingle */ .chroma .s1 { color: #0086d2 } -/* LiteralStringSymbol */ .chroma .ss { color: #0086d2 } -/* LiteralNumber */ .chroma .m { color: #0086f7; font-weight: bold } -/* LiteralNumberBin */ .chroma .mb { color: #0086f7; font-weight: bold } -/* LiteralNumberFloat */ .chroma .mf { color: #0086f7; font-weight: bold } -/* LiteralNumberHex */ .chroma .mh { color: #0086f7; font-weight: bold } -/* LiteralNumberInteger */ .chroma .mi { color: #0086f7; font-weight: bold } -/* LiteralNumberIntegerLong */ .chroma .il { color: #0086f7; font-weight: bold } -/* LiteralNumberOct */ .chroma .mo { color: #0086f7; font-weight: bold } +/* LiteralString */ .chroma .s { color: #fc6a5d } +/* LiteralStringAffix */ .chroma .sa { color: #fc6a5d } +/* LiteralStringBacktick */ .chroma .sb { color: #fc6a5d } +/* LiteralStringChar */ .chroma .sc { color: #fc6a5d } +/* LiteralStringDelimiter */ .chroma .dl { color: #fc6a5d } +/* LiteralStringDoc */ .chroma .sd { color: #fc6a5d } +/* LiteralStringDouble */ .chroma .s2 { color: #fc6a5d } +/* LiteralStringEscape */ .chroma .se { color: #fc6a5d } +/* LiteralStringHeredoc */ .chroma .sh { color: #fc6a5d } +/* LiteralStringInterpol */ .chroma .si { } +/* LiteralStringOther */ .chroma .sx { color: #fc6a5d } +/* LiteralStringRegex */ .chroma .sr { color: #fc6a5d } +/* LiteralStringSingle */ .chroma .s1 { color: #fc6a5d } +/* LiteralStringSymbol */ .chroma .ss { color: #fc6a5d } +/* LiteralNumber */ .chroma .m { color: #d0bf69 } +/* LiteralNumberBin */ .chroma .mb { color: #d0bf69 } +/* LiteralNumberFloat */ .chroma .mf { color: #d0bf69 } +/* LiteralNumberHex */ .chroma .mh { color: #d0bf69 } +/* LiteralNumberInteger */ .chroma .mi { color: #d0bf69 } +/* LiteralNumberIntegerLong */ .chroma .il { color: #d0bf69 } +/* LiteralNumberOct */ .chroma .mo { color: #d0bf69 } /* Operator */ .chroma .o { } /* OperatorWord */ .chroma .ow { } /* Punctuation */ .chroma .p { } -/* Comment */ .chroma .c { color: #008800; background-color: #0f140f; font-style: italic } -/* CommentHashbang */ .chroma .ch { color: #008800; background-color: #0f140f; font-style: italic } -/* CommentMultiline */ .chroma .cm { color: #008800; background-color: #0f140f; font-style: italic } -/* CommentSingle */ .chroma .c1 { color: #008800; background-color: #0f140f; font-style: italic } -/* CommentSpecial */ .chroma .cs { color: #008800; background-color: #0f140f; font-style: italic } -/* CommentPreproc */ .chroma .cp { color: #ff0007; background-color: #0f140f; font-weight: bold; font-style: italic } -/* CommentPreprocFile */ .chroma .cpf { color: #ff0007; background-color: #0f140f; font-weight: bold; font-style: italic } +/* Comment */ .chroma .c { color: #6c7986 } +/* CommentHashbang */ .chroma .ch { color: #6c7986 } +/* CommentMultiline */ .chroma .cm { color: #6c7986 } +/* CommentSingle */ .chroma .c1 { color: #6c7986 } +/* CommentSpecial */ .chroma .cs { color: #6c7986; font-style: italic } +/* CommentPreproc */ .chroma .cp { color: #fd8f3f } +/* CommentPreprocFile */ .chroma .cpf { color: #fd8f3f } /* Generic */ .chroma .g { } /* GenericDeleted */ .chroma .gd { } /* GenericEmph */ .chroma .ge { } /* GenericError */ .chroma .gr { } -/* GenericHeading */ .chroma .gh { font-weight: bold } +/* GenericHeading */ .chroma .gh { } /* GenericInserted */ .chroma .gi { } -/* GenericOutput */ .chroma .go { color: #444444; background-color: #222222 } +/* GenericOutput */ .chroma .go { } /* GenericPrompt */ .chroma .gp { } /* GenericStrong */ .chroma .gs { } -/* GenericSubheading */ .chroma .gu { font-weight: bold } +/* GenericSubheading */ .chroma .gu { } /* GenericTraceback */ .chroma .gt { } /* GenericUnderline */ .chroma .gl { } -/* TextWhitespace */ .chroma .w { color: #888888 } +/* TextWhitespace */ .chroma .w { } diff --git a/assets/css/syntax-light.css b/assets/css/syntax-light.css index 5fbbdc6..00e5f72 100644 --- a/assets/css/syntax-light.css +++ b/assets/css/syntax-light.css @@ -1,82 +1,85 @@ -/* Background */ .chroma { background-color: #ffffff } +/* Background */ .bg { background-color: #ffffff; } +/* PreWrapper */ .chroma { background-color: #ffffff; } /* Other */ .chroma .x { } -/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 } +/* Error */ .chroma .err { color: #000000 } +/* CodeLine */ .chroma .cl { } /* 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: #008800; font-weight: bold } -/* KeywordConstant */ .chroma .kc { color: #008800; font-weight: bold } -/* KeywordDeclaration */ .chroma .kd { color: #008800; font-weight: bold } -/* KeywordNamespace */ .chroma .kn { color: #008800; font-weight: bold } -/* KeywordPseudo */ .chroma .kp { color: #008800 } -/* KeywordReserved */ .chroma .kr { color: #008800; font-weight: bold } -/* KeywordType */ .chroma .kt { color: #888888; font-weight: bold } -/* Name */ .chroma .n { } -/* NameAttribute */ .chroma .na { color: #336699 } -/* NameBuiltin */ .chroma .nb { color: #003388 } -/* NameBuiltinPseudo */ .chroma .bp { } -/* NameClass */ .chroma .nc { color: #bb0066; font-weight: bold } -/* NameConstant */ .chroma .no { color: #003366; font-weight: bold } -/* NameDecorator */ .chroma .nd { color: #555555 } -/* NameEntity */ .chroma .ni { } -/* NameException */ .chroma .ne { color: #bb0066; font-weight: bold } -/* NameFunction */ .chroma .nf { color: #0066bb; font-weight: bold } -/* NameFunctionMagic */ .chroma .fm { } -/* NameLabel */ .chroma .nl { color: #336699; font-style: italic } -/* NameNamespace */ .chroma .nn { color: #bb0066; font-weight: bold } -/* NameOther */ .chroma .nx { } -/* NameProperty */ .chroma .py { color: #336699; font-weight: bold } -/* NameTag */ .chroma .nt { color: #bb0066; font-weight: bold } -/* NameVariable */ .chroma .nv { color: #336699 } -/* NameVariableClass */ .chroma .vc { color: #336699 } -/* NameVariableGlobal */ .chroma .vg { color: #dd7700 } -/* NameVariableInstance */ .chroma .vi { color: #3333bb } -/* NameVariableMagic */ .chroma .vm { } -/* Literal */ .chroma .l { } -/* LiteralDate */ .chroma .ld { } -/* LiteralString */ .chroma .s { color: #dd2200; background-color: #fff0f0 } -/* LiteralStringAffix */ .chroma .sa { color: #dd2200; background-color: #fff0f0 } -/* LiteralStringBacktick */ .chroma .sb { color: #dd2200; background-color: #fff0f0 } -/* LiteralStringChar */ .chroma .sc { color: #dd2200; background-color: #fff0f0 } -/* LiteralStringDelimiter */ .chroma .dl { color: #dd2200; background-color: #fff0f0 } -/* LiteralStringDoc */ .chroma .sd { color: #dd2200; background-color: #fff0f0 } -/* LiteralStringDouble */ .chroma .s2 { color: #dd2200; background-color: #fff0f0 } -/* LiteralStringEscape */ .chroma .se { color: #0044dd; background-color: #fff0f0 } -/* LiteralStringHeredoc */ .chroma .sh { color: #dd2200; background-color: #fff0f0 } -/* LiteralStringInterpol */ .chroma .si { color: #3333bb; background-color: #fff0f0 } -/* LiteralStringOther */ .chroma .sx { color: #22bb22; background-color: #f0fff0 } -/* LiteralStringRegex */ .chroma .sr { color: #008800; background-color: #fff0ff } -/* LiteralStringSingle */ .chroma .s1 { color: #dd2200; background-color: #fff0f0 } -/* LiteralStringSymbol */ .chroma .ss { color: #aa6600; background-color: #fff0f0 } -/* LiteralNumber */ .chroma .m { color: #0000dd; font-weight: bold } -/* LiteralNumberBin */ .chroma .mb { color: #0000dd; font-weight: bold } -/* LiteralNumberFloat */ .chroma .mf { color: #0000dd; font-weight: bold } -/* LiteralNumberHex */ .chroma .mh { color: #0000dd; font-weight: bold } -/* LiteralNumberInteger */ .chroma .mi { color: #0000dd; font-weight: bold } -/* LiteralNumberIntegerLong */ .chroma .il { color: #0000dd; font-weight: bold } -/* LiteralNumberOct */ .chroma .mo { color: #0000dd; font-weight: bold } -/* Operator */ .chroma .o { } -/* OperatorWord */ .chroma .ow { color: #008800 } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } +/* LineHighlight */ .chroma .hl { background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* Line */ .chroma .line { display: flex; } +/* Keyword */ .chroma .k { color: #a90d91 } +/* KeywordConstant */ .chroma .kc { color: #a90d91 } +/* KeywordDeclaration */ .chroma .kd { color: #a90d91 } +/* KeywordNamespace */ .chroma .kn { color: #a90d91 } +/* KeywordPseudo */ .chroma .kp { color: #a90d91 } +/* KeywordReserved */ .chroma .kr { color: #a90d91 } +/* KeywordType */ .chroma .kt { color: #a90d91 } +/* Name */ .chroma .n { color: #000000 } +/* NameAttribute */ .chroma .na { color: #836c28 } +/* NameBuiltin */ .chroma .nb { color: #a90d91 } +/* NameBuiltinPseudo */ .chroma .bp { color: #5b269a } +/* NameClass */ .chroma .nc { color: #3f6e75 } +/* NameConstant */ .chroma .no { color: #000000 } +/* NameDecorator */ .chroma .nd { color: #000000 } +/* NameEntity */ .chroma .ni { color: #000000 } +/* NameException */ .chroma .ne { color: #000000 } +/* NameFunction */ .chroma .nf { color: #000000 } +/* NameFunctionMagic */ .chroma .fm { color: #000000 } +/* NameLabel */ .chroma .nl { color: #000000 } +/* NameNamespace */ .chroma .nn { color: #000000 } +/* NameOther */ .chroma .nx { color: #000000 } +/* NameProperty */ .chroma .py { color: #000000 } +/* NameTag */ .chroma .nt { color: #000000 } +/* 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: #1c01ce } +/* LiteralDate */ .chroma .ld { color: #1c01ce } +/* LiteralString */ .chroma .s { color: #c41a16 } +/* LiteralStringAffix */ .chroma .sa { color: #c41a16 } +/* LiteralStringBacktick */ .chroma .sb { color: #c41a16 } +/* LiteralStringChar */ .chroma .sc { color: #2300ce } +/* LiteralStringDelimiter */ .chroma .dl { color: #c41a16 } +/* LiteralStringDoc */ .chroma .sd { color: #c41a16 } +/* LiteralStringDouble */ .chroma .s2 { color: #c41a16 } +/* LiteralStringEscape */ .chroma .se { color: #c41a16 } +/* LiteralStringHeredoc */ .chroma .sh { color: #c41a16 } +/* LiteralStringInterpol */ .chroma .si { color: #c41a16 } +/* LiteralStringOther */ .chroma .sx { color: #c41a16 } +/* LiteralStringRegex */ .chroma .sr { color: #c41a16 } +/* LiteralStringSingle */ .chroma .s1 { color: #c41a16 } +/* LiteralStringSymbol */ .chroma .ss { color: #c41a16 } +/* LiteralNumber */ .chroma .m { color: #1c01ce } +/* LiteralNumberBin */ .chroma .mb { color: #1c01ce } +/* LiteralNumberFloat */ .chroma .mf { color: #1c01ce } +/* LiteralNumberHex */ .chroma .mh { color: #1c01ce } +/* LiteralNumberInteger */ .chroma .mi { color: #1c01ce } +/* LiteralNumberIntegerLong */ .chroma .il { color: #1c01ce } +/* LiteralNumberOct */ .chroma .mo { color: #1c01ce } +/* Operator */ .chroma .o { color: #000000 } +/* OperatorWord */ .chroma .ow { color: #000000 } /* Punctuation */ .chroma .p { } -/* Comment */ .chroma .c { color: #888888 } -/* CommentHashbang */ .chroma .ch { color: #888888 } -/* CommentMultiline */ .chroma .cm { color: #888888 } -/* CommentSingle */ .chroma .c1 { color: #888888 } -/* CommentSpecial */ .chroma .cs { color: #cc0000; background-color: #fff0f0; font-weight: bold } -/* CommentPreproc */ .chroma .cp { color: #cc0000; font-weight: bold } -/* CommentPreprocFile */ .chroma .cpf { color: #cc0000; font-weight: bold } +/* Comment */ .chroma .c { color: #177500 } +/* CommentHashbang */ .chroma .ch { color: #177500 } +/* CommentMultiline */ .chroma .cm { color: #177500 } +/* CommentSingle */ .chroma .c1 { color: #177500 } +/* CommentSpecial */ .chroma .cs { color: #177500 } +/* CommentPreproc */ .chroma .cp { color: #633820 } +/* CommentPreprocFile */ .chroma .cpf { color: #633820 } /* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd } -/* GenericEmph */ .chroma .ge { font-style: italic } -/* GenericError */ .chroma .gr { color: #aa0000 } -/* GenericHeading */ .chroma .gh { color: #333333 } -/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd } -/* GenericOutput */ .chroma .go { color: #888888 } -/* GenericPrompt */ .chroma .gp { color: #555555 } -/* GenericStrong */ .chroma .gs { font-weight: bold } -/* GenericSubheading */ .chroma .gu { color: #666666 } -/* GenericTraceback */ .chroma .gt { color: #aa0000 } -/* GenericUnderline */ .chroma .gl { text-decoration: underline } -/* TextWhitespace */ .chroma .w { color: #bbbbbb } +/* GenericDeleted */ .chroma .gd { } +/* GenericEmph */ .chroma .ge { } +/* GenericError */ .chroma .gr { } +/* GenericHeading */ .chroma .gh { } +/* GenericInserted */ .chroma .gi { } +/* GenericOutput */ .chroma .go { } +/* GenericPrompt */ .chroma .gp { } +/* GenericStrong */ .chroma .gs { } +/* GenericSubheading */ .chroma .gu { } +/* GenericTraceback */ .chroma .gt { } +/* GenericUnderline */ .chroma .gl { } +/* TextWhitespace */ .chroma .w { } -- 2.45.2