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

Split home page into two columns

Browse Source
This commit is contained in:
Tanner Collin 2021-06-16 07:28:38 +00:00
parent eddde95b57
commit 42698372ad
2 changed files with 117 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,11 +20,14 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="content index"> <div class="content content-index">
<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>
<div class="leftcol">
<div class="inside">
<h2>Contact Info</h2> <h2>Contact Info</h2>
<p> <p>
@ -51,7 +54,7 @@
<h3> <h3>
<a href="https://news.t0.vc/" target="_blank" rel="noreferrer noopener">QotNews</a> <a href="https://news.t0.vc/" target="_blank" rel="noreferrer noopener">QotNews</a>
<a class="source" href="https://git.tannercollin.com/tanner/qotnews" 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>
</h3> </h3>
<div class="summary"> <div class="summary">
<p>Hacker News, Reddit, Lobsters, and Tildes articles pre-rendered in reader mode. Optimized for speed and distraction-free reading.</p> <p>Hacker News, Reddit, Lobsters, and Tildes articles pre-rendered in reader mode. Optimized for speed and distraction-free reading.</p>
@ -59,7 +62,7 @@
<h3> <h3>
<a href="https://notica.us" target="_blank" rel="noreferrer noopener">Notica</a> <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> — <a class="source" href="https://github.com/tannercollin/Notica" target="_blank" rel="noreferrer noopener">source code</a>
</h3> </h3>
<div class="summary"> <div class="summary">
<p>Send browser notifications from your terminal. No installation. No registration.</p> <p>Send browser notifications from your terminal. No installation. No registration.</p>
@ -67,7 +70,7 @@
<h3> <h3>
<a href="https://my.protospace.ca" target="_blank" rel="noreferrer noopener">Spaceport</a> <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> — <a class="source" href="https://github.com/Protospace/spaceport" target="_blank" rel="noreferrer noopener">source code</a>
</h3> </h3>
<div class="summary"> <div class="summary">
<p>Makerspace members' portal for Calgary Protospace. It tracks membership, courses, training, access cards, and more.</p> <p>Makerspace members' portal for Calgary Protospace. It tracks membership, courses, training, access cards, and more.</p>
@ -75,7 +78,7 @@
<h3> <h3>
<a href="https://txt.t0.vc" target="_blank" rel="noreferrer noopener">t0txt</a> <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> — <a class="source" href="https://github.com/tannercollin/t0txt" target="_blank" rel="noreferrer noopener">source code</a>
</h3> </h3>
<div class="summary"> <div class="summary">
<p>Minimal command line pastebin. Allows you to upload text notes from a bash pipe or web browser.</p> <p>Minimal command line pastebin. Allows you to upload text notes from a bash pipe or web browser.</p>
@ -87,10 +90,14 @@
<div class="summary"> <div class="summary">
<p>A filesystem that mounts your Standard Notes account as a directory of text files that you can edit.</p> <p>A filesystem that mounts your Standard Notes account as a directory of text files that you can edit.</p>
</div> </div>
</div>
</div>
<div class="rightcol">
<div class="inside">
<h2>Creations</h2> <h2>Creations</h2>
<p>Sometimes I create art or interactive tech.</> <p>Sometimes I create art or interactive tech.</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>
@ -98,5 +105,18 @@
{{ article.summary }} {{ article.summary }}
</div> </div>
{% endfor %} {% 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 %}

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

@ -16,12 +16,7 @@ a {
font: 1.2rem/1.0 Lato,sans-serif; font: 1.2rem/1.0 Lato,sans-serif;
} }
.index h3 {
font: 1.2rem/1.5 Apparatus SIL,serif;
}
.source { .source {
float: right;
font: 1rem/1.5 Apparatus SIL,serif; font: 1rem/1.5 Apparatus SIL,serif;
} }
@ -78,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;
} }
@ -180,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 { body {
background-color: #eee; background-color: #eee;