Optimize me.jpg

content/bypassing-ports.md

@@ -52,7 +52,7 @@ $ sudo make-cadir easy-rsa/
 $ sudo chown -R tanner:tanner easy-rsa/
 ```
 
-Replace `tanner` with your own username, this is temporary.
+Replace `tanner` with your Linux 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, create only a single extra one:
+laptop, phone, etc. to protect you from public WiFi (like a normal VPN), 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.
+above and apply the changes to `ufw`.
 
 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

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

themes/theme/templates/base.html

@@ -9,21 +9,10 @@
 		<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>
@@ -40,7 +29,10 @@
 			{% endblock %}
 		</div>
 
-		<p class="copyright">
+		<p class="footer">
+			<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

@@ -1,59 +0,0 @@
-@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,7 +8,12 @@
 {% endblock %}
 
 {% block info %}
-	<img src="/theme/me.jpg" width="128" class="me" alt="me smiling wide and looking into the camera lit up brightly" />
+	<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">

themes/theme/templates/style.css

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