fbievan
/
hugo-theme-readable
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update to v1.0.1

This commit is contained in:
cjtheham 2023-02-16 13:51:44 -06:00
parent 269415bf42
commit 18e9cc19ea
4 changed files with 255 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
layouts/_default/baseof.html
View File

@ -6,13 +6,7 @@
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
</header> </header>
<nav>
{{ range .Site.Menus.main -}}
<span>
<a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
</span>
{{- end }}
</nav>
<main> <main>
{{- block "main" . }}{{- end }} {{- block "main" . }}{{- end }}

2
layouts/partials/head.html
View File

@ -1,7 +1,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- This ensures your site looks right on mobile devices --> <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 }}'> <meta name="description" content='{{ .Page.Description }}'>
{{ $title := print .Site.Title " | " .Title }} {{ $title := print .Site.Title " | " .Title }}
{{ if .IsHome }}{{ $title = .Site.Title }}{{ end }} {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}

8
layouts/partials/header.html
View File

@ -1,2 +1,10 @@
<h1>{{ $.Site.Title }}</h1> <h1>{{ $.Site.Title }}</h1>
<p>{{ $.Site.Params.subtitle }}</p> <p>{{ $.Site.Params.subtitle }}</p>
<nav>
{{ range .Site.Menus.main -}}
<span>
<a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
</span>
{{- end }}
</nav>

212
static/css/readable.css
View File

