tanner/personal-site
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: tanner:a966b59b66a3e430b33808705e02109ee92ed9f7
Branches Tags
tanner:master tanner:columns
..
compare: tanner:columns
Branches Tags
tanner:master tanner:columns

1 Commits
a966b59b66 ... columns

Author SHA1 Message Date
Tanner Collin
42698372ad Split home page into two columns 2021-06-16 07:28:38 +00:00
17 changed files with 211 additions and 122 deletions
Expand all files Collapse all files

6
content/bypassing-ports.md
View File

@@ -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:

2
content/extra/robots.txt
View File

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

17
prototype.html
View File

@@ -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>

BIN
themes/theme/static/fonts/AppSILB.ttf Normal file
View File

Binary file not shown.

BIN
themes/theme/static/fonts/AppSILBI.ttf Normal file
View File

Binary file not shown.

BIN
themes/theme/static/fonts/AppSILI.ttf Normal file
View File

Binary file not shown.

BIN
themes/theme/static/fonts/AppSILR.ttf Normal file
View File

Binary file not shown.

BIN
themes/theme/static/fonts/Lato-Bold.ttf Normal file
View File

Binary file not shown.

BIN
themes/theme/static/fonts/Lato-BoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
themes/theme/static/fonts/Lato-Italic.ttf Normal file
View File

Binary file not shown.

BIN
themes/theme/static/fonts/Lato-Regular.ttf Normal file
View File

Binary file not shown.

BIN
themes/theme/static/me.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 124 KiB

BIN
themes/theme/static/me.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

25
themes/theme/templates/base.html
View File

@@ -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">
<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">
<p class="copyright">
© 2012–2021 Tanner Collin
</p>
</body>

59
themes/theme/templates/fonts.css Normal file
View File

@@ -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;
}

18
themes/theme/templates/index.html
View File

@@ -8,12 +8,7 @@
{% 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>
<img src="/theme/me.jpg" width="128" class="me" alt="me smiling wide and looking into the camera lit up brightly" />
<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,7 +90,11 @@
<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>
@@ -115,4 +117,6 @@
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}

62
themes/theme/templates/style.css
View File

@@ -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;
}
.index h3 {
font: 1.1rem/1.5 serif;
font: 1.2rem/1.0 Lato,sans-serif;
}
.source {
font: 0.9rem/1.5 serif;
font: 1rem/1.5 Apparatus SIL,serif;
}
pre {
font-size: 0.9rem;
line-height: 1.2;
font-size: 1rem;
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 {
font: 0.9rem/1.5 serif;
.copyright {
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;