From 858238ff74af13689418364b020fc02d38eb1fd6 Mon Sep 17 00:00:00 2001
From: Starbeamrainbowlabs <sbrl@starbeamrainbowlabs.com>
Date: Tue, 6 Sep 2022 18:17:56 +0100
Subject: [PATCH 1/2] format code

---
 .eleventy.js               | 218 ++++++++++++++++++-------------------
 _includes/layouts/base.njk |  63 ++++++-----
 css/index.css              |  75 ++++++++-----
 3 files changed, 186 insertions(+), 170 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 7c6a4a7..af95ed4 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -6,139 +6,139 @@ const pluginNavigation = require("@11ty/eleventy-navigation");
 const markdownIt = require("markdown-it");
 const markdownItAnchor = require("markdown-it-anchor");
 
-module.exports = function(eleventyConfig) {
-  // Add plugins
-  eleventyConfig.addPlugin(pluginRss);
-  eleventyConfig.addPlugin(pluginSyntaxHighlight);
-  eleventyConfig.addPlugin(pluginNavigation);
+module.exports = function (eleventyConfig) {
+	// Add plugins
+	eleventyConfig.addPlugin(pluginRss);
+	eleventyConfig.addPlugin(pluginSyntaxHighlight);
+	eleventyConfig.addPlugin(pluginNavigation);
 
-  // https://www.11ty.dev/docs/data-deep-merge/
-  eleventyConfig.setDataDeepMerge(true);
+	// https://www.11ty.dev/docs/data-deep-merge/
+	eleventyConfig.setDataDeepMerge(true);
 
-  // Alias `layout: post` to `layout: layouts/post.njk`
-  eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
+	// Alias `layout: post` to `layout: layouts/post.njk`
+	eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
 
-  eleventyConfig.addFilter("readableDate", dateObj => {
-    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat("dd LLL yyyy");
-  });
+	eleventyConfig.addFilter("readableDate", dateObj => {
+		return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat("dd LLL yyyy");
+	});
 
-  // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
-  eleventyConfig.addFilter('htmlDateString', (dateObj) => {
-    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
-  });
+	// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
+	eleventyConfig.addFilter('htmlDateString', (dateObj) => {
+		return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat('yyyy-LL-dd');
+	});
 
-  // Get the first `n` elements of a collection.
-  eleventyConfig.addFilter("head", (array, n) => {
-    if(!Array.isArray(array) || array.length === 0) {
-      return [];
-    }
-    if( n < 0 ) {
-      return array.slice(n);
-    }
+	// Get the first `n` elements of a collection.
+	eleventyConfig.addFilter("head", (array, n) => {
+		if (!Array.isArray(array) || array.length === 0) {
+			return [];
+		}
+		if (n < 0) {
+			return array.slice(n);
+		}
 
-    return array.slice(0, n);
-  });
+		return array.slice(0, n);
+	});
 
-  // Return the smallest number argument
-  eleventyConfig.addFilter("min", (...numbers) => {
-    return Math.min.apply(null, numbers);
-  });
+	// Return the smallest number argument
+	eleventyConfig.addFilter("min", (...numbers) => {
+		return Math.min.apply(null, numbers);
+	});
 
-  function filterTagList(tags) {
-    return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
-  }
+	function filterTagList(tags) {
+		return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
+	}
 
-  eleventyConfig.addFilter("filterTagList", filterTagList)
+	eleventyConfig.addFilter("filterTagList", filterTagList)
 
-  // Create an array of all tags
-  eleventyConfig.addCollection("tagList", function(collection) {
-    let tagSet = new Set();
-    collection.getAll().forEach(item => {
-      (item.data.tags || []).forEach(tag => tagSet.add(tag));
-    });
+	// Create an array of all tags
+	eleventyConfig.addCollection("tagList", function (collection) {
+		let tagSet = new Set();
+		collection.getAll().forEach(item => {
+			(item.data.tags || []).forEach(tag => tagSet.add(tag));
+		});
 
-    return filterTagList([...tagSet]);
-  });
+		return filterTagList([...tagSet]);
+	});
 
-  // Copy the `img` and `css` folders to the output
-  eleventyConfig.addPassthroughCopy("img");
-  eleventyConfig.addPassthroughCopy("css");
+	// Copy the `img` and `css` folders to the output
+	eleventyConfig.addPassthroughCopy("img");
+	eleventyConfig.addPassthroughCopy("css");
 
-  // Customize Markdown library and settings:
-  let markdownLibrary = markdownIt({
-    html: true,
-    breaks: true,
-    linkify: true
-  }).use(markdownItAnchor, {
-    permalink: markdownItAnchor.permalink.ariaHidden({
-      placement: "after",
-      class: "direct-link",
-      symbol: "#",
-      level: [1,2,3,4],
-    }),
-    slugify: eleventyConfig.getFilter("slug")
-  });
-  eleventyConfig.setLibrary("md", markdownLibrary);
+	// Customize Markdown library and settings:
+	let markdownLibrary = markdownIt({
+		html: true,
+		breaks: true,
+		linkify: true
+	}).use(markdownItAnchor, {
+		permalink: markdownItAnchor.permalink.ariaHidden({
+			placement: "after",
+			class: "direct-link",
+			symbol: "#",
+			level: [1, 2, 3, 4],
+		}),
+		slugify: eleventyConfig.getFilter("slug")
+	});
+	eleventyConfig.setLibrary("md", markdownLibrary);
 
-  // Override Browsersync defaults (used only with --serve)
-  eleventyConfig.setBrowserSyncConfig({
-    callbacks: {
-      ready: function(err, browserSync) {
-        const content_404 = fs.readFileSync('_site/404.html');
+	// Override Browsersync defaults (used only with --serve)
+	eleventyConfig.setBrowserSyncConfig({
+		callbacks: {
+			ready: function (err, browserSync) {
+				const content_404 = fs.readFileSync('_site/404.html');
 
-        browserSync.addMiddleware("*", (req, res) => {
-          // Provides the 404 content without redirect.
-          res.writeHead(404, {"Content-Type": "text/html; charset=UTF-8"});
-          res.write(content_404);
-          res.end();
-        });
-      },
-    },
-    ui: false,
-    ghostMode: false
-  });
+				browserSync.addMiddleware("*", (req, res) => {
+					// Provides the 404 content without redirect.
+					res.writeHead(404, { "Content-Type": "text/html; charset=UTF-8" });
+					res.write(content_404);
+					res.end();
+				});
+			},
+		},
+		ui: false,
+		ghostMode: false
+	});
 
-  return {
-    // Control which files Eleventy will process
-    // e.g.: *.md, *.njk, *.html, *.liquid
-    templateFormats: [
-      "md",
-      "njk",
-      "html",
-      "liquid"
-    ],
+	return {
+		// Control which files Eleventy will process
+		// e.g.: *.md, *.njk, *.html, *.liquid
+		templateFormats: [
+			"md",
+			"njk",
+			"html",
+			"liquid"
+		],
 
-    // -----------------------------------------------------------------
-    // If your site deploys to a subdirectory, change `pathPrefix`.
-    // Don’t worry about leading and trailing slashes, we normalize these.
+		// -----------------------------------------------------------------
+		// If your site deploys to a subdirectory, change `pathPrefix`.
+		// Don’t worry about leading and trailing slashes, we normalize these.
 
-    // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
-    // This is only used for link URLs (it does not affect your file structure)
-    // Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/
+		// If you don’t have a subdirectory, use "" or "/" (they do the same thing)
+		// This is only used for link URLs (it does not affect your file structure)
+		// Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/
 
-    // You can also pass this in on the command line using `--pathprefix`
+		// You can also pass this in on the command line using `--pathprefix`
 
-    // Optional (default is shown)
-    pathPrefix: "/",
-    // -----------------------------------------------------------------
+		// Optional (default is shown)
+		pathPrefix: "/",
+		// -----------------------------------------------------------------
 
-    // Pre-process *.md files with: (default: `liquid`)
-    markdownTemplateEngine: "njk",
+		// Pre-process *.md files with: (default: `liquid`)
+		markdownTemplateEngine: "njk",
 
-    // Pre-process *.html files with: (default: `liquid`)
-    htmlTemplateEngine: "njk",
+		// Pre-process *.html files with: (default: `liquid`)
+		htmlTemplateEngine: "njk",
 
-    // Opt-out of pre-processing global data JSON files: (default: `liquid`)
-    dataTemplateEngine: false,
+		// Opt-out of pre-processing global data JSON files: (default: `liquid`)
+		dataTemplateEngine: false,
 
-    // These are all optional (defaults are shown):
-    dir: {
-      input: ".",
-      includes: "_includes",
-      data: "_data",
-      output: "_site"
-    }
-  };
+		// These are all optional (defaults are shown):
+		dir: {
+			input: ".",
+			includes: "_includes",
+			data: "_data",
+			output: "_site"
+		}
+	};
 };
 
 
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 69325d6..2a0bbfa 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -1,38 +1,37 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ title or metadata.title }}</title>
-    <meta name="description" content="{{ description or metadata.description }}">
-    <link rel="stylesheet" href="{{ '/css/index.css' | url }}">
-    <link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}">
-    <link
-    rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
-    />
-    <link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
-    <link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">
-    <link rel="icon" href="/img/favicon.ico"/>
-  </head>
-  <body>
-    <header>
-      <h1 class="home"><a href="{{ '/' | url }}">{{ metadata.title }}</a></h1>
 
