Split home page into two columns

content/hand-of-ozymandias.md

@@ -8,7 +8,7 @@ their shop. I wanted to create a sculpture, so with pieces of scrap metal I
 welded together this hand. The beads are far from perfect. Working with small
 pieces of rusted metal made it difficult.
 
-![a rusted metalic hand]({static}/images/hand-of-ozymandias/hand1.jpg)
+![a rusted hand welded together out of scrap square stock metal tubing]({static}/images/hand-of-ozymandias/hand1.jpg)
 
 ## The Name
 
@@ -25,4 +25,4 @@ grinder. It was made in a machine shop with no real planning done ahead of time.
 In between welds, I used my own hand as a reference. Below is a picture of me
 adding a bead to it.
 
-![me welding the hand causing a very bright light]({static}/images/hand-of-ozymandias/hand2.jpg)
+![me welding the hand causing a very bright white light that washes out the photo]({static}/images/hand-of-ozymandias/hand2.jpg)

content/led-dress.md

@@ -8,14 +8,14 @@ wanted to wear a dress that was lit up with LEDs acting as twinkling stars.
 Seven of the 28 stars are aligned to resemble the Big Dipper constellation and
 twinkle differently than the rest, which twinkle in a random pattern.
 
-![a blue dress with a number of LEDs shining through the fabric]({static}/images/dress/dress1.jpg)
+![a girl wearing a blue dress with a number of LEDs shining through the fabric]({static}/images/dress/dress1.jpg)
 
 ## Construction
 
 The LEDs came from that strip that was cut up and soldered together with very
 small wires. Each of the LEDs can be controlled individually.
 
-![the controller circuit board on the left, and the soldered together LEDs on the right]({static}/images/dress/dress2.jpg)
+![the controller circuit board, and the string of soldered together LEDs]({static}/images/dress/dress2.jpg)
 
 21 of the stars are light magenta in color and twinkle by fading randomly. The
 seven LEDs that form the Big Dipper continually scroll through a gradient of

content/light-switch.md

@@ -12,7 +12,7 @@ face-plate and turned it into a capacitive touch sensor. The slightest touch
 anywhere on the plate is enough to toggle the light. I had to electrically
 isolate the metal screws from it because they screw into a grounded switch box.
 
-![a rusted metalic hand]({static}/images/light-switch/light1.jpg)
+![my custom light switch, a Raspberry Pi computer, and an old iPhone]({static}/images/light-switch/light1.jpg)
 
 ## Function
 
@@ -26,8 +26,8 @@ by an AC-DC converter.
 
 This entire process happens quicker than half a second, so it feels instant.
 
-![a rusted metalic hand]({static}/images/light-switch/light2.jpg)
+![the front side which has several electrical components]({static}/images/light-switch/light2.jpg)
 
 <span class="aside">Black stuff's liquid electrical tape</span>
 
-![a rusted metalic hand]({static}/images/light-switch/light3.jpg)
+![the back side which has wires soldered to connect all the components]({static}/images/light-switch/light3.jpg)

content/painting.md

@@ -9,7 +9,7 @@ attempted to paint it. I eventually got it framed at Michaels. Many thanks to my
 friend Laura for the opportunity to do this, I couldn't have done it without her
 help.
 
-![a painting of water pouring out of a vase and into a hand]({static}/images/painting/painting1.jpg)
+![a painting of water pouring out of a vase and into a hand, then turning to sand]({static}/images/painting/painting1.jpg)
 
 ## The Meaning
 
@@ -37,4 +37,4 @@ in. It was quite difficult to get the blending and shadows perfect, but I had
 Laura to tell me when things didn't look right. Below I am trying to figure out
 what a hand looks like in a mirror.
 
-![me looking at my own hand in the mirror]({static}/images/painting/painting2.jpg)
+![me looking at my own hand in the mirror as a guide]({static}/images/painting/painting2.jpg)

content/plant-waterer.md

