themes/theme/templates/article.html

@@ -3,7 +3,7 @@
 {% block title %}{{ article.title|striptags  }} | {{ SITENAME }}{% endblock %}
 
 {% block head %}
-{{ super() }}
+	{{ super() }}
 
 	{% if article.date %}
 		<meta name="date" content="{{article.date}}" />
@@ -29,6 +29,7 @@
 {% endblock %}
 
 {% block content %}
+
 	{% if article.wide %}
 		<div class="content content-wide">
 	{% else %}
@@ -49,9 +50,7 @@
 		</header>
 		<hr />
 		<article>
-
+			{{ article.content }}
-{{ article.content }}
-
 		</article>
 	</div>
 

themes/theme/templates/base.html

@@ -13,7 +13,6 @@
 
 		<style>
 		{% include 'style.css' %}
-
 		</style>
 
 		<script defer src="/theme/instant-page.js"></script>
@@ -34,7 +33,7 @@
 			<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–2022 Tanner Collin
+			© 2012–2021 Tanner Collin
 		</p>
 	</body>
 </html>

themes/theme/templates/index.html

@@ -1,11 +1,29 @@
 {% extends "base.html" %}
 
 {% block head %}
-{{ super() }}
+	{{ super() }}
+
 	<meta name="description" content="The personal website of Tanner Collin." />
 	<meta name="summary" content="The personal website of Tanner Collin." />
 {% endblock %}
 
+{% block info %}
+	<picture>
+		<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">
+			<a href="mailto:site4@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 index">
 		<p>
@@ -41,7 +59,6 @@
 			<div class="summary">
 				{{ article.summary }}
 			</div>
-
 		{% endfor %}
 
 		<h3>
@@ -60,7 +77,6 @@
 			<div class="summary">
 				{{ article.summary }}
 			</div>
-
 		{% endfor %}
 
 		<h2>Writing</h2>
@@ -72,7 +88,6 @@
 			<div class="summary">
 				{{ article.summary }}
 			</div>
-
 		{% endfor %}
 	</div>
 {% endblock %}

themes/theme/templates/style.css

@@ -1,124 +1,124 @@
-			html {
+html {
 	overflow-y: scroll;
-			}
+}
 
-			body {
+body {
 	text-rendering: optimizeLegibility;
 	font-family: serif;
-			}
+}
 
-			a {
+a {
 	text-decoration: none;
 	outline: none;
-			}
+}
 
-			a.external {
+a.external {
 	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23fff' stroke='%23000' d='M1.5 4.518h5.982V10.5H1.5z'/%3E%3Cpath fill='%23000' d='M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z'/%3E%3Cpath fill='%23fff' d='m9.995 2.004.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z'/%3E%3C/svg%3E%0A");
 	background-position: center right;
 	background-repeat: no-repeat;
 	padding-right: 15px;
-			}
+}
 
-			.info h1 {
+.info h1 {
 	font: 1.1rem/1.0 sans-serif;
-			}
+}
 
-			.index h3 {
+.index h3 {
 	font: 1.1rem/1.5 serif;
-			}
+}
 
-			.source {
+.source {
 	font: 0.9rem/1.5 serif;
-			}
+}
 
-			pre {
+pre {
 	font-size: 0.9rem;
 	line-height: 1.2;
 	padding: 1rem;
 	overflow-x: auto;
-			}
+}
 
-			:not(pre)>code {
+:not(pre)>code {
 	padding: 0 2px;
 	font-size: 0.8rem;
-			}
+}
 
-			.container {
+.container {
 	max-width: 56rem;
-				margin: 1rem auto 12rem auto;
+	margin: 2rem auto 12rem auto;
-			}
+}
 
-			.footer {
+.footer {
 	font: 0.9rem/1.5 serif;
 	text-align: center;
-			}
+}
 
-			.toc {
+.toc {
 	float: right;
 	padding: 0.75rem;
 	padding-top: 0;
 	margin-left: 0.75rem;
-			}
+}
 
-			.toc ul {
+.toc ul {
 	padding-left: 1.2rem;
 	margin: 0;
-			}
+}
 
-			.toc li {
+.toc li {
 	margin-top: 0.75rem;
-			}
+}
 
-			.content p.metadata {
+.content p.metadata {
 	font: 0.9rem/1.0 serif;
 	font-style: italic;
-			}
+}
 
-			.content div.summary p {
+.content div.summary p {
 	margin-top: -0.6rem;
 	margin-left: 1.5rem;
-			}
+}
 
-			.content {
+.content {
 	max-width: 36rem;
-			}
+}
 
-			.content-wide {
+.content-wide {
 	max-width: none;
-			}
+}
 
-			.content p {
+.content p {
 	font: 1.1rem/1.5 serif;
-			}
+}
 
-			.content ul {
+.content ul {
 	padding-left: 1.1rem;
-			}
+}
 
-			.content li {
+.content li {
 	font: 1.1rem/1.5 serif;
-			}
+}
 
-			.content img {
+.content img {
 	width: 100%;
 	max-width: 36rem;
 	height: auto;
-			}
+}
 
-			.content .aside {
+.content .aside {
 	display: inline;
 	float: left;
 	position: relative;
 	width: 8rem;
 	margin-left: -9rem;
 	font-size: 0.9rem;
-			}
+}
 
-			.toclink:not(:hover) {
+.toclink:not(:hover) {
 	border-bottom: none;
-			}
+}
 
-			@media screen and (min-width:36rem) {
+@media screen and (min-width:36rem) {
 	.content {
 		margin-left: 10rem;
 	}
@@ -130,53 +130,100 @@
 		text-align: right;
 		white-space: nowrap;
 	}
+
+	.bar .me {
+		width: 100%;
+		display: block;
 	}
 
-			@media screen and (max-width:36rem) {
+	.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) {
 	.bar {
 		overflow: auto;
-					margin-bottom: -1rem;
+		margin-top: -0.5rem;
-				}
 	}
 
+	.bar .me {
+		float: left;
+		height: 6.5rem;
+		width: auto;
+	}
 
-			body {
+	.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;
+	}
+}
+
+
+body {
 	background-color: #fff;
 	color: #000;
-			}
+}
 
-			a {
+a {
 	color: #000;
 	border-bottom: 1px solid #000;
-			}
+}
 
-			a:visited {
+a:visited {
 	color: #555;
 	border-bottom: 1px solid #555;
-			}
+}
 
-			a.return-home:visited, a.toclink:visited, .toc a:visited {
+a.return-home:visited, a.toclink:visited, .toc a:visited {
 	color: inherit;
 	border-bottom: inherit;
-			}
+}
 
-			pre {
+pre {
 	background-color: #ddd;
-			}
+}
 
-			:not(pre)>code {
+:not(pre)>code {
 	background-color: #ddd;
-			}
+}
 
-			.toc {
+.toc {
 	background-color: #ddd;
-			}
+}
 
-			.content p.metadata {
+.content p.metadata {
 	color: #555;
-			}
+}
 
-			@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: dark) {
 	body {
 		background-color: #000;
 		color: #fff;
@@ -215,4 +262,4 @@
 	.contact-icons img {
 		filter: invert(1);
 	}
-			}
+}