From 40f57ed72a601d8489a180f3bd9acd5e6c20d323 Mon Sep 17 00:00:00 2001 From: Ngô Ngọc Đức Huy Date: Tue, 23 Apr 2024 01:19:27 +0700 Subject: Update theme --- assets/css/custom.css | 26 -- assets/css/custom.scss | 47 ---- assets/css/dark.css | 29 +++ assets/css/highdark.css | 174 -------------- assets/css/highlight.css | 88 ------- assets/css/light.css | 37 +++ assets/css/main.css | 575 ++++++++++++++++++++++++++++++++++++++++++++ assets/css/syntax-dark.css | 85 +++++++ assets/css/syntax-light.css | 87 +++++++ 9 files changed, 813 insertions(+), 335 deletions(-) delete mode 100644 assets/css/custom.css delete mode 100644 assets/css/custom.scss create mode 100644 assets/css/dark.css delete mode 100644 assets/css/highdark.css delete mode 100644 assets/css/highlight.css create mode 100644 assets/css/light.css create mode 100644 assets/css/main.css create mode 100644 assets/css/syntax-dark.css create mode 100644 assets/css/syntax-light.css (limited to 'assets/css') diff --git a/assets/css/custom.css b/assets/css/custom.css deleted file mode 100644 index 9388906..0000000 --- a/assets/css/custom.css +++ /dev/null @@ -1,26 +0,0 @@ -.no-prefix::before { - content: ""; -} - -.webring article { - border: 1px solid var(--color); - margin: 0.5rem 0; - padding: 0.5rem; -} - -.webring article h3 { - margin-top: 0; - padding-top: 0; -} - -pre, code { - font-family: monospace, monospace; -} - -.homepage::after { - content: " 🏠"; -} - -.feed ol { - list-style-type: none; -} diff --git a/assets/css/custom.scss b/assets/css/custom.scss deleted file mode 100644 index 3fd60cb..0000000 --- a/assets/css/custom.scss +++ /dev/null @@ -1,47 +0,0 @@ ---- ---- - -body { - font-family: serif; -} - -.post-content { - h1 { - font-size: 2rem; - } - h2 { - font-size: 1.5rem; - } -} - -.webring { - max-width: 1000px; - margin-left: auto; - margin-right: auto; - margin-bottom: 1rem; - padding: 1rem; - .attribution { - float: right; - font-size: .8rem; - line-height: 3; - } - - .footer-col.article { - padding: 0.5rem; - - margin: 0 0.5rem; - border: 0.01rem solid #333; - @media(max-width: 640px) { - margin: 0.5rem 0; - } - } -} - -dl { - dt { - font-weight: bold; - } - dd { - text-indent: 1em; - } -} diff --git a/assets/css/dark.css b/assets/css/dark.css new file mode 100644 index 0000000..d1b6446 --- /dev/null +++ b/assets/css/dark.css @@ -0,0 +1,29 @@ +:root { + /* dark.css */ + --font-color: #eee; + --bg-color: black; + + --link-color: #2f2; + --link-state-color:#ff5858; + --link-state-border-color: rgba(238, 54, 54, 0.5); + + --thead-bg-color: #343a40; + --table-border-color: lightgrey; + + --nav-link-color: green; + + --pre-color: #f1f1f1; + --pre-bg-color: #111111; + + --bq-color: #ccc; + --hr-color: #333; + + --post-info-color: lightgreen; + + --visited-color: violet; + --visited-post-color: #999; + --inline-code-color: yellow; + + --red: #FF6666; + --green: #66B266; +} diff --git a/assets/css/highdark.css b/assets/css/highdark.css deleted file mode 100644 index b1108bb..0000000 --- a/assets/css/highdark.css +++ /dev/null @@ -1,174 +0,0 @@ -@media(prefers-color-scheme:dark) { - /* Background */ .bg { background-color: #ffffff; } - /* PreWrapper */ .chroma { background-color: #ffffff; } - /* Other */ .chroma .x { } - /* Error */ .chroma .err { color: #ff0000; background-color: #ffaaaa } - /* CodeLine */ .chroma .cl { } - /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } - /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } - /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } - /* LineHighlight */ .chroma .hl { background-color: #ffffcc } - /* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } - /* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; 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: #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: #003388; font-weight: bold } - /* KeywordReserved */ .chroma .kr { color: #008800; font-weight: bold } - /* KeywordType */ .chroma .kt { color: #333399; font-weight: bold } - /* Name */ .chroma .n { } - /* NameAttribute */ .chroma .na { color: #0000cc } - /* NameBuiltin */ .chroma .nb { color: #007020 } - /* NameBuiltinPseudo */ .chroma .bp { } - /* NameClass */ .chroma .nc { color: #bb0066; font-weight: bold } - /* NameConstant */ .chroma .no { color: #003366; font-weight: bold } - /* NameDecorator */ .chroma .nd { color: #555555; font-weight: bold } - /* NameEntity */ .chroma .ni { color: #880000; font-weight: bold } - /* NameException */ .chroma .ne { color: #ff0000; font-weight: bold } - /* NameFunction */ .chroma .nf { color: #0066bb; font-weight: bold } - /* NameFunctionMagic */ .chroma .fm { } - /* NameLabel */ .chroma .nl { color: #997700; font-weight: bold } - /* NameNamespace */ .chroma .nn { color: #0e84b5; font-weight: bold } - /* NameOther */ .chroma .nx { } - /* NameProperty */ .chroma .py { } - /* NameTag */ .chroma .nt { color: #007700 } - /* NameVariable */ .chroma .nv { color: #996633 } - /* NameVariableClass */ .chroma .vc { color: #336699 } - /* NameVariableGlobal */ .chroma .vg { color: #dd7700; font-weight: bold } - /* NameVariableInstance */ .chroma .vi { color: #3333bb } - /* NameVariableMagic */ .chroma .vm { } - /* Literal */ .chroma .l { } - /* LiteralDate */ .chroma .ld { } - /* LiteralString */ .chroma .s { background-color: #111010 } - /* LiteralStringA11ix */ .chroma .sa { background-color: #111010 } - /* LiteralStringBacktick */ .chroma .sb { background-color: #111010 } - /* LiteralStringChar */ .chroma .sc { color: #0044dd; background-color: #111010 } - /* LiteralStringDelimiter */ .chroma .dl { background-color: #111010 } - /* LiteralStringDoc */ .chroma .sd { color: #dd4422; background-color: #111010 } - /* LiteralStringDouble */ .chroma .s2 { background-color: #111010 } - /* LiteralStringEscape */ .chroma .se { color: #666666; background-color: #111010; font-weight: bold } - /* LiteralStringHeredoc */ .chroma .sh { background-color: #111010 } - /* LiteralStringInterpol */ .chroma .si { background-color: #eeeeee } - /* LiteralStringOther */ .chroma .sx { color: #dd2200; background-color: #111010 } - /* LiteralStringRegex */ .chroma .sr { color: #000000; background-color: #111011 } - /* LiteralStringSingle */ .chroma .s1 { background-color: #111010 } - /* LiteralStringSymbol */ .chroma .ss { color: #aa6600; background-color: #111010 } - /* LiteralNumber */ .chroma .m { color: #6600ee; font-weight: bold } - /* LiteralNumberBin */ .chroma .mb { color: #6600ee; font-weight: bold } - /* LiteralNumberFloat */ .chroma .mf { color: #6600ee; font-weight: bold } - /* LiteralNumberHex */ .chroma .mh { color: #005588; font-weight: bold } - /* LiteralNumberInteger */ .chroma .mi { color: #0000dd; font-weight: bold } - /* LiteralNumberIntegerLong */ .chroma .il { color: #6600ee; font-weight: bold } - /* LiteralNumberOct */ .chroma .mo { color: #4400ee; font-weight: bold } - /* Operator */ .chroma .o { color: #333333 } - /* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold } - /* 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; font-weight: bold } - /* CommentPreproc */ .chroma .cp { color: #557799 } - /* CommentPreprocFile */ .chroma .cpf { color: #557799 } - /* 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: #c65d09; 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 } - /* Background */ .bg { color: #d0d0d0; background-color: #202020; } - /* PreWrapper */ .chroma { color: #d0d0d0; background-color: #202020; } - /* Other */ .chroma .x { } - /* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 } - /* CodeLine */ .chroma .cl { } - /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } - /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } - /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } - /* LineHighlight */ .chroma .hl { background-color: #ffffcc } - /* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #686868 } - /* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #686868 } - /* Line */ .chroma .line { display: flex; } - /* Keyword */ .chroma .k { color: #6ab825; font-weight: bold } - /* KeywordConstant */ .chroma .kc { color: #6ab825; font-weight: bold } - /* KeywordDeclaration */ .chroma .kd { color: #6ab825; font-weight: bold } - /* KeywordNamespace */ .chroma .kn { color: #6ab825; font-weight: bold } - /* KeywordPseudo */ .chroma .kp { color: #6ab825 } - /* KeywordReserved */ .chroma .kr { color: #6ab825; font-weight: bold } - /* KeywordType */ .chroma .kt { color: #6ab825; font-weight: bold } - /* Name */ .chroma .n { } - /* NameAttribute */ .chroma .na { color: #bbbbbb } - /* NameBuiltin */ .chroma .nb { color: #24909d } - /* NameBuiltinPseudo */ .chroma .bp { } - /* NameClass */ .chroma .nc { color: #558fdf; text-decoration: underline } - /* NameConstant */ .chroma .no { color: #40ffff } - /* NameDecorator */ .chroma .nd { color: #ffa500 } - /* NameEntity */ .chroma .ni { } - /* NameException */ .chroma .ne { color: #bbbbbb } - /* NameFunction */ .chroma .nf { color: #447fcf } - /* NameFunctionMagic */ .chroma .fm { } - /* NameLabel */ .chroma .nl { } - /* NameNamespace */ .chroma .nn { color: #447fcf; text-decoration: underline } - /* NameOther */ .chroma .nx { } - /* NameProperty */ .chroma .py { } - /* NameTag */ .chroma .nt { color: #6ab825; font-weight: bold } - /* NameVariable */ .chroma .nv { color: #40ffff } - /* NameVariableClass */ .chroma .vc { } - /* NameVariableGlobal */ .chroma .vg { } - /* NameVariableInstance */ .chroma .vi { } - /* NameVariableMagic */ .chroma .vm { } - /* Literal */ .chroma .l { } - /* LiteralDate */ .chroma .ld { } - /* LiteralString */ .chroma .s { color: #ed9d13 } - /* LiteralStringAffix */ .chroma .sa { color: #ed9d13 } - /* LiteralStringBacktick */ .chroma .sb { color: #ed9d13 } - /* LiteralStringChar */ .chroma .sc { color: #ed9d13 } - /* LiteralStringDelimiter */ .chroma .dl { color: #ed9d13 } - /* LiteralStringDoc */ .chroma .sd { color: #ed9d13 } - /* LiteralStringDouble */ .chroma .s2 { color: #ed9d13 } - /* LiteralStringEscape */ .chroma .se { color: #ed9d13 } - /* LiteralStringHeredoc */ .chroma .sh { color: #ed9d13 } - /* LiteralStringInterpol */ .chroma .si { color: #ed9d13 } - /* LiteralStringOther */ .chroma .sx { color: #ffa500 } - /* LiteralStringRegex */ .chroma .sr { color: #ed9d13 } - /* LiteralStringSingle */ .chroma .s1 { color: #ed9d13 } - /* LiteralStringSymbol */ .chroma .ss { color: #ed9d13 } - /* LiteralNumber */ .chroma .m { color: #3677a9 } - /* LiteralNumberBin */ .chroma .mb { color: #3677a9 } - /* LiteralNumberFloat */ .chroma .mf { color: #3677a9 } - /* LiteralNumberHex */ .chroma .mh { color: #3677a9 } - /* LiteralNumberInteger */ .chroma .mi { color: #3677a9 } - /* LiteralNumberIntegerLong */ .chroma .il { color: #3677a9 } - /* LiteralNumberOct */ .chroma .mo { color: #3677a9 } - /* Operator */ .chroma .o { color: #fa8a8a } - /* OperatorWord */ .chroma .ow { color: #6ab825; font-weight: bold } - /* Punctuation */ .chroma .p { } - /* Comment */ .chroma .c { color: #999999; font-style: italic } - /* CommentHashbang */ .chroma .ch { color: #999999; font-style: italic } - /* CommentMultiline */ .chroma .cm { color: #999999; font-style: italic } - /* CommentSingle */ .chroma .c1 { color: #999999; font-style: italic } - /* CommentSpecial */ .chroma .cs { color: #e50808; background-color: #520000; font-weight: bold } - /* CommentPreproc */ .chroma .cp { color: #cd2828; font-weight: bold } - /* CommentPreprocFile */ .chroma .cpf { color: #cd2828; font-weight: bold } - /* Generic */ .chroma .g { } - /* GenericDeleted */ .chroma .gd { color: #d22323 } - /* GenericEmph */ .chroma .ge { font-style: italic } - /* GenericError */ .chroma .gr { color: #d22323 } - /* GenericHeading */ .chroma .gh { color: #ffffff; font-weight: bold } - /* GenericInserted */ .chroma .gi { color: #589819 } - /* GenericOutput */ .chroma .go { color: #cccccc } - /* GenericPrompt */ .chroma .gp { color: #aaaaaa } - /* GenericStrong */ .chroma .gs { font-weight: bold } - /* GenericSubheading */ .chroma .gu { color: #ffffff; text-decoration: underline } - /* GenericTraceback */ .chroma .gt { color: #d22323 } - /* GenericUnderline */ .chroma .gl { text-decoration: underline } - /* TextWhitespace */ .chroma .w { color: #666666 } -} diff --git a/assets/css/highlight.css b/assets/css/highlight.css deleted file mode 100644 index 79bea26..0000000 --- a/assets/css/highlight.css +++ /dev/null @@ -1,88 +0,0 @@ -@media(prefers-color-scheme:light) { - /* Background */ .bg { background-color: #ffffff; } - /* PreWrapper */ .chroma { background-color: #ffffff; } - /* Other */ .chroma .x { } - /* Error */ .chroma .err { color: #ff0000; background-color: #ffaaaa } - /* CodeLine */ .chroma .cl { } - /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } - /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } - /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } - /* LineHighlight */ .chroma .hl { background-color: #ffffcc } - /* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } - /* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; 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: #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: #003388; font-weight: bold } - /* KeywordReserved */ .chroma .kr { color: #008800; font-weight: bold } - /* KeywordType */ .chroma .kt { color: #333399; font-weight: bold } - /* Name */ .chroma .n { } - /* NameAttribute */ .chroma .na { color: #0000cc } - /* NameBuiltin */ .chroma .nb { color: #007020 } - /* NameBuiltinPseudo */ .chroma .bp { } - /* NameClass */ .chroma .nc { color: #bb0066; font-weight: bold } - /* NameConstant */ .chroma .no { color: #003366; font-weight: bold } - /* NameDecorator */ .chroma .nd { color: #555555; font-weight: bold } - /* NameEntity */ .chroma .ni { color: #880000; font-weight: bold } - /* NameException */ .chroma .ne { color: #ff0000; font-weight: bold } - /* NameFunction */ .chroma .nf { color: #0066bb; font-weight: bold } - /* NameFunctionMagic */ .chroma .fm { } - /* NameLabel */ .chroma .nl { color: #997700; font-weight: bold } - /* NameNamespace */ .chroma .nn { color: #0e84b5; font-weight: bold } - /* NameOther */ .chroma .nx { } - /* NameProperty */ .chroma .py { } - /* NameTag */ .chroma .nt { color: #007700 } - /* NameVariable */ .chroma .nv { color: #996633 } - /* NameVariableClass */ .chroma .vc { color: #336699 } - /* NameVariableGlobal */ .chroma .vg { color: #dd7700; font-weight: bold } - /* NameVariableInstance */ .chroma .vi { color: #3333bb } - /* NameVariableMagic */ .chroma .vm { } - /* Literal */ .chroma .l { } - /* LiteralDate */ .chroma .ld { } - /* LiteralString */ .chroma .s { background-color: #fff0f0 } - /* LiteralStringAffix */ .chroma .sa { background-color: #fff0f0 } - /* LiteralStringBacktick */ .chroma .sb { background-color: #fff0f0 } - /* LiteralStringChar */ .chroma .sc { color: #0044dd; background-color: #fff0f0 } - /* LiteralStringDelimiter */ .chroma .dl { background-color: #fff0f0 } - /* LiteralStringDoc */ .chroma .sd { color: #dd4422; background-color: #fff0f0 } - /* LiteralStringDouble */ .chroma .s2 { background-color: #fff0f0 } - /* LiteralStringEscape */ .chroma .se { color: #666666; background-color: #fff0f0; font-weight: bold } - /* LiteralStringHeredoc */ .chroma .sh { background-color: #fff0f0 } - /* LiteralStringInterpol */ .chroma .si { background-color: #eeeeee } - /* LiteralStringOther */ .chroma .sx { color: #dd2200; background-color: #fff0f0 } - /* LiteralStringRegex */ .chroma .sr { color: #000000; background-color: #fff0ff } - /* LiteralStringSingle */ .chroma .s1 { background-color: #fff0f0 } - /* LiteralStringSymbol */ .chroma .ss { color: #774400; background-color: #fff0f0 } - /* LiteralNumber */ .chroma .m { color: #6600ee; font-weight: bold } - /* LiteralNumberBin */ .chroma .mb { color: #6600ee; font-weight: bold } - /* LiteralNumberFloat */ .chroma .mf { color: #6600ee; font-weight: bold } - /* LiteralNumberHex */ .chroma .mh { color: #005588; font-weight: bold } - /* LiteralNumberInteger */ .chroma .mi { color: #0000dd; font-weight: bold } - /* LiteralNumberIntegerLong */ .chroma .il { color: #6600ee; font-weight: bold } - /* LiteralNumberOct */ .chroma .mo { color: #4400ee; font-weight: bold } - /* Operator */ .chroma .o { color: #333333 } - /* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold } - /* Punctuation */ .chroma .p { } - /* Comment */ .chroma .c { color: #666666; font-style: italic; } - /* CommentHashbang */ .chroma .ch { color: #666666; font-style: italic; } - /* CommentMultiline */ .chroma .cm { color: #666666; font-style: italic; } - /* CommentSingle */ .chroma .c1 { color: #666666; font-style: italic; } - /* CommentSpecial */ .chroma .cs { color: #cc0000; font-style: italic; font-weight: bold } - /* CommentPreproc */ .chroma .cp { color: #557799; font-style: italic; } - /* CommentPreprocFile */ .chroma .cpf { color: #557799; font-style: italic; } - /* 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: #c65d09; 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/assets/css/light.css b/assets/css/light.css new file mode 100644 index 0000000..b234ae7 --- /dev/null +++ b/assets/css/light.css @@ -0,0 +1,37 @@ +@media (prefers-color-scheme: light) { + :root { + /* light.css */ + --font-color: #333; + --bg-color: #fff; + + --link-color:#1d60a3; + --link-state-color:#a31d1d; + --link-state-border-color: rgba(163, 29, 29, .5); + + --thead-bg-color: lightgrey; + --table-border-color: lightgrey; + + --nav-link-color: #696969; + + --pre-color: #333; + --pre-bg-color: #f1f1f1; + + --bq-color: #ccc; + --hr-color: #ccc; + + --pagination-bg-color: #fafafa; + --pagination-link-color: #696969; + + --post-info-color: navy; + + --switcher-color: #fff; + --switcher-bg-color: #333; + + --visited-color: purple; + --visited-post-color: #666; + --inline-code-color: blue; + + --red: red; + --green: green; + } +} diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..55167ef --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,575 @@ +/* Basic */ +html { + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ +} + +.container { + margin: 1rem; +} + +.sr-only { + position: absolute; + white-space: nowrap; + width: 1px; + height: 1px; + overflow: hidden; + border: 0; + padding: 0; + clip: rect(0 0 0 0); + clip-path: inset(50%); + margin: -1px; +} + +body { + margin: 0; + font-size: 1.2em; + line-height: 1.5; + -webkit-font-smoothing: antialiased; + color: var(--font-color); + background: var(--bg-color); +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + + +/* Links */ + +a { + color: var(--link-color); +} + +a:hover, +a:focus, +a:active { + color: var(--link-state-color); + text-decoration-style: dashed; +} + +a:active, +a:hover { + outline: 1px; +} + +a:active { + opacity: 0.9; +} +a:visited { + color: var(--visited-color); +} +footer a:visited, nav a:visited:not(.site-title) { + color: var(--link-color); +} + +a.skip-main { + left:-999px; + position:absolute; + top:auto; + width:1px; + height:1px; + overflow:hidden; + z-index:-999; +} + +a.skip-main:focus, +a.skip-main:active { + left: auto; + top: 0px; + width: auto; + height: auto; + overflow:auto; + z-index:999; + padding: 4px 6px 4px 6px; +} + +/* Table */ +thead { + background: var(--thead-bg-color); +} + +table { + display: block; + max-width: 100%; + border-collapse: collapse; + overflow: auto; +} + + +th, td { + padding: 0.5em 1em; + border: 1px double var(--table-border-color); +} + +/* Code */ +pre { + padding: 1em; + max-width: 100%; + overflow: auto; + border: 1px dashed red; + color: var(--pre-color); + background-color: var(--pre-bg-color); +} + +code, +pre { + font-family: monospace, monospace; + font-size: 1rem; +} + +kbd { + border: 1px solid var(--font-color); + border-bottom: 2px solid var(--font-color); + border-radius: 5px; + padding: 0.1rem; +} + +p code { + color: var(--inline-code-color); +} + +/* Styles */ + +blockquote { + border-left: 2px solid var(--bq-color); + padding: 0.1em 1em; + margin-left: 0.75em; +} + +p { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +hr { + color: var(--hr-color); + background-color: var(--hr-color); + border: none; + height: 1px; + border-bottom: thin solid var(--hr-color); +} + +/* Header */ + +.common-header { + marg +} + +header { + margin-top: 1em; +} + +header .site-title { + color: var(--font-color); + font-size: 1em; + margin-bottom: 0; + font-weight: normal; +} + +header nav:not(:empty){ + margin-top: 1em; + max-width: 100%; + padding: 0.5em 0; +} + +header nav a { + display: inline-block; + margin: 0 1rem; +} + +/* Social icons */ +table.social-icons { + float: right +} +table.social-icons th { + text-align: right; +} +table.social-icons th, td { + border: none; + padding: 0.5rem; +} + +.inline-svg { + display: inline-block; + height: 1.15rem; + width: 1.15rem; + top: 0.15rem; + position: relative; +} + +/* Pages */ +main h1 { + margin-top: 1em; + font-weight: normal; + line-height: 1.1em; + margin-bottom: 0.5em; + font-weight: 600; +} + +/* Articles */ + +a:hover, a:focus, a:active { + color: var(--link-state-color); +} + +.post-title.draft::after { + content: "✎"; + display: inline-block; + margin-left: 0.2em; +} + +article.embedded { + border: 1px dashed red; + padding: 1rem; +} + +article:not(:last-of-type) { + padding-bottom: 2em; +} +header h1, header .post-translations { + margin-left: 2.5rem; +} + +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, +h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited{ + color: var(--font-color); +} + +.post-info { + color: var(--post-info-color); + font-size: 0.75em; + margin-top: 1em; +} + +.post-info a { + color: var(--post-info-color); +} + +.post-info a:hover { + color: var(--link-state-color); +} + +.post-taxonomies { + display: inline; +} + +.post-categories { + display: inline; + list-style-type: none; + padding: 0; +} + +.post-categories li { + display: inline; + margin-left: 1em; +} + +.post-tags { + display: inline; + list-style-type: none; + padding: 0; +} + +.post-tags li { + display: inline; + margin-left: 1em; +} + +article img { + max-width: 100%; + display: block; + height: auto; + margin: 0 auto .5em; +} + +article figcaption { + color: grey; + text-align: center; + font-size: 0.85em; + margin-bottom: 2em; +} + +.read-more { + margin: 1em 0; +} + +.post-translations { + margin-left: 0.5em; + list-style: none; + padding: 0; + display: inline; + font-size: 14px; +} + +.post-translations > li { + display: inline; +} + +.post-translations > li:not(:last-child)::after { + content: "|"; + display: inline-block; +} + +.post-translations > li a { + color: var(--link-color); +} + +.post-translations > li a:hover, +.post-translations > li a:focus { + color: var(--link-state-color); +} + +/* Other pages */ +.terms { + list-style-type: none; + padding: 0; + line-height: 2em; +} + +/* Footer */ + +#footer { + max-width: 80rem; + margin: 0 auto; + border-top: thin solid var(--hr-color); + padding-top: 1.5em; + margin-top: 3em; +} + +.common-footer-bottom { + align-items: center; + justify-content: space-between; +} + +ul.language-select, ul.footer-menu { + padding-left: 0; + list-style: none; + display: flex; +} + +ul.language-select > li, ul.footer-menu > li { + margin-right: 1em; +} + +/* Media Queries */ + +@media screen, print { + h2 .decorative::before { + content: '# '; + } + + h3 .decorative::before { + content: '## '; + } + + h4 .decorative::before { + content: '### '; + } + .decorative::before { + color: gray; + } +} + +@media speech { + .decorative::before { + display: none; + } +} + +@media print { + aside, .language-select, .post-translations { + display: None; + } + article .content a:not(.heading-anchor):visited, article header a:visited { + color: var(--link-color); + } + .webring { + display: none; + } +} +@media (min-width: 780px) { + + #toc { + position: sticky; + top: 10px; + } + .container { + display: grid; + grid-template-columns: 1fr 4fr 1fr; + grid-gap: 2rem; + } + .common-footer-bottom { + display: grid; + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 500px) { + table.social-icons .inline-svg { + display: none; + } +} + +@media (max-width: 840px) { + .main-wrapper { + margin: 0; + max-width: none; + overflow-x: hidden; + padding-left: 25px; + padding-right: 25px; + } + + .post-navigation { + text-align: center; + padding: 0.5em 0; + } + + .post-navigation a { + margin-left: 0.5em; + } +} + +/* Webring---doesn't make sense if you don't use openring */ + +.webring { + margin-top: 2rem; +} + +.webring h2 { + font-size: 1.2rem; +} + +.webring .articles { + width: 95%; +} + +.webring .title { + margin: 0; +} + +.webring .article { + width: 100%; + padding: 0.5rem; + border: 1px solid #333; + margin: 0.5rem 0; +} + +@media (max-width: 640px) { + .webring .article { + margin: 0.5rem 0; + } +} + +.webring .article:first-child { + margin-left: 0; +} + +.webring .article:last-child { + margin-right: 0; +} + +.webring .summary { + font-size: 1rem; + flex: 1 1 0; +} + +.webring .attribution { + float: right; + font-size: 0.8rem; + color: #555; + line-height: 3; +} + +dl dt { + font-weight: bold; +} +dl dd { + text-indent: 1em; +} + +/* Book data format */ + +dl.data { + border: 3px double #ccc; + padding: 0.5em; +} +dl.data dt { + float: left; + clear: left; + max-width: 40%; + text-align: right; + font-weight: bold; +} +dl.data dd { + margin: 0 0 0 110px; + padding: 0 0 0.5em 0; +} + +.text-red { + color: var(--red); +} + +.text-green { + color: var(--green); +} + +details { + margin-top: 1em; + margin-bottom: 1em; + border: 1px solid #aaa; + border-radius: 4px; + padding: .5em .5em 0; +} + +summary { + font-weight: bold; + margin: -.5em -.5em 0; + padding: .5em; +} + +details[open] { + padding: .5em; +} + +details[open] summary { + border-bottom: 1px solid #aaa; + margin-bottom: .5em; +} + +a.site-title::before { + content: "["; +} + +a.site-title::after { + content: "]"; +} + +a.prev-link::before { + content: "← "; +} + +a.next-link.float { + float: right; +} + +a.random-link::before { + content: "🎲 "; +} + +a.next-link::after { + content: " →"; +} diff --git a/assets/css/syntax-dark.css b/assets/css/syntax-dark.css new file mode 100644 index 0000000..d172503 --- /dev/null +++ b/assets/css/syntax-dark.css @@ -0,0 +1,85 @@ +/* Background */ .bg { color: #ffffff; background-color: #1f1f24; } +/* PreWrapper */ .chroma { color: #ffffff; background-color: #1f1f24; } +/* Other */ .chroma .x { } +/* 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; } +/* 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 { } +/* 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: #41a1c0 } +/* NameFunctionMagic */ .chroma .fm { } +/* NameLabel */ .chroma .nl { } +/* NameNamespace */ .chroma .nn { } +/* NameOther */ .chroma .nx { } +/* NameProperty */ .chroma .py { } +/* 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: #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: #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 { } +/* GenericInserted */ .chroma .gi { } +/* GenericOutput */ .chroma .go { } +/* GenericPrompt */ .chroma .gp { } +/* GenericStrong */ .chroma .gs { } +/* GenericSubheading */ .chroma .gu { } +/* GenericTraceback */ .chroma .gt { } +/* GenericUnderline */ .chroma .gl { } +/* TextWhitespace */ .chroma .w { } diff --git a/assets/css/syntax-light.css b/assets/css/syntax-light.css new file mode 100644 index 0000000..3e3c47c --- /dev/null +++ b/assets/css/syntax-light.css @@ -0,0 +1,87 @@ +@media (prefers-color-scheme: light) { + /* Background */ .bg { background-color: #ffffff; } + /* PreWrapper */ .chroma { background-color: #ffffff; } + /* Other */ .chroma .x { } + /* 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; } + /* 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: #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 { } + /* 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 { } +} -- cgit 1.4.1