wires/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

theme changes

Browse source
This commit is contained in:
wires 2025-03-31 13:46:45 -04:00
parent a6013bef3e
commit dcee4fe4b1
Signed by: wires
SSH key fingerprint: SHA256:9GtP+M3O2IivPDlw1UY872UPUuJH2gI0yG6ExBxaaiM
8 changed files with 327 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
assets/style.css
View file

@ -1,87 +1,122 @@
* {
box-sizing: border-box;
}
:root {
--fg: #cdd6f4;
--bg: #11111b;
--link: #bd93f9;
--overlay: #313244;
}
.skip { .skip {
position: absolute; position: absolute;
left: -10000px; left: -10000px;
top: auto; top: auto;
width: 1px; width: 1px;
height: 1px; height: 1px;
overflow: hidden; overflow: hidden;
} }
.skip:focus { .skip:focus {
position: static; position: static;
width: auto; width: auto;
height: auto; height: auto;
} }
body { body {
max-width: 45rem; max-width: 50rem;
padding: 0 2rem; padding: 2rem;
margin: 2rem auto 0; margin: 0 auto;
line-height: 1.6; line-height: 1.8;
background: #11111b; background: var(--bg);
color: white; color: var(--fg);
font-family: serif;
} }
h1, h2, h3 { h1,
margin-bottom: 0.25em; h2,
line-height: 1.3; h3,
} h4 {
margin-block-end: 0.25em;
line-height: 1.3;
font-family: sans-serif;
p { a,
margin-top: 0; a:visited {
} color: var(--fg);
text-decoration: none;
}
p + p { a:hover {
text-indent: 2em; color: var(--link);
text-decoration: underline;
}
} }
ul { ul {
margin-top: 0; margin-block-start: 0;
}
p {
margin-block-start: 0;
text-align: justify;
hyphens: auto;
} }
#main-nav { #main-nav {
font-size: 125%; line-height: 1.3;
} }
#main-nav ul { #main-nav ul {
padding: 0; padding: 0;
margin: 0 0 1em; margin: 0 0 1em;
} }
#main-nav li { #main-nav li {
display: inline-block; display: inline-block;
} margin-inline-end: 0.5em;
#main-nav li::before {
content: '/ ';
}
#main-nav li:first-child::before {
content: '';
} }
#site-title { #site-title {
font-weight: bold; font-family: sans-serif;
color: inherit; font-weight: bold;
text-decoration: none; font-size: 150%;
} margin-bottom: 0.25rem;
#site-title:hover {
text-decoration: underline;
} }
footer { footer {
margin: 2em 0 0; margin: 2em 0 0;
} }
header h1 { header h1 {
margin: 0; margin: 0;
} }
header { header {
margin-bottom: 1em; margin-bottom: 1em;
} }
a, a:visited { a,
color: #8ef; 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%;
} }

270
assets/syntax.css
View file

