Preload and style fixes

_includes/layouts/base.njk

@@ -9,6 +9,7 @@
 		<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
 		
 		<link rel="preload" href="{{ path }}/MisterTwiggsHeavy.woff2" as="font" type="font/woff2" crossorigin>
+		<link rel="preload" href="{{ path }}/otomata_labs.svg" as="image" type="image/svg+xml">
 
 		{#- Uncomment this if you’d like folks to know that you used Eleventy to build your site!  #}
 		{#- <meta name="generator" content="{{ eleventy.generator }}"> #}
@@ -46,7 +47,7 @@
 		<a href="#main" id="skip-link" class="visually-hidden">Skip to main content</a>
 
 		<header>
-			<a href="/" class="home-link"><img class="logo" src="{{ path }}/res/otomata_labs.svg" alt="{{ metadata.title }}"></a>
+			<a href="/" class="home-link"><img class="logo" src="{{ path }}/otomata_labs.svg" alt="{{ metadata.title }}"></a>
 
 			{#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
 			<nav>
@@ -66,9 +67,6 @@
 		</main>
 
 		<footer>
-			<p>
-				<em>Built with <a href="https://www.11ty.dev/">{{ eleventy.generator }}</a></em>
-			</p>
 		</footer>
 
 		<!-- This page `{{ page.url }}` was built on {% currentBuildDate %} -->

content/credits.md

@@ -5,4 +5,7 @@ const eleventyNavigation = {
 };
 ---
 # Credits
-This website uses the font [Mister Twiggs Heavy](https://www.typeinnovations.com/fonts/mister-twiggs) by [Type Innovations](https://www.typeinnovations.com/)
+
+This website uses the font [Mister Twiggs Heavy](https://www.typeinnovations.com/fonts/mister-twiggs) by [Type Innovations](https://www.typeinnovations.com/)
+
+Built with [Eleventy](https://www.11ty.dev/) v3.1.2

css/index.css

@@ -60,7 +60,6 @@ body {
 	margin: 0 auto;
 	font-family: var(--font-family);
 	color: var(--text-color);
-
 	background-color: var(--background-color);
 }
 html {
@@ -74,6 +73,29 @@ body {
 	border: 2px dashed var(--color-gray-90);
 }
 
+@media (max-width: 480px) {
+	html,
+	body {
+		padding: 8px;
+	}
+	
+	body {
+		max-width: 95%;
+	}
+}
+
+@media (min-width: 481px) and (max-width: 768px) {
+	body {
+		max-width: 85%;
+	}
+}
+
+@media (min-width: 1441px) {
+	body {
+		max-width: 1200px;
+	}
+}
+
 /* https://www.a11yproject.com/posts/how-to-hide-content/ */
 .visually-hidden:not(:focus):not(:active) {
 	clip: rect(0 0 0 0);
@@ -220,11 +242,72 @@ header {
 	flex-grow: 1;
 	font-size: 1em; /* 16px /16 */
 	font-weight: 700;
+	max-width: 300px;
 }
 .home-link:link:not(:hover) {
 	text-decoration: none;
 }
 
+.logo {
+	width: 100%;
+	height: auto;
+	max-width: 250px;
+	min-width: 180px;
+	display: block;
+	transition: filter 0.2s ease;
+}
+
+@media (max-width: 480px) {
+	header {
+		font-size: 1.5em;
+		gap: 3px;
+		padding: 3px;
+	}
+	
+	.logo {
+		max-width: 200px;
+		min-width: 150px;
+	}
+	
+	.nav {
+		gap: .3em .6em;
+		font-size: 0.9em;
+	}
+}
+
+@media (min-width: 481px) and (max-width: 768px) {
+	header {
+		font-size: 1.75em;
+	}
+	
+	.logo {
+		max-width: 220px;
+	}
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+	.logo {
+		max-width: 250px;
+	}
+}
+
+@media (min-width: 1025px) and (max-width: 1440px) {
+	.logo {
+		max-width: 280px;
+	}
+}
+
+@media (min-width: 1441px) {
+	.logo {
+		max-width: 320px;
+	}
+	
+	header {
+		max-width: 1200px;
+		margin: 0 auto;
+	}
+}
+
 /* Nav */
 .nav {
 	display: flex;
@@ -232,6 +315,7 @@ header {
 	padding: 0;
 	margin: 0;
 	list-style: none;
+	flex-wrap: wrap;
 }
 .nav-item {
 	display: inline-block;
@@ -243,6 +327,24 @@ header {
 	text-decoration: underline;
 }
 
+@media (max-width: 768px) {
+	header {
+		flex-direction: column;
+		align-items: stretch;
+		text-align: center;
+	}
+	
+	.home-link {
+		align-self: center;
+		margin-bottom: 0.5em;
+	}
+	
+	.nav {
+		justify-content: center;
+		gap: .4em .8em;
+	}
+}
+
 /* Posts list */
 .postlist {
 	counter-reset: start-from var(--postlist-index);