done? for now, anyway

10 files changed, 120 insertions, 45 deletions

diff --git a/served/bits/bits.html b/served/bits/bits.html
index 0e8f501..1a6aaaa 100755
--- a/served/bits/bits.html
+++ b/served/bits/bits.html
@@ -1,6 +1,6 @@
 ---
 template=post
-title=Bits
+title=Bits of my world.
 style=/styles/post.css
 style=poem.css
 style=bits.css
@@ -11,8 +11,9 @@ style=bits.css
 </p>
 
 <ol class="list">
-	<li><a href="__.html">__.html</a> &mdash; briefly, on names. maybe.</li>
 	<li><a href="ramen-bowl.html">ramen-bowl.html</a> &mdash; a poem about my ramen noodel bowl</li>
+	<li><a href="time.html">time.html</a> &mdash; days of life</li>
+	<li><a href="__.html">__.html</a> &mdash; briefly, on names. maybe.</li>
 	<li><a href="touching-grass/">touching-grass.html</a> &mdash; a short video with an exciteable description</li>
 	<li><a href="smoems.html">smoems.html</a> &mdash; transplanted poems from twitter</li>
 	<li><a href="sillygifs/">sillygifs.html</a> &mdash; various sillily long counting gif</li>
diff --git a/served/bits/time.html b/served/bits/time.html
index dc0ea0f..1a60a33 100755
--- a/served/bits/time.html
+++ b/served/bits/time.html
@@ -1,50 +1,59 @@
 ---
-Template post
-Title  
+template=post
+title=Time
+#published=2023-09-14 10:22pm CDT
 ---
+[@paragraphs off]
 
 <style>
-	@font-face {
-		font-family: 'Dosis';
-		font-weight: 200;
-		src: url('/Dosis-ExtraLight.otf');
+	#counter h1,
+	#counter h2 {
+		text-align: center;
+		font-family: 'Recursive', sans-serif;
+		font-variation-settings:
+			"MONO" 1,
+			"CASL" 0,
+			"wght" 200,
+			"slnt" 0,
+			"CRSV" 0;
 	}
 
 	#counter {
-		margin: 96px auto;
-		width: 15rem;
+		width: 100%;
+	}
+
+	@media (min-width: 50rem) {
+		#counter-repad {
+			/* body is offset */
+			margin-left: calc(-1 * var(--left-pad));
+		}
 
-		font-weight: normal;
-		font-family: 'Dosis', sans-serif;
+		#counter {
+			/* it looks weird perfectly center. the div-2 helps that */
+			padding-left: calc(var(--left-pad) / 2);
+		}
 	}
 
 	#days {
-		width: min-content;
-		font-weight: 200;
 		font-size: 5rem;
-		font-family: inherit;
 	}
 
 	#time {
-		width: min-content;
-		font-weight: 200;
 		font-size: 4rem;
-		font-family: inherit;
-	}
-
-	#dates {
-		display: none !important;
 	}
 </style>
 
 <!-- Dosis: https://github.com/impallari/Dosis -->
 
-<section id="counter">
-	<h1 id="days"></h1>
-	<h2 id="time"><span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span></h2>
-</section>
+<div id="counter-repad">
+	<section id="counter">
+		<h1 id="days"></h1>
+		<h2 id="time"><span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span></h2>
+	</section>
+</div>
 
 <script>
+	// don't misuse this, love.
 	const BIRTH = Date.parse("2001-04-13T02:56:00-05:00");
 	const SEC_DAY = 60 * 60 * 24;
 
@@ -55,7 +64,7 @@ Title
 		let day = Math.floor(lif / SEC_DAY);
 		let sub_day = lif % (60 * 60 * 24);
 		let hou = Math.floor(sub_day / (60 * 60));
-		let min = Math.floor( (sub_day % (60 * 60)) / 60 );
+		let min = Math.floor((sub_day % (60 * 60)) / 60);
 		let sec = sub_day % 60;
 
 		return {
@@ -80,7 +89,8 @@ Title
 		minute.innerText = human(time.minutes);
 		second.innerText = human(time.seconds);
 
-		if (days_reposition % 60 == 0) {
+		// We're using a monospace font now. Keep the code, though, but always fail the condition.
+		if (false && days_reposition % 60 == 0) {
 			let time_width = document.getElementById('time').clientWidth;
 			let days = document.getElementById('days');
 
diff --git a/served/home.html b/served/home.html
index 3d065e7..fe1e80b 100755
--- a/served/home.html
+++ b/served/home.html
@@ -1,6 +1,6 @@
 ---
 template=minimal
-title=Home | nyble.dev
+title=Hey, hello.
 style=/styles/home.css
 ---
 [@paragraphs off]
@@ -21,8 +21,8 @@ style=/styles/home.css
 			it in <a href="bits/">bits/</a> if it feels like it wants to be there.
 		</p>
 		<p>
-			There are some <a href="things/">things/</a>, projects i guess, that have their
-			own little pages. These are living pages, updated when needed, about software
+			There are living pages, updated when needed, for some <a href="things/">things/</a>.
+			Projects
 		</p>
 
 		<section id="contact">
@@ -35,11 +35,21 @@ style=/styles/home.css
 						style="margin-left: 1rem">@inann@amble.quest</a></li>
 			</ul>
 		</section>
+
+		<img id="banner" alt="" src="look1.jpg" />
 	</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>
+	<!-- no, not until it's redone -->
+	<div id="noshow" style="display: none">
+		<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>
+	</div>
+
+	<!--
+		TODO: from phone looking
+			- space between weeknote section and other writings and reduce row-gap
+	-->
 </main>
\ No newline at end of file
diff --git a/served/styles/common.css b/served/styles/common.css
index 91750cf..81e5b43 100755
--- a/served/styles/common.css
+++ b/served/styles/common.css
@@ -31,6 +31,18 @@
 	/* ^ lmao */
 }
 
+@media (prefers-color-scheme: dark) {
+	:root {
+		--text: #eee;
+		--text-dim: #aaa;
+		--background: #001;
+		--background-dim: #223;
+
+		--link: salmon;
+		--visited: mediumslateblue;
+	}
+}
+
 html,
 body {
 	margin: 0;
@@ -96,6 +108,17 @@ a.dead {
 	text-decoration: line-through;
 }
 
+code {
+	font-size: 1.1rem;
+	font-family: Recursive, sans-serif;
+	font-variation-settings:
+		"MONO" 1,
+		"CASL" 0,
+		"wght" 400,
+		"slnt" 0,
+		"CRSV" 0;
+}
+
 #nav-access {
 	/* shove it above the page and make sure it's always on top*/
 	position: absolute;
diff --git a/served/styles/home.css b/served/styles/home.css
index c67d711..ac00786 100644
--- a/served/styles/home.css
+++ b/served/styles/home.css
@@ -9,14 +9,21 @@ ul {
 }
 
 #contact {
-	border: 1px solid black;
+	border: 1px solid var(--text-dim);
 	box-shadow: 5px -5px 0px #999, 10px -10px 0px #666, 15px -15px 0px #333;
 	padding: 1rem 2rem 1rem 1rem;
+	/* allocate the space for the boxshadow */
+	margin-right: 15px;
 
 	max-width: var(--pwidth);
 	height: min-content;
 }
 
+#banner {
+	max-width: min(100%, calc(var(--pwidth) + 15px));
+	border: 1px solid var(--text-dim);
+}
+
 #contact>h2 {
 	margin-top: 0;
 }
