site

scripts to generate personal blog and git repositories

git clone https://9o.is/git/site.git

commit 82f23d5cf5bd2fb3507f1269e50bd9ec79435f75
parent 2db086b3e8af091e68d678b4b4bb55c0661e1904
Author: Jul <jul@9o.is>
Date:   Sat, 10 Jan 2026 10:45:50 -0500

add first iteration of design

Diffstat:

MMakefile | 2+-


Mpages/001-example.html | 158++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-


Mpartials/head.html | 4++--


Mpartials/nav.html | 16+++++++---------


Dstyle.css | 85-------------------------------------------------------------------------------


Astyles/article.css | 188+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


Rprint.css -> styles/print.css | 0


Astyles/style.css | 264+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


Astyles/theme.txt | 1+


Mtemplates/index.html/footer.html | 3+--


Mtemplates/index.html/header.html | 8++++----


Mtemplates/index.html/item.html | 5++++-


Mtemplates/page/footer.html | 3+--


Mtemplates/page/header.html | 9++++-----


Mtemplates/page/item.html | 7+++----


15 files changed, 637 insertions(+), 116 deletions(-)

diff --git a/Makefile b/Makefile
@@ -4,7 +4,7 @@ OUTDIR := output
 generate:
 	mkdir -p $(OUTDIR)
 	find pages -type f -name '*.cfg' -print0 | sort -zr | xargs -0 saait