@@ -38,4 +38,4 @@ it would run backwards until the tube was cleared of water.
 
 <span class="aside">Also dead :(</span>
 
-![the new version beside a big Min aralia plant]({static}/images/plant-waterer/waterer3.jpg)
+![the new version beside a big Ming aralia plant with bushy drooping leaves and skinny stems]({static}/images/plant-waterer/waterer3.jpg)

content/solar-car.md

@@ -9,7 +9,7 @@ interests. The car was the top Canadian team in a 3000 km race from Darwin to
 Adelaide, Australia in 2011. We met up at a shop on campus every Saturday
 morning to work on the new Generation IV of the solar car.
 
-![the MPPT device, a printed circuit board with components]({static}/images/solar-car/solar1.jpg)
+![the MPPT device, a printed circuit board with bulky round electrical components held in my hand]({static}/images/solar-car/solar1.jpg)
 
 ## The Helianthus MPPT
 
@@ -20,4 +20,4 @@ without them. The Generation IV car, Schulich Delta (pictured below) uses seven
 of them: one per section of solar cells with similar lighting conditions. Andrei
 and I designed the MPPT above.
 
-![a photo of the solar car from the side]({static}/images/solar-car/solar2.jpg)
+![the solar car from an angle with a driver inside]({static}/images/solar-car/solar2.jpg)

publishconf.py

@@ -54,10 +54,10 @@ AUTHORS_SAVE_AS = ''
 CATEGORIES_SAVE_AS = ''
 TAGS_SAVE_AS = ''
 
-INDEX_SAVE_AS = 'index.php'
+INDEX_SAVE_AS = 'index.html'
 ARTICLE_URL = '{slug}/'
-ARTICLE_SAVE_AS = '{slug}/index.php'
+ARTICLE_SAVE_AS = '{slug}/index.html'
 PAGE_URL = '{slug}/'
-PAGE_SAVE_AS = '{slug}/index.php'
+PAGE_SAVE_AS = '{slug}/index.html'
 
 PROD = True

themes/theme/templates/article.html

@@ -26,8 +26,10 @@
 
 {% block info %}
 	Tanner Collin
-	<p class='theme-select'>
-		<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
+	<p class="contact-icons">
+		<a href="mailto:site2@tannercollin.com" rel="noreferrer noopener"><img alt="email" src="/theme/mail.svg" width="20" height="20" /></a>
+		<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram" src="/theme/telegram.svg" width="20" height="20" /></a>
+		<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github" src="/theme/github.svg" width="20" height="20" /></a>
 	</p>
 {% endblock %}
 
@@ -39,10 +41,6 @@
 		<div class="content">
 	{% endif %}
 
-		<div class="topbar">
-			{{ info() }}
-		</div>
-
 		<p><a href="/">← Return to Home</a></p>
 		<header>
 			<h1>{{ article.title }}</h1>

themes/theme/templates/base.html

@@ -11,8 +11,8 @@
 <html lang="en">
 	<head>
 		{% block head %}
+		<meta charset="UTF-8"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<meta charset="utf-8"/>
 
 		<title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
 		<meta name="author" content="{{ AUTHOR }}" />
@@ -36,29 +36,13 @@
 		</style>
 
 		<script defer src="/theme/instant-page.js"></script>
-
-		<noscript>
-			<style type="text/css">
-				.theme-select {
-					display: none !important;
-				}
-			</style>
-		</noscript>
 	</head>
 
-	{% if PROD %}
-		<body class="<?php echo $themeClass; ?>">
-	{% else %}
 	<body>
-	{% endif %}
-
-	{%- macro info() -%}
-		{% block info %}{% endblock %}
-	{%- endmacro -%}
-
 		<div class="container">
-		<div class="sidebar">
-			{{ info() }}
+			<div class="bar">
+				{% block info %}
+				{% endblock %}
 			</div>
 
 			{% block content %}
@@ -68,24 +52,6 @@
 		<p class="copyright">
 			© 2012–2021 Tanner Collin
 		</p>
-
-
-	<script>
-		function setTheme(theme) {
-			console.log('Setting theme to', theme);
-
-			if (theme == 'dark') {
-				document.body.classList.add('dark');
-				document.body.classList.remove('light');
-			} else if (theme == 'light') {
-				document.body.classList.add('light');
-				document.body.classList.remove('dark');
-			}
-
-			document.cookie = 'theme=' + theme + '; Max-Age=31536000; Path=/; SameSite=Lax';
-		}
-	</script>
-
 	</body>
 </html>
 		

themes/theme/templates/index.html

@@ -8,31 +8,26 @@
 {% endblock %}
 
 {% block info %}
-	<img src="/theme/me.jpg" class="me" alt="A picture of me smiling" />
+	<img src="/theme/me.jpg" width="128" class="me" alt="me smiling wide and looking into the camera lit up brightly" />
 	<div class="info">
-		Tanner Collin
+		<h1>Tanner Collin</h1>
 		<p class="contact-icons">
-			<a href="mailto:site2@tannercollin.com" rel="noreferrer noopener"><img alt="email icon" src="/theme/mail.svg" /></a>
-			<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram logo" src="/theme/telegram.svg" /></a>
-			<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github logo" src="/theme/github.svg" /></a>
-		</p>
-		<p class='theme-select'>
-			<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
+			<a href="mailto:site2@tannercollin.com" rel="noreferrer noopener"><img alt="email" src="/theme/mail.svg" width="20" height="20" /></a>
+			<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram" src="/theme/telegram.svg" width="20" height="20" /></a>
+			<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github" src="/theme/github.svg" width="20" height="20" /></a>
 		</p>
 	</div>
 {% endblock %}
 
 {% block content %}
-	<div class="content">
-
-		<div class="topbar">
-			{{ info() }}
-		</div>
-
+	<div class="content content-index">
 		<p>
 			Hi, I'm Tanner! I do firmware and web development in Calgary.
 		</p>
 
+		<div class="leftcol">
+		<div class="inside">
+
 			<h2>Contact Info</h2>
 
 			<p>
@@ -59,7 +54,7 @@
 
 			<h3>
 				<a href="https://news.t0.vc/" target="_blank" rel="noreferrer noopener">QotNews</a>
-			<a class="source" href="https://git.tannercollin.com/tanner/qotnews" target="_blank" rel="noreferrer noopener">source code</a>
+				— <a class="source" href="https://git.tannercollin.com/tanner/qotnews" target="_blank" rel="noreferrer noopener">source code</a>
 			</h3>
 			<div class="summary">
 				<p>Hacker News, Reddit, Lobsters, and Tildes articles pre-rendered in reader mode. Optimized for speed and distraction-free reading.</p>
@@ -67,7 +62,7 @@
 
 			<h3>
 				<a href="https://notica.us" target="_blank" rel="noreferrer noopener">Notica</a>
-			<a class="source" href="https://github.com/tannercollin/Notica" target="_blank" rel="noreferrer noopener">source code</a>
+				— <a class="source" href="https://github.com/tannercollin/Notica" target="_blank" rel="noreferrer noopener">source code</a>
 			</h3>
 			<div class="summary">
 				<p>Send browser notifications from your terminal. No installation. No registration.</p>
@@ -75,7 +70,7 @@
 
 			<h3>
 				<a href="https://my.protospace.ca" target="_blank" rel="noreferrer noopener">Spaceport</a>
-			<a class="source" href="https://github.com/Protospace/spaceport" target="_blank" rel="noreferrer noopener">source code</a>
+				— <a class="source" href="https://github.com/Protospace/spaceport" target="_blank" rel="noreferrer noopener">source code</a>
 			</h3>
 			<div class="summary">
 				<p>Makerspace members' portal for Calgary Protospace. It tracks membership, courses, training, access cards, and more.</p>
@@ -83,7 +78,7 @@
 
 			<h3>
 				<a href="https://txt.t0.vc" target="_blank" rel="noreferrer noopener">t0txt</a>
-			<a class="source" href="https://github.com/tannercollin/t0txt" target="_blank" rel="noreferrer noopener">source code</a>
+				— <a class="source" href="https://github.com/tannercollin/t0txt" target="_blank" rel="noreferrer noopener">source code</a>
 			</h3>
 			<div class="summary">
 				<p>Minimal command line pastebin. Allows you to upload text notes from a bash pipe or web browser.</p>
@@ -95,10 +90,14 @@
 			<div class="summary">
 				<p>A filesystem that mounts your Standard Notes account as a directory of text files that you can edit.</p>
 			</div>
+		</div>
+		</div>
 
+		<div class="rightcol">
+		<div class="inside">
 			<h2>Creations</h2>
 
-		<p>Sometimes I create art or interactive tech.</>
+			<p>Sometimes I create art or interactive tech.</p>
 
 			{% for article in articles_page.object_list if article.category.name == 'Projects' %}
 				<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
@@ -106,5 +105,18 @@
 					{{ article.summary }}
 				</div>
 			{% endfor %}
+
+			<h2>Writing</h2>
+
+			<p>Various articles, mostly about computers.</p>
+
+			{% for article in articles_page.object_list if article.category.name == 'Writing' %}
+				<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
+				<div class="summary">
+					{{ article.summary }}
+				</div>
+			{% endfor %}
+		</div>
+		</div>
 	</div>
 {% endblock %}

themes/theme/templates/style.css

@@ -12,9 +12,12 @@ a {
 	outline: none;
 }
 
+.info h1 {
+	font: 1.2rem/1.0 Lato,sans-serif;
+}
+
 .source {
-	float: right;
-	font: 1rem Apparatus SIL,serif;
+	font: 1rem/1.5 Apparatus SIL,serif;
 }
 
 pre {
@@ -38,77 +41,6 @@ pre {
 	text-align: center;
 }
 
-.theme-select {
-	font-size: 1rem;
-	margin-bottom: 0;
-	cursor: pointer;
-}
-
-.sidebar {
-	margin-top: 2px;
-	float: left;
-	width: 8rem;
-	text-align: right;
-}
-
-.sidebar .me {
-	width: 100%;
-	display: block;
-}
-
-.sidebar .info {
-	margin-top: 2rem;
-}
-
-.sidebar .contact-icons a {
-	border-bottom: none;
-}
-
-.sidebar .contact-icons img {
-	width: 1.25rem;
-	height: 1.25rem;
-	margin-left: 0.5rem;
-}
-
-.topbar {
-	display: table;
-	overflow: auto;
-	margin: auto;
-	margin-top: -0.5rem;
-	font-size: 1.5rem;
-}
-
-.topbar .me {
-	float: left;
-	height: 6.5rem;
-	width: auto;
-}
-
-.topbar .info {
-	float: left;
-	margin-top: -0.25rem;
-	margin-left: 1.5rem;
-}
-
-.topbar .contact-icons {
-	margin-left: 0.25rem;
-	margin-bottom: 0;
-}
-
-.topbar .contact-icons a {
-	border-bottom: none;
-}
-
-.topbar .contact-icons img {
-	width: 1.5rem;
-	height: 1.5rem;
-	margin-right: 1rem;
-}
-
-.topbar .theme-select {
-	margin-top: 0.5rem;
-}
-
 .toc {
 	float: right;
 	padding: 0.75rem;
@@ -141,9 +73,17 @@ pre {
 }
 
 .content-wide {
+	max-width: 46rem;;
+}
+
+.content-index {
 	max-width: none;
 }
 
+.content-index h3 {
+	font: 1.2rem/1.5 Apparatus SIL,serif;
+}
+
 .content p {
 	font: 1.2rem/1.5 Apparatus SIL,serif;
 }
@@ -178,18 +118,95 @@ pre {
 	.content {
 		margin-left: 10rem;
 	}
-	.topbar {
-		display: none;
+
+	.bar {
+		margin-top: 2px;
+		float: left;
+		width: 8rem;
+		text-align: right;
+	}
+
+	.bar .me {
+		width: 100%;
+		display: block;
+	}
+
+	.bar .info {
+		margin-top: 1.75rem;
+	}
+
+	.bar .contact-icons a {
+		border-bottom: none;
+	}
+
+	.bar .contact-icons img {
+		width: 1.25rem;
+		height: 1.25rem;
+		margin-left: 0.5rem;
 	}
 }
 
 @media screen and (max-width:36rem) {
-	.sidebar {
-		display: none;
+	.bar {
+		display: table;
+		overflow: auto;
+		margin: auto;
+		margin-top: -0.5rem;
+	}
+
+	.bar .me {
+		float: left;
+		height: 6.5rem;
+		width: auto;
+	}
+
+	.bar .info {
+		float: left;
+		margin-top: 0.5rem;
+		margin-left: 1.5rem;
+	}
+
+	.bar .contact-icons {
+		margin-top: 1rem;
+		margin-left: 0.25rem;
+		margin-bottom: 0;
+	}
+
+	.bar .contact-icons a {
+		border-bottom: none;
+	}
+
+	.bar .contact-icons img {
+		width: 1.25rem;
+		height: 1.25rem;
+		margin-right: 1rem;
 	}
 }
 
+@media screen and (min-width:58rem) {
+	.container {
+		max-width: 75rem;
+	}
 
+	.leftcol {
+		float: left;
+		width: 50%;
+		margin-top: -1rem;
+	}
+
+	.leftcol > .inside {
+		padding-right: 1rem;
+	}
+
+	.rightcol {
+		overflow: hidden;
+		margin-top: -1rem;
+	}
+
+	.rightcol > .inside {
+		padding-left: 1rem;
+	}
+}
 
 body {
 	background-color: #eee;
@@ -217,75 +234,7 @@ pre {
 	color: #555;
 }
 
-body.dark {
-	background-color: #000;
-	color: #eee;
-}
-
-body.dark a {
-	color: #eee;
-	border-bottom: 1px solid #eee;
-}
-
-body.dark pre {
-	background-color: #222;
-}
-
-body.dark :not(pre)>code {
-	background-color: #222;
-}
-
-body.dark .toc {
-	background-color: #222;
-}
-
-body.dark .content p.metadata {
-	color: #aaa;
-}
-
-body.dark .content img {
-	filter: brightness(75%);
-}
-
-body.dark .contact-icons img {
-	filter: invert(1);
-}
-
 @media (prefers-color-scheme: dark) {
-	body.light {
-		background-color: #eee;
-		color: #000;
-	}
-
-	body.light a {
-		color: #000;
-		border-bottom: 1px solid #000;
-	}
-
-	body.light pre {
-		background-color: #ddd;
-	}
-
-	body.light :not(pre)>code {
-		background-color: #ddd;
-	}
-
-	body.light .toc {
-		background-color: #ddd;
-	}
-
-	body.light .content p.metadata {
-		color: #555;
-	}
-
-	body.light .contact-icons img {
-		filter: none;
-	}
-
-	body.light .content img {
-		filter: none;
-	}
-
 	body {
 		background-color: #000;
 		color: #eee;