Compare commits

...

7 Commits

5 changed files with 201 additions and 276 deletions

View File

@@ -54,10 +54,10 @@ AUTHORS_SAVE_AS = ''
CATEGORIES_SAVE_AS = '' CATEGORIES_SAVE_AS = ''
TAGS_SAVE_AS = '' TAGS_SAVE_AS = ''
INDEX_SAVE_AS = 'index.php' INDEX_SAVE_AS = 'index.html'
ARTICLE_URL = '{slug}/' ARTICLE_URL = '{slug}/'
ARTICLE_SAVE_AS = '{slug}/index.php' ARTICLE_SAVE_AS = '{slug}/index.html'
PAGE_URL = '{slug}/' PAGE_URL = '{slug}/'
PAGE_SAVE_AS = '{slug}/index.php' PAGE_SAVE_AS = '{slug}/index.html'
PROD = True PROD = True

View File

@@ -26,8 +26,10 @@
{% block info %} {% block info %}
Tanner Collin Tanner Collin
<p class='theme-select'> <p class="contact-icons">
<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a> <a href="mailto:site2@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> </p>
{% endblock %} {% endblock %}
@@ -39,10 +41,6 @@
<div class="content"> <div class="content">
{% endif %} {% endif %}
<div class="topbar">
{{ info() }}
</div>
<p><a href="/">← Return to Home</a></p> <p><a href="/">← Return to Home</a></p>
<header> <header>
<h1>{{ article.title }}</h1> <h1>{{ article.title }}</h1>

View File

@@ -36,56 +36,22 @@
</style> </style>
<script defer src="/theme/instant-page.js"></script> <script defer src="/theme/instant-page.js"></script>
<noscript>
<style type="text/css">
.theme-select {
display: none !important;
}
</style>
</noscript>
</head> </head>
{% if PROD %} <body>
<body class="<?php echo $themeClass; ?>"> <div class="container">
{% else %} <div class="bar">
<body> {% block info %}
{% endif %} {% endblock %}
</div>
{%- macro info() -%} {% block content %}
{% block info %}{% endblock %} {% endblock %}
{%- endmacro -%}
<div class="container">
<div class="sidebar">
{{ info() }}
</div> </div>
{% block content %} <p class="copyright">
{% endblock %} © 20122021 Tanner Collin
</div> </p>
<p class="copyright">
© 20122021 Tanner Collin
</p>
<script>
function setTheme(theme) {
console.log('Setting theme to', theme);
if (theme == 'dark') {
document.body.classList.add('dark');
document.body.classList.remove('light');
} else if (theme == 'light') {
document.body.classList.add('light');
document.body.classList.remove('dark');
}
document.cookie = 'theme=' + theme + '; Max-Age=31536000; Path=/; SameSite=Lax';
}
</script>
</body> </body>
</html> </html>

View File

