commit 18e9cc19ea9b5a5b19430e3c4c27e9868ded2daf
parent 269415bf42314e9f84a1c4543cb5cf08c5674e26
Author: cjtheham <cjtheham@protonmail.com>
Date: Thu, 16 Feb 2023 13:51:44 -0600
feat: update to v1.0.1
Diffstat:
4 files changed, 255 insertions(+), 244 deletions(-)
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -6,13 +6,7 @@
{{- partial "header.html" . -}}
</header>
- <nav>
- {{ range .Site.Menus.main -}}
- <span>
- <a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
- </span>
- {{- end }}
- </nav>
+
<main>
{{- block "main" . }}{{- end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -1,7 +1,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- This ensures your site looks right on mobile devices -->
- <link rel="stylesheet" type="text/css" href="/css/readable.css?v=1.0.0">
+ <link rel="stylesheet" type="text/css" href="/css/readable.css?v=1.0.1">
<meta name="description" content='{{ .Page.Description }}'>
{{ $title := print .Site.Title " | " .Title }}
{{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,2 +1,10 @@
<h1>{{ $.Site.Title }}</h1>
-<p>{{ $.Site.Params.subtitle }}</p>
-\ No newline at end of file
+<p>{{ $.Site.Params.subtitle }}</p>
+
+<nav>
+ {{ range .Site.Menus.main -}}
+ <span>
+ <a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
+ </span>
+ {{- end }}
+</nav>
+\ No newline at end of file
diff --git a/static/css/readable.css b/static/css/readable.css
@@ -1,245 +1,255 @@
-/* readable.css 1.0.0 */
+/* readable.css 1.0.1-beta */
-/* Code from Benjamin Hollon (benjaminhollon@fosstodon.org) */
+/* Font family support */
+html, html[data-font-family="serif"] {
+ --font-family: serif;
+}
+html[data-font-family="sans-serif"] {
+ --font-family: sans-serif;
+}
+html[data-font-family="monospace"] {
+ --font-family: monospace;
+}
-#typewriter::after {
- content: '_';
- width: 0;
- display: inline-block;
- animation: cursor-blink 1s infinite;
+/* Color scheme support */
+html, html[data-theme="light"] {
+ --background-color: snow;
+ --color: #000;
+}
+html[data-high-contrast="on"], html[data-theme="light"][data-high-contrast="on"] {
+ --background-color: #fff;
}
-/* Font family support */
-html, html[data-font-family="serif"] {
- --font-family: serif;
- }
- html[data-font-family="sans-serif"] {
- --font-family: sans-serif;
- }
- html[data-font-family="monospace"] {
- --font-family: monospace;
- }
-
- /* Color scheme support */
- html, html[data-theme="light"] {
- --background-color: snow;
- --color: #000;
- }
-
- html[data-theme="dark"] {
+html[data-theme="dark"] {
+ --background-color: #222830;
+ --color: #fff;
+}
+html[data-theme="dark"][data-high-contrast="on"] {
+ --background-color: #000;
+}
+
+@media (prefers-color-scheme: dark) {
+ html {
--background-color: #222830;
--color: #fff;
}
-
- @media (prefers-color-scheme: dark) {
- html {
- --background-color: #222830;
- --color: #fff;
- }
- }
-
- /* Generic styles */
- :root {
- --column-width: 67ch;
- --form-width: 50ch;
- --line-width: 0.125rem;
- --line-height: 1.5;
-
- --one-line: calc(var(--line-height) * 1rem);
- --half-line: calc(var(--one-line) * 0.5);
-
- font-family: var(--font-family);
-
- background-color: var(--background-color);
- color: var(--color);
- }
-
- a {
- color: inherit;
- }
-
- a:active {
- color: red;
- }
-
- header, footer, h1, h2 {
- text-align: center;
- }
-
- footer:not(.exclude) {
- border-top: var(--line-width) solid;
- }
-
- summary {
- cursor: pointer;
- }
-
- blockquote:not(.exclude) {
- padding-left: var(--one-line);
- border-left: var(--line-width) solid;
- }
-
- ul, ol {
- padding-left: calc(var(--line-height) * 2rem);
- }
-
- :is(body, article, main, figure) > img:not(.exclude) {
- max-width: 100%;
- }
-
- figure:not(.exclude) {
- text-align: center;
- }
-
- figure:not(.exclude) > * ~ figcaption {
- margin-top: 0;
- font-style: italic;
- }
-
- article > aside:not(.exclude) {
- border: var(--line-width) solid;
- padding: 0 var(--one-line);
- border-radius: var(--half-line);
- }
-
- pre {
- max-width: 100%;
- overflow: auto;
- }
-
- hr {
- color: inherit;
- border: 0;
- border-top: var(--line-width) solid;
- }
-
- /* Vertical Rhythm */
- p, ul, ol, figcaption, nav, td, th, label {
- line-height: var(--line-height);
- }
-
- h1, h2, h3, h4, h5, h6, p, blockquote, hr, footer, header, nav, figure, figcaption, ul, ol, :is(body, article, main) > img:not(.exclude), table, article > aside, article > aside {
- margin: var(--one-line) 0;
- }
-
- /* Headings */
-
- header h1 {
- font-weight: normal;
- }
-
- h1, h2 {
- line-height: calc(var(--line-height) * 2rem);
- }
-
- h1 {
- font-size: 2.5rem;
- }
-
- h2 {
- font-size: 1.75rem;
- }
-
- h3, h4, h5, h6 {
- line-height: var(--one-line);
- padding-top: calc(var(--line-height) * 0.75rem);
- margin-bottom: calc(var(--line-height) * 0.25rem);
- }
-
- :is(h3, h4, h5, h6) ~ * {
- margin-top: 0;
- }
-
- /* Navbar */
-
- body > nav:first-of-type:not(.exclude) { /* This styling only affects the first nav element that is the direct child of the body */
- text-align: center;
- border-width: var(--line-width) 0;
- border-style: solid;
- line-height: var(--line-height);
- padding: calc((var(--line-height) * 0.5rem) - var(--line-width)); /* Put half a line's height on both top and bottom, then remove the width of the border */
- display: flex;
- flex-flow: row wrap;
- }
-
- body > nav:first-of-type:not(.exclude) > * {
- flex-grow: 1;
- margin: 0 var(--half-line);
- text-transform: uppercase;
- }
-
- @media (prefers-reduced-motion: no-preference) {
- body > nav:first-of-type:not(.exclude) a {
- text-decoration: none;
- display: inline-block;
- }
-
- body > nav:first-of-type:not(.exclude) a::after {
- content: '';
- width: 0;
- height: var(--line-width);
- display: block;
- background: var(--color);
- transition: 150ms;
- }
-
- body > nav:first-of-type:not(.exclude) a:is(:hover, :focus)::after {
- width: 100%;
- }
- }
-
- /* Column */
- body {
- margin: 0 auto;
- width: min(95%, var(--column-width));
- }
-
- /* Justification (default off; use data-justify="on" on <html> to enable) */
- /* 67ch (var(--column-width) / 95% (column max-width) === 70.526315789ch */
- @media (min-width: 70.5ch) {
- [data-justify="on"] body {
- text-align: justify;
- text-justify: inter-character;
- }
- }
-
- /* Tables */
- table:not(.exclude) {
- display: block;
- width: 100%;
- overflow: auto;
- border-collapse: collapse;
- }
-
- table:not(.exclude) :is(td, th) {
- padding: calc(var(--line-height) * 0.25rem);
- border: var(--line-width) solid;
- }
-
- table:not(.exclude) td {
- word-wrap: break-word;
- }
-
- /* Forms */
- form {
- max-width: var(--form-width)
+ html[data-high-contrast="on"] {
+ --background-color: #000;
+ }
+}
+
+@media (prefers-contrast: more) {
+ :is(html, html[data-theme="light"]):not([data-high-contrast="off"]) {
+ --background-color: #fff;
+ }
+
+ html[data-theme="dark"]:not([data-high-contrast="off"]) {
+ --background-color: #000;
+ }
+}
+
+/* Generic styles */
+:root {
+ --column-width: 67ch;
+ --form-width: 50ch;
+ --line-width: 0.125rem;
+ --line-height: 1.5;
+
+ --one-line: calc(var(--line-height) * 1rem);
+ --half-line: calc(var(--one-line) * 0.5);
+
+ font-family: var(--font-family);
+
+ background-color: var(--background-color);
+ color: var(--color);
+}
+
+a {
+ color: inherit;
+}
+
+a:active {
+ color: red;
+}
+
+header, footer, h1, h2 {
+ text-align: center;
+}
+
+footer:not(.exclude) {
+ border-top: var(--line-width) solid;
+}
+
+summary {
+ cursor: pointer;
+}
+
+blockquote:not(.exclude) {
+ padding-left: var(--one-line);
+ border-left: var(--line-width) solid;
+}
+
+ul, ol {
+ padding-left: calc(var(--line-height) * 2rem);
+}
+
+:is(body, article, main, figure) > :is(img, video):not(.exclude) {
+ max-width: 100%;
+}
+
+figure:not(.exclude) {
+ text-align: center;
+}
+
+figure:not(.exclude) > * ~ figcaption {
+ margin-top: 0;
+ font-style: italic;
+}
+
+article > aside:not(.exclude) {
+ border: var(--line-width) solid;
+ padding: 0 var(--one-line);
+ border-radius: var(--half-line);
+}
+
+pre {
+ max-width: 100%;
+ overflow: auto;
+}
+
+hr {
+ color: inherit;
+ border: 0;
+ border-top: var(--line-width) solid;
+}
+
+/* Vertical Rhythm */
+p, ul, ol, figcaption, nav, td, th, label {
+ line-height: var(--line-height);
+}
+
+h1, h2, h3, h4, h5, h6, p, blockquote, hr, footer, header, nav, figure, figcaption, ul, ol, :is(body, article, main) > :is(img, video):not(.exclude), table, article > aside, article > aside {
+ margin: var(--one-line) 0;
+}
+
+/* Headings */
+
+header h1 {
+ font-weight: normal;
+}
+
+h1, h2 {
+ line-height: calc(var(--line-height) * 2rem);
+}
+
+h1 {
+ font-size: 2.5rem;
+}
+
+h2 {
+ font-size: 1.75rem;
+}
+
+h3, h4, h5, h6 {
+ line-height: var(--one-line);
+ padding-top: calc(var(--line-height) * 0.75rem);
+ margin-bottom: calc(var(--line-height) * 0.25rem);
+}
+
+:is(h3, h4, h5, h6) ~ * {
+ margin-top: 0;
+}
+
+/* Navbar */
+
+:is(body, header) > nav:first-of-type:not(.exclude) { /* This styling only affects the first nav element that is the direct child of the body */
+ text-align: center;
+ border-width: var(--line-width) 0;
+ border-style: solid;
+ line-height: var(--line-height);
+ padding: calc((var(--line-height) * 0.5rem) - var(--line-width)); /* Put half a line's height on both top and bottom, then remove the width of the border */
+ display: flex;
+ flex-flow: row wrap;
+}
+
+:is(body, header) > nav:first-of-type:not(.exclude) > * {
+ flex-grow: 1;
+ margin: 0 var(--half-line);
+ text-transform: uppercase;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ :is(body, header) > nav:first-of-type:not(.exclude) a {
+ text-decoration: none;
+ display: inline-block;
}
-
- form:not(.exclude) :is(label:not(input:is([type="checkbox"], [type="radio"]) ~ label), input:not([type="checkbox"], [type="radio"]), textarea, select) {
+
+ :is(body, header) > nav:first-of-type:not(.exclude) a::after {
+ content: '';
+ width: 0;
+ height: var(--line-width);
display: block;
- margin: var(--half-line) 0;
+ background: var(--color);
+ transition: 150ms;
}
-
- form:not(.exclude) :is(input:not([type="checkbox"], [type="radio"]), textarea, select) {
- box-sizing: border-box;
- padding: var(--half-line);
- background: transparent;
- border: var(--line-width) solid;
- color: inherit;
- font: inherit;
+
+ :is(body, header) > nav:first-of-type:not(.exclude) a:is(:hover, :focus)::after {
width: 100%;
}
-
- form:not(.exclude) label:not(input:is([type="checkbox"], [type="radio"]) ~ label) {
- font-weight: bold;
- }
-\ No newline at end of file
+}
+
+/* Column */
+body {
+ margin: 0 auto;
+ width: min(95%, var(--column-width));
+}
+
+/* Justification (default off; use data-justify="on" on <html> to enable) */
+/* 67ch (var(--column-width) / 95% (column max-width) === 70.526315789ch */
+@media (min-width: 70.5ch) {
+ [data-justify="on"] body {
+ text-align: justify;
+ text-justify: inter-character;
+ }
+}
+
+/* Tables */
+table:not(.exclude) {
+ display: block;
+ width: 100%;
+ overflow: auto;
+ border-collapse: collapse;
+}
+
+table:not(.exclude) :is(td, th) {
+ padding: calc(var(--line-height) * 0.25rem);
+ border: var(--line-width) solid;
+}
+
+table:not(.exclude) td {
+ word-wrap: break-word;
+}
+
+/* Forms */
+form {
+ max-width: var(--form-width)
+}
+
+form:not(.exclude) :is(label:not(input:is([type="checkbox"], [type="radio"]) ~ label), input:not([type="checkbox"], [type="radio"]), textarea, select) {
+ display: block;
+ margin: var(--half-line) 0;
+}
+
+form:not(.exclude) :is(input:not([type="checkbox"], [type="radio"]), textarea, select) {
+ box-sizing: border-box;
+ padding: var(--half-line);
+ background: transparent;
+ border: var(--line-width) solid;
+ color: inherit;
+ font: inherit;
+ width: 100%;
+}
+
+form:not(.exclude) label:not(input:is([type="checkbox"], [type="radio"]) ~ label) {
+ font-weight: bold;
+}
