theme changes
This commit is contained in:
parent
a6013bef3e
commit
dcee4fe4b1
SSH key fingerprint:
SHA256:9GtP+M3O2IivPDlw1UY872UPUuJH2gI0yG6ExBxaaiM
8 changed files with 327 additions and 154 deletions
133
assets/style.css
133
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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
3
layouts/_default/_markup/render-heading.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
|
||||
<a href="#{{ .Anchor }}">{{ .Text }}</a>
|
||||
</h{{ .Level }}>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue