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

Compare commits

base: tanner:00d582d0c7f169884c28007207ddf012f2e2d7d7
Branches Tags
tanner:master
tanner:columns
...
compare: tanner:0d89429503b5b1a9c77ab7445f7ff099d646a958
Branches Tags
tanner:master
tanner:columns

2 Commits
00d582d0c7 ... 0d89429503

Author SHA1 Message Date
Tanner Collin
0d89429503 Remove CSS for bar / info box 2022-07-15 15:25:28 -06:00
Tanner Collin
d1057534ec Fix HTML indentation 2022-07-15 15:25:11 -06:00
4 changed files with 265 additions and 325 deletions
Show Stats Expand all files Collapse all files

49
themes/theme/templates/article.html
View File

@ -3,7 +3,7 @@
{% block title %}{{ article.title|striptags }} | {{ SITENAME }}{% endblock %} {% block title %}{{ article.title|striptags }} | {{ SITENAME }}{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% if article.date %} {% if article.date %}
<meta name="date" content="{{article.date}}" /> <meta name="date" content="{{article.date}}" />
@ -25,34 +25,35 @@
{% endblock %} {% endblock %}
{% block info %} {% block info %}
<p>← <a class="return-home" href="/">Return Home</a></p> <p>← <a class="return-home" href="/">Return Home</a></p>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
{% if article.wide %}
<div class="content content-wide">
{% else %}
<div class="content">
{% endif %}
{% if article.wide %} <header>
<div class="content content-wide"> <h1>{{ article.title }}</h1>
{% else %} <div class="summary">
<div class="content"> {{ article.summary }}
{% endif %} </div>
<p class="metadata">
{{ article.locale_date }}
{% if article.modified %}
— updated {{ article.locale_modified }}
{% endif %}
</p>
</header>
<hr />
<article>
<header> {{ article.content }}
<h1>{{ article.title }}</h1>
<div class="summary"> </article>
{{ article.summary }}
</div> </div>
<p class="metadata">
{{ article.locale_date }}
{% if article.modified %}
— updated {{ article.locale_modified }}
{% endif %}
</p>
</header>
<hr />
<article>
{{ article.content }}
</article>
</div>
<p>← <a class="return-home" href="/">Return Home</a></p> <p>← <a class="return-home" href="/">Return Home</a></p>
{% endblock %} {% endblock %}

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

@ -12,7 +12,8 @@
<link rel="icon" href="/favicon.svg"> <link rel="icon" href="/favicon.svg">
<style> <style>
{% include 'style.css' %} {% include 'style.css' %}
</style> </style>
<script defer src="/theme/instant-page.js"></script> <script defer src="/theme/instant-page.js"></script>
@ -33,7 +34,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> <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>
<p class="footer"> <p class="footer">
© 2012–2021 Tanner Collin © 2012–2022 Tanner Collin
</p> </p>
</body> </body>
</html> </html>

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

