+ {{ partial "development/draft_tag.html" . }} @@ -7,11 +7,11 @@ {{ .Date | time.Format "January 2, 2006" }} - + + {{ .Content }} - {{ if .Params.tags }} - {{ end }} - - {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }} - {{ if and (gt (len $pages) 1) (in $pages . ) }} - - {{ with $pages.Next . }} - ←{{ .Name }} - {{ end }} {{ with $pages.Prev . }} - {{ .Name }}→ + {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }} + {{ if and (gt (len $pages) 1) (in $pages . ) }} + + {{ with $pages.Next . }} + ←{{ .Name }} + {{ end }} {{ with $pages.Prev . }} + {{ .Name }}→ + {{ end }} + {{ end }} - + {{ end }} {{ end }} diff --git a/layouts/shortcodes/figures/railroad.html b/layouts/shortcodes/figures/railroad.html index dab4789..49f9838 100644 --- a/layouts/shortcodes/figures/railroad.html +++ b/layouts/shortcodes/figures/railroad.html @@ -1,11 +1,15 @@ {{ $id := .Get "id" }} {{ .Page.Scratch.Set "includes_railroad_diagram" true }} +{{ if not (in (.Page.Scratch.Get "railroad_diagram_ids") $id) }} +{{ .Page.Scratch.Add "railroad_diagram_ids" (slice $id) }} +{{ end }} diff --git a/static/scripts/railroad-utils.js b/static/scripts/railroad-utils.js index 5271980..f4030be 100644 --- a/static/scripts/railroad-utils.js +++ b/static/scripts/railroad-utils.js @@ -1,6 +1,12 @@ import rr from "./railroad.js"; -export function railroadDiagram(builder, elementID) { +export function railroadDiagram(builder, elementID, elementClass) { const diagram = builder(rr); - diagram.addTo(document.getElementById(elementID)); + const diagramSVG = diagram.toSVG(); + if (elementClass) { + diagramSVG.classList.add(elementClass); + } + + const figure = document.getElementById(elementID); + figure.appendChild(diagramSVG); } diff --git a/static/styles/main.css b/static/styles/main.css index 5602885..dd9bbe6 100644 --- a/static/styles/main.css +++ b/static/styles/main.css @@ -17,6 +17,8 @@ --body-padding: 4rem; --body-width: 80rem; + --body-font-size: 2rem; + --body-line-height: 1.2; --body-background-color: var(--light); --body-foreground-color: var(--dark); @@ -27,6 +29,8 @@ --menu-icon-size: 20px; --social-menu-padding: 1rem; + --figure-border-size: 2px; + --tag-text-color: var(--dark); --tag-background-color: #eee; --tag-hover-background-color: #bbb; @@ -68,13 +72,10 @@ a:hover { body { background-color: var(--body-background-color); color: var(--body-foreground-color); - display: flex; - flex-direction: column; - font-size: 2rem; - line-height: 1.2; - margin: 0 auto; - max-width: var(--body-width); - padding: 0 var(--body-padding); + font-size: var(--body-font-size); + line-height: var(--body-line-height); + margin: 0; + padding: 0; } blockquote { @@ -110,7 +111,7 @@ figure img { } figure + p { - margin-top: 1rem; + margin-block-start: 1rem; } figure .youtube { @@ -121,21 +122,19 @@ figure .youtube { figure.bordered { padding: 0.5rem; - border: 2px solid #eee; + border: var(--figure-border-size) solid #eee; +} + +figure > .narrow-only { + display: none; } .centered { text-align: center; } -h1, -h2, -h3, -h4, -h5, -h6 { +h1, h2, h3, h4, h5, h6 { font-family: 'SF Pro Rounded', ui-rounded, 'Arial Rounded MT', system-ui, -apple-system, sans-serif; - /*font-family: Palatino, Rockwell, Courier;*/ font-weight: 600; letter-spacing: 2px; } @@ -152,6 +151,20 @@ img { p { line-height: 1.4; + margin-block-start: 0; +} + +p:last-child { + margin-block-end: 0; +} + +.highlight + p { + margin-block-start: 1em; +} + +p:has(+ .centered > .railroad-diagram), +p:has(+ h2) { + margin-block-end: 0; } pre { @@ -163,6 +176,55 @@ pre { padding: 2rem 0; } +/* + * Page Structure + */ + +#page-container { + display: grid; + grid-template-columns: 1fr var(--body-padding) minmax(150px, var(--body-width)) var(--body-padding) 1fr; +} + +#page-container > footer { + grid-column: 3; + grid-row: 3; +} + +#page-container > header { + grid-column: 3; + grid-row: 1; +} + +#page-container > main { + grid-area: 2 / 2 / 3 / 5; +} + +.single section, +.single header, +.single footer { + display: grid; + grid-template-columns: minmax(var(--body-padding), max-content) minmax(150px, var(--body-width)) minmax(var(--body-padding), max-content); +} + +.single section > *, +.single header > *, +.single footer > * { + grid-column: 2; +} + +.single .post-nav { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-areas: "prev next"; +} + +.post-nav .prev { grid-area: prev; } +.post-nav .next { grid-area: next; } + +.single .highlight { + grid-column: 1 / 4; +} + /* * Header */ @@ -223,7 +285,6 @@ pre { .p5-sketch { display: block; position: relative; - width: 100%; } .social menu li + li { @@ -270,9 +331,9 @@ pre { :root { --menu-icon-size: 18px; --social-menu-padding: 0.5rem; + --body-padding: 2rem; } - .menu { margin-top: 1rem; } @@ -324,6 +385,22 @@ pre { * Main */ +.chroma { + padding: 1rem 0; + overflow: scroll; +} + +.chroma table { + border-collapse: collapse; + table-layout: fixed; +} + +.chroma pre { + margin: 0; + padding: 0; + width: 100%; +} + .main > header { align-items: baseline; display: flex; @@ -355,12 +432,23 @@ pre { margin-bottom: 0; } -.main p:last-child { +.main .main-title { margin-bottom: 0; } -.main .main-title { - margin-bottom: 0; +/* line number column of a code table */ +.lntd:first-child { + font-size: 1.6rem; + font-style: italic; + line-height: calc(var(--body-font-size) * var(--body-line-height)); + margin: 0; + text-align: right; + padding: 0; + width: var(--body-padding); +} + +.lntd:not(:first-child) { + width: var(--body-width); } .post-list { @@ -395,12 +483,14 @@ pre { .post-nav { align-items: baseline; - display: flex; - margin-top: 3.5rem; +} + +.post-nav .prev { + text-align: start; } .post-nav .next { - margin-left: auto; + text-align: end; } .post-single footer { @@ -465,6 +555,26 @@ ul.post-tags li + li { } @media (max-width: 620px) { + :root { + --figure-border-size: 1px; + } + + figure > .narrow-only { + display: inherit; + } + + figure > :not(.narrow-only) { + display: none; + } + + .chroma { + padding-inline: var(--body-padding); + } + + .lnt { + display: none; + } + .main h1 { font-size: 3rem; margin-bottom: 0.5rem; @@ -486,10 +596,6 @@ ul.post-tags li + li { } @media (max-width: 704px) { - :root { - --body-padding: 2rem; - } - html { font-size: 7px; } @@ -502,4 +608,4 @@ ul.post-tags li + li { /* For s that shouldn't break. */ .nobreak { white-space: nowrap; -} \ No newline at end of file +} diff --git a/static/styles/monokai.css b/static/styles/monokai.css index d320354..1457911 100644 --- a/static/styles/monokai.css +++ b/static/styles/monokai.css @@ -1,6 +1,3 @@ -.chroma { line-height: 1.4; } -/* Line */ .chroma .line { display: flex; } - /* Background */ .bg { color: #272822; background-color: #fafafa } /* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; } /* Other */ .chroma .x { }
{{ partial "development/draft_tag.html" . }} @@ -7,11 +7,11 @@ {{ .Date | time.Format "January 2, 2006" }} - + + {{ .Content }} - {{ if .Params.tags }} - {{ end }} - - {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }} - {{ if and (gt (len $pages) 1) (in $pages . ) }} - - {{ with $pages.Next . }} - ←{{ .Name }} - {{ end }} {{ with $pages.Prev . }} - {{ .Name }}→ + {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }} + {{ if and (gt (len $pages) 1) (in $pages . ) }} + + {{ with $pages.Next . }} + ←{{ .Name }} + {{ end }} {{ with $pages.Prev . }} + {{ .Name }}→ + {{ end }} + {{ end }} - + {{ end }}