Split home page into two columns

themes/theme/templates/index.html

@@ -20,11 +20,14 @@
 {% endblock %}
 
 {% block content %}
-	<div class="content index">
+	<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>
@@ -51,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>
@@ -59,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>
@@ -67,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>
@@ -75,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>
@@ -87,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>
@@ -98,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

@@ -16,12 +16,7 @@ a {
 	font: 1.2rem/1.0 Lato,sans-serif;
 }
 
-.index h3 {
-	font: 1.2rem/1.5 Apparatus SIL,serif;
-}
-
 .source {
-	float: right;
 	font: 1rem/1.5 Apparatus SIL,serif;
 }
 
@@ -78,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;
 }
@@ -180,6 +183,30 @@ pre {
 	}
 }
 
+@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;