-	cp style.css print.css $(OUTDIR)
+	cp styles/*.css $(OUTDIR)
 
 preview: generate
 	$(BROWSER) $(OUTDIR)/index.html
diff --git a/pages/001-example.html b/pages/001-example.html
@@ -1 +1,157 @@
-<p>example</p>
+<nav aria-labelledby="toc-heading">
+	<h2 id="toc-heading">Table of Contents</h2>
+	<ol>
+		<li><a href="#introduction">Introduction of Lorem Ipsum</a></li>
+		<li><a href="#definitions">Definitions of Random Words</a></li>
+		<li>
+			<a href="#texts">Texts of Stuff</a>
+			<ol>
+				<li><a href="#blockquote">Blockquote of Sorts</a></li>
+				<li><a href="#bindings">Keyboard of Bindings</a></li>
+				<li><a href="#html-formatting">Text without HTML Formatting</a></li>
+			</ol>
+		</li>
+		<li><a href="#essential-web">Essential Web Features</a></li>
+		<li><a href="#tech-snippet">Technical Snippet</a></li>
+		<li><a href="#media">Media & Figures</a></li>
+		<li><a href="#unit-comparison">Unit Comparison</a></li>
+	</ol>
+</nav>
+
+<section>
+	<h2 id="introduction">Introduction to Lorem Ipsum Foo Bar Blue Blah</h2>
+	<p>
+	Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+	This is a <a href="#">hyperlink</a> to test your theme's primary color and text-decoration.
+	</p>
+	<p>
+	Strong text check: <strong>This should be strong of the parent size.</strong><br>
+	Small text check: <small>This should be 80% of the parent size.</small><br>
+	Subscript/Superscript: H<sub>2</sub>O and E=mc<sup>2</sup>.
+	</p>
+</section>
+
+<section>
+	<h2 id="definitions">Definitions of Random Words</h2>
+	<dl>
+		<dt>Beast of Bodmin</dt>
+		<dd>A large feline inhabiting Bodmin Moor.</dd>
+
+		<dt>Morgawr</dt>
+		<dd>A sea serpent.</dd>
+
+		<dt>Owlman</dt>
+		<dd>A giant owl-like creature.</dd>
+	</dl>
+</section>
+
+<section>
+	<h2 id="texts">Texts of stuff</h2>
+	<section>
+		<h3 id="blockquote">Blockquote of Sorts</h3>
+		<blockquote>
+			<p>
+				The best way to predict the future is to invent it. This blockquote tests the indentation and border-color of your reset.
+			</p>
+			<p>
+				The best way to predict the future is to invent it. This blockquote tests the indentation and border-color of your reset.
+			</p>
+			<footer>— Alan Kay</footer>
+		</blockquote>
+	</section>
+	<hr/>
+	<section>
+		<h3 id="bindings">Keyboard Bindings</h3>
+		<p>
+			Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an
+			MDN page.
+		</p>
+	</section>
+	<section>
+		<h3 id="html-formatting">Text without HTML Formatting</h3>
+		<pre>
+			 S
+			 A
+			LUT
+			 M
+			O N
+			D  E
+			DONT
+		  JE SUIS
+		  LA  LAN
+		  G U E  É
+		 L O Q U E N
+		TE      QUESA
+	   B  O  U  C  H  E
+	  O        P A R I S
+	 T I R E   ET   TIRERA
+	T O U             JOURS
+   AUX                  A  L
+ LEM                      ANDS   - Apollinaire
+		</pre>
+	</section>
+</section>
+
+<section>
+	<h2 id="essential-web">Essential Web Features</h2>
+	<ul>
+		<li>Responsive Design with <code>clamp()</code></li>
+		<li>Semantic HTML5 Tags</li>
+		<li>Custom CSS Properties (Variables)</li>
+	</ul>
+
+	<ol>
+		<li>First step: Define the theme</li>
+		<li>Second step: Apply Preflight</li>
+		<li>Third step: Build the UI</li>
+	</ol>
+</section>
+
+<section>
+	<h2 id="tech-snippet">Technical Snippet</h2>
+	<p>To define a variable in your <code>@theme</code> block, use this syntax:</p>
+	<pre><code>@theme {
+	--default-font-family: 'Inter', sans-serif;
+	--brand-color: oklch(60% 0.15 250);
+}</code></pre>
+</section>
+
+<section>
+	<h2 id="media">Media & Figures</h2>
+	<figure>
+		<img src="https://picsum.photos/800/400" alt="Placeholder Image">
+		<figcaption>Fig 1. Testing image max-width and height-auto from Preflight.</figcaption>
+	</figure>
+</section>
+
+<section>
+	<h2 id="unit-comparison">Unit Comparison</h2>
+	<table>
+		<thead>
+			<tr>
+				<th>Unit</th>
+				<th>Relative To</th>
+				<th>Usage</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td><code>ex</code></td>
+				<td>x-height</td>
+				<td>Typography</td>
+			</tr>
+			<tr>
+				<td><code>ch</code></td>
+				<td>0 width</td>
+				<td>Containers</td>
+			</tr>
+		</tbody>
+	</table>
+</section>
+
+<section>
+	<details>
+		<summary>Click to reveal more information</summary>
+		<p>This tests the <code>summary { display: list-item; }</code> rule in your Preflight.</p>
+	</details>
+</section>
diff --git a/partials/head.html b/partials/head.html
@@ -5,7 +5,7 @@
 <meta name="description" content="${description}" />
 <meta name="author" content="${author}" />
 <meta name="generator" content="${sitegenerator}" />
-<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
-<link rel="stylesheet" href="print.css" type="text/css" media="print" />
+<link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
+<link rel="stylesheet" href="/print.css" type="text/css" media="print" />
 <link rel="icon" href="/favicon.png" type="image/png" />
 <meta name="darkreader-lock">
diff --git a/partials/nav.html b/partials/nav.html
@@ -1,10 +1,8 @@
-<nav id="menuwrap">
-	<table id="menu" width="100%" border="0">
-		<tr>
-			<td id="links" align="left">
-				<a href="/">Blog</a> |
-				<a href="/git" title="Git repository with some of my projects">Git</a>
-			</td>
-		</tr>
-	</table>
+<nav aria-label="Main">
+	<div class="nav-inner">
+		<ul>
+			<li><a href="/">Blog</a></li>
+			<li><a href="/git">Git</a></li>
+		</ul>
+	</div>
 </nav>
diff --git a/style.css b/style.css
@@ -1,85 +0,0 @@
-html {
-	overflow-y: scroll;
-}
-body {
-	background-color: #181825;
-	color: #cdd6f4;
-	font-family: sans-serif;
-	margin: 0;
-	padding: 1ex;
-}
-/* HTML5 semantic tags: some (older) browsers display this inline by default */
-article, figcaption, figure, header, main, nav {
-	display: block;
-}
-a {
-	color: #89b4fa;
-}
-/* center images */
-img {
-	display: block;
-	margin: 0 auto;
-}
-table, img {
-	border: 0;
-}
-hr {
-	border: 0;
-	border-bottom: 3px solid #aaa;
-	height: 3px;
-}
-h1 {
-	font-size: 140%;
-}
-h2 {
-	font-size: 120%;
-}
-h3 {
-	font-size: 120%;
-}
-h1,
-h1 a,
-h1 a:visited,
-h2,
-h2 a,
-h2 a:visited,
-h3,
-h3 a,
-h3 a:visited,
-h1 a:hover,
-h2 a:hover,
-h3 a:hover {
-	color: inherit;
-	text-decoration: none;
-}
-table tr td {
-	padding: 2px 10px 2px 0px;
-}
-pre {
-	margin: 0;
-}
-code {
-	background-color: #eee;
-	border: 3px solid #aaa;
-	display: block;
-	font-family: monospace;
-	overflow-x: auto;
-	padding: 5px;
-	word-wrap: normal;
-}
-#menu td {
-	padding: 1ex 0;
-}
-#menuwrap,
-#menu,
-#main {
-	margin: 0px auto;
-	max-width: 80ex;
-}
-#menu a {
-	font-weight: bold;
-	vertical-align: middle;
-}
-.hidden {
-	display: none;
-}
diff --git a/styles/article.css b/styles/article.css
@@ -0,0 +1,188 @@
+article {
+	display: flow-root;
+	max-width: 65ch;
+	margin: calc(4 * var(--spacing)) 0;
+}
+
+article :not(header.main, header.main *, nav, nav *, small) {
+	font-family: var(--font-sans);
+	line-height: var(--lineheight-lg);
+
+	h2,
+	h3 {
+		text-wrap: balance;
+		margin: 25px 0;
+	}
+
+	p {
+		text-wrap: balance;
+		margin-top: calc(5 * var(--spacing));
+		margin-bottom: calc(5 * var(--spacing));
+	}
+
+	ol {
+		list-style-type: decimal;
+		margin-top: 1.25em;
+		margin-bottom: 1.25em;
+		padding-inline-start: 1.625em;
+
+		& > li {
+			padding-inline-start: 0.375em;
+		}
+	}
+
+	ul {
+		list-style-type: disc;
+		margin-top: 1.25em;
+		margin-bottom: 1.25em;
+		padding-inline-start: 1.625em;
+
+		& > li {
+			padding-inline-start: 0.375em;
+		}
+	}
+
+	li {
+		margin-top: 0.5em;
+		margin-bottom: 0.5em;
+	}
+
+	hr {
+		margin-top: 3em;
+		margin-bottom: 3em;
+	}
+
+	blockquote {
+		font-weight: 500;
+		font-style: italic;
+		border-inline-start-width: 0.25rem;
+		quotes: '\201C' '\201D' '\2018' '\2019';
+		margin-top: 1.6em;
+		margin-bottom: 1.6em;
+		padding-inline-start: 1em;
+	}
+
+	blockquote p:first-of-type::before {
+		content: open-quote;
+	}
+
+	blockquote p:last-of-type::after {
+		content: close-quote;
+	}
+
+	img,
+	picture,
+	figure,
+	video {
+		margin-top: 2em;
+		margin-bottom: 2em;
+	}
+
+	figure > * {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
+	figcaption {
+		font-size: 0.875em;
+		line-height: 1.4285714;
+		margin-top: 0.8571429em;
+	}
+
+	picture > img {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
+	kbd {
+		font-weight: 500;
+		font-size: 0.875em;
+		border: var(--color-border) 1px solid;
+		border-radius: 0.3125rem;
+		padding-top: 0.1875em;
+		padding-inline-end: 0.375em;
+		padding-bottom: 0.1875em;
+		padding-inline-start: 0.375em;
+	}
+
+	code {
+		font-weight: 600;
+		font-size: 0.875em;
+	}
+
+	code::before,
+	code::after {
+		content: '`';
+	}
+
+	pre {
+		font-weight: normal;
+		overflow-x: auto;
+		font-size: 0.875em;
+		line-height: 1.7142857;
+		margin-top: 1.7142857em;
+		margin-bottom: 1.7142857em;
+		padding-top: 0.8571429em;
+		padding-inline-end: 1.1428571em;
+		padding-bottom: 0.8571429em;
+		padding-inline-start: 1.1428571em;
+	}
+
+	pre code {
+		font-weight: inherit;
+	}
+
+	pre code::before,
+	pre code::after {
+		content: none;
+	}
+
+	dl {
+		margin-top: 1.25em;
+		margin-bottom: 1.25em;
+	}
+
+	dt {
+		font-weight: 600;
+		margin-top: 1.25em;
+	}
+
+	dd {
+		margin-top: 0.5em;
+		padding-inline-start: 1.625em;
+	}
+
+	hr + *,
+	h2 + *,
+	h3 + *,
+	h4 + * {
+		margin-top: 0;
+	}
+}
+
+article nav {
+	font-family: var(--font-mono);
+	font-size: var(--text-sm);
+	line-height: var(--lineheight-lg);
+	float: right;
+	margin: 0 0 calc(4 * var(--spacing)) calc(5 * var(--spacing));
+	min-width: calc(var(--container) / 8);
+	max-width: calc(var(--container) / 4);
+
+	ol > li > ol {
+		padding-inline-start: 1.625em;
+	}
+
+	li {
+		margin: 0;
+		font-size: var(--text-xs);
+	}
+}
+
+@media (max-width: 640px) {
+	article nav {
+		float: none;
+		max-width: inherit;
+		margin: calc(4 * var(--spacing)) 0;
+	}
+}
diff --git a/print.css b/styles/print.css
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,264 @@
+:root {
+	--gray-50: #131314;
+	--gray-100: #414142;
+	--gray-200: #b2b2b3;
+	--gray-300: #e3e3e3;
+	--blue-50: #0b1422;
+	--blue-100: #2d4264;
+	--blue-200: #89b4fa;
+	--blue-300: #cce7ff;
+	--green-50: #0c170c;
+	--green-100: #2f482d;
+	--green-200: #88c084;
+	--green-300: #b7f2b2;
+	--red-50: #240d14;
+	--red-100: #663141;
+	--red-200: #fc93b0;
+	--red-300: #ffdae7;
+
+	--font-mono: monospace;
+	--font-sans: ui-sans-serif, system-ui, sans-serif;
+	
+	--spacing: 0.25rem;
+	--container: 80rem;
+
+	--text-base: 1rem;
+	--text-xs: 0.75rem;
+	--text-sm: 0.875rem;
+	--text-lg: 1.125rem;
+
+	--lineheight-base: 1.25;
+	--lineheight-lg: calc(var(--lineheight-base) * 1.2);
+
+	color-scheme: light dark;
+}
+
+@supports (color: oklch(0% 0 0)) {
+	:root {
+		--gray-50: oklch(0.1872 0.002 286.2);
+		--gray-100: oklch(0.3757 0.0017 286.32);
+		--gray-200: oklch(0.7639 0.0014 286.37);
+		--gray-300: oklch(0.9158 0 0);
+		--blue-50: oklch(0.1904 0.0317 258.97);
+		--blue-100: oklch(0.3781 0.0644 259.71);
+		--blue-200: oklch(0.7664 0.1113 259.88);
+		--blue-300: oklch(0.9158 0.0436 245.12);
+		--green-50: oklch(0.19 0.0271 144.42);
+		--green-100: oklch(0.373 0.0547 142.66);
+		--green-200: oklch(0.7535 0.1026 142.89);
+		--green-300: oklch(0.9048 0.1048 142.71);
+		--red-50: oklch(0.1977 0.0402 2.11);
+		--red-100: oklch(0.3881 0.0782 2.21);
+		--red-200: oklch(0.7813 0.1298 2.77);
+		--red-300: oklch(0.9229 0.0443 354.83);
+	}
+}
+
+:root {
+	--color-bg: var(--gray-50);
+	--color-fg: var(--gray-300);
+	--color-border: var(--gray-100);
+	--color-accent: var(--blue-200);
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--color-bg: var(--gray-300);
+		--color-fg: var(--gray-50);
+		--color-border: var(--gray-200);
+		--color-accent: var(--blue-100);
+	}
+}
+
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	border: 0 solid;
+}
+
+html,
+:host {
+	line-height: var(--lineheight-base);
+	-webkit-text-size-adjust: 100%;
+	tab-size: 4;
+	font-family: var(--font-mono);
+	font-feature-settings: normal;
+	font-variation-settings: normal;
+	font-size: var(--text-base);
+	-webkit-tap-highlight-color: transparent;
+}
+
+hr {
+	height: 0;
+	color: inherit;
+	border-top-width: 1px;
+	margin-top: calc(var(--spacing) * 4);
+	margin-bottom: calc(var(--spacing) * 4);
+	border-color: var(--color-border);
+}
+
+abbr:where([title]) {
+	-webkit-text-decoration: underline dotted;
+	text-decoration: underline dotted;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-size: inherit;
+	display: block;
+	font-weight: 700;
+	letter-spacing: calc(var(--spacing) / 6);
+}
+
+h1,
+h2 {
+	text-transform: uppercase;
+}
+
+a {
+	color: var(--color-accent);
+	-webkit-text-decoration: underline;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+b,
+strong {
+	font-weight: 600;
+}
+
+code,
+kbd,
+samp,
+pre {
+	font-family: var(--font-mono);
+	font-feature-settings: normal;
+	font-variation-settings: normal;
+	font-size: var(--text-base);
+}
+
+small {
+	font-size: 80%;
+}
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: calc(-1 * var(--spacing));
+}
+
+sup {
+	top: calc(-2 * var(--spacing));
+}
+
+table {
+	text-indent: 0;
+	border-color: inherit;
+	border-collapse: collapse;
+}
+
+:-moz-focusring {
+	outline: auto;
+}
+
+progress {
+	vertical-align: baseline;
+}
+
+summary {
+	display: list-item;
+}
+
+ol,
+ul,
+menu {
+	list-style: none;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+	display: block;
+	vertical-align: middle;
+}
+
+img,
+video {
+	max-width: 100%;
+	height: auto;
+}
+
+body {
+	background-color: var(--color-bg);
+	color: var(--color-fg);
+	max-width: var(--container);
+	margin-inline: auto;
+	padding: calc(2 * var(--spacing));
+}
+
+header.main {
+	border-bottom: var(--color-border) 1px solid;
+	padding-bottom: calc(2 * var(--spacing));
+	margin-bottom: calc(2 * var(--spacing));
+
+	& > :not(h1) {
+		font-size: var(--text-xs);
+	}
+}
+
+nav ul {
+	display: flex;
+
+	& > li::after {
+		content: "|";
+		margin: 0 calc(2 * var(--spacing));
+	}
+
+	& > li:last-child::after {
+		content: "";
+		margin: 0;
+	}
+}
+
+nav[aria-label="Main"] {
+	& > .nav-inner {
+		display: flex;
+		margin-bottom: calc(4 * var(--spacing));
+	}
+
+	& > .nav-inner::after {
+		content: '';
+		background: repeating-linear-gradient(
+		90deg, var(--color-accent), var(--color-accent)
+		1px, transparent 0, transparent 8px);
+		display: block;
+		width: 100%;
+		margin-left: var(--text-base);
+	}
+}
+
+main ol > li,
+main ul > li {
+	margin: var(--spacing) 0;
+}
+
diff --git a/styles/theme.txt b/styles/theme.txt
@@ -0,0 +1 @@
+https://leonardocolor.io/theme.html?name=theme&config=%7B%22baseScale%22%3A%22gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22gray%22%2C%22colorKeys%22%3A%5B%22%23131314%22%2C%22%23e3e3e3%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%22-1%22%2C%222%22%2C%2210.41%22%2C%2217.3%22%5D%2C%22smooth%22%3Atrue%7D%2C%7B%22name%22%3A%22blue%22%2C%22colorKeys%22%3A%5B%22%2389b4fa%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%22-1%22%2C%222%22%2C%2210.41%22%2C%2217.3%22%5D%2C%22smooth%22%3Atrue%7D%2C%7B%22name%22%3A%22green%22%2C%22colorKeys%22%3A%5B%22%23a6e3a1%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%22-1%22%2C%222%22%2C%2210.41%22%2C%2217.3%22%5D%2C%22smooth%22%3Atrue%7D%2C%7B%22name%22%3A%22red%22%2C%22colorKeys%22%3A%5B%22%23f38ba8%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%22-1%22%2C%222%22%2C%2210.41%22%2C%2217.3%22%5D%2C%22smooth%22%3Atrue%7D%5D%2C%22lightness%22%3A6%2C%22contrast%22%3A0.83%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D
diff --git a/templates/index.html/footer.html b/templates/index.html/footer.html
@@ -1,5 +1,4 @@
-			</table>
-		</div>
+		</ol>
 	</main>
 </body>
 </html>
