with misses in html

14 files changed, 278 insertions, 386 deletions

diff --git a/.gitignore b/.gitignore
index c79a8a3..112daa3 100755
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,11 @@
 *.nef
 *.webp
 
+# leave my fonts out of it
+*.ttf
+*.woff
+*.woff2
+
 # video
 *.mp4
 
@@ -18,5 +23,6 @@
 
 # don't check in the autogenerate atom's
 atom.xml
+
 # except we DO want the template
 !/support/atom.xml
\ No newline at end of file
diff --git a/served/bits/__.html b/served/bits/__.html
index e7aff8a..ea3e5ff 100755
--- a/served/bits/__.html
+++ b/served/bits/__.html
@@ -25,7 +25,7 @@ description=briefly, on names. maybe.
 
 <p>
 	here's a thing. posted originally
-	<a href="https://amble.quest/notice/ATaqGUcyaI6KOZjUJc" style="text-decoration: line-through;">here</a>
+	<a href="https://amble.quest/notice/ATaqGUcyaI6KOZjUJc" class="dead">here</a>
 	(dead link), but in a different form. i was playing a game once and saw them. we talked about their name, briefly,
 	for the five or so minutes we had.
 </p>
@@ -34,32 +34,41 @@ description=briefly, on names. maybe.
 	<i>click the coloured bits<br>to reveal more text</i>
 </p>
 
-<details class="root arrow" style="min-height: 10rem">
-	<summary>e.</summary>
-	<p style="display: block">i know i'm very strange; i get excited when people are nice and neat and cool and talk to
-		me when i play games such as these. your name is just very nice.</p>
-	<details class="more">
-		<summary></summary>
-		<p>we all know i have a softspot for short-and-abstract and english-word names. yours happens to tickle me.</p>
+<section>
+	<details class="root arrow" style="min-height: 10rem">
+		<summary>e.</summary>
+		<p style="display: block">i know i'm very strange; i get excited when people are nice and neat and cool and talk
+			to
+			me when i play games such as these. your name is just very nice.</p>
 		<details class="more">
 			<summary></summary>
-			<p>How short can a poem be? A sentence, a word, perhaps a letter? maybe it can be a carefully placed space,
-				floating there, meaning. we now know, though, that there's a two letter contender. it's <i>e.</i>, see.
+			<p>we all know i have a softspot for short-and-abstract and english-word names. yours happens to tickle me.
 			</p>
 			<details class="more">
 				<summary></summary>
-				<p>could it be euler's number? possibly! estrogen? could be! maybe even nothing. a letter most common.
-					everything. “anything”, you said, “eye of the beholder”.</p>
+				<p>How short can a poem be? A sentence, a word, perhaps a letter? maybe it can be a carefully placed
+					space,
+					floating there, meaning. we now know, though, that there's a two letter contender. it's <i>e.</i>,
+					see.
+				</p>
 				<details class="more">
 					<summary></summary>
-					<p>i'm a lot, don't worry, i know. but your name, those two letters. they've taken me. <i>e.</i> you
-						asked me! “what does it mean to you”. well, for the time being, and likely a little more—until
-						this memory slips by lost to the hazy abyss of those forgotten—it means you.</p>
+					<p>could it be euler's number? possibly! estrogen? could be! maybe even nothing. a letter most
+						common.
+						everything. “anything”, you said, “eye of the beholder”.</p>
+					<details class="more">
+						<summary></summary>
+						<p>i'm a lot, don't worry, i know. but your name, those two letters. they've taken me. <i>e.</i>
+							you
+							asked me! “what does it mean to you”. well, for the time being, and likely a little
+							more—until
+							this memory slips by lost to the hazy abyss of those forgotten—it means you.</p>
+					</details>
 				</details>
 			</details>
 		</details>
 	</details>
-</details>
+</section>
 
 <p style="font-style: italic;">(and something more personal in the same presentation style)</p>
 
@@ -108,15 +117,15 @@ description=briefly, on names. maybe.
 	</details>
 </details>
 
-<h2>notes</h2>
-<p id="notes" class="notes">
+<h2 id="notes">notes</h2>
+<p class="notes">
 	this page was originally 🌦.html, but the links were showing up url encoded in discord
 	and elsewhere and, for some reason, firefox mobile was just <i>not rendering</i>
 	the sun-storm rain cloud.
 </p>
 <p class="notes">
 	so now it's the double-underscore. which i think, "yeah, that might be better". if i go and
