Compare commits
1 commit
| Author | SHA1 | Date | |
|---|---|---|---|
| ce530b20a1 |
6 changed files with 168 additions and 54 deletions
|
|
@ -3,11 +3,13 @@
|
||||||
{{ partial "head.html" . }}
|
{{ partial "head.html" . }}
|
||||||
|
|
||||||
<body class="not-ready" data-menu="{{ isset site.Menus `main` }}">
|
<body class="not-ready" data-menu="{{ isset site.Menus `main` }}">
|
||||||
{{ partial "header.html" . }}
|
<div id="page-container">
|
||||||
<main class="main">
|
{{ partial "header.html" . }}
|
||||||
{{ block "main" . }}{{ end }}
|
<main id="page-main" class="main">
|
||||||
</main>
|
{{ block "main" . }}{{ end }}
|
||||||
{{ partial "footer.html" . }}
|
</main>
|
||||||
|
{{ partial "footer.html" . }}
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
{{ if and .IsPage (.Page.Scratch.Get "includes_railroad_diagram") }}
|
{{ if and .IsPage (.Page.Scratch.Get "includes_railroad_diagram") }}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<article class="post-single">
|
<article class="single">
|
||||||
<header>
|
<header>
|
||||||
{{ partial "development/draft_tag.html" . }}
|
{{ partial "development/draft_tag.html" . }}
|
||||||
<div class="post-title">
|
<div class="post-title">
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
<div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
|
<div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<section class="post-content">
|
|
||||||
|
<section>
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Post Tags -->
|
|
||||||
{{ if .Params.tags }}
|
{{ if .Params.tags }}
|
||||||
<footer>
|
<footer>
|
||||||
<ul class="post-tags">
|
<ul class="post-tags">
|
||||||
|
|
@ -19,19 +19,18 @@
|
||||||
<li><a href="{{ $href }}">{{ . }}</a></li>
|
<li><a href="{{ $href }}">{{ . }}</a></li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
</footer>
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
<!-- Post Nav -->
|
{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}<!---->
|
||||||
{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}<!---->
|
{{ if and (gt (len $pages) 1) (in $pages . ) }}
|
||||||
{{ if and (gt (len $pages) 1) (in $pages . ) }}
|
<nav class="post-nav">
|
||||||
<nav class="post-nav">
|
{{ with $pages.Next . }}
|
||||||
{{ with $pages.Next . }}
|
<a class="prev" href="{{ .Permalink }}"><span>←</span><span>{{ .Name }}</span></a>
|
||||||
<a class="prev" href="{{ .Permalink }}"><span>←</span><span>{{ .Name }}</span></a>
|
{{ end }} {{ with $pages.Prev . }}
|
||||||
{{ end }} {{ with $pages.Prev . }}
|
<a class="next" href="{{ .Permalink }}"><span>{{ .Name }}</span><span>→</span></a>
|
||||||
<a class="next" href="{{ .Permalink }}"><span>{{ .Name }}</span><span>→</span></a>
|
{{ end }}
|
||||||
|
</nav>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</nav>
|
</footer>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</article>
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,15 @@
|
||||||
{{ $id := .Get "id" }}
|
{{ $id := .Get "id" }}
|
||||||
{{ .Page.Scratch.Set "includes_railroad_diagram" true }}
|
{{ .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) }}
|
||||||
<div class="centered">
|
<div class="centered">
|
||||||
<figure class="railroad-diagram" {{ if $id }}id="{{ $id }}"{{ end }}></figure>
|
<figure class="railroad-diagram" {{ if $id }}id="{{ $id }}"{{ end }}></figure>
|
||||||
</div>
|
</div>
|
||||||
|
{{ end }}
|
||||||
<script defer type="module">
|
<script defer type="module">
|
||||||
import { railroadDiagram } from {{ `/scripts/railroad-utils.js` | relURL }};
|
import { railroadDiagram } from {{ `/scripts/railroad-utils.js` | relURL }};
|
||||||
|
const className = {{ with .Get "class" }}{{ . | string }}{{ else }}undefined{{ end }};
|
||||||
railroadDiagram(rr => {
|
railroadDiagram(rr => {
|
||||||
{{ .Inner | safeJS }}
|
{{ .Inner | safeJS }}
|
||||||
}, "{{ $id }}");
|
}, "{{ $id }}", className);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,12 @@
|
||||||
import rr from "./railroad.js";
|
import rr from "./railroad.js";
|
||||||
|
|
||||||
export function railroadDiagram(builder, elementID) {
|
export function railroadDiagram(builder, elementID, elementClass) {
|
||||||
const diagram = builder(rr);
|
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);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,8 @@
|
||||||
|
|
||||||
--body-padding: 4rem;
|
--body-padding: 4rem;
|
||||||
--body-width: 80rem;
|
--body-width: 80rem;
|
||||||
|
--body-font-size: 2rem;
|
||||||
|
--body-line-height: 1.2;
|
||||||
|
|
||||||
--body-background-color: var(--light);
|
--body-background-color: var(--light);
|
||||||
--body-foreground-color: var(--dark);
|
--body-foreground-color: var(--dark);
|
||||||
|
|
@ -27,6 +29,8 @@
|
||||||
--menu-icon-size: 20px;
|
--menu-icon-size: 20px;
|
||||||
--social-menu-padding: 1rem;
|
--social-menu-padding: 1rem;
|
||||||
|
|
||||||
|
--figure-border-size: 2px;
|
||||||
|
|
||||||
--tag-text-color: var(--dark);
|
--tag-text-color: var(--dark);
|
||||||
--tag-background-color: #eee;
|
--tag-background-color: #eee;
|
||||||
--tag-hover-background-color: #bbb;
|
--tag-hover-background-color: #bbb;
|
||||||
|
|
@ -68,13 +72,10 @@ a:hover {
|
||||||
body {
|
body {
|
||||||
background-color: var(--body-background-color);
|
background-color: var(--body-background-color);
|
||||||
color: var(--body-foreground-color);
|
color: var(--body-foreground-color);
|
||||||
display: flex;
|
font-size: var(--body-font-size);
|
||||||
flex-direction: column;
|
line-height: var(--body-line-height);
|
||||||
font-size: 2rem;
|
margin: 0;
|
||||||
line-height: 1.2;
|
padding: 0;
|
||||||
margin: 0 auto;
|
|
||||||
max-width: var(--body-width);
|
|
||||||
padding: 0 var(--body-padding);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
|
|
@ -110,7 +111,7 @@ figure img {
|
||||||
}
|
}
|
||||||
|
|
||||||
figure + p {
|
figure + p {
|
||||||
margin-top: 1rem;
|
margin-block-start: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
figure .youtube {
|
figure .youtube {
|
||||||
|
|
@ -121,21 +122,19 @@ figure .youtube {
|
||||||
|
|
||||||
figure.bordered {
|
figure.bordered {
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
border: 2px solid #eee;
|
border: var(--figure-border-size) solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure > .narrow-only {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.centered {
|
.centered {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1, h2, h3, h4, h5, h6 {
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-family: 'SF Pro Rounded', ui-rounded, 'Arial Rounded MT', system-ui, -apple-system, sans-serif;
|
font-family: 'SF Pro Rounded', ui-rounded, 'Arial Rounded MT', system-ui, -apple-system, sans-serif;
|
||||||
/*font-family: Palatino, Rockwell, Courier;*/
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
}
|
}
|
||||||
|
|
@ -152,6 +151,20 @@ img {
|
||||||
|
|
||||||
p {
|
p {
|
||||||
line-height: 1.4;
|
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 {
|
pre {
|
||||||
|
|
@ -163,6 +176,55 @@ pre {
|
||||||
padding: 2rem 0;
|
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
|
* Header
|
||||||
*/
|
*/
|
||||||
|
|
@ -223,7 +285,6 @@ pre {
|
||||||
.p5-sketch {
|
.p5-sketch {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.social menu li + li {
|
.social menu li + li {
|
||||||
|
|
@ -270,9 +331,9 @@ pre {
|
||||||
:root {
|
:root {
|
||||||
--menu-icon-size: 18px;
|
--menu-icon-size: 18px;
|
||||||
--social-menu-padding: 0.5rem;
|
--social-menu-padding: 0.5rem;
|
||||||
|
--body-padding: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
@ -324,6 +385,22 @@ pre {
|
||||||
* Main
|
* 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 {
|
.main > header {
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -355,12 +432,23 @@ pre {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main p:last-child {
|
.main .main-title {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main .main-title {
|
/* line number column of a code table */
|
||||||
margin-bottom: 0;
|
.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 {
|
.post-list {
|
||||||
|
|
@ -395,12 +483,14 @@ pre {
|
||||||
|
|
||||||
.post-nav {
|
.post-nav {
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
display: flex;
|
}
|
||||||
margin-top: 3.5rem;
|
|
||||||
|
.post-nav .prev {
|
||||||
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-nav .next {
|
.post-nav .next {
|
||||||
margin-left: auto;
|
text-align: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-single footer {
|
.post-single footer {
|
||||||
|
|
@ -465,6 +555,26 @@ ul.post-tags li + li {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 620px) {
|
@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 {
|
.main h1 {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
|
|
@ -486,10 +596,6 @@ ul.post-tags li + li {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 704px) {
|
@media (max-width: 704px) {
|
||||||
:root {
|
|
||||||
--body-padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: 7px;
|
font-size: 7px;
|
||||||
}
|
}
|
||||||
|
|
@ -502,4 +608,4 @@ ul.post-tags li + li {
|
||||||
/* For <span>s that shouldn't break. */
|
/* For <span>s that shouldn't break. */
|
||||||
.nobreak {
|
.nobreak {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,3 @@
|
||||||
.chroma { line-height: 1.4; }
|
|
||||||
/* Line */ .chroma .line { display: flex; }
|
|
||||||
|
|
||||||
/* Background */ .bg { color: #272822; background-color: #fafafa }
|
/* Background */ .bg { color: #272822; background-color: #fafafa }
|
||||||
/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }
|
/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }
|
||||||
/* Other */ .chroma .x { }
|
/* Other */ .chroma .x { }
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue