old work pushed

static/css/readable.css

@@ -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;
+  }

static/js/typewriter.js

@@ -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);