-      {#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
-      
-    </header>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>{{ title or metadata.title }}</title>
+	<meta name="description" content="{{ description or metadata.description }}">
+	<link rel="stylesheet" href="{{ '/css/index.css' | url }}">
+	<link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}">
+	<link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml"
+		title="{{ metadata.title }}">
+	<link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json"
+		title="{{ metadata.title }}">
+	<link rel="icon" href="/img/favicon.ico" />
+</head>
 
-    <main{% if templateClass %} class="{{ templateClass }}"{% endif %}>
-      {{ content | safe }}
-    </main>
+<body>
+	<header>
+		<h1 class="home"><a href="{{ '/' | url }}">{{ metadata.title }}</a></h1>
+		{#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
+	</header>
 
-  <footer><ul class="nav">
-    {%- for entry in collections.all | eleventyNavigation %}
-      <li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}"><a href="{{ entry.url | url }}">{{ entry.title }}</a></li>
-    {%- endfor %}
-    </ul></footer>
+	<main{% if templateClass %} class="{{ templateClass }}" {% endif %}>
+		{{ content | safe }}
+	</main>
 
-     
-  </body>
-</html>
+	<nav>
+		<ul class="nav">
+			{%- for entry in collections.all | eleventyNavigation %}
+			<li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}"><a
+					href="{{ entry.url | url }}">{{ entry.title }}</a></li>
+			{%- endfor %}
+		</ul>
+	</nav>
+</body>
+</html>
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index 0fb1467..3905c5b 100644
--- a/css/index.css
+++ b/css/index.css
@@ -17,24 +17,34 @@
 }
 
 header {
-  height: fit-content;
+	height: fit-content;
 }
 
 body {
-  display: grid;
-  text-align: justify;
-  grid-template-rows: auto auto auto;
-  grid-template-columns: 25% 50% 25%;
-  grid-template-areas: 
-  "left content right";
+	display: grid;
+	text-align: justify;
+	grid-template-rows: auto;
+	grid-template-columns: 25% 50% 25%;
+	grid-template-areas:
+		"left content right";
 	padding: 0;
 	margin: 0;
-  font-family: -apple-system, system-ui, sans-serif;
+	font-family: -apple-system, system-ui, sans-serif;
 	color: var(--text);
 	min-height: 100vh;
 	background-image: linear-gradient(116deg, rgba(232, 232, 232, 0.03) 0%, rgba(232, 232, 232, 0.03) 10%, rgba(14, 14, 14, 0.03) 10%, rgba(14, 14, 14, 0.03) 66%, rgba(232, 232, 232, 0.03) 66%, rgba(232, 232, 232, 0.03) 72%, rgba(44, 44, 44, 0.03) 72%, rgba(44, 44, 44, 0.03) 81%, rgba(51, 51, 51, 0.03) 81%, rgba(51, 51, 51, 0.03) 100%), linear-gradient(109deg, rgba(155, 155, 155, 0.03) 0%, rgba(155, 155, 155, 0.03) 23%, rgba(30, 30, 30, 0.03) 23%, rgba(30, 30, 30, 0.03) 63%, rgba(124, 124, 124, 0.03) 63%, rgba(124, 124, 124, 0.03) 73%, rgba(195, 195, 195, 0.03) 73%, rgba(195, 195, 195, 0.03) 84%, rgba(187, 187, 187, 0.03) 84%, rgba(187, 187, 187, 0.03) 100%), linear-gradient(79deg, rgba(254, 254, 254, 0.03) 0%, rgba(254, 254, 254, 0.03) 27%, rgba(180, 180, 180, 0.03) 27%, rgba(180, 180, 180, 0.03) 33%, rgba(167, 167, 167, 0.03) 33%, rgba(167, 167, 167, 0.03) 34%, rgba(68, 68, 68, 0.03) 34%, rgba(68, 68, 68, 0.03) 63%, rgba(171, 171, 171, 0.03) 63%, rgba(171, 171, 171, 0.03) 100%), linear-gradient(109deg, rgba(71, 71, 71, 0.03) 0%, rgba(71, 71, 71, 0.03) 3%, rgba(97, 97, 97, 0.03) 3%, rgba(97, 97, 97, 0.03) 40%, rgba(40, 40, 40, 0.03) 40%, rgba(40, 40, 40, 0.03) 55%, rgba(5, 5, 5, 0.03) 55%, rgba(5, 5, 5, 0.03) 73%, rgba(242, 242, 242, 0.03) 73%, rgba(242, 242, 242, 0.03) 100%), linear-gradient(271deg, rgba(70, 70, 70, 0.03) 0%, rgba(70, 70, 70, 0.03) 11%, rgba(178, 178, 178, 0.03) 11%, rgba(178, 178, 178, 0.03) 23%, rgba(28, 28, 28, 0.03) 23%, rgba(28, 28, 28, 0.03) 72%, rgba(152, 152, 152, 0.03) 72%, rgba(152, 152, 152, 0.03) 86%, rgba(43, 43, 43, 0.03) 86%, rgba(43, 43, 43, 0.03) 100%), linear-gradient(90deg, rgb(27, 27, 27), rgb(1, 1, 1));
-	background-size: 100% 100%; 
-  
+	background-size: 100% 100%;
+
+}
+
+@media (max-width: 1024px) {
+	body {
+		grid-template-rows: auto auto auto;
+		grid-template-columns: 1fr;
+		grid-template-areas: "left""right""content";
+	}
+
+
 }
 
 