-	overanalyze it- <i>(well don't do do that)</i>. why not? anyway, if we analyze it maybe too
+	overanalyze it- <i>(well don't do that)</i>. why not? anyway, if we analyze it maybe too
 	much we can say it's a metaphor for my lack of solid identity and desire to flip-flop
 	between names a lot. "fill in name here". <i>(that's dumb)</i>. hey, leave me alone, me. let
 	me have fun.
diff --git a/served/bits/bits.css b/served/bits/bits.css
index ee6c28c..3229a20 100755
--- a/served/bits/bits.css
+++ b/served/bits/bits.css
@@ -12,7 +12,7 @@
 }
 
 #two-up :nth-child(n) {
-	flex: 1 0 calc(var(--page-width) / 2 - 1rem);
+	flex: 1 0 calc(var(--pwidth) / 2 - 1rem);
 	max-width: 20rem;
 }
 
diff --git a/served/bits/touching-grass/touching-grass.css b/served/bits/touching-grass/touching-grass.css
index 765d1ea..65a9300 100755
--- a/served/bits/touching-grass/touching-grass.css
+++ b/served/bits/touching-grass/touching-grass.css
@@ -1,5 +1,5 @@
 .mark {
-	color: var(--color-a);
+	color: var(--link);
 	cursor: pointer;
 }
 
@@ -17,7 +17,7 @@
 }
 
 a[download] {
-	color: var(--color-a-dim);
+	color: var(--visited);
 }
 
 .small,
diff --git a/served/bits/🌦.css b/served/bits/🌦.css
index 882f4d7..8b8f1fc 100755
--- a/served/bits/🌦.css
+++ b/served/bits/🌦.css
@@ -3,6 +3,10 @@
 	margin: 0 auto;
 }
 
