From 9574eabd56758ae048cee7ba1edb08bac91fa7fc Mon Sep 17 00:00:00 2001 From: Tim Keller Date: Sat, 15 Feb 2025 23:27:09 -0600 Subject: very minor style changes and now use local resource stylesheets + serve theme stylesheets minified from assets --- assets/stylesheets/highlight.css | 93 +++++++++++++++++++ assets/stylesheets/style.css | 195 +++++++++++++++++++++++++++++++++++++++ layouts/_default/baseof.html | 8 +- static/stylesheets/highlight.css | 93 ------------------- static/stylesheets/style.css | 194 -------------------------------------- 5 files changed, 294 insertions(+), 289 deletions(-) create mode 100644 assets/stylesheets/highlight.css create mode 100644 assets/stylesheets/style.css delete mode 100644 static/stylesheets/highlight.css delete mode 100644 static/stylesheets/style.css diff --git a/assets/stylesheets/highlight.css b/assets/stylesheets/highlight.css new file mode 100644 index 0000000..5efc353 --- /dev/null +++ b/assets/stylesheets/highlight.css @@ -0,0 +1,93 @@ +/* Background */ .bg { color: #ebdbb2; background-color: #282828; } +/* PreWrapper */ .chroma { color: #ffffff; background-color: #282828; } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { } +/* 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: #3d3d3d } +/* 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: #756d59 } +/* 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: #756d59 } +/* Line */ .chroma .line { display: flex; } +/* Keyword */ .chroma .k { color: #fb4934 } +/* KeywordConstant */ .chroma .kc { color: #fb4934 } +/* KeywordDeclaration */ .chroma .kd { color: #fb4934 } +/* KeywordNamespace */ .chroma .kn { color: #fb4934 } +/* KeywordPseudo */ .chroma .kp { color: #fb4934 } +/* KeywordReserved */ .chroma .kr { color: #fb4934 } +/* KeywordType */ .chroma .kt { color: #fabd2f } +/* Name */ .chroma .n { } +/* NameAttribute */ .chroma .na { color: #b8bb26; font-weight: bold } +/* NameBuiltin */ .chroma .nb { color: #fabd2f } +/* NameBuiltinPseudo */ .chroma .bp { } +/* NameClass */ .chroma .nc { } +/* NameConstant */ .chroma .no { color: #d3869b } +/* NameDecorator */ .chroma .nd { } +/* NameEntity */ .chroma .ni { color: #fabd2f } +/* NameException */ .chroma .ne { color: #fb8019 } +/* NameFunction */ .chroma .nf { color: #fabd2f } +/* NameFunctionMagic */ .chroma .fm { } +/* NameLabel */ .chroma .nl { color: #fb8019 } +/* NameNamespace */ .chroma .nn { } +/* NameOther */ .chroma .nx { } +/* NameProperty */ .chroma .py { } +/* NameTag */ .chroma .nt { color: #fb8019 } +/* NameVariable */ .chroma .nv { } +/* NameVariableClass */ .chroma .vc { } +/* NameVariableGlobal */ .chroma .vg { } +/* NameVariableInstance */ .chroma .vi { } +/* NameVariableMagic */ .chroma .vm { } +/* Literal */ .chroma .l { } +/* LiteralDate */ .chroma .ld { } +/* LiteralString */ .chroma .s { color: #b8bb26 } +/* LiteralStringAffix */ .chroma .sa { color: #b8bb26 } +/* LiteralStringBacktick */ .chroma .sb { color: #b8bb26 } +/* LiteralStringChar */ .chroma .sc { color: #b8bb26 } +/* LiteralStringDelimiter */ .chroma .dl { color: #b8bb26 } +/* LiteralStringDoc */ .chroma .sd { color: #b8bb26 } +/* LiteralStringDouble */ .chroma .s2 { color: #b8bb26 } +/* LiteralStringEscape */ .chroma .se { color: #b8bb26 } +/* LiteralStringHeredoc */ .chroma .sh { color: #b8bb26 } +/* LiteralStringInterpol */ .chroma .si { color: #b8bb26 } +/* LiteralStringOther */ .chroma .sx { color: #b8bb26 } +/* LiteralStringRegex */ .chroma .sr { color: #b8bb26 } +/* LiteralStringSingle */ .chroma .s1 { color: #b8bb26 } +/* LiteralStringSymbol */ .chroma .ss { color: #8ec07c } +/* LiteralNumber */ .chroma .m { color: #d3869b } +/* LiteralNumberBin */ .chroma .mb { color: #d3869b } +/* LiteralNumberFloat */ .chroma .mf { color: #d3869b } +/* LiteralNumberHex */ .chroma .mh { color: #d3869b } +/* LiteralNumberInteger */ .chroma .mi { color: #d3869b } +/* LiteralNumberIntegerLong */ .chroma .il { color: #d3869b } +/* LiteralNumberOct */ .chroma .mo { color: #d3869b } +/* Operator */ .chroma .o { color: #fb4934 } +/* OperatorWord */ .chroma .ow { color: #fb4934 } +/* Punctuation */ .chroma .p { } +/* Comment */ .chroma .c { color: #928374; font-style: italic } +/* CommentHashbang */ .chroma .ch { color: #928374; font-style: italic } +/* CommentMultiline */ .chroma .cm { color: #928374; font-style: italic } +/* CommentSingle */ .chroma .c1 { color: #928374; font-style: italic } +/* CommentSpecial */ .chroma .cs { color: #928374; font-style: italic } +/* CommentPreproc */ .chroma .cp { color: #8ec07c } +/* CommentPreprocFile */ .chroma .cpf { color: #8ec07c; font-style: italic } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color: #282828; background-color: #fb8019 } +/* GenericEmph */ .chroma .ge { color: #83a598; text-decoration: underline } +/* GenericError */ .chroma .gr { background-color: #fb8019; font-weight: bold } +/* GenericHeading */ .chroma .gh { color: #b8bb26; font-weight: bold } +/* GenericInserted */ .chroma .gi { color: #282828; background-color: #b8bb26 } +/* GenericOutput */ .chroma .go { color: #504945 } +/* GenericPrompt */ .chroma .gp { } +/* GenericStrong */ .chroma .gs { } +/* GenericSubheading */ .chroma .gu { color: #b8bb26; font-weight: bold } +/* GenericTraceback */ .chroma .gt { background-color: #fb8019; font-weight: bold } +/* GenericUnderline */ .chroma .gl { } +/* TextWhitespace */ .chroma .w { } + +/* Overrides */ +/* nginx KeywordNamespace */ .chroma code.language-nginx .kn { color: #fabd2f } +/* nginx LiteralString */ .chroma code.language-nginx .s { color: #ffffff } +/* sh NameVariable */ .chroma code.language-sh .nv { color: #8ec07c } +/* sh CommentPreproc */ .chroma code.language-sh .cp { color: #928374 } +/* yaml NameTag */ .chroma code.language-yaml .nt { color: #83a598 } diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css new file mode 100644 index 0000000..b5a6aed --- /dev/null +++ b/assets/stylesheets/style.css @@ -0,0 +1,195 @@ +html { + background: #222; +} +body { + margin: 0; + color: white; + font-family: "Noto Serif", serif; + text-underline-offset: 2.25px; + overflow-x: hidden; +} + +header { + display: grid; + grid-template-columns: 1fr auto 1fr; + background: #333; + padding: 5px 10px; + gap: 1em; + user-select: none; + position: sticky; + top: 0; + z-index: 100 +} + +#title { + text-align: center; +} + +#menu { + margin-left: auto; + display: flex; + gap: 3ex; +} + +header a { + color: white; + text-decoration: none; + position: relative; + width: fit-content; +} + +header a:hover::after { + content: ""; + background: green; + position: absolute; + display: block; + bottom: -.3em; + left: -1ex; + height: 3px; + width: calc(100% + 2ex); +} + +main, footer{ + max-width: 900px; + margin: 1.5em auto; + padding-inline: 3ex; +} + +#publishing { + text-align: right; + color: #555; +} +#publishing a { + color: #555; +} + +hr { + color: #555; + margin: 2em 0; +} + +h1, h2, h3, h4, h5, h6 { + text-align: center; +} + +.monodate { + font-family: monospace; +} + +.bold { + font-weight: bold; +} + +a { + color: lightgreen; +} + +/* highlighted code */ +.chroma { + background: none; +} + +div.chroma { + overflow: scroll; +} + +.chroma .lntable { + margin: auto; + width: fit-content; +} +.chroma code { + margin: 0 1ex; +} + +.chroma ::selection { + background: #444; +} + +:not(.chroma span)::selection { + background: green; + color: white; +} + +pre { + tab-size: 4; + -webkit-text-size-adjust: 100%; + overflow: scroll; +} + +ol, ul, pre code { + margin: auto; + display: block; + width: fit-content; + max-width: 100%; +} + +.alpha-ol ol { + list-style-type: lower-alpha; +} + +img, figcaption { + margin: auto; + display: block; + width: fit-content; + max-width: 60%; + color: #ddd; +} + +#copyright, #theme-copyright { + text-align: center; + display: block; + opacity: .2; +} + +.overflow-box { + overflow: scroll; +} + +table { + border-collapse: collapse; +} + +tr:nth-child(even) { + background: #252525; +} + +th { + background: #333; + border-right: 1.5px solid #222; + padding: .25em; +} + +td:not(.img) { + padding-inline: .75ex; +} + +td:not(:last-child) { + border-right: 1.5px solid #2b2b2b; +} + +td.img { + border: none; +} + +@media (max-width: 1000px) { + header { + grid-template-columns: auto auto; + grid-template-areas: + "home quicklinks" + "title title" + ; + } + #title { + text-align: center; + display: block; + width: 100%; + order: 3; + grid-area: title; + } + ol, ul, pre code { + margin-left: 0; + } + img, figcaption { + max-width: 95%; + } +} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 18ea135..13b6058 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,8 +6,12 @@ {{ $title | title }} - - + {{ $css := resources.Match "stylesheets/*.css" | resources.Concat "style.css" | minify | fingerprint }} + + {{ with $.Resources.GetMatch "**.css*" }} + {{ $style := . | minify | fingerprint }} + + {{ end }} {{- block "head" . }}{{- end }} diff --git a/static/stylesheets/highlight.css b/static/stylesheets/highlight.css deleted file mode 100644 index 5efc353..0000000 --- a/static/stylesheets/highlight.css +++ /dev/null @@ -1,93 +0,0 @@ -/* Background */ .bg { color: #ebdbb2; background-color: #282828; } -/* PreWrapper */ .chroma { color: #ffffff; background-color: #282828; } -/* Other */ .chroma .x { } -/* Error */ .chroma .err { } -/* 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: #3d3d3d } -/* 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: #756d59 } -/* 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: #756d59 } -/* Line */ .chroma .line { display: flex; } -/* Keyword */ .chroma .k { color: #fb4934 } -/* KeywordConstant */ .chroma .kc { color: #fb4934 } -/* KeywordDeclaration */ .chroma .kd { color: #fb4934 } -/* KeywordNamespace */ .chroma .kn { color: #fb4934 } -/* KeywordPseudo */ .chroma .kp { color: #fb4934 } -/* KeywordReserved */ .chroma .kr { color: #fb4934 } -/* KeywordType */ .chroma .kt { color: #fabd2f } -/* Name */ .chroma .n { } -/* NameAttribute */ .chroma .na { color: #b8bb26; font-weight: bold } -/* NameBuiltin */ .chroma .nb { color: #fabd2f } -/* NameBuiltinPseudo */ .chroma .bp { } -/* NameClass */ .chroma .nc { } -/* NameConstant */ .chroma .no { color: #d3869b } -/* NameDecorator */ .chroma .nd { } -/* NameEntity */ .chroma .ni { color: #fabd2f } -/* NameException */ .chroma .ne { color: #fb8019 } -/* NameFunction */ .chroma .nf { color: #fabd2f } -/* NameFunctionMagic */ .chroma .fm { } -/* NameLabel */ .chroma .nl { color: #fb8019 } -/* NameNamespace */ .chroma .nn { } -/* NameOther */ .chroma .nx { } -/* NameProperty */ .chroma .py { } -/* NameTag */ .chroma .nt { color: #fb8019 } -/* NameVariable */ .chroma .nv { } -/* NameVariableClass */ .chroma .vc { } -/* NameVariableGlobal */ .chroma .vg { } -/* NameVariableInstance */ .chroma .vi { } -/* NameVariableMagic */ .chroma .vm { } -/* Literal */ .chroma .l { } -/* LiteralDate */ .chroma .ld { } -/* LiteralString */ .chroma .s { color: #b8bb26 } -/* LiteralStringAffix */ .chroma .sa { color: #b8bb26 } -/* LiteralStringBacktick */ .chroma .sb { color: #b8bb26 } -/* LiteralStringChar */ .chroma .sc { color: #b8bb26 } -/* LiteralStringDelimiter */ .chroma .dl { color: #b8bb26 } -/* LiteralStringDoc */ .chroma .sd { color: #b8bb26 } -/* LiteralStringDouble */ .chroma .s2 { color: #b8bb26 } -/* LiteralStringEscape */ .chroma .se { color: #b8bb26 } -/* LiteralStringHeredoc */ .chroma .sh { color: #b8bb26 } -/* LiteralStringInterpol */ .chroma .si { color: #b8bb26 } -/* LiteralStringOther */ .chroma .sx { color: #b8bb26 } -/* LiteralStringRegex */ .chroma .sr { color: #b8bb26 } -/* LiteralStringSingle */ .chroma .s1 { color: #b8bb26 } -/* LiteralStringSymbol */ .chroma .ss { color: #8ec07c } -/* LiteralNumber */ .chroma .m { color: #d3869b } -/* LiteralNumberBin */ .chroma .mb { color: #d3869b } -/* LiteralNumberFloat */ .chroma .mf { color: #d3869b } -/* LiteralNumberHex */ .chroma .mh { color: #d3869b } -/* LiteralNumberInteger */ .chroma .mi { color: #d3869b } -/* LiteralNumberIntegerLong */ .chroma .il { color: #d3869b } -/* LiteralNumberOct */ .chroma .mo { color: #d3869b } -/* Operator */ .chroma .o { color: #fb4934 } -/* OperatorWord */ .chroma .ow { color: #fb4934 } -/* Punctuation */ .chroma .p { } -/* Comment */ .chroma .c { color: #928374; font-style: italic } -/* CommentHashbang */ .chroma .ch { color: #928374; font-style: italic } -/* CommentMultiline */ .chroma .cm { color: #928374; font-style: italic } -/* CommentSingle */ .chroma .c1 { color: #928374; font-style: italic } -/* CommentSpecial */ .chroma .cs { color: #928374; font-style: italic } -/* CommentPreproc */ .chroma .cp { color: #8ec07c } -/* CommentPreprocFile */ .chroma .cpf { color: #8ec07c; font-style: italic } -/* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { color: #282828; background-color: #fb8019 } -/* GenericEmph */ .chroma .ge { color: #83a598; text-decoration: underline } -/* GenericError */ .chroma .gr { background-color: #fb8019; font-weight: bold } -/* GenericHeading */ .chroma .gh { color: #b8bb26; font-weight: bold } -/* GenericInserted */ .chroma .gi { color: #282828; background-color: #b8bb26 } -/* GenericOutput */ .chroma .go { color: #504945 } -/* GenericPrompt */ .chroma .gp { } -/* GenericStrong */ .chroma .gs { } -/* GenericSubheading */ .chroma .gu { color: #b8bb26; font-weight: bold } -/* GenericTraceback */ .chroma .gt { background-color: #fb8019; font-weight: bold } -/* GenericUnderline */ .chroma .gl { } -/* TextWhitespace */ .chroma .w { } - -/* Overrides */ -/* nginx KeywordNamespace */ .chroma code.language-nginx .kn { color: #fabd2f } -/* nginx LiteralString */ .chroma code.language-nginx .s { color: #ffffff } -/* sh NameVariable */ .chroma code.language-sh .nv { color: #8ec07c } -/* sh CommentPreproc */ .chroma code.language-sh .cp { color: #928374 } -/* yaml NameTag */ .chroma code.language-yaml .nt { color: #83a598 } diff --git a/static/stylesheets/style.css b/static/stylesheets/style.css deleted file mode 100644 index cd9981b..0000000 --- a/static/stylesheets/style.css +++ /dev/null @@ -1,194 +0,0 @@ -html { - background: #222; -} -body { - margin: 0 0 1.5em 0; - color: white; - font-family: "Noto Serif", serif; - text-underline-offset: 2.25px; - overflow-x: hidden; -} - -header { - display: grid; - grid-template-columns: 1fr auto 1fr; - background: #333; - padding: 5px 10px; - gap: 1em; - user-select: none; - position: sticky; - top: 0; -} - -#title { - text-align: center; -} - -#menu { - margin-left: auto; - display: flex; - gap: 3ex; -} - -header a { - color: white; - text-decoration: none; - position: relative; - width: fit-content; -} - -header a:hover::after { - content: ""; - background: green; - position: absolute; - display: block; - bottom: -.3em; - left: -1ex; - height: 3px; - width: calc(100% + 2ex); -} - -main, footer{ - max-width: 900px; - margin: 1.5em auto; - padding-inline: 3ex; -} - -#publishing { - text-align: right; - color: #555; -} -#publishing a { - color: #555; -} - -hr { - color: #555; - margin: 2em 0; -} - -h1, h2, h3, h4, h5, h6 { - text-align: center; -} - -.monodate { - font-family: monospace; -} - -.bold { - font-weight: bold; -} - -a { - color: lightgreen; -} - -/* highlighted code */ -.chroma { - background: none; -} - -div.chroma { - overflow: scroll; -} - -.chroma .lntable { - margin: auto; - width: fit-content; -} -.chroma code { - margin: 0 1ex; -} - -.chroma ::selection { - background: #444; -} - -:not(.chroma span)::selection { - background: green; - color: white; -} - -pre { - tab-size: 4; - -webkit-text-size-adjust: 100%; - overflow: scroll; -} - -ol, ul, pre code { - margin: auto; - display: block; - width: fit-content; - max-width: 100%; -} - -.alpha-ol ol { - list-style-type: lower-alpha; -} - -img, figcaption { - margin: auto; - display: block; - width: fit-content; - max-width: 60%; - color: #ddd; -} - -#copyright, #theme-copyright { - text-align: center; - display: block; - opacity: .2; -} - -.overflow-box { - overflow: scroll; -} - -table { - border-collapse: collapse; -} - -tr:nth-child(even) { - background: #252525; -} - -th { - background: #333; - border-right: 1.5px solid #222; - padding: .25em; -} - -td:not(.img) { - padding-inline: .75ex; -} - -td:not(:last-child) { - border-right: 1.5px solid #2b2b2b; -} - -td.img { - border: none; -} - -@media (max-width: 1000px) { - header { - grid-template-columns: auto auto; - grid-template-areas: - "home quicklinks" - "title title" - ; - } - #title { - text-align: center; - display: block; - width: 100%; - order: 3; - grid-area: title; - } - ol, ul, pre code { - margin-left: 0; - } - img, figcaption { - max-width: 95%; - } -} -- cgit v1.2.3