@@ -57,7 +67,7 @@ a[href]:visited {
 
 main {
 	padding: 1rem;
-  grid-area: content
+	grid-area: content
 }
 
 main :first-child {
@@ -108,7 +118,7 @@ pre {
 	padding: 1em;
 	margin: .5em 0;
 	overflow-y: auto;
-	
+
 }
 
 /*background-color: var(--code-bg)*/
@@ -310,30 +320,37 @@ a[href].direct-link:focus:visited,
 	color: #aaa;
 }
 
-h1,h2,h3,h4,h5,h6 {
-  text-align: center;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	text-align: center;
 }
-div.time-and-tags{
-  align-content: center;
-  grid-template-rows: auto ;
-  grid-template-columns: auto;
-  grid-template-areas: 
-  "content";
+
+div.time-and-tags {
+	align-content: center;
+	grid-template-rows: auto;
+	grid-template-columns: auto;
+	grid-template-areas:
+		"content";
 }
 
 .container {
-  width: 100%;
-  height: fit-content;
-  display: flex;
-  justify-content: center;
+	width: 100%;
+	height: fit-content;
+	display: flex;
+	justify-content: center;
 }
 
 .tandt {
-  width: fit-content;
-  height: fit-content;
+	width: fit-content;
+	height: fit-content;
 }
+
 img {
-  width: 100%;
-  margin: auto;
-  display: block;
+	width: 100%;
+	margin: auto;
+	display: block;
 }
\ No newline at end of file

From 58263b67a6ccb936087bf9e685220b9ceb452a23 Mon Sep 17 00:00:00 2001
From: Starbeamrainbowlabs <sbrl@starbeamrainbowlabs.com>
Date: Tue, 6 Sep 2022 18:49:56 +0100
Subject: [PATCH 2/2] css: make mobile friendly

---
 _includes/postslist.njk | 25 ++++++++++++++-----------
 css/index.css           | 36 ++++++++++++++++++++++++------------
 2 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/_includes/postslist.njk b/_includes/postslist.njk
index d220513..21920e7 100644
--- a/_includes/postslist.njk
+++ b/_includes/postslist.njk
@@ -1,12 +1,15 @@
 <ol reversed class="postlist" style="counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }}">
-{% for post in postslist | reverse %}
-  <li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
-    <a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
-    <time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
-    {% for tag in post.data.tags | filterTagList %}
-      {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
-      <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
-    {% endfor %}
-  </li>
-{% endfor %}
-</ol>
+	{% for post in postslist | reverse %}
+	<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
+		<a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else
+			%}<code>{{ post.url }}</code>{% endif %}</a>
+		<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
+		{% for tag in post.data.tags | filterTagList %}
+		<span class="post-tags">
+			{% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
+			<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
+			{% endfor %}
+		</span>
+	</li>
+	{% endfor %}
+</ol>
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index 3905c5b..e46ed96 100644
--- a/css/index.css
+++ b/css/index.css
@@ -24,7 +24,7 @@ body {
 	display: grid;
 	text-align: justify;
 	grid-template-rows: auto;
-	grid-template-columns: 25% 50% 25%;
+	grid-template-columns: 25% 1fr 25%;
 	grid-template-areas:
 		"left content right";
 	padding: 0;
@@ -39,14 +39,29 @@ body {
 
 @media (max-width: 1024px) {
 	body {
-		grid-template-rows: auto auto auto;
+		grid-template-rows: auto auto 1fr;
 		grid-template-columns: 1fr;
 		grid-template-areas: "left""right""content";
 	}
-
-
+	
+	.postlist .postlist-item {
+		display: grid;
+		grid-template-rows: auto 1fr;
+		grid-template-columns: auto auto 1fr;
+		grid-template-areas: "number title title" "time time tags";
+	}
+	
+	.postlist-item:before { grid-area: number; }
+	.postlist-link { grid-area: title; }
+	.postlist-date { grid-area: time; }
+	.post-tags { grid-area: tags; text-align: left; }
+	
 }
 
+nav {
+	grid-area: right;
+	justify-self: center;
+}
 
 p:last-child {
 	margin-bottom: 0;
@@ -67,7 +82,8 @@ a[href]:visited {
 
 main {
 	padding: 1rem;
-	grid-area: content
+	grid-area: content;
+	justify-self: center;
 }
 
 main :first-child {
@@ -75,13 +91,9 @@ main :first-child {
 }
 
 header {
-	color: var(--text)
-}
-
-header:after {
-	content: "";
-	display: table;
-	clear: both;
+	grid-area: left;
+	color: var(--text);
+	justify-self: center;
 }
 
 table {