+section {
+	max-width: var(--pwidth);
+}
+
 /* narrow */
 @media (max-width: 44rem) {
 	.root {
@@ -18,13 +22,13 @@
 
 details.arrow:not([open])>summary::after {
 	content: '→';
-	color: var(--color-a);
+	color: var(--link);
 	margin: 0 4px;
 }
 
 details.arrow[open]>summary::after {
 	content: '–';
-	color: var(--color-a-dim);
+	color: var(--visited);
 	margin: 0 4px;
 }
 
@@ -51,20 +55,20 @@ details.arrow>summary::-webkit-details-marker {
 
 details.more:not([open])>summary::before {
 	content: '[+]';
-	color: var(--color-a);
+	color: var(--link);
 }
 
 details.more[open]>summary::before {
 	content: '[-]';
 	margin: 0 2px;
-	color: var(--color-a-dim);
+	color: var(--visited);
 }
 
-h2 {
-	font-size: 1em;
+#notes,
+.notes {
+	margin: 0.5rem 0;
 }
 
-#notes,
 .notes {
 	font-size: 0.75rem;
 }
\ No newline at end of file
diff --git a/served/home.html b/served/home.html
index b3e574f..5e92a15 100755
--- a/served/home.html
+++ b/served/home.html
@@ -4,83 +4,38 @@ title=Home | nyble.dev
 style=/styles/home.css
 ---
 [@paragraphs off]
-<header>
-	<img src="/faces/wide eyed/wideeyeddeer_quare_squash.gif"
-		alt="my face in few colors. my skin is pink and red with blue shadowing" />
-
-	<section id="contact">
-		<h2>Contact~,.</h2>
-		<ul>
-			<li>Email! <a href="mailto:gen@nyble.dev">gen@nyble.dev</a></li>
-			<li>Github? <a href="https://github.com/gennyble">@gennyble</a></li>
-			<!-- well, i guess that's it. -->
-			<!-- <li>Twitter.. <a href="https://twitter.com/gennyble">@gennyble</a></li> -->
-			<li>Cohost: <a href="https://cohost.org/gen">cohost/gen</a></li>
-			<li>Fedi&mdash;<br><a href="https://amble.quest/inann" style="margin-left: 1rem">@inann@amble.quest</a></li>
-		</ul>
-	</section>
-</header>
-
-<main id="main-content">
-	<section id="greeting">
-		<h1>Hello,</h1>
+<main>
+	<section id="hello">
+		<h1>hey, welcome to my dreams.</h1>
 		<p>
-			I'm genny. I like to write software things. <br />
-			small, intentional tools and multimedia experiments are some of my favourite projects to work on.
-		</p>
-		<p id="notice">
-			now being served on <a href="https://dremy.place">dreamy.place!</a>
+			My name is Geneveive Raine and I like to write little software things.
+			Some of my favourite software topics <i>(softopics, if you will)</i> include
+			image manipulation, networking, and most things gif related :)
 		</p>
-	</section>
-
-	<section id="multimedia">
-		<h2>sharing images, videos,<br /><a href="bits/" style="color: var(--color-a-dim)">bits/</a> of my world</h2>
-		<ol class="thing-list">
-			<li><a href="bits/ramen-bowl.html">ramen-bowl.html</a></li>
-			<li><a href="bits/touching-grass/">touching-grass.html</a></li>
-			<li><a href="bits/smoems.html">smoems.html</a></li>
-		</ol>
-	</section>
-
-	<section id="scrap">
-		<h2>&mdash; scrap</h2>
-		<p style="display: inline">
-			dropped things collected: <a href="bits/scrap/">scrap.html</a>
+		<p>
+			Sometimes I write things, too. Or make little games. Art, mostly of the digital
+			persuasion. Memories, notes- anything, really.
 		</p>
-		<p style="text-align: right;">
-			last update:<br />
-			<time datetime="2023-08-07">aug 7, 2023</time> - wrench!
+		<p>
+			If I write, it's usually in <a href="words/">words/</a>, but sometimes I'll put
+			it in <a href="bits/">bits/</a> if it feels like it wants to be there.
 		</p>
-		<!-- for half-length border on right/bottom of this section -->
-		<div id="scrap-halfborder"></div>
-	</section>
 
-	<section id="writing">
-		<!-- for half-length border on left/top of this section -->
-		<div id="writing-halfborder"></div>
-
-		<a href="/atom.xml" style="float: right; margin-left: 1rem"><img src="valid-atom.png"></a>
-
-		<ul class="thing-list">
-			<li><a href="/atom.xml">atoml.xml</a> &mdash; subscribe with your feed reader ;)</li>
-			<li><a href="/things/">things/</a> &mdash; projects; creative pursuits; what i work on</li>
-			<li><a href="/words/">words/</a> &mdash; technical writing, project updates, and weeknotes.</li>
-		</ul>
+		<section id="contact">
+			<h2>Contact~,.</h2>
+			<ul>
+				<li>Email! <a href="mailto:gen@nyble.dev">gen@nyble.dev</a></li>
+				<li>Github? <a href="https://github.com/gennyble">@gennyble</a></li>
+				<li>Bsky,,, <a href="https://bsky.app/profile/gen.nyble.dev">@gen.nyble.dev</a></li>
+				<li>Fedi&mdash;<br /><a href="https://amble.quest/inann"
+						style="margin-left: 1rem">@inann@amble.quest</a></li>
+			</ul>
+		</section>
 	</section>
 
-	<!--
-	NOT READY :)
-		it looks a little weird on mobile and the CSS is starting
-		to get away from me which means it might be time to clean
-		it up a little bit :)
-	<section id="changelog">
-		<h2>abridged changelog</h2>
-		<h3>(full <a href="changelog.html">changelog.html</a>)</h3>
-		<ul>
-			<li>
-				<time datetime="2024-06-06">june 6th</time> &mdash; revived <a href="/bits/__.html">/bits/__.html</a>
-			</li>
-		</ul>
-	</section>
-	-->
+	<h2>have a look at my scrap!</h2>
+	<p>
+		Scrap is the weird ~things I find in the world, typically on the ground. They are
+		unloved and, perhaps, forgotten. I've taken to them.
+	</p>
 </main>
\ No newline at end of file
diff --git a/served/styles/common.css b/served/styles/common.css
index 64067cb..f798e3a 100755
--- a/served/styles/common.css
+++ b/served/styles/common.css
@@ -2,55 +2,104 @@
 	box-sizing: border-box;
 }
 