@@ -8,103 +8,115 @@
{% endblock %} {% endblock %}
{% block info %} {% block info %}
<img src="/theme/me.jpg" class="me" alt="me smiling wide and looking into the camera lit up brightly" /> <img src="/theme/me.jpg" width="128" class="me" alt="me smiling wide and looking into the camera lit up brightly" />
<div class="info"> <div class="info">
Tanner Collin <h1>Tanner Collin</h1>
<p class="contact-icons"> <p class="contact-icons">
<a href="mailto:site2@tannercollin.com" rel="noreferrer noopener"><img alt="email icon" src="/theme/mail.svg" /></a> <a href="mailto:site2@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 logo" src="/theme/telegram.svg" /></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 logo" src="/theme/github.svg" /></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>
<p class='theme-select'>
<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
</p> </p>
</div> </div>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="content"> <div class="content content-index">
<div class="topbar">
{{ info() }}
</div>
<p> <p>
Hi, I'm Tanner! I do firmware and web development in Calgary. Hi, I'm Tanner! I do firmware and web development in Calgary.
</p> </p>
<h2>Contact Info</h2> <div class="leftcol">
<div class="inside">
<p> <h2>Contact Info</h2>
Email: <a href="mailto:site2@tannercollin.com">site2@tannercollin.com</a> <br />
Telegram: <a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener">@tannercollin</a>
</p>
<h2>Resume</h2> <p>
Email: <a href="mailto:site2@tannercollin.com">site2@tannercollin.com</a> <br />
Telegram: <a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener">@tannercollin</a>
</p>
<ul> <h2>Resume</h2>
<li>Firmware Engineer at <a href="https://cabanablockchain.com" target="_blank" rel="noreferrer noopener">Cabana Blockchain</a>, 2018</li>
<li>Lead Hardware Engineer at <a href="https://criticalcontrol.com/" target="_blank" rel="noreferrer noopener">Critical Control</a>, 20162018</li>
<li>Electrical Engineer at <a href="https://www.opener.aero/" target="_blank" rel="noreferrer noopener">Opener Aero</a>, 20162016</li>
<li>Electrical Engineer Intern at <a href="https://www.pason.com/" target="_blank" rel="noreferrer noopener">Pason Systems</a>, 20142015</li>
<li>BSc. Electrical Engineering from University of Calgary</li>
</ul>
<h2>Projects</h2> <ul>
<li>Firmware Engineer at <a href="https://cabanablockchain.com" target="_blank" rel="noreferrer noopener">Cabana Blockchain</a>, 2018</li>
<li>Lead Hardware Engineer at <a href="https://criticalcontrol.com/" target="_blank" rel="noreferrer noopener">Critical Control</a>, 20162018</li>
<li>Electrical Engineer at <a href="https://www.opener.aero/" target="_blank" rel="noreferrer noopener">Opener Aero</a>, 20162016</li>
<li>Electrical Engineer Intern at <a href="https://www.pason.com/" target="_blank" rel="noreferrer noopener">Pason Systems</a>, 20142015</li>
<li>BSc. Electrical Engineering from University of Calgary</li>
</ul>
<p> <h2>Projects</h2>
My main hobby is working on software projects. I typically design websites or
build tools that make my life easier.
</p>
<p> <p>
<a href="https://news.t0.vc/" target="_blank" rel="noreferrer noopener">QotNews</a> My main hobby is working on software projects. I typically design websites or
<a class="source" href="https://git.tannercollin.com/tanner/qotnews" target="_blank" rel="noreferrer noopener">source code</a> build tools that make my life easier.
</p> </p>
<div class="summary">
<p>Hacker News, Reddit, Lobsters, and Tildes articles pre-rendered in reader mode. Optimized for speed and distraction-free reading.</p>
</div>
<p> <h3>
<a href="https://notica.us" target="_blank" rel="noreferrer noopener">Notica</a> <a href="https://news.t0.vc/" target="_blank" rel="noreferrer noopener">QotNews</a>
<a class="source" href="https://github.com/tannercollin/Notica" target="_blank" rel="noreferrer noopener">source code</a> <a class="source" href="https://git.tannercollin.com/tanner/qotnews" target="_blank" rel="noreferrer noopener">source code</a>
</p> </h3>
<div class="summary">
<p>Send browser notifications from your terminal. No installation. No registration.</p>
</div>
<p>
<a href="https://my.protospace.ca" target="_blank" rel="noreferrer noopener">Spaceport</a>
<a class="source" href="https://github.com/Protospace/spaceport" target="_blank" rel="noreferrer noopener">source code</a>
</p>
<div class="summary">
<p>Makerspace members' portal for Calgary Protospace. It tracks membership, courses, training, access cards, and more.</p>
</div>
<p>
<a href="https://txt.t0.vc" target="_blank" rel="noreferrer noopener">t0txt</a>
<a class="source" href="https://github.com/tannercollin/t0txt" target="_blank" rel="noreferrer noopener">source code</a>
</p>
<div class="summary">
<p>Minimal command line pastebin. Allows you to upload text notes from a bash pipe or web browser.</p>
</div>
<p>
<a href="https://github.com/tannercollin/standardnotes-fs" target="_blank" rel="noreferrer noopener">standardnotes-fs</a>
</p>
<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.</>
{% for article in articles_page.object_list if article.category.name == 'Projects' %}
<p><a href="{{ article.url }}">{{ article.title }}</a></p>
<div class="summary"> <div class="summary">
{{ article.summary }} <p>Hacker News, Reddit, Lobsters, and Tildes articles pre-rendered in reader mode. Optimized for speed and distraction-free reading.</p>
</div> </div>
{% endfor %}
<h3>
<a href="https://notica.us" target="_blank" rel="noreferrer noopener">Notica</a>
<a class="source" href="https://github.com/tannercollin/Notica" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<div class="summary">
<p>Send browser notifications from your terminal. No installation. No registration.</p>
</div>
<h3>
<a href="https://my.protospace.ca" target="_blank" rel="noreferrer noopener">Spaceport</a>
<a class="source" href="https://github.com/Protospace/spaceport" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<div class="summary">
<p>Makerspace members' portal for Calgary Protospace. It tracks membership, courses, training, access cards, and more.</p>
</div>
<h3>
<a href="https://txt.t0.vc" target="_blank" rel="noreferrer noopener">t0txt</a>
<a class="source" href="https://github.com/tannercollin/t0txt" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<div class="summary">
<p>Minimal command line pastebin. Allows you to upload text notes from a bash pipe or web browser.</p>
</div>
<h3>
<a 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>
</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 == 'Projects' %}
<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>
</div> </div>
{% endblock %} {% endblock %}

