Split home page into two columns

Adjust margins
Remove darkmode selector
2021-06-16 07:28:38 +00:00 · 2021-05-30 05:22:33 +00:00 · 2021-05-30 05:08:37 +00:00 · 2021-05-30 05:00:35 +00:00 · 2021-05-26 07:09:00 +00:00 · 2021-05-26 07:00:11 +00:00
5 changed files with 201 additions and 276 deletions
--- a/publishconf.py
+++ b/publishconf.py
@@ -54,10 +54,10 @@ AUTHORS_SAVE_AS = ''
 CATEGORIES_SAVE_AS = ''
 TAGS_SAVE_AS = ''

-INDEX_SAVE_AS = 'index.php'
+INDEX_SAVE_AS = 'index.html'
 ARTICLE_URL = '{slug}/'
-ARTICLE_SAVE_AS = '{slug}/index.php'
+ARTICLE_SAVE_AS = '{slug}/index.html'
 PAGE_URL = '{slug}/'
-PAGE_SAVE_AS = '{slug}/index.php'
+PAGE_SAVE_AS = '{slug}/index.html'

 PROD = True
--- a/themes/theme/templates/article.html
+++ b/themes/theme/templates/article.html
@@ -26,8 +26,10 @@

 {% block info %}
 	Tanner Collin
-	<p class='theme-select'>
-		<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
+	<p class="contact-icons">
+		<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>
 {% endblock %}

@@ -39,10 +41,6 @@
 		<div class="content">
 	{% endif %}

-		<div class="topbar">
-			{{ info() }}
-		</div>
-
 		<p><a href="/">← Return to Home</a></p>
 		<header>
 			<h1>{{ article.title }}</h1>
--- a/themes/theme/templates/base.html
+++ b/themes/theme/templates/base.html
@@ -36,29 +36,13 @@
 		</style>

 		<script defer src="/theme/instant-page.js"></script>
-
-		<noscript>
-			<style type="text/css">
-				.theme-select {
-					display: none !important;
-				}
-			</style>
-		</noscript>
 	</head>

-	{% if PROD %}
-		<body class="<?php echo $themeClass; ?>">
-	{% else %}
 	<body>
-	{% endif %}
-
-	{%- macro info() -%}
-		{% block info %}{% endblock %}
-	{%- endmacro -%}
-
 		<div class="container">
-		<div class="sidebar">
-			{{ info() }}
+			<div class="bar">
+				{% block info %}
+				{% endblock %}
 			</div>

 			{% block content %}
@@ -68,24 +52,6 @@
 		<p class="copyright">
 			© 2012–2021 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>
 </html>
 		
--- a/themes/theme/templates/index.html
+++ b/themes/theme/templates/index.html
@@ -8,31 +8,26 @@
 {% endblock %}

 {% 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">
-		Tanner Collin
+		<h1>Tanner Collin</h1>
 		<p class="contact-icons">
-			<a href="mailto:site2@tannercollin.com" rel="noreferrer noopener"><img alt="email icon" src="/theme/mail.svg" /></a>
-			<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram logo" src="/theme/telegram.svg" /></a>
-			<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github logo" src="/theme/github.svg" /></a>
-		</p>
-		<p class='theme-select'>
-			<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>
 	</div>
 {% endblock %}

 {% block content %}
-	<div class="content">
-
-		<div class="topbar">
-			{{ info() }}
-		</div>
-
+	<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>
@@ -57,54 +52,71 @@
 				build tools that make my life easier.
 			</p>

-		<p>
+			<h3>
 				<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>
-		</p>
+				— <a class="source" href="https://git.tannercollin.com/tanner/qotnews" target="_blank" rel="noreferrer noopener">source code</a>
+			</h3>
 			<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 class="source" href="https://github.com/tannercollin/Notica" target="_blank" rel="noreferrer noopener">source code</a>
-		</p>
+				— <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>

-		<p>
+			<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>
-		</p>
+				— <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>

-		<p>
+			<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>
-		</p>
+				— <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>

-		<p>
+			<h3>
 				<a href="https://github.com/tannercollin/standardnotes-fs" target="_blank" rel="noreferrer noopener">standardnotes-fs</a>
-		</p>
+			</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>Sometimes I create art or interactive tech.</p>

 			{% for article in articles_page.object_list if article.category.name == 'Projects' %}
-			<p><a href="{{ article.url }}">{{ article.title }}</a></p>
+				<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>
 {% endblock %}
--- a/themes/theme/templates/style.css
+++ b/themes/theme/templates/style.css
@@ -12,8 +12,11 @@ a {
 	outline: none;
 }

+.info h1 {
+	font: 1.2rem/1.0 Lato,sans-serif;
+}
+
 .source {
-	float: right;
 	font: 1rem/1.5 Apparatus SIL,serif;
 }

@@ -38,77 +41,6 @@ pre {
 	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 {
 	float: right;
 	padding: 0.75rem;
@@ -141,9 +73,17 @@ 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.2rem/1.5 Apparatus SIL,serif;
 }
@@ -178,18 +118,95 @@ pre {
 	.content {
 		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) {
-	.sidebar {
-		display: none;
+	.bar {
+		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 {
 	background-color: #eee;
@@ -217,75 +234,7 @@ pre {
 	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) {
-	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 {
 		background-color: #000;
 		color: #eee;
Author	SHA1	Message	Date
Tanner Collin	42698372ad	Split home page into two columns	2021-06-16 07:28:38 +00:00
Tanner Collin	eddde95b57	Adjust margins	2021-05-30 05:22:33 +00:00
Tanner Collin	b5b9e68df0	Remove darkmode selector	2021-05-30 05:08:37 +00:00
Tanner Collin	5bcad7eb77	Fix duplicate sidebar / topbar problem	2021-05-30 05:00:35 +00:00
Tanner Collin	2be883b19f	Set home photo default sizes	2021-05-26 07:09:00 +00:00
Tanner Collin	98f61d6d2f	Remove "logo" and "icon" from alt text	2021-05-26 07:00:11 +00:00
Tanner Collin	4ebf756c88	Convert project links back to headers from paragraphs	2021-05-26 06:59:01 +00:00