+@font-face {
+	font-family: Recursive;
+	font-style: oblique 0deg 15deg;
+	font-weight: 300 1000;
+	font-display: swap;
+	src: url(Recursive.woff2);
+}
+
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	src: url(Atkinson-Hyperlegible-Regular-102a.woff2);
+	font-weight: normal;
+}
+
 :root {
+	/* "-dim" to mean: secondary; alternate; deemphasized  */
 	--text: #222;
-	--text-dim: #444;
-	--text-link: #037;
-	--text-link-visited: #730;
+	--text-dim: #456;
 	--background: #FFF;
-	--background-dim: #F8F0F0;
-	--color-a: rgb(11, 113, 126);
-	--color-a-dim: rgb(7, 80, 90);
-}
+	--background-dim: #F8F0FF;
 
-@media (prefers-color-scheme: dark) {
-	:root {
-		--text: #eee;
-		--text-dim: #bbb;
-		--text-link: #ddf;
-		--text-link-visited: #fed;
-		--background: #112;
-		--background-dim: #333;
-		--color-a: #3a8;
-		--color-a-dim: rgb(158, 228, 208);
-	}
+	--link: #a41;
+	--visited: #439;
+
+	--pwidth: 35rem;
+	--left-pad: 5rem;
+	/* ^ lmao */
 }
 
 html,
 body {
-	padding: 0;
 	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
 }
 
 body {
-	font-size: 1.1rem;
-	line-height: 1.4;
-	font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-	padding: 2rem 5vw;
+	padding: 2rem 1rem 2rem var(--left-pad);
 
+	font-family: 'Atkinson Hyperlegible', sans-serif;
 	color: var(--text);
+	font-size: 1.15rem;
+
 	background-color: var(--background);
 }
 
-a {
-	color: var(--color-a);
+@media (max-width: 35rem) {
+	body {
+		padding-left: 2vw;
+		padding-right: 4vw;
+	}
 }
 
 h1,
-h2,
-h3 {
-	margin: 0;
-	font-family: serif;
+h2 {
+	margin: 1rem 0;
+	padding: 0;
+
+	font-family: Recursive, sans-serif;
+	font-variation-settings:
+		"MONO" 0,
+		"CASL" 0,
+		"wght" 500,
+		"slnt" 0,
+		"CRSV" 0;
+}
+
+h1 {
+	font-size: 2rem;
+}
+
+h2 {
+	font-size: 1.5rem;
+}
+
+p {
+	line-height: 1.3;
+	max-width: var(--pwidth);
+	margin: 1rem 0;
+}
+
+ul {
+	padding: 0;
+	list-style-position: inside;
+	list-style-type: decimal;
+}
+
+a {
+	color: var(--link);
+}
+
+a:visited {
+	color: var(--visited);
+}
+
+a.dead {
+	text-decoration: line-through;
 }
 
 #nav-access {
diff --git a/served/styles/home.css b/served/styles/home.css
index d48471a..bd23605 100755..100644
--- a/served/styles/home.css
+++ b/served/styles/home.css
@@ -1,194 +1,51 @@
-body {
-	padding-top: 4rem;
-	padding-bottom: 4rem;
+#hello {
+	margin: 1rem 0;
 }
 
-main,
-header {
-	max-width: 35rem;
-	margin: 0 auto;
-}
-
-header {
-	display: flex;
-	justify-content: space-between;
-	flex-wrap: wrap;
-	row-gap: 1rem;
-}
-
-header img {
-	width: 96px;
-	height: 96px;
-	margin-top: 1.5em;
-}
-
-#contact a {
-	text-decoration: none;
-	color: var(--color-a);
-	border-bottom: none;
-}
-
-#contact ul {
-	line-height: normal;
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-
-#contact h2 {
-	margin: 0;
-}
+#contact {
+	border: 1px solid black;
+	box-shadow: 5px -5px 0px #999, 10px -10px 0px #666, 15px -15px 0px #333;
+	padding: 1rem 2rem 1rem 1rem;
 
-#greeting {
-	flex: 1 0 15rem;
+	max-width: var(--pwidth);
+	height: min-content;
 }
 
-#greeting h1 {
+#contact>h2 {
 	margin-top: 0;
 }
 