@ -1,45 +1,55 @@
/* readable.css 1.0.0 */ /* readable.css 1.0.1-beta */
/* Code from Benjamin Hollon (benjaminhollon@fosstodon.org) */
#typewriter::after {
content: '_';
width: 0;
display: inline-block;
animation: cursor-blink 1s infinite;
}
/* Font family support */ /* Font family support */
html, html[data-font-family="serif"] { html, html[data-font-family="serif"] {
--font-family: serif; --font-family: serif;
} }
html[data-font-family="sans-serif"] { html[data-font-family="sans-serif"] {
--font-family: sans-serif; --font-family: sans-serif;
} }
html[data-font-family="monospace"] { html[data-font-family="monospace"] {
--font-family: monospace; --font-family: monospace;
} }
/* Color scheme support */ /* Color scheme support */
html, html[data-theme="light"] { html, html[data-theme="light"] {
--background-color: snow; --background-color: snow;
--color: #000; --color: #000;
} }
html[data-high-contrast="on"], html[data-theme="light"][data-high-contrast="on"] {
--background-color: #fff;
}
html[data-theme="dark"] { html[data-theme="dark"] {
--background-color: #222830; --background-color: #222830;
--color: #fff; --color: #fff;
} }
html[data-theme="dark"][data-high-contrast="on"] {
--background-color: #000;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
--background-color: #222830; --background-color: #222830;
--color: #fff; --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;
} }
/* Generic styles */ html[data-theme="dark"]:not([data-high-contrast="off"]) {
:root { --background-color: #000;
}
}
/* Generic styles */
:root {
--column-width: 67ch; --column-width: 67ch;
--form-width: 50ch; --form-width: 50ch;
--line-width: 0.125rem; --line-width: 0.125rem;
@ -52,107 +62,107 @@ html, html[data-font-family="serif"] {
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
} }
a { a {
color: inherit; color: inherit;
} }
a:active { a:active {
color: red; color: red;
} }
header, footer, h1, h2 { header, footer, h1, h2 {
text-align: center; text-align: center;
} }
footer:not(.exclude) { footer:not(.exclude) {
border-top: var(--line-width) solid; border-top: var(--line-width) solid;
} }
summary { summary {
cursor: pointer; cursor: pointer;
} }
blockquote:not(.exclude) { blockquote:not(.exclude) {
padding-left: var(--one-line); padding-left: var(--one-line);
border-left: var(--line-width) solid; border-left: var(--line-width) solid;
} }
ul, ol { ul, ol {
padding-left: calc(var(--line-height) * 2rem); padding-left: calc(var(--line-height) * 2rem);
} }
:is(body, article, main, figure) > img:not(.exclude) { :is(body, article, main, figure) > :is(img, video):not(.exclude) {
max-width: 100%; max-width: 100%;
} }
figure:not(.exclude) { figure:not(.exclude) {
text-align: center; text-align: center;
} }
figure:not(.exclude) > * ~ figcaption { figure:not(.exclude) > * ~ figcaption {
margin-top: 0; margin-top: 0;
font-style: italic; font-style: italic;
} }
article > aside:not(.exclude) { article > aside:not(.exclude) {
border: var(--line-width) solid; border: var(--line-width) solid;
padding: 0 var(--one-line); padding: 0 var(--one-line);
border-radius: var(--half-line); border-radius: var(--half-line);
} }
pre { pre {
max-width: 100%; max-width: 100%;
overflow: auto; overflow: auto;
} }
hr { hr {
color: inherit; color: inherit;
border: 0; border: 0;
border-top: var(--line-width) solid; border-top: var(--line-width) solid;
} }
/* Vertical Rhythm */ /* Vertical Rhythm */
p, ul, ol, figcaption, nav, td, th, label { p, ul, ol, figcaption, nav, td, th, label {
line-height: var(--line-height); 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 { 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; margin: var(--one-line) 0;
} }
/* Headings */ /* Headings */
header h1 { header h1 {
font-weight: normal; font-weight: normal;
} }
h1, h2 { h1, h2 {
line-height: calc(var(--line-height) * 2rem); line-height: calc(var(--line-height) * 2rem);
} }
h1 { h1 {
font-size: 2.5rem; font-size: 2.5rem;
} }
h2 { h2 {
font-size: 1.75rem; font-size: 1.75rem;
} }
h3, h4, h5, h6 { h3, h4, h5, h6 {
line-height: var(--one-line); line-height: var(--one-line);
padding-top: calc(var(--line-height) * 0.75rem); padding-top: calc(var(--line-height) * 0.75rem);
margin-bottom: calc(var(--line-height) * 0.25rem); margin-bottom: calc(var(--line-height) * 0.25rem);
} }
:is(h3, h4, h5, h6) ~ * { :is(h3, h4, h5, h6) ~ * {
margin-top: 0; margin-top: 0;
} }
/* Navbar */ /* Navbar */
body > nav:first-of-type:not(.exclude) { /* This styling only affects the first nav element that is the direct child of the body */ :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; text-align: center;
border-width: var(--line-width) 0; border-width: var(--line-width) 0;
border-style: solid; border-style: solid;
@ -160,21 +170,21 @@ html, html[data-font-family="serif"] {
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 */ 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; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
} }
body > nav:first-of-type:not(.exclude) > * { :is(body, header) > nav:first-of-type:not(.exclude) > * {
flex-grow: 1; flex-grow: 1;
margin: 0 var(--half-line); margin: 0 var(--half-line);
text-transform: uppercase; text-transform: uppercase;
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
body > nav:first-of-type:not(.exclude) a { :is(body, header) > nav:first-of-type:not(.exclude) a {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
} }
body > nav:first-of-type:not(.exclude) a::after { :is(body, header) > nav:first-of-type:not(.exclude) a::after {
content: ''; content: '';
width: 0; width: 0;
height: var(--line-width); height: var(--line-width);
@ -183,54 +193,54 @@ html, html[data-font-family="serif"] {
transition: 150ms; transition: 150ms;
} }
body > nav:first-of-type:not(.exclude) a:is(:hover, :focus)::after { :is(body, header) > nav:first-of-type:not(.exclude) a:is(:hover, :focus)::after {
width: 100%; width: 100%;
} }
} }
/* Column */ /* Column */
body { body {
margin: 0 auto; margin: 0 auto;
width: min(95%, var(--column-width)); width: min(95%, var(--column-width));
} }
/* Justification (default off; use data-justify="on" on <html> to enable) */ /* Justification (default off; use data-justify="on" on <html> to enable) */
/* 67ch (var(--column-width) / 95% (column max-width) === 70.526315789ch */ /* 67ch (var(--column-width) / 95% (column max-width) === 70.526315789ch */
@media (min-width: 70.5ch) { @media (min-width: 70.5ch) {
[data-justify="on"] body { [data-justify="on"] body {
text-align: justify; text-align: justify;
text-justify: inter-character; text-justify: inter-character;
} }
} }
/* Tables */ /* Tables */
table:not(.exclude) { table:not(.exclude) {
display: block; display: block;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
border-collapse: collapse; border-collapse: collapse;
} }
table:not(.exclude) :is(td, th) { table:not(.exclude) :is(td, th) {
padding: calc(var(--line-height) * 0.25rem); padding: calc(var(--line-height) * 0.25rem);
border: var(--line-width) solid; border: var(--line-width) solid;
} }
table:not(.exclude) td { table:not(.exclude) td {
word-wrap: break-word; word-wrap: break-word;
} }
/* Forms */ /* Forms */
form { form {
max-width: var(--form-width) 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) { form:not(.exclude) :is(label:not(input:is([type="checkbox"], [type="radio"]) ~ label), input:not([type="checkbox"], [type="radio"]), textarea, select) {
display: block; display: block;
margin: var(--half-line) 0; margin: var(--half-line) 0;
} }
form:not(.exclude) :is(input:not([type="checkbox"], [type="radio"]), textarea, select) { form:not(.exclude) :is(input:not([type="checkbox"], [type="radio"]), textarea, select) {
box-sizing: border-box; box-sizing: border-box;
padding: var(--half-line); padding: var(--half-line);
background: transparent; background: transparent;
@ -238,8 +248,8 @@ html, html[data-font-family="serif"] {
color: inherit; color: inherit;
font: inherit; font: inherit;
width: 100%; width: 100%;
} }
form:not(.exclude) label:not(input:is([type="checkbox"], [type="radio"]) ~ label) { form:not(.exclude) label:not(input:is([type="checkbox"], [type="radio"]) ~ label) {
font-weight: bold; font-weight: bold;
} }