Split home page into two columns

content/bypassing-ports.md

@@ -52,7 +52,7 @@ $ sudo make-cadir easy-rsa/
 $ sudo chown -R tanner:tanner easy-rsa/
 ```
 
-Replace `tanner` with your Linux username, this is temporary.
+Replace `tanner` with your own username, this is temporary.
 
 <span class="aside">The `.rnd` file prevents a warning</span>
 
@@ -88,7 +88,7 @@ We make a `mediaserver` client because we want to assign a static IP to it. You
 need to make a different one for each client you want with a static IP.
 
 Also, if you want generic clients that all get dynamic IPs for use on your
-laptop, phone, etc. to protect you from public WiFi (like a normal VPN), create only a single extra one:
+laptop, phone, etc. to protect you from public WiFi, create only a single extra one:
 
 ```
 $ ./easyrsa build-client-full client nopass  # optional
@@ -376,7 +376,7 @@ To add your VPN on Gnome, open VPN settings, import file, and select
 You should now be fine to access your home server from over the internet.
 
 To forward additional ports, just edit the `/etc/ufw/before.rules` file like
-above and apply the changes to `ufw`.
+above.
 
 You can now point a domain to your virtual server's IP and use that to connect
 to your home server. Use a CNAME to make it easy to change later:

content/extra/robots.txt

@@ -1,2 +0,0 @@
-User-agent: *
-Disallow:

content/hand-of-ozymandias.md

@@ -1,6 +1,6 @@
 Title: Hand of Ozymandias
 Date: 2012-03-23
-Category: Creations
+Category: Projects
 Summary: A withered hand I welded out of scrap metal.
 
 I was visiting my cousins in Radium, BC and decided to learn stick welding at

content/led-dress.md

@@ -1,6 +1,6 @@
 Title: LED Dress
 Date: 2016-03-18
-Category: Creations
+Category: Projects
 Summary: A dress made out of LEDs that twinkle like stars.
 
 A friend of mine was attending a stars and constellations themed ball. She

content/light-switch.md

@@ -1,6 +1,6 @@
 Title: Remote Control Light Switch
 Date: 2014-10-09
-Category: Creations
+Category: Projects
 Summary: A device to toggle my lights remotely.
 
 I wanted the ability to toggle my bedroom light remotely for convenience. I

content/painting.md

@@ -1,6 +1,6 @@
 Title: Man’s Reach Exceeds His Grasp
 Date: 2012-04-11
-Category: Creations
+Category: Projects
 Summary: My first attempt at painting with acrylic.
 
 The painting is called “Man’s Reach Exceeds His Grasp”. I've always wanted to

content/plant-waterer.md

@@ -1,6 +1,6 @@
 Title: Automatic Plant Waterer
 Date: 2014-06-05
-Category: Creations
+Category: Projects
 Summary: A device that automatically waters plants.
 
 One day I decided watering my one plant was too much work, so I automated it.

content/solar-car.md

@@ -1,6 +1,6 @@
 Title: Solar Car
 Date: 2013-04-27
-Category: Creations
+Category: Projects
 Summary: About my time volunteering with the University of Calgary Solar Car Team, where I designed a maximum power point tracker.
 
 I joined the University of Calgary Solar Car Team in my first semester for a

pelicanconf_lite.py

@@ -1,61 +0,0 @@
-#!/usr/bin/env python
-# -*- coding: utf-8 -*- #
-from __future__ import unicode_literals
-
-AUTHOR = 'Tanner Collin'
-SITENAME = 'Tanner Collin'
-SITEURL = ''
-
-PATH = 'content'
-
-TIMEZONE = 'Canada/Mountain'
-
-DEFAULT_LANG = 'en'
-
-# Feed generation is usually not desired when developing
-FEED_ALL_ATOM = None
-CATEGORY_FEED_ATOM = None
-TRANSLATION_FEED_ATOM = None
-AUTHOR_FEED_ATOM = None
-AUTHOR_FEED_RSS = None
-
-DEFAULT_PAGINATION = False
-
-MARKDOWN = {
-    'extension_configs': {
-        'markdown.extensions.codehilite': {'css_class': 'highlight'},
-        'markdown.extensions.extra': {},
-        'markdown.extensions.meta': {},
-        'markdown.extensions.toc': {
-            'toc_depth': '2-3',
-            'anchorlink': True,
-        },
-    },
-    'output_format': 'html5',
-}
-
-STATIC_PATHS = ['images', 'extra']
-
-EXTRA_PATH_METADATA = {
-    #'extra/favicon.svg': {'path': 'favicon.svg'},
-}
-
-# Uncomment following line if you want document-relative URLs when developing
-#RELATIVE_URLS = True
-
-THEME = 'themes/lite'
-
-# turn off useless outputs
-TAG_SAVE_AS = ''
-CATEGORY_SAVE_AS = ''
-AUTHOR_SAVE_AS = ''
-ARCHIVES_SAVE_AS = ''
-AUTHORS_SAVE_AS = ''
-CATEGORIES_SAVE_AS = ''
-TAGS_SAVE_AS = ''
-
-INDEX_SAVE_AS = 'index.html'
-ARTICLE_URL = '{date:%d}/'
-ARTICLE_SAVE_AS = '{date:%d}/index.html'
-
-PROD = False