-#notice {
-	font-style: italic;
-	text-align: center;
-}
-
-.thing-list {
-	padding: 0.5rem 0;
-	margin: 0;
-	list-style-position: inside;
-}
-
-ul.thing-list {
-	padding: 0;
-	list-style: none;
-}
-
-section h2 {
+#contact>ul {
 	margin: 0;
-}
-
-ol,
-ul.thing-list {
-	line-height: 1.5;
-}
-
-#scrap {
-	max-width: 25rem;
-}
-
-#changelog {
-	margin: 0.5rem 1rem;
-	padding: 1rem 0;
-	border-top: 1px solid var(--text);
-}
-
-#changelog h2 {
-	font-size: 1.5rem;
-	margin-bottom: 0.25rem;
-	display: inline-block;
-}
-
-#changelog h3 {
-	font-size: 1rem;
-	font-weight: normal;
-	align-self: baseline;
-	display: inline-block;
-}
-
-#changelog ul {
 	list-style: none;
 	padding: 0;
-	margin: 0;
 }
 
-#changelog time {
-	color: var(--text-dim);
-	font-style: italic;
-	margin-right: 0.5rem;
+@media (max-width: 50rem) {
+	#contact {
+		margin-top: 1.5rem;
+		margin-right: 1rem;
+	}
 }
 
-@media (min-width: 40rem) {
-	main {
-		padding: 1rem 0;
+@media (min-width: 50rem) {
+	#hello {
 		display: grid;
-		grid-template-columns: 1fr 1fr;
+		grid-template-columns: 30rem 1fr;
+		row-gap: 1rem;
 		column-gap: 1rem;
-		row-gap: 0.5rem;
-	}
-
-	#greeting {
-		grid-column: 1 / 3;
-	}
-
-	#greeting p {
-		max-width: 26rem;
 	}
 
-	p#notice {
-		/* there's too much space without this. only on desktop. i think it's
-		to do with the grid gap */
-		margin-bottom: 0rem;
-		max-width: 100%;
+	#hello>p,
+	#hello>h1 {
+		grid-column: 1 / 2;
+		margin: 0;
 	}
 
-	#scrap {
-		width: 100%;
-		/* a padding on desktop so it falls below the multimedia heading and
-		looks like it's kind of part of that section even if maybe it's not */
-		padding-top: 2.25rem;
-		position: relative;
-		padding-right: 1rem;
-	}
-
-	#scrap h2 {
-		display: inline;
-		margin: 0 0.5rem 0 0;
-	}
-
-	/* tried https://stackoverflow.com/a/68283780 but it didn't seem to want
-	to work for right and bottom at the same time */
-	#scrap-halfborder {
-		position: absolute;
-		right: 0;
-		bottom: 0;
-
-		z-index: -1;
-		width: 50%;
-		height: 50%;
-		border: 1px solid var(--text);
-		border-width: 0px 1px 1px 0px;
-	}
-
-	#writing-halfborder,
-	#feed-halfborder {
-		position: absolute;
-		left: 0;
-		top: 0;
-
-		z-index: -1;
-		width: 25%;
-		height: min(50%, 2rem);
-		border: 1px solid var(--text);
-		border-width: 1px 0 0 1px;
-	}
-
-	#writing {
-		padding-left: 1rem;
-		padding-top: 1rem;
-		position: relative;
-
-		grid-column: 1 / 3;
-	}
-
-	#feed {
-		position: relative;
-		margin: 1rem 0 0 1rem;
-		padding: 1rem 0 0 1rem;
-		width: 15rem;
-		float: right;
-	}
+	#hello>#contact {
+		grid-column: 2 / 3;
+		grid-row: 2 / 5;
 
-	#changelog {
-		grid-column: 1 / 3;
+		width: fit-content;
 	}
 }
\ No newline at end of file
diff --git a/served/styles/post.css b/served/styles/post.css
index f7111dd..b0a4d5e 100755
--- a/served/styles/post.css
+++ b/served/styles/post.css
@@ -1,7 +1,5 @@
 .sized {
-	--page-width: 35rem;
-	max-width: var(--page-width);
-	margin: 0 auto;
+	max-width: var(--pwidth);
 }
 
 #navtree {
@@ -14,10 +12,6 @@
 	gap: 1rem;
 }
 
-body {
-	line-height: 1.5;
-}
-
 p {
 	margin: 1.25rem 0;
 }