@ -1,19 +1,19 @@
:root { :root {
--chroma-bg: #111; --chroma-bg: #111;
--comment: #9e9e9e; --comment: #9e9e9e;
--cyan: #8be9fd; --cyan: #8be9fd;
--green: #50fa7b; --green: #50fa7b;
--orange: #ffb86c; --orange: #ffb86c;
--pink: #f5a; --pink: #ff79c6;
--purple: #bd93f9; --purple: #bd93f9;
--red: #f55; --red: #f55;
--yellow: #f1fa8c; --yellow: #f1fa8c;
} }
/* @media (prefers-color-scheme: light) { /* @media (prefers-color-scheme: light) {
:root { :root {
--chroma-bg: #eee; --chroma-bg: #eee;
--comment: #666; --comment: #666;
--cyan: #04a5e5; --cyan: #04a5e5;
--green: #40a02b; --green: #40a02b;
--orange: #fe640b; --orange: #fe640b;
--pink: #ea76cb; --pink: #ea76cb;
@ -22,49 +22,134 @@
--yellow: #df8e1d; --yellow: #df8e1d;
} }
} */ } */
/* Background */ .bg, /* Background */
/* PreWrapper */ .chroma { background-color:var(--chroma-bg); } .bg,
/* Other */ .chroma .x { } /* PreWrapper */ .chroma {
/* Error */ .chroma .err { } background-color: var(--chroma-bg);
/* CodeLine */ .chroma .cl { } }
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } /* Other */
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } .chroma .x {
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; } }
/* LineHighlight */ .chroma .hl { background-color:#3d3f4a } /* Error */
/* LineNumbersTable */ .chroma .lnt, .chroma .err {
/* 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; } /* CodeLine */
/* Keyword */ .chroma .k, .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, /* KeywordConstant */ .chroma .kc,
/* KeywordNamespace */ .chroma .kn, /* KeywordNamespace */ .chroma .kn,
/* KeywordPseudo */ .chroma .kp, /* KeywordPseudo */ .chroma .kp,
/* KeywordReserved */ .chroma .kr { color:var(--pink) } /* KeywordReserved */ .chroma .kr {
/* KeywordType */ .chroma .kt { color:var(--cyan) } color: var(--pink);
/* KeywordDeclaration */ .chroma .kd { color:var(--cyan);font-style:italic } }
/* Name */ .chroma .n { } /* KeywordType */
/* NameBuiltinPseudo */ .chroma .bp { } .chroma .kt {
/* NameConstant */ .chroma .no { } color: var(--cyan);
/* NameDecorator */ .chroma .nd { } }
/* NameEntity */ .chroma .ni { } /* KeywordDeclaration */
/* NameException */ .chroma .ne { } .chroma .kd {
/* NameAttribute */ .chroma .na, 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, /* NameClass */ .chroma .nc,
/* NameFunctionMagic */ .chroma .fm, /* NameFunctionMagic */ .chroma .fm,
/* NameFunction */ .chroma .nf { color:var(--green) } /* NameFunction */ .chroma .nf {
/* NameNamespace */ .chroma .nn { } color: var(--green);
/* NameOther */ .chroma .nx { } }
/* NameProperty */ .chroma .py { } /* NameNamespace */
/* NameTag */ .chroma .nt { color:var(--pink) } .chroma .nn {
/* NameBuiltin */ .chroma .nb, }
/* NameOther */
.chroma .nx {
}
/* NameProperty */
.chroma .py {
}
/* NameTag */
.chroma .nt {
color: var(--pink);
}
/* NameBuiltin */
.chroma .nb,
/* NameLabel */ .chroma .nl, /* NameLabel */ .chroma .nl,
/* NameVariable */ .chroma .nv, /* NameVariable */ .chroma .nv,
/* NameVariableClass */ .chroma .vc, /* NameVariableClass */ .chroma .vc,
/* NameVariableGlobal */ .chroma .vg, /* NameVariableGlobal */ .chroma .vg,
/* NameVariableInstance */ .chroma .vi { color:var(--cyan);font-style:italic } /* NameVariableInstance */ .chroma .vi {
/* NameVariableMagic */ .chroma .vm { } color: var(--cyan);
/* Literal */ .chroma .l { } font-style: italic;
/* LiteralDate */ .chroma .ld { } }
/* LiteralString */ .chroma .s, /* NameVariableMagic */
.chroma .vm {
}
/* Literal */
.chroma .l {
}
/* LiteralDate */
.chroma .ld {
}
/* LiteralString */
.chroma .s,
/* LiteralStringAffix */ .chroma .sa, /* LiteralStringAffix */ .chroma .sa,
/* LiteralStringBacktick */ .chroma .sb, /* LiteralStringBacktick */ .chroma .sb,
/* LiteralStringChar */ .chroma .sc, /* LiteralStringChar */ .chroma .sc,
@ -77,34 +162,85 @@
/* LiteralStringOther */ .chroma .sx, /* LiteralStringOther */ .chroma .sx,
/* LiteralStringRegex */ .chroma .sr, /* LiteralStringRegex */ .chroma .sr,
/* LiteralStringSingle */ .chroma .s1, /* LiteralStringSingle */ .chroma .s1,
/* LiteralStringSymbol */ .chroma .ss { color:var(--yellow) } /* LiteralStringSymbol */ .chroma .ss {
/* LiteralNumber */ .chroma .m, color: var(--yellow);
}
/* LiteralNumber */
.chroma .m,
/* LiteralNumberBin */ .chroma .mb, /* LiteralNumberBin */ .chroma .mb,
/* LiteralNumberFloat */ .chroma .mf, /* LiteralNumberFloat */ .chroma .mf,
/* LiteralNumberHex */ .chroma .mh, /* LiteralNumberHex */ .chroma .mh,
/* LiteralNumberInteger */ .chroma .mi, /* LiteralNumberInteger */ .chroma .mi,
/* LiteralNumberIntegerLong */ .chroma .il, /* LiteralNumberIntegerLong */ .chroma .il,
/* LiteralNumberOct */ .chroma .mo { color:var(--purple) } /* LiteralNumberOct */ .chroma .mo {
/* Operator */ .chroma .o, color: var(--purple);
/* OperatorWord */ .chroma .ow { color:var(--pink) } }
/* Punctuation */ .chroma .p { } /* Operator */
/* Comment */ .chroma .c, .chroma .o,
/* OperatorWord */ .chroma .ow {
color: var(--pink);
}
/* Punctuation */
.chroma .p {
}
/* Comment */
.chroma .c,
/* CommentHashbang */ .chroma .ch, /* CommentHashbang */ .chroma .ch,
/* CommentMultiline */ .chroma .cm, /* CommentMultiline */ .chroma .cm,
/* CommentSingle */ .chroma .c1, /* CommentSingle */ .chroma .c1,
/* CommentSpecial */ .chroma .cs { color:var(--comment) } /* CommentSpecial */ .chroma .cs {
/* CommentPreproc */ .chroma .cp, color: var(--comment);
/* CommentPreprocFile */ .chroma .cpf { color:var(--pink) } }
/* Generic */ .chroma .g { } /* CommentPreproc */
/* GenericDeleted */ .chroma .gd { color:var(--red) } .chroma .cp,
/* GenericEmph */ .chroma .ge { text-decoration:underline } /* CommentPreprocFile */ .chroma .cpf {
/* GenericError */ .chroma .gr { } color: var(--pink);
/* GenericHeading */ .chroma .gh { font-weight:bold } }
/* GenericInserted */ .chroma .gi { color:var(--green);font-weight:bold } /* Generic */
/* GenericOutput */ .chroma .go { color:var(--comment) } .chroma .g {
/* GenericPrompt */ .chroma .gp { } }
/* GenericStrong */ .chroma .gs { } /* GenericDeleted */
/* GenericSubheading */ .chroma .gu { font-weight:bold } .chroma .gd {
/* GenericTraceback */ .chroma .gt { } color: var(--red);
/* GenericUnderline */ .chroma .gl { text-decoration:underline } }
/* TextWhitespace */ .chroma .w { } /* 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 {
}

7
hugo.toml
View file

@ -1,6 +1,6 @@
baseURL = 'https://wires.systems' baseURL = 'https://wires.systems'
languageCode = 'en-us' languageCode = 'en-us'
title = "~wires" title = "wires"
uglyurls = true uglyurls = true
enableGitInfo = true enableGitInfo = true
disableKinds = ['section', 'taxonomy'] disableKinds = ['section', 'taxonomy']
@ -17,6 +17,11 @@ summaryLength = 10
[outputFormats.rss] [outputFormats.rss]
baseName = 'feed' baseName = 'feed'
[[menu.main]]
weight = -10
name = "home"
url = "/"
[[menu.main]] [[menu.main]]
name = "rss" name = "rss"
url = "/feed.xml" url = "/feed.xml"

1
layouts/_default/_markup/render-codeblock.html
View file

@ -1 +0,0 @@
<pre class="chroma"><code class="language-{{ .Type }}" data-lang="{{ .Type }}">{{ (transform.HighlightCodeBlock .).Inner }}</code></pre>

3
layouts/_default/_markup/render-heading.html Normal file
View file

@ -0,0 +1,3 @@
<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
<a href="#{{ .Anchor }}">{{ .Text }}</a>
</h{{ .Level }}>

47
layouts/_default/baseof.html
View file

@ -1,29 +1,30 @@
<!DOCTYPE html> <!doctype html>
<html lang="{{ .Site.Language.LanguageCode }}"> <html lang="{{ .Site.Language.LanguageCode }}">
<head> <head>
{{ partial "head.html" . }} {{ partial "head.html" . }}
<!-- this is here to make sure that if we can't load CSS the icons don't totally fuck up layout --> <!-- this is here to make sure that if we can't load CSS the icons don't totally fuck up layout -->
<style>.icon svg { width: 1.25em; height: 1.25em; }</style> <style>
{{ range .AlternativeOutputFormats -}} .icon svg {
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} width: 1.25em;
{{ end -}} height: 1.25em;
</head> }
<body> </style>
<a href="#main" class="skip">Skip to content</a> {{ range .AlternativeOutputFormats -}} {{ printf `
<nav id="main-nav"> <link rel="%s" type="%s" href="%s" title="%s" />
<ul> ` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}}
<li><a href="{{.Site.BaseURL}}" id="site-title">{{.Site.Title}}</a></li> </head>
{{ with .Site.Menus.main }} <body>
{{ range . }} <a href="#main" class="skip">Skip to content</a>
<nav id="main-nav">
<div id="site-title">{{.Site.Title}}</div>
<ul>
{{ with .Site.Menus.main }} {{ range . }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li> <li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }} {{ end }} {{ end }}
{{ end }} </ul>
</ul> </nav>
</nav>
<main id="main"> <main id="main">{{ block "main" . }}{{ end }}</main>
{{ block "main" . }}{{ end }} {{ partial "footer.html" . }}
</main> </body>
{{ partial "footer.html" . }}
</body>
</html> </html>

13
layouts/partials/head.html
View file

@ -6,16 +6,8 @@
{{ with .Keywords }}<meta name="keywords" content="{{ delimit . ", " }}"/>{{ end }} {{ with .Keywords }}<meta name="keywords" content="{{ delimit . ", " }}"/>{{ end }}
<link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"/> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"/>
<link rel="canonical" href="{{ .Permalink }}"/> <link rel="canonical" href="{{ .Permalink }}"/>
{{- with resources.Get "style.css" }} {{ range slice "style.css" "syntax.css"}}
{{- if eq hugo.Environment "development" }} {{- with resources.Get . }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{- else }}
{{- with . | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{- end }}
{{- end }}
{{- end }}
{{- with resources.Get "syntax.css" }}
{{- if eq hugo.Environment "development" }} {{- if eq hugo.Environment "development" }}
<link rel="stylesheet" href="{{ .RelPermalink }}"> <link rel="stylesheet" href="{{ .RelPermalink }}">
{{- else }} {{- else }}
@ -24,5 +16,6 @@
{{- end }} {{- end }}
{{- end }} {{- end }}
{{- end }} {{- end }}
{{ end }}
<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title> <title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>

7
layouts/partials/tags.html
View file

@ -1,5 +1,6 @@
{{ with .GetTerms "tags" }} {{ with .GetTerms "tags" }}
<br> <p>
tags: Tags:{{ range $i, $e := . }}{{- if $i -}},{{ end -}}{{ with $e }}
{{ range $i, $e := . }}{{- if $i -}}, {{ end -}}{{ with $e }}<a class="tag" href="{{.Permalink}}">{{lower .Title}}</a>{{end}}{{ end }} <a class="tag" href="{{.Permalink}}">{{lower .Title}}</a>{{end}}{{ end }}
</p>
{{ end }} {{ end }}