prototype.html

@@ -1,17 +0,0 @@
-<style>
-body {background: #eee; font: 1.1rem/1.5 serif;}
-h1, h2 {margin-left: -24; font-family: sans-serif;}
-a {text-decoration: none; color: #000; border-bottom: 1px solid #000;}
-</style>
-<div style="max-width: 600; margin: auto">
-	<h1>Tanner Collin</h1>
-	<p> Hi, I'm Tanner! I do firmware and web development in Calgary.</p>
-	<a href="/">Contact</a> |
-	<a href="/r">Resume</a> |
-	<a href="/p">Projects</a> |
-	<a href="/c">Creations</a> |
-	<a href="/w">Writing</a>
-	<h2>Contact Info</h2>
-	<p>Email: <a href="mailto:site2@tannercollin.com">site2@tannercollin.com</a></p>
-	<p>Telegram: <a href="https://t.me/tannercollin">@tannercollin</a></p>
-</div>

publishconf_lite.py

@@ -1,61 +0,0 @@
-#!/usr/bin/env python
-# -*- coding: utf-8 -*- #
-from __future__ import unicode_literals
-
-AUTHOR = 'Tanner Collin'
-SITENAME = 'Tanner Collin'
-SITEURL = ''
-
-PATH = 'content'
-
-TIMEZONE = 'Canada/Mountain'
-
-DEFAULT_LANG = 'en'
-
-# Feed generation is usually not desired when developing
-FEED_ALL_ATOM = None
-CATEGORY_FEED_ATOM = None
-TRANSLATION_FEED_ATOM = None
-AUTHOR_FEED_ATOM = None
-AUTHOR_FEED_RSS = None
-
-DEFAULT_PAGINATION = False
-
-MARKDOWN = {
-    'extension_configs': {
-        'markdown.extensions.codehilite': {'css_class': 'highlight'},
-        'markdown.extensions.extra': {},
-        'markdown.extensions.meta': {},
-        'markdown.extensions.toc': {
-            'toc_depth': '2-3',
-            'anchorlink': True,
-        },
-    },
-    'output_format': 'html5',
-}
-
-STATIC_PATHS = ['images', 'extra']
-
-EXTRA_PATH_METADATA = {
-    #'extra/favicon.svg': {'path': 'favicon.svg'},
-}
-
-# Uncomment following line if you want document-relative URLs when developing
-#RELATIVE_URLS = True
-
-THEME = 'themes/lite'
-
-# turn off useless outputs
-TAG_SAVE_AS = ''
-CATEGORY_SAVE_AS = ''
-AUTHOR_SAVE_AS = ''
-ARCHIVES_SAVE_AS = ''
-AUTHORS_SAVE_AS = ''
-CATEGORIES_SAVE_AS = ''
-TAGS_SAVE_AS = ''
-
-INDEX_SAVE_AS = 'index.html'
-ARTICLE_URL = '{date:%d}/'
-ARTICLE_SAVE_AS = '{date:%d}/index.html'
-
-PROD = True

themes/lite/templates/article.html

@@ -1,8 +0,0 @@
-{% extends "base.html" %}
-{% block content %}
-<h1>{{ article.title }}</h1>
-{{ article.summary }}
-{{ article.locale_date }}
-<hr />
-{{ article.content }}
-{% endblock %}

themes/lite/templates/base.html

@@ -1,8 +0,0 @@
-<meta charset=UTF-8/>
-<link rel=icon href=data:,>
-{% block style %}{% endblock %}
-<pre>
-Tanner Collin
-
-{% block content %}
-{% endblock %}

themes/lite/templates/index.html

@@ -1,42 +0,0 @@
-{% extends "base.html" %}
-{% block content %}
-Hi, I'm Tanner! I do firmware and web development in Calgary.
-
-Contact Info
-============
-
-Email: <a href="mailto:site2@tannercollin.com">site2@tannercollin.com</a>
-Telegram: <a href="https://t.me/tannercollin">@tannercollin</a>
-
-Resume
-======
-
-- Firmware Engineer at Cabana Blockchain, 2018–
-- Lead Hardware Engineer at Critical Control, 2016–2018
-- Electrical Engineer at Opener Aero, 2016–2016
-- Electrical Engineer Intern at Pason Systems, 2014–2015
-- BSc. Electrical Engineering from University of Calgary
-
-Projects
-========
-
-<a href="https://news.t0.vc/">QotNews</a>
-<a href="https://notica.us">Notica</a>
-<a href="https://my.protospace.ca">Spaceport</a>
-<a href="https://txt.t0.vc">t0txt</a>
-<a href="https://github.com/tannercollin/standardnotes-fs">standardnotes-fs</a>
-
-Creations
-=========
-
-{% for article in articles_page.object_list if article.category.name == 'Creations' %}
-<a href="{{ article.url }}">{{ article.title }}</a>
-{% endfor %}
-
-Writing
-=======
-
-{% for article in articles_page.object_list if article.category.name == 'Writing' %}
-<a href="{{ article.url }}">{{ article.title }}</a>
-{% endfor %}
-{% endblock %}

themes/theme/templates/base.html

@@ -1,3 +1,12 @@
+{% if PROD %}
+<?php
+	$themeClass = '';
+	if (!empty($_COOKIE['theme'])) {
+		$themeClass = $_COOKIE['theme'];
+	}
+?>
+{% endif %}
+
 <!DOCTYPE html>
 <html lang="en">
 	<head>
@@ -9,10 +18,21 @@
 		<meta name="author" content="{{ AUTHOR }}" />
 		{% endblock head %}
 
+		<link rel="preload" href="/theme/fonts/AppSILB.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+		<link rel="preload" href="/theme/fonts/AppSILBI.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+		<link rel="preload" href="/theme/fonts/AppSILI.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+		<link rel="preload" href="/theme/fonts/AppSILR.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+
+		<link rel="preload" href="/theme/fonts/Lato-Bold.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+		<link rel="preload" href="/theme/fonts/Lato-BoldItalic.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+		<link rel="preload" href="/theme/fonts/Lato-Italic.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+		<link rel="preload" href="/theme/fonts/Lato-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+
 		<link rel="icon" href="favicon.svg">
 
 		<style>
 		{% include 'style.css' %}
+		{% include 'fonts.css' %}
 		</style>
 
 		<script defer src="/theme/instant-page.js"></script>
@@ -29,10 +49,7 @@
 			{% endblock %}
 		</div>
 
-		<p class="footer">
+		<p class="copyright">
-			<span class="wname">Webring:</span> <a href="https://jason.schwarzenberger.co.nz/" class="wprev">&lt; Previous</a> | <a href="https://webring.t0.vc" class="windex">Index</a> | <a href="https://udia.ca" class="wnext">Next &gt;</a>
-		</p>
-		<p class="footer">
 			© 2012–2021 Tanner Collin
 		</p>
 	</body>

themes/theme/templates/fonts.css

@@ -0,0 +1,59 @@
+@font-face {
+	font-family: 'Apparatus SIL';
+	src: url('/theme/fonts/AppSILR.ttf') format('truetype');
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Apparatus SIL';
+	font-style: italic;
+	src: url('/theme/fonts/AppSILI.ttf') format('truetype');
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Apparatus SIL';
+	font-weight: bold;
+	src: url('/theme/fonts/AppSILB.ttf') format('truetype');
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Apparatus SIL';
+	font-weight: bold;
+	font-style: italic;
+	src: url('/theme/fonts/AppSILBI.ttf') format('truetype');
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Lato';
+	font-style: italic;
+	font-weight: 400;
+	src: local('Lato Italic'), local('Lato-Italic'), url('/theme/fonts/Lato-Italic.ttf') format('truetype');
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Lato';
+	font-style: italic;
+	font-weight: 700;
+	src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('/theme/fonts/Lato-BoldItalic.ttf') format('truetype');
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Lato';
+	font-style: normal;
+	font-weight: 400;
+	src: local('Lato Regular'), local('Lato-Regular'), url('/theme/fonts/Lato-Regular.ttf') format('truetype');
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Lato';
+	font-style: normal;
+	font-weight: 700;
+	src: local('Lato Bold'), local('Lato-Bold'), url('/theme/fonts/Lato-Bold.ttf') format('truetype');
+	font-display: swap;
+}

themes/theme/templates/index.html

@@ -8,12 +8,7 @@
 {% endblock %}
 
 {% block info %}
-	<picture>
+	<img src="/theme/me.jpg" width="128" class="me" alt="me smiling wide and looking into the camera lit up brightly" />
-		<source type="image/webp" srcset="/theme/me.webp">
-		<source type="image/jpeg" srcset="/theme/me.jpg">
-		<img src="/theme/me.jpg" width="128" height="164" class="me" alt="me smiling wide and looking into the camera lit up brightly">
-	</picture>
-
 	<div class="info">
 		<h1>Tanner Collin</h1>
 		<p class="contact-icons">
@@ -25,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>
@@ -92,12 +90,16 @@
 			<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>
 
-		{% for article in articles_page.object_list if article.category.name == 'Creations' %}
+			{% for article in articles_page.object_list if article.category.name == 'Projects' %}
 				<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
 				<div class="summary">
 					{{ article.summary }}
@@ -115,4 +117,6 @@
 				</div>
 			{% endfor %}
 		</div>
+		</div>
+	</div>
 {% endblock %}

themes/theme/templates/style.css

@@ -4,7 +4,7 @@ html {
 
 body {
 	text-rendering: optimizeLegibility;
-	font: 1.1rem/1.0 sans-serif;
+	font: 1.2rem/1.0 Lato,sans-serif;
 }
 
 a {
@@ -13,27 +13,22 @@ a {
 }
 
 .info h1 {
-	font: 1.1rem/1.0 sans-serif;
+	font: 1.2rem/1.0 Lato,sans-serif;
-}
-
-.index h3 {
-	font: 1.1rem/1.5 serif;
 }
 
 .source {
-	font: 0.9rem/1.5 serif;
+	font: 1rem/1.5 Apparatus SIL,serif;
 }
 
 pre {
-	font-size: 0.9rem;
+	font-size: 1rem;
-	line-height: 1.2;
 	padding: 1rem;
 	overflow-x: auto;
 }
 
 :not(pre)>code {
 	padding: 0 2px;
-	font-size: 0.8rem;
+	font-size: 0.9rem;
 }
 
 .container {
@@ -41,8 +36,8 @@ pre {
 	margin: 2rem auto 12rem auto;
 }
 
-.footer {
+.copyright {
-	font: 0.9rem/1.5 serif;
+	font: 1rem/1.5 Apparatus SIL,serif;
 	text-align: center;
 }
 
@@ -63,13 +58,14 @@ pre {
 }
 
 .content p.metadata {
-	font: 0.9rem/1.0 serif;
+	font: 1rem/1.0 Apparatus SIL,serif;
 	font-style: italic;
 }
 
 .content div.summary p {
 	margin-top: -0.5rem;
-	margin-left: 1.5rem;
+	margin-left: 1rem;
+	font-style: italic;
 }
 
 .content {
@@ -77,11 +73,19 @@ 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.1rem/1.5 serif;
+	font: 1.2rem/1.5 Apparatus SIL,serif;
 }
 
 .content ul {
@@ -89,7 +93,7 @@ pre {
 }
 
 .content li {
-	font: 1.1rem/1.5 serif;
+	font: 1.2rem/1.5 Apparatus SIL,serif;
 }
 
 .content img {
@@ -103,7 +107,7 @@ pre {
 	position: relative;
 	width: 8rem;
 	margin-left: -9rem;
-	font-size: 0.9rem;
+	font-size: 1rem;
 }
 
 .toclink:not(:hover) {
@@ -179,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;