Genesis commit

Not ready for release yet, but I need some commits for M4 to work
properly.

1 files changed, 162 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..2b67620
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,162 @@
+:root {
+	--serif: Vollkorn;
+	--mono: 'Iosevka Custom';
+	--bg: #1D1F21;
+	--fg: #C5C8C6;
+	--bg-accent: #222427;
+	--accent: #DE935F;
+	--lesser: #969896;
+	--green: #B5BD68;
+	--red: #C66;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+body {
+	font-family: var(--serif);
+	font-size: 1.2rem;
+	font-variant-numeric: lining-nums;
+	line-height: 1.5;
+	text-align: justify;
+	color: var(--fg);
+	background-color: var(--bg);
+	display: grid;
+	grid-template-columns: 1fr min(800px, 90%) 1fr;
+}
+body > * { grid-column: 2; }
+
+pre, code, kbd, samp {
+	font-family: var(--mono);
+	font-size: 1rem;
+	color: var(--accent);
+}
+pre > code { color: var(--fg); }
+
+h1 {
+	font-size: 3rem;
+	margin-bottom: 0;
+}
+h2 { font-size: 2.5rem; }
+
+h1, h2, p { overflow-wrap: break-word; }
+
+a       { color: var(--accent);  }
+a:hover { text-decoration: none; }
+
+blockquote > p:first-child::before  { content: '“';  }
+blockquote > p:last-child::after    { content: '”';  }
+blockquote + figcaption::before     { content: '— '; }
+
+blockquote, blockquote + figcaption { font-style: italic; }
+
+.quote {
+	border-left: 4px solid var(--accent);
+	padding: .4rem .8rem;
+	margin-inline: 2rem 0;
+	margin-block: 2rem;
+}
+
+.quote blockquote { margin-inline-start: 1rem; }
+.quote blockquote, .quote blockquote p { margin-block: .5rem; }
+
+.quote figcaption {
+	margin-inline-start: 2rem;
+	margin-block: .5rem;
+}
+
+figure:not(.quote) figcaption {
+	text-align: center;
+	text-decoration: underline;
+}
+
+hr   { width: 100%; }
+main { margin-block-end: 5rem; }
+
+footer {
+	margin-block: 2rem;
+	text-align: center;
+	font-style: italic;
+	color: var(--lesser);
+}
+
+aside {
+	font-style: italic;
+	color: var(--lesser);
+	position: relative;
+	margin-block: 1.5rem;
+}
+
+aside > p::before,
+x-ref {
+	vertical-align: super;
+	font-size: .8rem;
+}
+
+aside > p::before {
+	content: attr(data-ref);
+	position: absolute;
+	left: -1.5ch;
+}
+
+abbr {
+	cursor: help;
+	position: relative;
+	text-decoration-line: underline;
+	text-decoration-style: dotted;
+}
+
+abbr:hover::before {
+	opacity: 1;
+	pointer-events: inherit;
+}
+
+abbr::before {
+	opacity: 0;
+	position: absolute;
+	bottom: 100%;
+	transition: .15s ease opacity;
+	white-space: nowrap;
+	padding: .15em .25em;
+	border: 1px solid var(--fg);
+	border-radius: 2px;
+	background: var(--bg-accent);
+	pointer-events: none;
+}
+
+abbr.ec::before { content: 'Embedded Controller'; }
+abbr.html::before { content: 'Hypertext Markup Language'; }
+abbr.led::before { content: 'Light-Emitting Diode'; }
+abbr.rgb::before { content: 'Red Green Blue'; }
+
+.diff-ins  { color: var(--green);  }
+.diff-del  { color: var(--red);    }
+.diff-loc  { color: var(--lesser); }
+.diff-meta { font-weight: bold;    }
+
+figure > pre { margin-left: 4ch; overflow-x: scroll; }
+figure > pre > code { counter-increment: line; }
+figure > pre > code::before {
+	position: absolute;
+	content: counter(line);
+	padding-right: .5ch;
+	margin-left: -4ch;
+	width: 3ch;
+	text-align: right;
+	display: inline-block;
+	border-right: 1px solid var(--lesser);
+	color: var(--lesser);
+	z-index: 1;
+	background-color: var(--bg);
+}
+
+header > div {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+header > div menu {
+	display: flex;
+	gap: 2ch;
+}
+header > div li { list-style: none; }