From 18e9cc19ea9b5a5b19430e3c4c27e9868ded2daf Mon Sep 17 00:00:00 2001 From: cjtheham Date: Thu, 16 Feb 2023 13:51:44 -0600 Subject: [PATCH] feat: update to v1.0.1 --- layouts/_default/baseof.html | 8 +- layouts/partials/head.html | 2 +- layouts/partials/header.html | 10 +- static/css/readable.css | 478 ++++++++++++++++++----------------- 4 files changed, 255 insertions(+), 243 deletions(-) diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 31875e0..8087f31 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,13 +6,7 @@ {{- partial "header.html" . -}} - +
{{- block "main" . }}{{- end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index d7e12d9..0190cd3 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,7 +1,7 @@ - + {{ $title := print .Site.Title " | " .Title }} {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index ccfeee1..01d19f7 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,2 +1,10 @@

{{ $.Site.Title }}

-

{{ $.Site.Params.subtitle }}

\ No newline at end of file +

{{ $.Site.Params.subtitle }}

+ + \ No newline at end of file diff --git a/static/css/readable.css b/static/css/readable.css index 6343481..5322b63 100644 --- a/static/css/readable.css +++ b/static/css/readable.css @@ -1,245 +1,255 @@ -/* readable.css 1.0.0 */ - -/* Code from Benjamin Hollon (benjaminhollon@fosstodon.org) */ - -#typewriter::after { - content: '_'; - width: 0; - display: inline-block; - animation: cursor-blink 1s infinite; -} +/* readable.css 1.0.1-beta */ /* 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"] { + --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-high-contrast="on"], html[data-theme="light"][data-high-contrast="on"] { + --background-color: #fff; +} + +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; - } + 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; } - - /* 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 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) { + + :is(body, header) > nav:first-of-type:not(.exclude) a::after { + content: ''; + width: 0; + height: var(--line-width); display: block; - width: 100%; - overflow: auto; - border-collapse: collapse; + background: var(--color); + transition: 150ms; } - - 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; + + :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 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; +}