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 @@ -<pre class="chroma"><code class="language-{{ .Type }}" data-lang="{{ .Type }}">{{ (transform.HighlightCodeBlock .).Inner }}</code></pre> 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 @@ +<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}> + <a href="#{{ .Anchor }}">{{ .Text }}</a> +</h{{ .Level }}> 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 @@ -<!DOCTYPE html> +<!doctype html> <html lang="{{ .Site.Language.LanguageCode }}"> - <head> + <head> {{ partial "head.html" . }} <!-- 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> -{{ range .AlternativeOutputFormats -}} -{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} -{{ end -}} -</head> -<body> -<a href="#main" class="skip">Skip to content</a> -<nav id="main-nav"> -<ul> -<li><a href="{{.Site.BaseURL}}" id="site-title">{{.Site.Title}}</a></li> -{{ with .Site.Menus.main }} - {{ range . }} + <style> + .icon svg { + width: 1.25em; + height: 1.25em; + } + </style> + {{ range .AlternativeOutputFormats -}} {{ printf ` + <link rel="%s" type="%s" href="%s" title="%s" /> + ` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}} + </head> + <body> + <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> - {{ end }} -{{ end }} -</ul> -</nav> + {{ end }} {{ end }} + </ul> + </nav> -<main id="main"> -{{ block "main" . }}{{ end }} -</main> -{{ partial "footer.html" . }} -</body> + <main id="main">{{ block "main" . }}{{ end }}</main> + {{ partial "footer.html" . }} + </body> </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 }}<meta name="keywords" content="{{ delimit . ", " }}"/>{{ end }} <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"/> <link rel="canonical" href="{{ .Permalink }}"/> -{{- with resources.Get "style.css" }} - {{- if eq hugo.Environment "development" }} - <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" }} +{{ range slice "style.css" "syntax.css"}} +{{- with resources.Get . }} {{- if eq hugo.Environment "development" }} <link rel="stylesheet" href="{{ .RelPermalink }}"> {{- else }} @@ -24,5 +16,6 @@ {{- end }} {{- end }} {{- end }} +{{ end }} <title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title> 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" }} -<br> -tags: -{{ range $i, $e := . }}{{- if $i -}}, {{ end -}}{{ with $e }}<a class="tag" href="{{.Permalink}}">{{lower .Title}}</a>{{end}}{{ end }} +<p> + Tags:{{ range $i, $e := . }}{{- if $i -}},{{ end -}}{{ with $e }} + <a class="tag" href="{{.Permalink}}">{{lower .Title}}</a>{{end}}{{ end }} +</p> {{ end }}