\ No newline at end of file
diff --git a/served/words/debugging-my-sql-query.html b/served/words/debugging-my-sql-query.html
index e9f5643..dde57cd 100644
--- a/served/words/debugging-my-sql-query.html
+++ b/served/words/debugging-my-sql-query.html
@@ -58,7 +58,8 @@ held my database connection <i>(not great probably, the mutex, but)</i>.
 
 does it just say that if it doesn't think the table is real? surely the table is real. we have so
 much evidence it is. i changed the table name.
-<pre><code>SELECT creation_date, state, game, result FROM awoo;</code></pre>
+<pre><code>SELECT creation_date, state, game, result
+FROM awoo;</code></pre>
 
 <pre><code>Some("no such table: awoo")</code></pre>
 
@@ -68,12 +69,16 @@ i tried removing my where clause.
 aha! it ran.
 
 what's wrong with my where clause? let's look at it again
-<pre><code>SELECT creation_date, state, game, result FROM double_dodge WHERE player_id = ?1 AND state = ?2</code></pre>
+<pre><code>SELECT creation_date, state, game, result
+FROM double_dodge
+WHERE player_id = ?1 AND state = ?2</code></pre>
 
 those are all columns that exist, even if sqlite does not believe me. oh, i'm not selecting
 <code>player_id</code>. that's probably not good.
 
-<pre><code>SELECT player_id, creation_date, state, game, result FROM double_dodge WHERE player_id = ?1 AND state = ?2;</code></pre>
+<pre><code>SELECT player_id, creation_date, state, game, result
+FROM double_dodge
+WHERE player_id = ?1 AND state = ?2;</code></pre>
 
 <b><i>success :)</i></b>
 
diff --git a/served/words/weeknotes/2024/sol.html b/served/words/weeknotes/2024/sol.html
index e0ba7a8..d5620c3 100755
--- a/served/words/weeknotes/2024/sol.html
+++ b/served/words/weeknotes/2024/sol.html
@@ -5,7 +5,7 @@ style=/styles/post.css
 style=../writing.css
 path-offset=2
 
-#weeknote=20
+#weeknote=29
 published=2024-07-20 09:00
 
 description=wherein she briefly explains her absence and introduces a new calendar system
diff --git a/served/words/words.css b/served/words/words.css
index abe4ee5..afc2919 100755
--- a/served/words/words.css
+++ b/served/words/words.css
@@ -7,6 +7,7 @@ div {
 	grid-column: 2 / 3;
 	display: flex;
 	flex-direction: column;
+	row-gap: 1rem;
 }
 
 #written {
@@ -14,54 +15,32 @@ div {
 	grid-column: 1 / 2;
 }
 
-#weeknotes-list,
-.wk-list {
-	padding: 0;
-	margin: 0;
-	display: flex;
-	flex-direction: row;
-	column-gap: 1rem;
-	list-style: none;
-	flex-wrap: wrap;
-}
-
 #what-weeknotes {
 	align-self: end;
 	margin-top: -0.75rem;
 	font-weight: normal;
 }
 
-#weeknotes-ifc {
-	padding: 0.75rem 0;
-	margin: 0.75rem 0 0.75rem 0;
-	display: grid;
-	grid-template-columns: min-content 1fr 1fr;
+.wk-miss,
+.wk-notes {
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
 	column-gap: 1rem;
-	list-style: none;
-	border-style: solid;
-	border-color: var(--text-dim);
-	border-width: 1px 0 1px 0;
-}
-
-#weeknotes-early-only {
-	grid-column: 2 / 4;
-	padding-right: calc(50% + 1.5rem);
-	text-align: right;
-}
 
-.early {
-	text-align: right;
-	padding-right: 1rem;
+	list-style: none;
+	display: flex;
 }
 