@@ -29,9 +36,13 @@ ul {
 
 @media (max-width: 50rem) {
 	#contact {
-		margin-top: 1.5rem;
+		margin-top: 2rem;
 		margin-right: 1rem;
 	}
+
+	#banner {
+		margin-top: 1rem;
+	}
 }
 
 @media (min-width: 50rem) {
@@ -40,6 +51,7 @@ ul {
 		grid-template-columns: 30rem 1fr;
 		row-gap: 1rem;
 		column-gap: 1rem;
+		width: fit-content;
 	}
 
 	#hello>p,
@@ -54,4 +66,10 @@ ul {
 
 		width: fit-content;
 	}
+
+	#banner {
+		max-width: 16rem;
+		grid-column: 2;
+		grid-row: 4
+	}
 }
\ No newline at end of file
diff --git a/served/things/colorsquash/colorsquash.html b/served/things/colorsquash/colorsquash.html
index e8a61c6..023a2d7 100755
--- a/served/things/colorsquash/colorsquash.html
+++ b/served/things/colorsquash/colorsquash.html
@@ -100,7 +100,10 @@ art_alt=squashed dog
 
 colorsquash is a tool for squishing your image into only 256 distinct colours,
 allowing it to fit in a GIF or indexed PNG. It tries to do this with as little
-change as possible.
+change as possible. It's quite good! And often matches the input image very closely, but should
+be considered an artists tool.
+
+squash accepts input from png or jpg files and can output gif and png.
 
 <!--
 
diff --git a/served/things/memoryleak/memoryleak.html b/served/things/memoryleak/memoryleak.html
index fac4723..e4e81b7 100755
--- a/served/things/memoryleak/memoryleak.html
+++ b/served/things/memoryleak/memoryleak.html
@@ -6,8 +6,7 @@ style=memoryleak.css
 
 description=A virtual machine slowly decaying.
 art=images/ddr2_closest.png
-art_alt=a DDR2 module broken in half at its notch. you can see the fibre of the PCB and a memory chip split in half,
-peaking open.
+art_alt=a DDR2 module broken in half at its notch. you can see the fibre of the PCB and a memory chip split in half, peaking open.
 ---
 
 A virtual machine slowly decaying. Every seven hours it would wake up, delete a
diff --git a/served/things/things.html b/served/things/things.html
index 58437ec..d2b746a 100755
--- a/served/things/things.html
+++ b/served/things/things.html
@@ -1,6 +1,6 @@
 ---
 template=post
-title=Things
+title=Just some things~
 style=/styles/post.css
 style=things.css
 ---
diff --git a/served/words/words.css b/served/words/words.css
index 7cbff9e..ffc899a 100755
--- a/served/words/words.css
+++ b/served/words/words.css
@@ -7,7 +7,7 @@ div {
 	grid-column: 2 / 3;
 	display: flex;
 	flex-direction: column;
-	row-gap: 1rem;
+	row-gap: 0.5rem;
 }
 
 #written {
@@ -17,7 +17,7 @@ div {
 
 #what-weeknotes {
 	align-self: end;
-	margin-top: -0.75rem;
+	margin: -0.75rem 0 0 0;
 	font-weight: normal;
 }
 
@@ -51,4 +51,15 @@ h2 {
 		display: flex;
 		flex-direction: column;
 	}
+
+	#written {
+		margin-top: 1rem;
+	}
+
+	#what-weeknotes {
+		align-self: normal;
+		/* min to give it the smallest chance not to look super weird
+			on like 100px wide displays. (are those real?) */
+		margin-left: min(50vw, 8rem);
+	}
 }
\ No newline at end of file
diff --git a/served/words/words.html b/served/words/words.html
index 6c35895..1c7694d 100755
--- a/served/words/words.html
+++ b/served/words/words.html
@@ -1,6 +1,6 @@
 ---
 template=post
-title=Writing
+title=I write sometimes?
 style=/styles/post.css
 style=words.css
 ---