commit f48f5ba40b51a3bd0dadb44f0d60ad79e2f16212
parent b77f77b5c547417e6e24a06228cb60f87c965659
Author: Silas Brack <silasbrack@Silass-MacBook-Pro.local>
Date: Sat, 3 Jan 2026 16:26:31 +0100
Idk playing around with inlining
Diffstat:
13 files changed, 571 insertions(+), 542 deletions(-)
diff --git a/README.md b/README.md
@@ -7,20 +7,5 @@
## Writing Posts
In practice, I use [pandoc](https://pandoc.org) to take my Obsidian notes and convert them to HTML.
In the process it also renders Latex as MathML!
-To generate HTML posts from Markdown, run:
-```bash
-pandoc \
- --from markdown \
- --to html5 \
- --standalone \
- --toc \
- --no-highlight \
- --variable css=tufte.css \
- --data-dir ./pandoc/ \
- --mathml \
- --output ./posts/post1.html \
- post1.md
-```
+For more details, see `convert.sh`.
-To use highlighting, replace `--no-highlight` with `--highlight-style ./pandoc/onelight.theme`.
-For now, I'm not using it because the bundled CSS is way too large for my use cases and because it's a bit tricky to configure using one color scheme for light mode and one for dark mode (given we're generating the HTML files with pandoc).
diff --git a/convert.sh b/convert.sh
@@ -0,0 +1,54 @@
+#!/bin/bash
+
+# Check if input file is provided
+if [ $# -eq 0 ]; then
+ echo "Usage: $0 <input-markdown-file> [output-html-file]"
+ echo "Example: $0 ~/notes/blog/article.md posts/article.html"
+ exit 1
+fi
+
+# Get input file
+INPUT_FILE="$1"
+
+# Check if input file exists
+if [ ! -f "$INPUT_FILE" ]; then
+ echo "Error: Input file '$INPUT_FILE' does not exist"
+ exit 1
+fi
+
+# Determine output file
+if [ $# -ge 2 ]; then
+ # Use provided output filename
+ OUTPUT_FILE="$2"
+else
+ # Generate output filename from input
+ BASENAME=$(basename "$INPUT_FILE" .md)
+ OUTPUT_FILE="./posts/${BASENAME}.html"
+fi
+
+# Create output directory if it doesn't exist
+OUTPUT_DIR=$(dirname "$OUTPUT_FILE")
+mkdir -p "$OUTPUT_DIR"
+
+# Run pandoc
+echo "Converting: $INPUT_FILE -> $OUTPUT_FILE"
+pandoc \
+ --from markdown \
+ --to html5 \
+ --standalone \
+ --syntax-highlighting=none \
+ --variable css=style.css \
+ --data-dir ./pandoc/ \
+ --embed-resources \
+ --mathml \
+ --output "$OUTPUT_FILE" \
+ "$INPUT_FILE"
+
+# Check if pandoc succeeded
+if [ $? -eq 0 ]; then
+ echo "Success! HTML file created at: $OUTPUT_FILE"
+else
+ echo "Error: Pandoc conversion failed"
+ exit 1
+fi
+
diff --git a/index.html b/index.html
@@ -3,13 +3,10 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
-
<title>Silas Brack</title>
-
- <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png" />
- <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png" />
- <link rel="manifest" href="static/site.webmanifest">
- <link rel="stylesheet" href="static/style.min.css" />
+ <style type="text/css">
+@charset "UTF-8";html{font-size:clamp(12px,2vw,16px)}body{width:87.5%;margin-left:auto;margin-right:auto;padding-left:12.5%;font-family:Charter,'Bitstream Charter','Sitka Text',Cambria,serif;background-color:#fffff8;color:#111;max-width:1400px;counter-reset:sidenote-counter}@media (prefers-color-scheme: dark){body{background-color:#151515;color:#ddd}}h1{font-family:Rockwell,'Rockwell Nova','Roboto Slab','DejaVu Serif','Sitka Small',serif;font-variant-caps:small-caps;font-weight:700;margin-top:4rem;margin-bottom:1.5rem;font-size:clamp(28px,2vw,36px);line-height:1}h2{font-family:Rockwell,'Rockwell Nova','Roboto Slab','DejaVu Serif','Sitka Small',serif;font-variant-caps:small-caps;font-style:italic;font-weight:700;margin-top:2.1rem;margin-bottom:1.4rem;font-size:clamp(16px,2vw,20px);line-height:1}h3{font-style:italic;font-weight:400;margin-top:2rem;margin-bottom:1.4rem;line-height:1}hr{display:block;height:1px;width:55%;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}p.subtitle{font-family:Rockwell,'Rockwell Nova','Roboto Slab','DejaVu Serif','Sitka Small',serif;font-style:italic;margin-top:1rem;margin-bottom:1rem;font-size:clamp(20px,2vw,24px);display:block;line-height:1}.danger{color:red}article{padding:5rem 0}section{padding-top:1rem;padding-bottom:1rem}p,dl,ol,ul{font-size:1.4rem;line-height:2rem}p{margin-top:1.4rem;margin-bottom:1.4rem;padding-right:0;vertical-align:baseline}div.epigraph{margin:5em 0}div.epigraph > blockquote{margin-top:3em;margin-bottom:3em}div.epigraph > blockquote,div.epigraph > blockquote > p{font-style:italic}div.epigraph > blockquote > footer{font-style:normal}div.epigraph > blockquote > footer > cite{font-style:italic}blockquote{font-size:1.4rem}blockquote p{width:55%;margin-right:40px}blockquote footer{width:55%;font-size:1.1rem;text-align:right}section > p,section > footer,section > table{width:55%}section > dl,section > ol,section > ul{width:50%;-webkit-padding-start:5%}dt:not(:first-child),li:not(:first-child){margin-top:.25rem}figure{padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;max-width:55%;-webkit-margin-start:0;-webkit-margin-end:0;margin:0 0 3em}figcaption{float:right;clear:right;margin-top:0;margin-bottom:0;font-size:1.1rem;line-height:1.6;vertical-align:baseline;position:relative;max-width:40%}figure.fullwidth figcaption{margin-right:24%}a:link,a:visited{color:inherit}.no-tufte-underline:link{background:unset;text-shadow:unset}a:link,.tufte-underline,.hover-tufte-underline:hover{text-decoration:none;background:-webkit-linear-gradient(#fffff8,#fffff8),-webkit-linear-gradient(#fffff8,#fffff8),-webkit-linear-gradient(currentColor,currentColor);background:linear-gradient(#fffff8,#fffff8),linear-gradient(#fffff8,#fffff8),linear-gradient(currentColor,currentColor);-webkit-background-size:.05em 1px,.05em 1px,1px 1px;-moz-background-size:.05em 1px,.05em 1px,1px 1px;background-size:.05em 1px,.05em 1px,1px 1px;background-repeat:no-repeat,no-repeat,repeat-x;text-shadow:.03em 0 #fffff8,-.03em 0 #fffff8,0 .03em #fffff8,0 -.03em #fffff8,.06em 0 #fffff8,-.06em 0 #fffff8,.09em 0 #fffff8,-.09em 0 #fffff8,.12em 0 #fffff8,-.12em 0 #fffff8,.15em 0 #fffff8,-.15em 0 #fffff8;background-position:0 93%,100% 93%,0 93%}@media screen and (-webkit-min-device-pixel-ratio: 0){a:link,.tufte-underline,.hover-tufte-underline:hover{background-position-y:87%,87%,87%}}@media (prefers-color-scheme: dark){a:link,.tufte-underline,.hover-tufte-underline:hover{text-shadow:.03em 0 #151515,-.03em 0 #151515,0 .03em #151515,0 -.03em #151515,.06em 0 #151515,-.06em 0 #151515,.09em 0 #151515,-.09em 0 #151515,.12em 0 #151515,-.12em 0 #151515,.15em 0 #151515,-.15em 0 #151515}}a:link::selection,a:link::-moz-selection{text-shadow:.03em 0 #b4d5fe,-.03em 0 #b4d5fe,0 .03em #b4d5fe,0 -.03em #b4d5fe,.06em 0 #b4d5fe,-.06em 0 #b4d5fe,.09em 0 #b4d5fe,-.09em 0 #b4d5fe,.12em 0 #b4d5fe,-.12em 0 #b4d5fe,.15em 0 #b4d5fe,-.15em 0 #b4d5fe;background:#b4d5fe}img{max-width:100%}.sidenote,.marginnote{float:right;clear:right;margin-right:-60%;width:50%;margin-top:.3rem;margin-bottom:0;font-size:1.1rem;line-height:1.3;vertical-align:baseline;position:relative}.sidenote-number{counter-increment:sidenote-counter}.sidenote-number:after,.sidenote:before{position:relative;vertical-align:baseline}.sidenote-number:after{content:counter(sidenote-counter);font-size:1rem;top:-.5rem;left:.1rem}.sidenote:before{content:counter(sidenote-counter) " ";font-size:1rem;top:-.5rem}blockquote .sidenote,blockquote .marginnote{margin-right:-82%;min-width:59%;text-align:left}div.fullwidth,table.fullwidth{width:100%}div.table-wrapper{overflow-x:auto;font-family:Avenir,Montserrat,Corbel,'URW Gothic',source-sans-pro,sans-serif}.sans{font-family:Avenir,Montserrat,Corbel,'URW Gothic',source-sans-pro,sans-serif;letter-spacing:.03em}code,pre > code{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-family:ui-monospace,'Cascadia Code','Source Code Pro',Menlo,Consolas,'DejaVu Sans Mono',monospace;font-size:1rem;line-height:1.42;-webkit-text-size-adjust:100%}.sans > code{font-size:1.2rem}h1 > code,h2 > code,h3 > code{font-size:.8em}.marginnote > code,.sidenote > code{font-size:1rem}pre > code{font-size:.9rem;width:52.5%;margin-left:2.5%;overflow-x:auto;display:block}pre.fullwidth > code{width:90%}.fullwidth{max-width:90%;clear:both}span.newthought{font-variant:small-caps;font-size:1.2em}input.margin-toggle{display:none}label.sidenote-number{display:inline-block;max-height:2rem}label.margin-toggle:not(.sidenote-number){display:none}.iframe-wrapper{position:relative;padding-bottom:56.25%;padding-top:25px;height:0}.iframe-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}@media (max-width: 760px){body{width:84%;padding-left:8%;padding-right:8%}hr,section > p,section > footer,section > table{width:100%}pre > code{width:97%}section > dl,section > ol,section > ul{width:90%}figure{max-width:90%}figcaption,figure.fullwidth figcaption{margin-right:0;max-width:none}blockquote{margin-left:1.5em;margin-right:0}blockquote p,blockquote footer{width:100%}label.margin-toggle:not(.sidenote-number){display:inline}.sidenote,.marginnote{display:none}.margin-toggle:checked + .sidenote,.margin-toggle:checked + .marginnote{display:block;float:left;left:1rem;clear:both;width:95%;margin:1rem 2.5%;vertical-align:baseline;position:relative}label{cursor:pointer}div.table-wrapper,table{width:85%}img{width:100%}}
+ </style>
</head>
<body>
@@ -23,17 +20,17 @@
</p> -->
<h1>Silas Brack</h1>
<p class="subtitle">AI Research Engineer</p>
- <p>
- <span class="marginnote">
- <a href="./assets/cv.pdf" style="background: none; display: flex; align-items: center;">
- <svg class="icon" fill="currentColor" height="20pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" > <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--> <path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 256l64 0c44.2 0 80 35.8 80 80c0 8.8-7.2 16-16 16L80 384c-8.8 0-16-7.2-16-16c0-44.2 35.8-80 80-80zm-32-96a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zm256-32l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z" /></svg>
+ <p style="font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;">
+ <span class="marginnote" style="line-height: 2.0;">
+ <a href="./assets/cv.pdf" style="background: none; display: flex; align-items: center; gap: 5px;">
+ <svg style="flex-shrink: 0;" fill="currentColor" width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" > <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--> <path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 256l64 0c44.2 0 80 35.8 80 80c0 8.8-7.2 16-16 16L80 384c-8.8 0-16-7.2-16-16c0-44.2 35.8-80 80-80zm-32-96a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zm256-32l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z" /></svg>
<span>CV</span>
</a>
- <a href="https://github.com/silasbrack" style="background: none; display: flex; align-items: center;">
+ <a href="https://github.com/silasbrack" style="background: none; display: flex; align-items: center; gap: 5px;">
<svg class="icon" fill="currentColor" height="20pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" > <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--> <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" /></svg >
<span>GitHub</span>
</a>
- <a href="https://www.linkedin.com/in/silasbrack/" style="background: none; display: flex; align-items: center;">
+ <a href="https://www.linkedin.com/in/silasbrack/" style="background: none; display: flex; align-items: center; gap: 5px;">
<svg class="icon" fill="currentColor" height="20pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" > <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--> <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" /></svg >
<span>LinkedIn</span>
</a>
diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png
Binary files differ.
diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png
Binary files differ.
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
Binary files differ.
diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png
Binary files differ.
diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png
Binary files differ.
diff --git a/static/favicon.ico b/static/favicon.ico
Binary files differ.
diff --git a/static/site.webmanifest b/static/site.webmanifest
@@ -1 +0,0 @@
-{"name":"","short_name":"","icons":[{"src":"/static/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/static/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/static/style.css b/static/style.css
@@ -1,513 +0,0 @@
-@charset "UTF-8";
-
-/* Tufte CSS styles */
-html {
- font-size: clamp(12px, 2vw, 16px);
-}
-
-body {
- width: 87.5%;
- margin-left: auto;
- margin-right: auto;
- padding-left: 12.5%;
- font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
- background-color: #fffff8;
- color: #111;
- max-width: 1400px;
- counter-reset: sidenote-counter;
-}
-
-/* Adds dark mode */
-@media (prefers-color-scheme: dark) {
- body {
- background-color: #151515;
- color: #ddd;
- }
-}
-
-h1 {
- font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
- font-variant-caps: small-caps;
- font-weight: 400;
- margin-top: 4rem;
- margin-bottom: 1.5rem;
- font-size: clamp(28px, 2vw, 36px);
- line-height: 1;
-}
-
-h2 {
- font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
- font-style: italic;
- font-weight: 400;
- margin-top: 2.1rem;
- margin-bottom: 1.4rem;
- font-size: clamp(16px, 2vw, 18px);
- line-height: 1;
-}
-
-h3 {
- font-style: italic;
- font-weight: 400;
- margin-top: 2rem;
- margin-bottom: 1.4rem;
- line-height: 1;
-}
-
-hr {
- display: block;
- height: 1px;
- width: 55%;
- border: 0;
- border-top: 1px solid #ccc;
- margin: 1em 0;
- padding: 0;
-}
-
-p.subtitle {
- font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
- font-style: italic;
- margin-top: 1rem;
- margin-bottom: 1rem;
- font-size: clamp(20px, 2vw, 24px);
- display: block;
- line-height: 1;
-}
-
-.danger {
- color: red;
-}
-
-article {
- padding: 5rem 0rem;
-}
-
-section {
- padding-top: 1rem;
- padding-bottom: 1rem;
-}
-
-p,
-dl,
-ol,
-ul {
- font-size: 1.4rem;
- line-height: 2rem;
-}
-
-p {
- margin-top: 1.4rem;
- margin-bottom: 1.4rem;
- padding-right: 0;
- vertical-align: baseline;
-}
-
-/* Chapter Epigraphs */
-div.epigraph {
- margin: 5em 0;
-}
-
-div.epigraph > blockquote {
- margin-top: 3em;
- margin-bottom: 3em;
-}
-
-div.epigraph > blockquote,
-div.epigraph > blockquote > p {
- font-style: italic;
-}
-
-div.epigraph > blockquote > footer {
- font-style: normal;
-}
-
-div.epigraph > blockquote > footer > cite {
- font-style: italic;
-}
-/* end chapter epigraphs styles */
-
-blockquote {
- font-size: 1.4rem;
-}
-
-blockquote p {
- width: 55%;
- margin-right: 40px;
-}
-
-blockquote footer {
- width: 55%;
- font-size: 1.1rem;
- text-align: right;
-}
-
-section > p,
-section > footer,
-section > table {
- width: 55%;
-}
-
-/* 50 + 5 == 55, to be the same width as paragraph */
-section > dl,
-section > ol,
-section > ul {
- width: 50%;
- -webkit-padding-start: 5%;
-}
-
-dt:not(:first-child),
-li:not(:first-child) {
- margin-top: 0.25rem;
-}
-
-figure {
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
- max-width: 55%;
- -webkit-margin-start: 0;
- -webkit-margin-end: 0;
- margin: 0 0 3em 0;
-}
-
-figcaption {
- float: right;
- clear: right;
- margin-top: 0;
- margin-bottom: 0;
- font-size: 1.1rem;
- line-height: 1.6;
- vertical-align: baseline;
- position: relative;
- max-width: 40%;
-}
-
-figure.fullwidth figcaption {
- margin-right: 24%;
-}
-
-/* Links: replicate underline that clears descenders */
-a:link,
-a:visited {
- color: inherit;
-}
-
-.no-tufte-underline:link {
- background: unset;
- text-shadow: unset;
-}
-
-a:link,
-.tufte-underline,
-.hover-tufte-underline:hover {
- text-decoration: none;
- background:
- -webkit-linear-gradient(#fffff8, #fffff8),
- -webkit-linear-gradient(#fffff8, #fffff8),
- -webkit-linear-gradient(currentColor, currentColor);
- background:
- linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8),
- linear-gradient(currentColor, currentColor);
- -webkit-background-size:
- 0.05em 1px,
- 0.05em 1px,
- 1px 1px;
- -moz-background-size:
- 0.05em 1px,
- 0.05em 1px,
- 1px 1px;
- background-size:
- 0.05em 1px,
- 0.05em 1px,
- 1px 1px;
- background-repeat: no-repeat, no-repeat, repeat-x;
- text-shadow:
- 0.03em 0 #fffff8,
- -0.03em 0 #fffff8,
- 0 0.03em #fffff8,
- 0 -0.03em #fffff8,
- 0.06em 0 #fffff8,
- -0.06em 0 #fffff8,
- 0.09em 0 #fffff8,
- -0.09em 0 #fffff8,
- 0.12em 0 #fffff8,
- -0.12em 0 #fffff8,
- 0.15em 0 #fffff8,
- -0.15em 0 #fffff8;
- background-position:
- 0% 93%,
- 100% 93%,
- 0% 93%;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
- a:link,
- .tufte-underline,
- .hover-tufte-underline:hover {
- background-position-y: 87%, 87%, 87%;
- }
-}
-
-/* Adds dark mode */
-@media (prefers-color-scheme: dark) {
- a:link,
- .tufte-underline,
- .hover-tufte-underline:hover {
- text-shadow:
- 0.03em 0 #151515,
- -0.03em 0 #151515,
- 0 0.03em #151515,
- 0 -0.03em #151515,
- 0.06em 0 #151515,
- -0.06em 0 #151515,
- 0.09em 0 #151515,
- -0.09em 0 #151515,
- 0.12em 0 #151515,
- -0.12em 0 #151515,
- 0.15em 0 #151515,
- -0.15em 0 #151515;
- }
-}
-
-a:link::selection,
-a:link::-moz-selection {
- text-shadow:
- 0.03em 0 #b4d5fe,
- -0.03em 0 #b4d5fe,
- 0 0.03em #b4d5fe,
- 0 -0.03em #b4d5fe,
- 0.06em 0 #b4d5fe,
- -0.06em 0 #b4d5fe,
- 0.09em 0 #b4d5fe,
- -0.09em 0 #b4d5fe,
- 0.12em 0 #b4d5fe,
- -0.12em 0 #b4d5fe,
- 0.15em 0 #b4d5fe,
- -0.15em 0 #b4d5fe;
- background: #b4d5fe;
-}
-
-/* Sidenotes, margin notes, figures, captions */
-img {
- max-width: 100%;
-}
-
-.sidenote,
-.marginnote {
- float: right;
- clear: right;
- margin-right: -60%;
- width: 50%;
- margin-top: 0.3rem;
- margin-bottom: 0;
- font-size: 1.1rem;
- line-height: 1.3;
- vertical-align: baseline;
- position: relative;
-}
-
-.sidenote-number {
- counter-increment: sidenote-counter;
-}
-
-.sidenote-number:after,
-.sidenote:before {
- position: relative;
- vertical-align: baseline;
-}
-
-.sidenote-number:after {
- content: counter(sidenote-counter);
- font-size: 1rem;
- top: -0.5rem;
- left: 0.1rem;
-}
-
-.sidenote:before {
- content: counter(sidenote-counter) " ";
- font-size: 1rem;
- top: -0.5rem;
-}
-
-blockquote .sidenote,
-blockquote .marginnote {
- margin-right: -82%;
- min-width: 59%;
- text-align: left;
-}
-
-div.fullwidth,
-table.fullwidth {
- width: 100%;
-}
-
-div.table-wrapper {
- overflow-x: auto;
- font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
-}
-
-.sans {
- font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
- letter-spacing: 0.03em;
-}
-
-code,
-pre > code {
- font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
- font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
- font-size: 1rem;
- line-height: 1.42;
- -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */
-}
-
-.sans > code {
- font-size: 1.2rem;
-}
-
-h1 > code,
-h2 > code,
-h3 > code {
- font-size: 0.8em;
-}
-
-.marginnote > code,
-.sidenote > code {
- font-size: 1rem;
-}
-
-pre > code {
- font-size: 0.9rem;
- width: 52.5%;
- margin-left: 2.5%;
- overflow-x: auto;
- display: block;
-}
-
-pre.fullwidth > code {
- width: 90%;
-}
-
-.fullwidth {
- max-width: 90%;
- clear: both;
-}
-
-span.newthought {
- font-variant: small-caps;
- font-size: 1.2em;
-}
-
-input.margin-toggle {
- display: none;
-}
-
-label.sidenote-number {
- display: inline-block;
- max-height: 2rem; /* should be less than or equal to paragraph line-height */
-}
-
-label.margin-toggle:not(.sidenote-number) {
- display: none;
-}
-
-.iframe-wrapper {
- position: relative;
- padding-bottom: 56.25%; /* 16:9 */
- padding-top: 25px;
- height: 0;
-}
-
-.iframe-wrapper iframe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-}
-
-.icon {
- margin-right: 5px;
- width: 32px;
- height: 32px;
- display: inline-block;
-}
-
-@media (max-width: 760px) {
- body {
- width: 84%;
- padding-left: 8%;
- padding-right: 8%;
- }
-
- hr,
- section > p,
- section > footer,
- section > table {
- width: 100%;
- }
-
- pre > code {
- width: 97%;
- }
-
- section > dl,
- section > ol,
- section > ul {
- width: 90%;
- }
-
- figure {
- max-width: 90%;
- }
-
- figcaption,
- figure.fullwidth figcaption {
- margin-right: 0%;
- max-width: none;
- }
-
- blockquote {
- margin-left: 1.5em;
- margin-right: 0em;
- }
-
- blockquote p,
- blockquote footer {
- width: 100%;
- }
-
- label.margin-toggle:not(.sidenote-number) {
- display: inline;
- }
-
- .sidenote,
- .marginnote {
- display: none;
- }
-
- .margin-toggle:checked + .sidenote,
- .margin-toggle:checked + .marginnote {
- display: block;
- float: left;
- left: 1rem;
- clear: both;
- width: 95%;
- margin: 1rem 2.5%;
- vertical-align: baseline;
- position: relative;
- }
-
- label {
- cursor: pointer;
- }
-
- div.table-wrapper,
- table {
- width: 85%;
- }
-
- img {
- width: 100%;
- }
-}
diff --git a/style.css b/style.css
@@ -0,0 +1,507 @@
+@charset "UTF-8";
+
+/* Tufte CSS styles */
+html {
+ font-size: clamp(12px, 2vw, 16px);
+}
+
+body {
+ width: 87.5%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 12.5%;
+ font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
+ background-color: #fffff8;
+ color: #111;
+ max-width: 1400px;
+ counter-reset: sidenote-counter;
+}
+
+/* Adds dark mode */
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #151515;
+ color: #ddd;
+ }
+}
+
+h1 {
+ font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
+ font-variant-caps: small-caps;
+ font-weight: bold;
+ margin-top: 4rem;
+ margin-bottom: 1.5rem;
+ font-size: clamp(28px, 2vw, 36px);
+ line-height: 1;
+}
+
+h2 {
+ font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
+ font-variant-caps: small-caps;
+ font-style: italic;
+ font-weight: bold;
+ margin-top: 2.1rem;
+ margin-bottom: 1.4rem;
+ font-size: clamp(16px, 2vw, 20px);
+ line-height: 1;
+}
+
+h3 {
+ font-style: italic;
+ font-weight: 400;
+ margin-top: 2rem;
+ margin-bottom: 1.4rem;
+ line-height: 1;
+}
+
+hr {
+ display: block;
+ height: 1px;
+ width: 55%;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+}
+
+p.subtitle {
+ font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
+ font-style: italic;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ font-size: clamp(20px, 2vw, 24px);
+ display: block;
+ line-height: 1;
+}
+
+.danger {
+ color: red;
+}
+
+article {
+ padding: 5rem 0rem;
+}
+
+section {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+p,
+dl,
+ol,
+ul {
+ font-size: 1.4rem;
+ line-height: 2rem;
+}
+
+p {
+ margin-top: 1.4rem;
+ margin-bottom: 1.4rem;
+ padding-right: 0;
+ vertical-align: baseline;
+}
+
+/* Chapter Epigraphs */
+div.epigraph {
+ margin: 5em 0;
+}
+
+div.epigraph > blockquote {
+ margin-top: 3em;
+ margin-bottom: 3em;
+}
+
+div.epigraph > blockquote,
+div.epigraph > blockquote > p {
+ font-style: italic;
+}
+
+div.epigraph > blockquote > footer {
+ font-style: normal;
+}
+
+div.epigraph > blockquote > footer > cite {
+ font-style: italic;
+}
+/* end chapter epigraphs styles */
+
+blockquote {
+ font-size: 1.4rem;
+}
+
+blockquote p {
+ width: 55%;
+ margin-right: 40px;
+}
+
+blockquote footer {
+ width: 55%;
+ font-size: 1.1rem;
+ text-align: right;
+}
+
+section > p,
+section > footer,
+section > table {
+ width: 55%;
+}
+
+/* 50 + 5 == 55, to be the same width as paragraph */
+section > dl,
+section > ol,
+section > ul {
+ width: 50%;
+ -webkit-padding-start: 5%;
+}
+
+dt:not(:first-child),
+li:not(:first-child) {
+ margin-top: 0.25rem;
+}
+
+figure {
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ max-width: 55%;
+ -webkit-margin-start: 0;
+ -webkit-margin-end: 0;
+ margin: 0 0 3em 0;
+}
+
+figcaption {
+ float: right;
+ clear: right;
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.1rem;
+ line-height: 1.6;
+ vertical-align: baseline;
+ position: relative;
+ max-width: 40%;
+}
+
+figure.fullwidth figcaption {
+ margin-right: 24%;
+}
+
+/* Links: replicate underline that clears descenders */
+a:link,
+a:visited {
+ color: inherit;
+}
+
+.no-tufte-underline:link {
+ background: unset;
+ text-shadow: unset;
+}
+
+a:link,
+.tufte-underline,
+.hover-tufte-underline:hover {
+ text-decoration: none;
+ background:
+ -webkit-linear-gradient(#fffff8, #fffff8),
+ -webkit-linear-gradient(#fffff8, #fffff8),
+ -webkit-linear-gradient(currentColor, currentColor);
+ background:
+ linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8),
+ linear-gradient(currentColor, currentColor);
+ -webkit-background-size:
+ 0.05em 1px,
+ 0.05em 1px,
+ 1px 1px;
+ -moz-background-size:
+ 0.05em 1px,
+ 0.05em 1px,
+ 1px 1px;
+ background-size:
+ 0.05em 1px,
+ 0.05em 1px,
+ 1px 1px;
+ background-repeat: no-repeat, no-repeat, repeat-x;
+ text-shadow:
+ 0.03em 0 #fffff8,
+ -0.03em 0 #fffff8,
+ 0 0.03em #fffff8,
+ 0 -0.03em #fffff8,
+ 0.06em 0 #fffff8,
+ -0.06em 0 #fffff8,
+ 0.09em 0 #fffff8,
+ -0.09em 0 #fffff8,
+ 0.12em 0 #fffff8,
+ -0.12em 0 #fffff8,
+ 0.15em 0 #fffff8,
+ -0.15em 0 #fffff8;
+ background-position:
+ 0% 93%,
+ 100% 93%,
+ 0% 93%;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+ a:link,
+ .tufte-underline,
+ .hover-tufte-underline:hover {
+ background-position-y: 87%, 87%, 87%;
+ }
+}
+
+/* Adds dark mode */
+@media (prefers-color-scheme: dark) {
+ a:link,
+ .tufte-underline,
+ .hover-tufte-underline:hover {
+ text-shadow:
+ 0.03em 0 #151515,
+ -0.03em 0 #151515,
+ 0 0.03em #151515,
+ 0 -0.03em #151515,
+ 0.06em 0 #151515,
+ -0.06em 0 #151515,
+ 0.09em 0 #151515,
+ -0.09em 0 #151515,
+ 0.12em 0 #151515,
+ -0.12em 0 #151515,
+ 0.15em 0 #151515,
+ -0.15em 0 #151515;
+ }
+}
+
+a:link::selection,
+a:link::-moz-selection {
+ text-shadow:
+ 0.03em 0 #b4d5fe,
+ -0.03em 0 #b4d5fe,
+ 0 0.03em #b4d5fe,
+ 0 -0.03em #b4d5fe,
+ 0.06em 0 #b4d5fe,
+ -0.06em 0 #b4d5fe,
+ 0.09em 0 #b4d5fe,
+ -0.09em 0 #b4d5fe,
+ 0.12em 0 #b4d5fe,
+ -0.12em 0 #b4d5fe,
+ 0.15em 0 #b4d5fe,
+ -0.15em 0 #b4d5fe;
+ background: #b4d5fe;
+}
+
+/* Sidenotes, margin notes, figures, captions */
+img {
+ max-width: 100%;
+}
+
+.sidenote,
+.marginnote {
+ float: right;
+ clear: right;
+ margin-right: -60%;
+ width: 50%;
+ margin-top: 0.3rem;
+ margin-bottom: 0;
+ font-size: 1.1rem;
+ line-height: 1.3;
+ vertical-align: baseline;
+ position: relative;
+}
+
+.sidenote-number {
+ counter-increment: sidenote-counter;
+}
+
+.sidenote-number:after,
+.sidenote:before {
+ position: relative;
+ vertical-align: baseline;
+}
+
+.sidenote-number:after {
+ content: counter(sidenote-counter);
+ font-size: 1rem;
+ top: -0.5rem;
+ left: 0.1rem;
+}
+
+.sidenote:before {
+ content: counter(sidenote-counter) " ";
+ font-size: 1rem;
+ top: -0.5rem;
+}
+
+blockquote .sidenote,
+blockquote .marginnote {
+ margin-right: -82%;
+ min-width: 59%;
+ text-align: left;
+}
+
+div.fullwidth,
+table.fullwidth {
+ width: 100%;
+}
+
+div.table-wrapper {
+ overflow-x: auto;
+ font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
+}
+
+.sans {
+ font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
+ letter-spacing: 0.03em;
+}
+
+code,
+pre > code {
+ font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+ font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+ font-size: 1rem;
+ line-height: 1.42;
+ -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */
+}
+
+.sans > code {
+ font-size: 1.2rem;
+}
+
+h1 > code,
+h2 > code,
+h3 > code {
+ font-size: 0.8em;
+}
+
+.marginnote > code,
+.sidenote > code {
+ font-size: 1rem;
+}
+
+pre > code {
+ font-size: 0.9rem;
+ width: 52.5%;
+ margin-left: 2.5%;
+ overflow-x: auto;
+ display: block;
+}
+
+pre.fullwidth > code {
+ width: 90%;
+}
+
+.fullwidth {
+ max-width: 90%;
+ clear: both;
+}
+
+span.newthought {
+ font-variant: small-caps;
+ font-size: 1.2em;
+}
+
+input.margin-toggle {
+ display: none;
+}
+
+label.sidenote-number {
+ display: inline-block;
+ max-height: 2rem; /* should be less than or equal to paragraph line-height */
+}
+
+label.margin-toggle:not(.sidenote-number) {
+ display: none;
+}
+
+.iframe-wrapper {
+ position: relative;
+ padding-bottom: 56.25%; /* 16:9 */
+ padding-top: 25px;
+ height: 0;
+}
+
+.iframe-wrapper iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+@media (max-width: 760px) {
+ body {
+ width: 84%;
+ padding-left: 8%;
+ padding-right: 8%;
+ }
+
+ hr,
+ section > p,
+ section > footer,
+ section > table {
+ width: 100%;
+ }
+
+ pre > code {
+ width: 97%;
+ }
+
+ section > dl,
+ section > ol,
+ section > ul {
+ width: 90%;
+ }
+
+ figure {
+ max-width: 90%;
+ }
+
+ figcaption,
+ figure.fullwidth figcaption {
+ margin-right: 0%;
+ max-width: none;
+ }
+
+ blockquote {
+ margin-left: 1.5em;
+ margin-right: 0em;
+ }
+
+ blockquote p,
+ blockquote footer {
+ width: 100%;
+ }
+
+ label.margin-toggle:not(.sidenote-number) {
+ display: inline;
+ }
+
+ .sidenote,
+ .marginnote {
+ display: none;
+ }
+
+ .margin-toggle:checked + .sidenote,
+ .margin-toggle:checked + .marginnote {
+ display: block;
+ float: left;
+ left: 1rem;
+ clear: both;
+ width: 95%;
+ margin: 1rem 2.5%;
+ vertical-align: baseline;
+ position: relative;
+ }
+
+ label {
+ cursor: pointer;
+ }
+
+ div.table-wrapper,
+ table {
+ width: 85%;
+ }
+
+ img {
+ width: 100%;
+ }
+}
diff --git a/static/style.min.css b/style.min.css