diff --git a/templates/index.html/header.html b/templates/index.html/header.html
@@ -7,8 +7,8 @@
 </head>
 <body>
 	%{partial_nav}
-	<hr class="hidden" />
-	<main id="mainwrap">
-		<div id="main">
+	<main>
+		<header class="main">
 			<h1>Posts</h1>
-			<table>
+		</header>
+		<ol>
diff --git a/templates/index.html/item.html b/templates/index.html/item.html
@@ -1 +1,4 @@
-<tr><td><time>${created}</time></td><td><a href="${filename}">${title}</a></td></tr>
+<li>
+	<time>${created}</time>
+	<a href="${filename}">${title}</a>
+</li>
diff --git a/templates/page/footer.html b/templates/page/footer.html
@@ -1,5 +1,4 @@
-			</article>
-		</div>
+		</article>
 	</main>
 </body>
 </html>
diff --git a/templates/page/header.html b/templates/page/header.html
@@ -3,11 +3,10 @@
 <head>
 	%{partial_head}
 	%{partial_head_blog}
+	<link rel="stylesheet" href="/article.css" type="text/css" media="screen" />
 	<title>${title} - ${sitetitle}</title>
 </head>
 <body>
-    %{partial_nav}
-	<hr class="hidden" />
-	<main id="mainwrap">
-		<div id="main">
-			<article>
+	%{partial_nav}
+	<main class="container">
+		<article>
diff --git a/templates/page/item.html b/templates/page/item.html
@@ -1,8 +1,7 @@
-<header>
+<header class="main">
 	<h1>${title}</h1>
-	<p>
-	<strong>Last modification on </strong> <time>${updated}</time>
-	</p>
+	<p>${description}</p>
+	<p>Last modified on <time>${updated}</time></p>
 </header>
 
 %{contentfile}