@ -1,93 +1,78 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
<meta name="description" content="The personal website of Tanner Collin." />
<meta name="description" content="The personal website of Tanner Collin." /> <meta name="summary" 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 %} {% endblock %}
{% block content %} {% block content %}
<div class="content index"> <div class="content index">
<p> <p>
Hi, I'm Tanner! I like home automation, <a href="/sensors">sensors</a>, privacy, bots, Python, Debian, coffee, and makerspaces. Hi, I'm Tanner! I like home automation, <a href="/sensors">sensors</a>, privacy, bots, Python, Debian, coffee, and makerspaces.
</p> </p>
<h2>Contact Info</h2> <h2>Contact Info</h2>
<p> <p>
Email: <a href="mailto:site4@tannercollin.com">site4@tannercollin.com</a> <br /> Email: <a href="mailto:site4@tannercollin.com">site4@tannercollin.com</a> <br />
Telegram: <a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener">@tannercollin</a> Telegram: <a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener">@tannercollin</a>
</p> </p>
<h2>Resume</h2> <h2>Resume</h2>
<ul> <ul>
<li>Firmware Engineer at <a class="external" href="https://cabanablockchain.com" target="_blank" rel="noreferrer noopener">Cabana Blockchain</a>, 2018–</li> <li>Firmware Engineer at <a class="external" href="https://cabanablockchain.com" target="_blank" rel="noreferrer noopener">Cabana Blockchain</a>, 2018–</li>
<li>Lead Hardware Engineer at <a class="external" href="https://criticalcontrol.com/" target="_blank" rel="noreferrer noopener">Critical Control</a>, 2016–2018</li> <li>Lead Hardware Engineer at <a class="external" href="https://criticalcontrol.com/" target="_blank" rel="noreferrer noopener">Critical Control</a>, 2016–2018</li>
<li>Electrical Engineer at <a class="external" href="https://www.opener.aero/" target="_blank" rel="noreferrer noopener">Opener Aero</a>, 2016–2016</li> <li>Electrical Engineer at <a class="external" href="https://www.opener.aero/" target="_blank" rel="noreferrer noopener">Opener Aero</a>, 2016–2016</li>
<li>Electrical Engineer Intern at <a class="external" href="https://www.pason.com/" target="_blank" rel="noreferrer noopener">Pason Systems</a>, 2014–2015</li> <li>Electrical Engineer Intern at <a class="external" href="https://www.pason.com/" target="_blank" rel="noreferrer noopener">Pason Systems</a>, 2014–2015</li>
<li>BSc. Electrical Engineering from University of Calgary</li> <li>BSc. Electrical Engineering from University of Calgary</li>
</ul> </ul>
<h2>Projects</h2> <h2>Projects</h2>
<p> <p>
My main hobby is working on software projects. I typically design websites or My main hobby is working on software projects. I typically design websites or
build tools that make my life easier. build tools that make my life easier.
</p> </p>
{% for article in articles_page.object_list if article.category.name == 'Projects' %} {% for article in articles_page.object_list if article.category.name == 'Projects' %}
<h3><a href="{{ article.url }}">{{ article.title }}</a></h3> <h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
<div class="summary"> <div class="summary">
{{ article.summary }} {{ article.summary }}
</div>
{% endfor %}
<h3>
<a class="external" href="https://github.com/tannercollin/standardnotes-fs" target="_blank" rel="noreferrer noopener">standardnotes-fs</a>
</h3>
<div class="summary">
<p>A filesystem that mounts your Standard Notes account as a directory of text files that you can edit.</p>
</div>
<h2>Creations</h2>
<p>Sometimes I create art or interactive tech.</p>
{% for article in articles_page.object_list if article.category.name == 'Creations' %}
<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
<div class="summary">
{{ 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>
{% endfor %}
<h3>
<a class="external" href="https://github.com/tannercollin/standardnotes-fs" target="_blank" rel="noreferrer noopener">standardnotes-fs</a>
</h3>
<div class="summary">
<p>A filesystem that mounts your Standard Notes account as a directory of text files that you can edit.</p>
</div>
<h2>Creations</h2>
<p>Sometimes I create art or interactive tech.</p>
{% for article in articles_page.object_list if article.category.name == 'Creations' %}
<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
<div class="summary">
{{ 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>
{% endblock %} {% endblock %}

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

@ -1,265 +1,218 @@
html { html {
overflow-y: scroll; overflow-y: scroll;
} }
body { body {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-family: serif; font-family: serif;
} }
a { a {
text-decoration: none; text-decoration: none;
outline: 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-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-position: center right;
background-repeat: no-repeat; background-repeat: no-repeat;
padding-right: 15px; padding-right: 15px;
} }
.info h1 { .info h1 {
font: 1.1rem/1.0 sans-serif; font: 1.1rem/1.0 sans-serif;
} }
.index h3 { .index h3 {
font: 1.1rem/1.5 serif; font: 1.1rem/1.5 serif;
} }
.source { .source {
font: 0.9rem/1.5 serif; font: 0.9rem/1.5 serif;
} }
pre { pre {
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1.2; line-height: 1.2;
padding: 1rem; padding: 1rem;
overflow-x: auto; overflow-x: auto;
} }
:not(pre)>code { :not(pre)>code {
padding: 0 2px; padding: 0 2px;
font-size: 0.8rem; font-size: 0.8rem;
} }
.container { .container {
max-width: 56rem; max-width: 56rem;
margin: 2rem auto 12rem auto; margin: 1rem auto 12rem auto;
} }
.footer { .footer {
font: 0.9rem/1.5 serif; font: 0.9rem/1.5 serif;
text-align: center; text-align: center;
} }
.toc { .toc {
float: right; float: right;
padding: 0.75rem; padding: 0.75rem;
padding-top: 0; padding-top: 0;
margin-left: 0.75rem; margin-left: 0.75rem;
} }
.toc ul { .toc ul {
padding-left: 1.2rem; padding-left: 1.2rem;
margin: 0; margin: 0;
} }
.toc li { .toc li {
margin-top: 0.75rem; margin-top: 0.75rem;
} }
.content p.metadata { .content p.metadata {
font: 0.9rem/1.0 serif; font: 0.9rem/1.0 serif;
font-style: italic; font-style: italic;
} }
.content div.summary p { .content div.summary p {
margin-top: -0.6rem; margin-top: -0.6rem;
margin-left: 1.5rem; margin-left: 1.5rem;
} }
.content { .content {
max-width: 36rem; max-width: 36rem;
} }
.content-wide { .content-wide {
max-width: none; max-width: none;
} }
.content p { .content p {
font: 1.1rem/1.5 serif; font: 1.1rem/1.5 serif;
} }
.content ul { .content ul {
padding-left: 1.1rem; padding-left: 1.1rem;
} }
.content li { .content li {
font: 1.1rem/1.5 serif; font: 1.1rem/1.5 serif;
} }
.content img { .content img {
width: 100%; width: 100%;
max-width: 36rem; max-width: 36rem;
height: auto; height: auto;
} }
.content .aside { .content .aside {
display: inline; display: inline;
float: left; float: left;
position: relative; position: relative;
width: 8rem; width: 8rem;
margin-left: -9rem; margin-left: -9rem;
font-size: 0.9rem; font-size: 0.9rem;
} }
.toclink:not(:hover) { .toclink:not(:hover) {
border-bottom: none; border-bottom: none;
} }
@media screen and (min-width:36rem) { @media screen and (min-width:36rem) {
.content { .content {
margin-left: 10rem; margin-left: 10rem;
} }
.bar { .bar {
margin-top: 2px; margin-top: 2px;
float: left; float: left;
width: 8rem; width: 8rem;
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
} }
}
.bar .me { @media screen and (max-width:36rem) {
width: 100%; .bar {
display: block; overflow: auto;
} margin-bottom: -1rem;
}
.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-top: -0.5rem;
}
.bar .me {
float: left;
height: 6.5rem;
width: auto;
}
.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 { body {
background-color: #fff; background-color: #fff;
color: #000; color: #000;
} }
a { a {
color: #000; color: #000;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
a:visited { a:visited {
color: #555; color: #555;
border-bottom: 1px solid #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; color: inherit;
border-bottom: inherit; border-bottom: inherit;
} }
pre { pre {
background-color: #ddd; background-color: #ddd;
} }
:not(pre)>code { :not(pre)>code {
background-color: #ddd; background-color: #ddd;
} }
.toc { .toc {
background-color: #ddd; background-color: #ddd;
} }
.content p.metadata { .content p.metadata {
color: #555; color: #555;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
background-color: #000; background-color: #000;
color: #fff; color: #fff;
} }
a { a {
color: #fff; color: #fff;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
} }
a:visited { a:visited {
color: #aaa; color: #aaa;
border-bottom: 1px solid #aaa; border-bottom: 1px solid #aaa;
} }
pre { pre {
background-color: #222; background-color: #222;
} }
:not(pre)>code { :not(pre)>code {
background-color: #222; background-color: #222;
} }
.toc { .toc {
background-color: #222; background-color: #222;
} }
.content p.metadata { .content p.metadata {
color: #aaa; color: #aaa;
} }
.content img { .content img {
filter: brightness(75%); filter: brightness(75%);
} }
.contact-icons img { .contact-icons img {
filter: invert(1); filter: invert(1);
} }
} }