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

old work pushed

This commit is contained in:
cjtheham 2023-01-30 13:14:33 -06:00
parent dad292e2fd
commit e27fbc792d
15 changed files with 379 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,2 +1,4 @@
# hugo-theme-readable
Hugo theme built using readable.css from Freedom to Write
https://codeberg.org/Freedom-to-Write/readable.css

2
archetypes/default.md Normal file
View File

@ -0,0 +1,2 @@
+++
+++

0
layouts/404.html Normal file
View File

26
layouts/_default/baseof.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
<body>
<header>
{{- partial "header.html" . -}}
</header>
<nav>
{{ range .Site.Menus.main -}}
<span>
<a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
</span>
{{- end }}
</nav>
<main>
{{- block "main" . }}{{- end }}
</main>
<footer>
{{- partial "footer.html" . -}}
</footer>
</body>
</html>

9
layouts/_default/list.html Normal file
View File

@ -0,0 +1,9 @@
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ range .Pages.ByPublishDate.Reverse }}
<p>
<h3><a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
{{ partial "metadata.html" . }}
</p>
{{ end }}
{{ end }}

6
layouts/_default/single.html Normal file
View File

@ -0,0 +1,6 @@
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ partial "metadata.html" . }}
<!-- <br><br> -->
{{ .Content }}
{{ end }}

5
layouts/index.html Normal file
View File

@ -0,0 +1,5 @@
{{ define "main" }}
{{ partial "metadata.html" . }}
<!-- <br><br> -->
{{ .Content }}
{{ end }}

3
layouts/partials/footer.html Normal file
View File

@ -0,0 +1,3 @@
<p><a href="/policies/privacy/">Privacy Policy</a> | <a href="/policies/cookies/">Cookie Policy</a> | <a href="/policies/terms/">Terms of Use</a></p> <!-- We like putting links in a paragraph separated by pipe ("|") characters -->
<p>© 2023 {{ $.Site.Params.author }}</p> <!-- While not legally required, it's nice to put copyright and/or license info here. Also, it looks nice to break up the links with a line of text -->
<a href={{ $.Site.Params.Mastodon }} rel="me" target="blank">Mastodon</a> | <a href="/contact/">Contact Me</a></p> <!-- This is the kind of thing people look for in footers: contact info and legal info. Make sure you include both! -->

8
layouts/partials/head.html Normal file
View File

@ -0,0 +1,8 @@
<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">
{{ $title := print .Site.Title " | " .Title }}
{{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
<title>{{ $title }}</title>
</head>

2
layouts/partials/header.html Normal file
View File

@ -0,0 +1,2 @@
<h1>{{ $.Site.Title }}</h1>
<p>{{ $.Site.Params.subtitle }}</p>

13
layouts/partials/metadata.html Normal file
View File

@ -0,0 +1,13 @@
{{ $dateTime := .PublishDate.Format "2006-01-02" }}
{{ $dateFormat := .Site.Params.dateFormat | default "Jan 2, 2006" }}
<i data-feather="calendar"></i>
{{ if .PublishDate }}
<time datetime="{{ $dateTime }}">{{ .PublishDate.Format $dateFormat }}</time>
{{ end }}
{{ with .Params.tags }}
<i data-feather="tag"></i>
{{ range . }}
{{ $href := print (absURL "tags/") (urlize .) }}
<a class="btn btn-sm btn-outline-dark tag-btn" href="{{ $href }}">{{ . }}</a>
{{ end }}
{{ end }}

245
static/css/readable.css Normal file
View File

@ -0,0 +1,245 @@
/* 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;
}
/* 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"] {
--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)
}
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;
}

42
static/js/typewriter.js Normal file
View File

@ -0,0 +1,42 @@
// Code from Benjamin Hollon (benjaminhollon@fosstodon.org)
const addCharDelay = 75;
const removeCharDelay = 45;
const wordDelay = 1500;
const typewriterElement = document.getElementById('typewriter');
const typewriterPrompts = [
'Amateur Radio Operator',
'Electrical Engineering Student',
'Film Enjoyer'
];
let currentTypewriterIndex = 0;
function typeNextPrompt() {
function typeChar(char) {
if (char !== '~') typewriterElement.innerText += char;
}
function removeChar() {
typewriterElement.innerText = typewriterElement.innerText.slice(0, -1);
}
const word = typewriterPrompts[currentTypewriterIndex];
let delaySoFar = 0;
// Type it
for (const char of word) {
setTimeout(typeChar.bind(this, char), delaySoFar);
delaySoFar += addCharDelay;
}
delaySoFar += wordDelay;
for (const char of word.split('').reverse()) {
setTimeout(removeChar, delaySoFar);
delaySoFar += removeCharDelay;
}
currentTypewriterIndex = (currentTypewriterIndex + 1) % typewriterPrompts.length;
setTimeout(typeNextPrompt, delaySoFar);
}
setTimeout(typeNextPrompt, wordDelay / 2);

15
theme.toml Normal file
View File

@ -0,0 +1,15 @@
# theme.toml template for a Hugo theme
# See https://github.com/gohugoio/hugoThemes#themetoml for an example
name = "Readable"
license = "Unlicense"
licenselink = "https://github.com/cjtheham/hugo-theme-readable/blob/main/LICENSE"
description = "A theme using Freedom to Write's Readable.css"
homepage = "https://github.com/cjtheham/hugo-theme-readable"
tags = []
features = []
min_version = "0.41.0"
[author]
name = "RogueFoam"
homepage = ""