From dcee4fe4b15738c30eb3962ff6caa5db8845254c Mon Sep 17 00:00:00 2001 From: wires Date: Mon, 31 Mar 2025 13:46:45 -0400 Subject: [PATCH] theme changes --- assets/style.css | 133 +++++---- assets/syntax.css | 270 +++++++++++++----- hugo.toml | 7 +- .../_default/_markup/render-codeblock.html | 1 - layouts/_default/_markup/render-heading.html | 3 + layouts/_default/baseof.html | 47 +-- layouts/partials/head.html | 13 +- layouts/partials/tags.html | 7 +- 8 files changed, 327 insertions(+), 154 deletions(-) delete mode 100644 layouts/_default/_markup/render-codeblock.html create mode 100644 layouts/_default/_markup/render-heading.html diff --git a/assets/style.css b/assets/style.css index b1b8d23..fe1e0bb 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,87 +1,122 @@ +* { + box-sizing: border-box; +} + +:root { + --fg: #cdd6f4; + --bg: #11111b; + --link: #bd93f9; + --overlay: #313244; +} + .skip { - position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } .skip:focus { - position: static; - width: auto; - height: auto; + position: static; + width: auto; + height: auto; } body { - max-width: 45rem; - padding: 0 2rem; - margin: 2rem auto 0; - line-height: 1.6; - background: #11111b; - color: white; + max-width: 50rem; + padding: 2rem; + margin: 0 auto; + line-height: 1.8; + background: var(--bg); + color: var(--fg); + font-family: serif; } -h1, h2, h3 { - margin-bottom: 0.25em; - line-height: 1.3; -} +h1, +h2, +h3, +h4 { + margin-block-end: 0.25em; + line-height: 1.3; + font-family: sans-serif; -p { - margin-top: 0; -} + a, + a:visited { + color: var(--fg); + text-decoration: none; + } -p + p { - text-indent: 2em; + a:hover { + color: var(--link); + text-decoration: underline; + } } ul { - margin-top: 0; + margin-block-start: 0; +} + +p { + margin-block-start: 0; + text-align: justify; + hyphens: auto; } #main-nav { - font-size: 125%; + line-height: 1.3; } #main-nav ul { - padding: 0; - margin: 0 0 1em; + padding: 0; + margin: 0 0 1em; } #main-nav li { - display: inline-block; -} - -#main-nav li::before { - content: '/ '; -} - -#main-nav li:first-child::before { - content: ''; + display: inline-block; + margin-inline-end: 0.5em; } #site-title { - font-weight: bold; - color: inherit; - text-decoration: none; -} - -#site-title:hover { - text-decoration: underline; + font-family: sans-serif; + font-weight: bold; + font-size: 150%; + margin-bottom: 0.25rem; } footer { - margin: 2em 0 0; + margin: 2em 0 0; } header h1 { - margin: 0; + margin: 0; } header { - margin-bottom: 1em; + margin-bottom: 1em; } -a, a:visited { - color: #8ef; +a, +a:visited { + color: var(--link); +} + +hr { + border: none; + height: 1px; + background: var(--overlay); +} + +pre code { + background: black; + border: 1px solid var(--overlay); + border-radius: 8px; + padding: 1em; + display: block; + overflow-x: auto; +} + +code { + font-size: 125%; } diff --git a/assets/syntax.css b/assets/syntax.css index 96128f9..a7bee02 100644 --- a/assets/syntax.css +++ b/assets/syntax.css @@ -1,19 +1,19 @@ :root { - --chroma-bg: #111; - --comment: #9e9e9e; - --cyan: #8be9fd; - --green: #50fa7b; - --orange: #ffb86c; - --pink: #f5a; - --purple: #bd93f9; - --red: #f55; - --yellow: #f1fa8c; + --chroma-bg: #111; + --comment: #9e9e9e; + --cyan: #8be9fd; + --green: #50fa7b; + --orange: #ffb86c; + --pink: #ff79c6; + --purple: #bd93f9; + --red: #f55; + --yellow: #f1fa8c; } /* @media (prefers-color-scheme: light) { :root { --chroma-bg: #eee; --comment: #666; - --cyan: #04a5e5; + --cyan: #04a5e5; --green: #40a02b; --orange: #fe640b; --pink: #ea76cb; @@ -22,49 +22,134 @@ --yellow: #df8e1d; } } */ -/* Background */ .bg, -/* PreWrapper */ .chroma { background-color:var(--chroma-bg); } -/* 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:#3d3f4a } -/* LineNumbersTable */ .chroma .lnt, -/* 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:var(--comment) } -/* Line */ .chroma .line { display:flex; } -/* Keyword */ .chroma .k, +/* Background */ +.bg, +/* PreWrapper */ .chroma { + background-color: var(--chroma-bg); +} +/* 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: #3d3f4a; +} +/* LineNumbersTable */ +.chroma .lnt, +/* 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: var(--comment); +} +/* Line */ +.chroma .line { + display: flex; +} +/* Keyword */ +.chroma .k, /* KeywordConstant */ .chroma .kc, /* KeywordNamespace */ .chroma .kn, /* KeywordPseudo */ .chroma .kp, -/* KeywordReserved */ .chroma .kr { color:var(--pink) } -/* KeywordType */ .chroma .kt { color:var(--cyan) } -/* KeywordDeclaration */ .chroma .kd { color:var(--cyan);font-style:italic } -/* Name */ .chroma .n { } -/* NameBuiltinPseudo */ .chroma .bp { } -/* NameConstant */ .chroma .no { } -/* NameDecorator */ .chroma .nd { } -/* NameEntity */ .chroma .ni { } -/* NameException */ .chroma .ne { } -/* NameAttribute */ .chroma .na, +/* KeywordReserved */ .chroma .kr { + color: var(--pink); +} +/* KeywordType */ +.chroma .kt { + color: var(--cyan); +} +/* KeywordDeclaration */ +.chroma .kd { + color: var(--cyan); + font-style: italic; +} +/* Name */ +.chroma .n { +} +/* NameBuiltinPseudo */ +.chroma .bp { +} +/* NameConstant */ +.chroma .no { +} +/* NameDecorator */ +.chroma .nd { +} +/* NameEntity */ +.chroma .ni { +} +/* NameException */ +.chroma .ne { +} +/* NameAttribute */ +.chroma .na, /* NameClass */ .chroma .nc, /* NameFunctionMagic */ .chroma .fm, -/* NameFunction */ .chroma .nf { color:var(--green) } -/* NameNamespace */ .chroma .nn { } -/* NameOther */ .chroma .nx { } -/* NameProperty */ .chroma .py { } -/* NameTag */ .chroma .nt { color:var(--pink) } -/* NameBuiltin */ .chroma .nb, +/* NameFunction */ .chroma .nf { + color: var(--green); +} +/* NameNamespace */ +.chroma .nn { +} +/* NameOther */ +.chroma .nx { +} +/* NameProperty */ +.chroma .py { +} +/* NameTag */ +.chroma .nt { + color: var(--pink); +} +/* NameBuiltin */ +.chroma .nb, /* NameLabel */ .chroma .nl, /* NameVariable */ .chroma .nv, /* NameVariableClass */ .chroma .vc, /* NameVariableGlobal */ .chroma .vg, -/* NameVariableInstance */ .chroma .vi { color:var(--cyan);font-style:italic } -/* NameVariableMagic */ .chroma .vm { } -/* Literal */ .chroma .l { } -/* LiteralDate */ .chroma .ld { } -/* LiteralString */ .chroma .s, +/* NameVariableInstance */ .chroma .vi { + color: var(--cyan); + font-style: italic; +} +/* NameVariableMagic */ +.chroma .vm { +} +/* Literal */ +.chroma .l { +} +/* LiteralDate */ +.chroma .ld { +} +/* LiteralString */ +.chroma .s, /* LiteralStringAffix */ .chroma .sa, /* LiteralStringBacktick */ .chroma .sb, /* LiteralStringChar */ .chroma .sc, @@ -77,34 +162,85 @@ /* LiteralStringOther */ .chroma .sx, /* LiteralStringRegex */ .chroma .sr, /* LiteralStringSingle */ .chroma .s1, -/* LiteralStringSymbol */ .chroma .ss { color:var(--yellow) } -/* LiteralNumber */ .chroma .m, +/* LiteralStringSymbol */ .chroma .ss { + color: var(--yellow); +} +/* LiteralNumber */ +.chroma .m, /* LiteralNumberBin */ .chroma .mb, /* LiteralNumberFloat */ .chroma .mf, /* LiteralNumberHex */ .chroma .mh, /* LiteralNumberInteger */ .chroma .mi, /* LiteralNumberIntegerLong */ .chroma .il, -/* LiteralNumberOct */ .chroma .mo { color:var(--purple) } -/* Operator */ .chroma .o, -/* OperatorWord */ .chroma .ow { color:var(--pink) } -/* Punctuation */ .chroma .p { } -/* Comment */ .chroma .c, +/* LiteralNumberOct */ .chroma .mo { + color: var(--purple); +} +/* Operator */ +.chroma .o, +/* OperatorWord */ .chroma .ow { + color: var(--pink); +} +/* Punctuation */ +.chroma .p { +} +/* Comment */ +.chroma .c, /* CommentHashbang */ .chroma .ch, /* CommentMultiline */ .chroma .cm, /* CommentSingle */ .chroma .c1, -/* CommentSpecial */ .chroma .cs { color:var(--comment) } -/* CommentPreproc */ .chroma .cp, -/* CommentPreprocFile */ .chroma .cpf { color:var(--pink) } -/* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { color:var(--red) } -/* GenericEmph */ .chroma .ge { text-decoration:underline } -/* GenericError */ .chroma .gr { } -/* GenericHeading */ .chroma .gh { font-weight:bold } -/* GenericInserted */ .chroma .gi { color:var(--green);font-weight:bold } -/* GenericOutput */ .chroma .go { color:var(--comment) } -/* GenericPrompt */ .chroma .gp { } -/* GenericStrong */ .chroma .gs { } -/* GenericSubheading */ .chroma .gu { font-weight:bold } -/* GenericTraceback */ .chroma .gt { } -/* GenericUnderline */ .chroma .gl { text-decoration:underline } -/* TextWhitespace */ .chroma .w { } +/* CommentSpecial */ .chroma .cs { + color: var(--comment); +} +/* CommentPreproc */ +.chroma .cp, +/* CommentPreprocFile */ .chroma .cpf { + color: var(--pink); +} +/* Generic */ +.chroma .g { +} +/* GenericDeleted */ +.chroma .gd { + color: var(--red); +} +/* GenericEmph */ +.chroma .ge { + text-decoration: underline; +} +/* GenericError */ +.chroma .gr { +} +/* GenericHeading */ +.chroma .gh { + font-weight: bold; +} +/* GenericInserted */ +.chroma .gi { + color: var(--green); + font-weight: bold; +} +/* GenericOutput */ +.chroma .go { + color: var(--comment); +} +/* GenericPrompt */ +.chroma .gp { + color: var(--comment); +} +/* GenericStrong */ +.chroma .gs { +} +/* GenericSubheading */ +.chroma .gu { + font-weight: bold; +} +/* GenericTraceback */ +.chroma .gt { +} +/* GenericUnderline */ +.chroma .gl { + text-decoration: underline; +} +/* TextWhitespace */ +.chroma .w { +} diff --git a/hugo.toml b/hugo.toml index 2199c34..aee57cc 100644 --- a/hugo.toml +++ b/hugo.toml @@ -1,6 +1,6 @@ baseURL = 'https://wires.systems' languageCode = 'en-us' -title = "~wires" +title = "wires" uglyurls = true enableGitInfo = true disableKinds = ['section', 'taxonomy'] @@ -17,6 +17,11 @@ summaryLength = 10 [outputFormats.rss] baseName = 'feed' +[[menu.main]] + weight = -10 + name = "home" + url = "/" + [[menu.main]] name = "rss" url = "/feed.xml" diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html deleted file mode 100644 index 9bfc3b1..0000000 --- a/layouts/_default/_markup/render-codeblock.html +++ /dev/null @@ -1 +0,0 @@ -
{{ (transform.HighlightCodeBlock .).Inner }}
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html new file mode 100644 index 0000000..d49699e --- /dev/null +++ b/layouts/_default/_markup/render-heading.html @@ -0,0 +1,3 @@ + + {{ .Text }} + diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index ecac3b1..0504861 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,29 +1,30 @@ - + - + {{ partial "head.html" . }} - -{{ range .AlternativeOutputFormats -}} -{{ printf `` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} -{{ end -}} - - - - -
-{{ block "main" . }}{{ end }} -
-{{ partial "footer.html" . }} - +
{{ block "main" . }}{{ end }}
+ {{ partial "footer.html" . }} + diff --git a/layouts/partials/head.html b/layouts/partials/head.html index ce38afc..e09b60c 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -6,16 +6,8 @@ {{ with .Keywords }}{{ end }} -{{- with resources.Get "style.css" }} - {{- if eq hugo.Environment "development" }} - - {{- else }} - {{- with . | minify | fingerprint }} - - {{- end }} - {{- end }} -{{- end }} -{{- with resources.Get "syntax.css" }} +{{ range slice "style.css" "syntax.css"}} +{{- with resources.Get . }} {{- if eq hugo.Environment "development" }} {{- else }} @@ -24,5 +16,6 @@ {{- end }} {{- end }} {{- end }} +{{ end }} {{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }} diff --git a/layouts/partials/tags.html b/layouts/partials/tags.html index 8062534..b464c47 100644 --- a/layouts/partials/tags.html +++ b/layouts/partials/tags.html @@ -1,5 +1,6 @@ {{ with .GetTerms "tags" }} -
-tags: -{{ range $i, $e := . }}{{- if $i -}}, {{ end -}}{{ with $e }}{{lower .Title}}{{end}}{{ end }} +

+ Tags:{{ range $i, $e := . }}{{- if $i -}},{{ end -}}{{ with $e }} + {{lower .Title}}{{end}}{{ end }} +

{{ end }}