-.late {
-	text-align: left;
+.wk-miss {
+	display: none;
 }
 
-.month {
-	text-align: center;
-	grid-column: 2 / 4;
-	padding-right: 1rem;
+.wk-notes {
+	flex-direction: column;
+	row-gap: 1rem;
 }
 
 h2 {
@@ -72,10 +51,6 @@ h2 {
 	margin: 0;
 }
 
-.miss {
-	color: var(--text-dim);
-}
-
 @media (max-width: 30rem) {
 	div {
 		display: flex;
diff --git a/served/words/words.html b/served/words/words.html
index 587d021..ffb9181 100755
--- a/served/words/words.html
+++ b/served/words/words.html
@@ -16,38 +16,88 @@ The writing is part of the website <a href="/atom.xml">Atom Feed</a>.
 	<section id="weeknotes-section">
 		<h2 id="weeknotes">weeknotes</h2>
 		<h3 id="what-weeknotes"><a href="weeknotes/what.html">what?</a></h3>
-		<ul class="wk-list">
-			<li><a href="weeknotes/48.html">48</a></li>
-			<li class="miss">47</li>
-			<li><a href="a-really-long-week.html">a really long week</a></li>
-			<li class="miss">45</li>
-			<li class="miss">44</li>
+		<ul class="wk-miss">
+			<li>49</li>
+			<li>48</li>
+			<li>dec</li>
+			<li>47</li>
+		</ul>
+		<ul class="wk-notes">
+			<li><a href="a-really-long-week.html">46: a really long week</a></li>
+		</ul>
+		<ul class="wk-miss">
+			<li>45</li>
+			<li>44</li>
 			<li>nov</li>
+			<li>43</li>
+			<li>42</li>
+			<li>41</li>
+			<li>40</li>
+			<li>oct</li>
+			<li>39</li>
+			<li>38</li>
+			<li>37</li>
+			<li>36</li>
+			<li>35</li>
+			<li>sep</li>
+			<li>34</li>
+			<li>33</li>
+			<li>32</li>
+			<li>31</li>
+			<li>aug</li>
+			<li>30</li>
 		</ul>
-		<ul id="weeknotes-ifc">
-			<li>sol</li>
-			<li class="month"><a href="weeknotes/2024/sol.html">complete</a></li>
-			<li>jun</li>
-			<li class="early miss">early</li>
-			<li class="miss">late</li>
+		<ul class="wk-notes">
+			<li><a href="weeknotes/2024/sol.html">Week 29</a></li>
 		</ul>
-		<ul id="weeknotes-list">
-			<li class="miss">23</li>
+		<ul class="wk-miss">
+			<li>28</li>
+			<li>27</li>
+			<li>jul</li>
+			<li>26</li>
+			<li>25</li>
+			<li>24</li>
+			<li>23</li>
+			<li>22</li>
 			<li>jun</li>
-			<li class="miss">22</li>
-			<li class="miss">21</li>
-			<li><a href="weeknotes/2024/20.html">20</a></li>
-			<li class="miss">19</li>
-			<li class="miss">18</li>
+			<li>21</li>
+		</ul>
+		<ul class="wk-notes">
+			<li><a href="weeknotes/2024/20.html">Week 20</a></li>
+		</ul>
+		<ul class="wk-miss">
+			<li>19</li>
+			<li>18</li>
 			<li>may</li>
-			<li><a href="weeknotes/2024/17.html">17</a></li>
-			<li class="miss">16</li>
-			<li><a href="weeknotes/2024/15.html">15</a></li>
-			<li><a href="weeknotes/2024/14.html">14</a></li>
+		</ul>
+		<ul class="wk-notes">
+			<li><a href="weeknotes/2024/17.html">Week 17</a></li>
+		</ul>
+		<ul class="wk-miss">
+			<li>16</li>
+		</ul>
+		<ul class="wk-notes">
+			<li><a href="weeknotes/2024/15.html">Week 15</a></li>
+			<li><a href="weeknotes/2024/14.html">Week 14</a></li>
+		</ul>
+		<ul class="wk-miss">
 			<li>apr</li>
 			<li>mar</li>
+			<li>13</li>
+			<li>12</li>
+			<li>11</li>
+			<li>10</li>
+			<li>9</li>
 			<li>feb</li>
+			<li>8</li>
+			<li>7</li>
+			<li>6</li>
+			<li>5</li>
 			<li>jan</li>
+			<li>4</li>
+			<li>3</li>
+			<li>2</li>
+			<li>1</li>
 			<li>2024</li>
 		</ul>
 	</section>
diff --git a/served/words/writing.css b/served/words/writing.css
index 6983ccc..bfe46a3 100755
--- a/served/words/writing.css
+++ b/served/words/writing.css
@@ -61,16 +61,4 @@ q {
 q::before,
 q::after {
 	content: none;
-}
-
-main a {
-	color: var(--text-link);
-}
-
-main a:visited {
-	color: var(--text-link-visited);
-}
-
-.writing {
-	line-height: 1.65;
 }
\ No newline at end of file