View File

@@ -12,8 +12,11 @@ a {
outline: none; outline: none;
} }
.info h1 {
font: 1.2rem/1.0 Lato,sans-serif;
}
.source { .source {
float: right;
font: 1rem/1.5 Apparatus SIL,serif; font: 1rem/1.5 Apparatus SIL,serif;
} }
@@ -38,77 +41,6 @@ pre {
text-align: center; text-align: center;
} }
.theme-select {
font-size: 1rem;
margin-bottom: 0;
cursor: pointer;
}
.sidebar {
margin-top: 2px;
float: left;
width: 8rem;
text-align: right;
}
.sidebar .me {
width: 100%;
display: block;
}
.sidebar .info {
margin-top: 2rem;
}
.sidebar .contact-icons a {
border-bottom: none;
}
.sidebar .contact-icons img {
width: 1.25rem;
height: 1.25rem;
margin-left: 0.5rem;
}
.topbar {
display: table;
overflow: auto;
margin: auto;
margin-top: -0.5rem;
font-size: 1.5rem;
}
.topbar .me {
float: left;
height: 6.5rem;
width: auto;
}
.topbar .info {
float: left;
margin-top: -0.25rem;
margin-left: 1.5rem;
}
.topbar .contact-icons {
margin-left: 0.25rem;
margin-bottom: 0;
}
.topbar .contact-icons a {
border-bottom: none;
}
.topbar .contact-icons img {
width: 1.5rem;
height: 1.5rem;
margin-right: 1rem;
}
.topbar .theme-select {
margin-top: 0.5rem;
}
.toc { .toc {
float: right; float: right;
padding: 0.75rem; padding: 0.75rem;
@@ -141,9 +73,17 @@ pre {
} }
.content-wide { .content-wide {
max-width: 46rem;;
}
.content-index {
max-width: none; max-width: none;
} }
.content-index h3 {
font: 1.2rem/1.5 Apparatus SIL,serif;
}
.content p { .content p {
font: 1.2rem/1.5 Apparatus SIL,serif; font: 1.2rem/1.5 Apparatus SIL,serif;
} }
@@ -178,18 +118,95 @@ pre {
.content { .content {
margin-left: 10rem; margin-left: 10rem;
} }
.topbar {
display: none; .bar {
margin-top: 2px;
float: left;
width: 8rem;
text-align: right;
}
.bar .me {
width: 100%;
display: block;
}
.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) { @media screen and (max-width:36rem) {
.sidebar { .bar {
display: none; display: table;
overflow: auto;
margin: 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;
} }
} }
@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 { body {
background-color: #eee; background-color: #eee;
@@ -217,75 +234,7 @@ pre {
color: #555; color: #555;
} }
body.dark {
background-color: #000;
color: #eee;
}
body.dark a {
color: #eee;
border-bottom: 1px solid #eee;
}
body.dark pre {
background-color: #222;
}
body.dark :not(pre)>code {
background-color: #222;
}
body.dark .toc {
background-color: #222;
}
body.dark .content p.metadata {
color: #aaa;
}
body.dark .content img {
filter: brightness(75%);
}
body.dark .contact-icons img {
filter: invert(1);
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body.light {
background-color: #eee;
color: #000;
}
body.light a {
color: #000;
border-bottom: 1px solid #000;
}
body.light pre {
background-color: #ddd;
}
body.light :not(pre)>code {
background-color: #ddd;
}
body.light .toc {
background-color: #ddd;
}
body.light .content p.metadata {
color: #555;
}
body.light .contact-icons img {
filter: none;
}
body.light .content img {
filter: none;
}
body { body {
background-color: #000; background-color: #000;
color: #eee; color: #eee;