Merge pull request 'MobileOverhaul' (#1 ) from MobileOverhaul into main

Reviewed-on: #1
Nav fixes for desktop site
2023-08-06 21:14:10 -04:00 · 2023-08-06 20:11:46 -05:00 · 2023-08-06 19:52:01 -05:00 · 2023-08-06 19:26:43 -05:00 · 2023-08-06 19:22:12 -05:00 · 2023-08-01 16:36:56 -05:00
25 changed files with 482 additions and 206 deletions
--- a/4
+++ b/4
@ -1,6 +1,6 @@
-MIT License
+GPL3 License

-Copyright (c) 2017–2023 Zach Leatherman @zachleat
+Copyright (c) 2023 Nathan Upchurch

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/_data/metadata.js
+++ b/_data/metadata.js
@ -10,7 +10,7 @@ module.exports = {
 		url: "https://nathanupchurch.com/me",
 		profilePic: "/img/CN20191025_301_Srt_SQUARE.jpg"
 	},
-	defaultPostImageURL: "/img/default_post_image/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif",
+	defaultPostImageURL: "/img/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif",
 	defaultPostImageAlt: "The default post image: a close picture of the dark green leaves of a plant.",
 	socialLinks: [
 		{
@ -26,6 +26,24 @@ module.exports = {
 			linkDisplay: "Mastodon",
 			iconURL: "/img/mastodon.svg"
 		},
+		{
+			title: "Email Me",
+			linkURL: "Mailto:blog@upchur.ch",
+			linkDisplay: "Email",
+			iconURL: "/img/envelope.svg"
+		},
+		{
+			title: "Matrix",
+			linkURL: "https://matrix.to/#/@nathanu:matrix.org",
+			linkDisplay: "Matrix",
+			iconURL: "/img/matrix-org.svg"
+		},
+		{
+			title: "BookWyrm",
+			linkURL: "https://ramblingreaders.org/user/NathanU",
+			linkDisplay: "BookWyrm",
+			iconURL: "/img/book.svg"
+		},
 		{
 			title: "Pixelfed",
 			linkURL: "https://pixelfed.social/@nathanu",
@ -44,18 +62,6 @@ module.exports = {
 			linkDisplay: "PeerTube",
 			iconURL: "/img/peertube.svg"
 		},
-		{
-			title: "Matrix",
-			linkURL: "https://matrix.to/#/@nathanu:matrix.org",
-			linkDisplay: "Matrix",
-			iconURL: "/img/matrix-org.svg"
-		},
-		{
-			title: "Email Me",
-			linkURL: "Mailto:blog@upchur.ch",
-			linkDisplay: "Email",
-			iconURL: "/img/envelope.svg"
-		},
 		{
 			title: "Keyoxide Identity Profile",
 			linkURL: "https://keyoxide.org/31E809FAEA1532AC91BBDCF1EC499D3513F69340",
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@ -11,13 +11,8 @@
 		<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">

 		<meta name="generator" content="{{ eleventy.generator }}">
-
 		{#- Bundle CSS #}
 		{%- css %}{% include "public/css/index.css" %}{% endcss %}
-		{# {%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %} #}
-
-		{#- Render the CSS bundle using Inlined CSS (for the fastest site performance in production) #}
-
 		{%- css %}{% include "public/css/webfonts/webfonts.css" %}{% endcss %}
 		{%- css %}{% include "public/css/dropcap.css" %}{% endcss %}
 		<style>{% getBundle "css" %}</style>
@ -66,9 +61,30 @@
 				<h2 class="visually-hidden">Top level navigation menu</h2>
 				<ul class="nav">
 				{%- for entry in collections.all | eleventyNavigation %}
-					<li class="nav-item" {% if entry.url == page.url %} data-currentpage="true"{% endif %}><a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a></li>
+					<a class="nav-item" href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}><li {% if entry.url == page.url %} data-currentpage="true"{% endif %}>{{ entry.title }}</li></a>
 				{%- endfor %}
-				<li class="nav-item subscribe"><a href="/feed/feed.xml"><img class="nav-icon" src="/img/RSS.svg">Subscribe</a></li>
+					<a class="nav-item" href="/feed/feed.xml">
+						<li subscribe">
+						<!-- RSS Logo -->
+							<svg class="nav-icon" viewBox="0 0 155 155" width="153.349" height="152.909" version="1.0" xmlns="http://www.w3.org/2000/svg">
+								<g transform="translate(-427.323 -373.814)">
+									<ellipse
+										style="opacity:1;fill-opacity:1;fill-rule:nonzero;"
+										transform="matrix(.86996 0 0 .86996 135.156 330.529)"
+										cx="360.357" cy="200.643" rx="24.643" ry="23.929"
+									/>
+									<path
+										style="fill-opacity:1;fill-rule:evenodd;"
+										d="m427.835 455.057-.073-30.273c64.706 3.375 100.619 49.673 101.5 101.94h-30.318c-.503-45.942-31.74-69.996-71.11-71.667z"
+									/>
+									<path
+										style="fill-opacity:1;fill-rule:evenodd;"
+										d="m428.201 404.571-.878-30.757C526.75 378.43 580 450.582 580.67 526.724l-31.197-.44c1.365-48.704-34.665-120.267-121.273-121.713Z"
+									/>
+								</g>
+							</svg>Subscribe
+						</li>
+					</a>
 				</ul>
 			</nav>
 		</header>
--- a/_includes/layouts/baseBareBones.njk
+++ b/_includes/layouts/baseBareBones.njk
@ -11,10 +11,6 @@

 		{#- Bundle CSS #}
 		{%- css %}{% include "public/css/index.css" %}{% endcss %}
-		{# {%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %} #}
-
-		{#- Render the CSS bundle using Inlined CSS (for the fastest site performance in production) #}
-
 		{%- css %}{% include "public/css/webfonts/webfonts.css" %}{% endcss %}
 		{%- css %}{% include "public/css/dropcap.css" %}{% endcss %}
 		<style>{% getBundle "css" %}</style>
--- a/_includes/layouts/post.njk
+++ b/_includes/layouts/post.njk
@ -2,8 +2,7 @@
 layout: layouts/base.njk
 ---
 {# Only include the syntax highlighter CSS on blog posts #}
-{%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %}
-{%- css %}{% include "public/css/prism-diff.css" %}{%- endcss %}
+{%- css %}{% include "public/css/code.css" %}{% endcss %}
 <h1>{{ title }}</h1>

 <ul class="post-metadata">
--- a/content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md
+++ b/content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md
@ -76,7 +76,7 @@ function setup() {
 }
 ```
 Now if we click the play icon at the top left of the Processing IDE, a browser window should open and load a page showing our sketch so far. We ought to see a viewport entirely covered with one large black canvas.
-[![The LibreWolf web browser opened to localhost. The viewport is entirely black.](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-canvas.webp)](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-canvas.webp)
+[![The LibreWolf web browser opened to localhost. The viewport is entirely black.](../../img/circle-grid-canvas.webp)](../../img/circle-grid-canvas.webp)

 ## Random results
 To meet conditions two and three of our goal, we'll need a way to get random numbers. Let's write a quick function inside `setup()` to provide us with random integers:
@ -214,7 +214,7 @@ We can check that everything is working by calling our new function at the botto
 ``` javascript
 generateCircleLine(10, 10, 20, 0, 5, 10, 10, 'x', [[255,255,255]]);
 ```
-[![The LibreWolf web browser opened to localhost. The viewport is black, with a single row of ten white circles in varying sizes in the top-left corner.](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-line.webp)](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-line.webp)
+[![The LibreWolf web browser opened to localhost. The viewport is black, with a single row of ten white circles in varying sizes in the top-left corner.](../../img/circle-grid-line.webp)](../../img/circle-grid-line.webp)
 And look at that! We have a line!

 ## Repeating rows
@ -287,7 +287,7 @@ generateCircleGrid(
 );
 ```
 ...to see the result:
-[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue.](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp)](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp)
+[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue.](../../img/circle-grid-grid.webp)](../../img/circle-grid-grid.webp)

 ## SVG export
 Looking back on our goals, we've accomplished all but one: SVG export. Happily, there's [a library](https://github.com/zenozeng/p5.js-svg) that makes this trivial. All we need to do is link the script in the `<head>` of index.html,
@ -447,5 +447,5 @@ function draw() {

 ## Et voilà
 And we're done! Now you can tweak the parameters and make grids with all sorts of colors and size variations, and even export and edit them in Inkscape!
-[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue. There is a button reading "Save SVG" in the bottom right corner.](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-complete.webp)](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-complete.webp)
+[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue. There is a button reading "Save SVG" in the bottom right corner.](../../img/circle-grid-complete.webp)](../../img/circle-grid-complete.webp)
 If you'd like to make this project even better, maybe consider implementing a GUI to adjust your grid paramaters, or adding some interactivity.
--- a/content/blog/floss-and-smes.md
+++ b/content/blog/floss-and-smes.md
@ -6,7 +6,7 @@ tags:
  - FOSS/FLOSS
  - Digital Privacy
 synopsis: Tech giants aren't meeting the needs of SMEs and nonprofits. Combined with digital privacy concerns, a perfect storm is brewing for increased adoption of free and open source software for these organizations.
-imageURL: /img/posts/floss-and-smes/pedro-lastra-Nyvq2juw4_o-unsplash.webp
+imageURL: /img/pedro-lastra-Nyvq2juw4_o-unsplash.webp
 imageAlt: A stylized illustration of a terminal prompt.
 ---
 If you're a cottage industry solopreneur, a cricut hobbyist, or a makerspace regular, you've probably heard of Inkscape. Often dismissed by design professionals as a poor substitute for fully fleshed out design tools or simply "not industry standard," this 19 year old vector graphics powerhouse allows artists, designers, scrapbookers and makers alike to create high quality graphics and illustrations that can be used anywhere, from the browser to printed collateral and laser-etched goods. Inkscape, like many other free and open source software (FOSS) projects, has been taking great strides in recent years to match, if not surpass, commercial alternatives in terms of features, output, and usability. FOSS users have long been privy to a a world of software all but unknown to those who have never ventured from the comfort of Microsoft, Adobe, Alphabet, and Oracle, or the shimmering walled-garden of the Apple ecosystem. It hasn't always been easy, pretty, or even stable, but these days free and open source software projects are more organized, better funded, and more accountable than ever before, and people are starting to take notice.
--- a/content/blog/the-secrets-of-scrumptious-seitan.md
+++ b/content/blog/the-secrets-of-scrumptious-seitan.md
@ -8,10 +8,10 @@ tags:
  - Meat Alternatives
  - Chicago
  - Restaurants
-imageURL: /img/posts/seitan.webp
+imageURL: /img/seitan.webp
 imageAlt: Two wee logs of seitan wrapped tightly in cheesecloth and kitchen twine on a piece of foil next top a pair of kitchen tongs.
 ---
-[![Two wee logs of seitan wrapped tightly in cheesecloth and kitchen twine on a piece of foil next top a pair of kitchen tongs.](/img/posts/seitan.webp "Some homemade seitan, originally posted on [my pixelfed account](https://pixelfed.social/p/nathanu/395090346005279712).")](/img/posts/seitan.webp)
+[![Two wee logs of seitan wrapped tightly in cheesecloth and kitchen twine on a piece of foil next top a pair of kitchen tongs.](/img/seitan.webp "Some homemade seitan, originally posted on [my pixelfed account](https://pixelfed.social/p/nathanu/395090346005279712).")](/img/seitan.webp)


 Seitan: carnists tremble at the sight of it, and sadly, due to the difficulty in its culinary execution, so do many of my fellow leaf-loving, tofu-eating, [nooch](https://en.wikipedia.org/wiki/Nutritional_yeast)-sprinkling vegans. Little known in the west, seitan is a food comprised almost entirely of wheat gluten that was invented hundreds of years ago by Buddhist monks as a protein-rich meat substitute. While fundamentally a simple dough of wheat gluten and water, then steamed or simmered, seitan is notoriously tricky to get right. Even here in Chicago where there are a wealth of vegan restaurants, some of which have been operating for decades, there is a dearth of good seitan; too chewy, not chewy enough, spongy, and flavorless seitan is endemic to the western vegan foodservice canon. Now, I'm no expert, but I've certainly picked up a few tricks over the years, and I prefer my seitan to just about any restaurant here in Chicago, with a single exception, *but I'll spill that tea at the end*.
--- a/content/feed/feed.njk
+++ b/content/feed/feed.njk
@ -3,6 +3,7 @@
 permalink: /feed/feed.xml
 ---
 <?xml version="1.0" encoding="utf-8"?>
+<?xml-stylesheet href="../xsl/basic.xsl" type="text/xsl"?>
 <feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ metadata.language }}">
 	<title>{{ metadata.title }}</title>
 	<subtitle>{{ metadata.description }}</subtitle>
--- a/eleventy.config.js
+++ b/eleventy.config.js
@ -10,31 +10,14 @@ const pluginBundle = require("@11ty/eleventy-plugin-bundle");
 const pluginNavigation = require("@11ty/eleventy-navigation");
 const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");

-const pluginDrafts = require("./eleventy.config.drafts.js");
-const pluginImages = require("./eleventy.config.images.js");
-
 const figoptions = {
 	figcaption: true
 };

 module.exports = function(eleventyConfig) {
-	// Copy the contents of the `public` folder to the output folder
-	// For example, `./public/css/` ends up in `_site/css/`
-	eleventyConfig.addPassthroughCopy({
-		"./public/": "/",
-		"./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-okaidia.css"
-	});

-	// Run Eleventy when these files change:
-	// https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets
-
-	// Watch content images for the image pipeline.
 	eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}");

-	// App plugins
-	eleventyConfig.addPlugin(pluginDrafts);
-	eleventyConfig.addPlugin(pluginImages);
-
 	// Official plugins
 	eleventyConfig.addPlugin(pluginRss);
 	eleventyConfig.addPlugin(pluginSyntaxHighlight, {
@ -55,6 +38,11 @@ module.exports = function(eleventyConfig) {
 		return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
 	});

+	// Passthrough
+	eleventyConfig.addPassthroughCopy({ 'public/css/*': "/css/" });
+	eleventyConfig.addPassthroughCopy({ 'public/xsl/*': "/xsl/" });
+	eleventyConfig.addPassthroughCopy({ 'public/img/*': "/img/" });
+
 	// Get the first `n` elements of a collection.
 	eleventyConfig.addFilter("head", (array, n) => {
 		if(!Array.isArray(array) || array.length === 0) {
@ -92,24 +80,20 @@ module.exports = function(eleventyConfig) {
 				placement: "after",
 				class: "header-anchor",
 				symbol: "#",
-				ariaHidden: false,
-			}),
-			level: [1,2,3,4],
-			slugify: eleventyConfig.getFilter("slugify")
-		}).use(markdownItFootnote).use(mdfigcaption, figoptions);
-	});
-
-	// Features to make your build faster (when you need them)
+				ariaHidden: false,	// Features to make your build faster (when you need them)

 	// If your passthrough copy gets heavy and cumbersome, add this line
 	// to emulate the file copy on the dev server. Learn more:
 	// https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve

 	// eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
+			}),
+			level: [1,2,3,4],
+			slugify: eleventyConfig.getFilter("slugify")
+		}).use(markdownItFootnote).use(mdfigcaption, figoptions);
+	});

 	return {
-		// Control which files Eleventy will process
-		// e.g.: *.md, *.njk, *.html, *.liquid
 		templateFormats: [
 			"md",
 			"njk",
@ -117,30 +101,16 @@ module.exports = function(eleventyConfig) {
 			"liquid",
 		],

-		// Pre-process *.md files with: (default: `liquid`)
 		markdownTemplateEngine: "njk",

-		// Pre-process *.html files with: (default: `liquid`)
 		htmlTemplateEngine: "njk",

-		// These are all optional:
 		dir: {
 			input: "content",          // default: "."
 			includes: "../_includes",  // default: "_includes"
 			data: "../_data",          // default: "_data"
 			output: "_site"
 		},
-
-		// -----------------------------------------------------------------
-		// Optional items:
-		// -----------------------------------------------------------------
-
-		// If your site deploys to a subdirectory, change `pathPrefix`.
-		// Read more: https://www.11ty.dev/docs/config/#deploy-to-a-subdirectory-with-a-path-prefix
-
-		// When paired with the HTML <base> plugin https://www.11ty.dev/docs/plugins/html-base/
-		// it will transform any absolute URLs in your HTML to include this
-		// folder name and does **not** affect where things go in the output folder.
 		pathPrefix: "/",
 	};
 };
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
-	"name": "eleventy-base-blog",
+	"name": "nathanupchurch.com",
 	"version": "8.0.0",
-	"description": "A starter repository for a blog web site using the Eleventy site generator.",
+	"description": "The personal website and blog of Nathan Upchurch",
 	"scripts": {
 		"build": "npx @11ty/eleventy",
 		"build-ghpages": "npx @11ty/eleventy --pathprefix=/eleventy-base-blog/",
@ -12,25 +12,21 @@
 	},
 	"repository": {
 		"type": "git",
-		"url": "git://github.com/11ty/eleventy-base-blog.git"
+		"url": "git://upchur.ch/gitea/n_u/nathanupchurch.com.git"
 	},
 	"author": {
-		"name": "Zach Leatherman",
-		"email": "zachleatherman@gmail.com",
-		"url": "https://zachleat.com/"
+		"name": "Nathan Upchurch",
+		"email": "blog@upchur.ch",
+		"url": "https://nathanupchurch.com/"
 	},
-	"license": "MIT",
+	"license": "GPL3",
 	"engines": {
 		"node": ">=14"
 	},
-	"funding": {
-		"type": "opencollective",
-		"url": "https://opencollective.com/11ty"
-	},
 	"bugs": {
-		"url": "https://github.com/11ty/eleventy-base-blog/issues"
+		"url": "https://upchur.ch/gitea/n_u/nathanupchurch.com/issues"
 	},
-	"homepage": "https://github.com/11ty/eleventy-base-blog#readme",
+	"homepage": "https://upchur.ch/gitea/n_u/nathanupchurch.com",
 	"devDependencies": {
 		"@11ty/eleventy": "^2.0.1",
 		"@11ty/eleventy-img": "^3.1.0",
@ -39,7 +35,9 @@
 		"@11ty/eleventy-plugin-rss": "^1.2.0",
 		"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
 		"luxon": "^3.3.0",
-		"markdown-it-anchor": "^8.6.7"
+		"markdown-it-anchor": "^8.6.7",
+		"markdown-it-footnote": "^3.0.3",
+		"mdfigcaption": "^0.1.1"
 	},
 	"dependencies": {
 		"markdown-it-footnote": "^3.0.3",
--- a/public/css/code.css
+++ b/public/css/code.css
@ -0,0 +1,161 @@
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f8f8f2;
+	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: var(--font-family-monospace);
+	font-size: var(--font-n);
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: var(--single-gap);
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #272822;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #8292a2;
+}
+
+.token.punctuation {
+	color: #f8f8f2;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #f92672;
+}
+
+.token.boolean,
+.token.number {
+	color: #ae81ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #a6e22e;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+	color: #e6db74;
+}
+
+.token.keyword {
+	color: #66d9ef;
+}
+
+.token.regex,
+.token.important {
+	color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre[class*="language-diff-"] {
+	--eleventy-code-padding: 1.25em;
+	padding-left: var(--eleventy-code-padding);
+	padding-right: var(--eleventy-code-padding);
+	font-family: var(--font-family-monospace);
+	font-size: 1em;
+}
+.token.deleted {
+	background-color: hsl(0, 51%, 37%);
+	color: inherit;
+}
+.token.inserted {
+	background-color: hsl(126, 31%, 39%);
+	color: inherit;
+}
+
+/* Make the + and - characters unselectable for copy/paste */
+.token.prefix.unchanged,
+.token.prefix.inserted,
+.token.prefix.deleted {
+	-webkit-user-select: none;
+	user-select: none;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+.token.prefix.inserted,
+.token.prefix.deleted {
+	width: var(--eleventy-code-padding);
+	background-color: rgba(0,0,0,.2);
+}
+
+/* Optional: full-width background color */
+.token.inserted:not(.prefix),
+.token.deleted:not(.prefix) {
+	display: block;
+	margin-left: calc(-1 * var(--eleventy-code-padding));
+	margin-right: calc(-1 * var(--eleventy-code-padding));
+	text-decoration: none; /* override del, ins, mark defaults */
+	color: inherit; /* override del, ins, mark defaults */
+}
--- a/public/css/dropcap.css
+++ b/public/css/dropcap.css
@ -1,15 +1,21 @@
 main > p:not(.nodropcap):first-of-type:first-letter {
 	float: left;
-	font-size: 4rem;
+	font-size: 3.25rem;
 	font-weight: 300;
 	line-height: 60px;
 	padding: .5rem .5rem .5rem .5rem;
 	color: var(--contrast-color);
 	border: solid 2px var(--contrast-color);
-	font-family: 'Playfair Display';
+	font-family: var(--font-family-headline);
 	font-weight: 700;
 	margin-right: .25em;
 	border-radius: .2em;
 	border-top-left-radius: 0;
 	margin-bottom: -.2em;
 }
+
+@media(max-width: 556px) {
+	main > p:not(.nodropcap):first-of-type:first-letter {
+		font-size: 3rem;
+	}
+}
--- a/public/css/index.css
+++ b/public/css/index.css
@ -1,10 +1,11 @@
 /* Defaults */
 :root {
+	--font-family-headline: 'Playfair Display';
 	--font-family: Manrope;
 	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
 }

-/* Tokens */
+/* Design Tokens */
 :root {
 	/* Colors */
 	--color-gray-20: #e0e0e0;
@ -15,7 +16,7 @@
 	--background-color: #FAF5F5;

 	--text-color: var(--color-gray-90);
-	--text-color-link: var(--color-gray-90);
+	--text-color-link: var(--text-color);
 	--text-color-link-active: rgba(3,144,116,1);
 	--text-color-link-visited: var(--color-gray-90);

@ -31,8 +32,25 @@
 	--pill-radius: 5rem;
 	--card-radius: .3rem;

-	/* Time */
+	/* Spacing */
+	--single-gap: 1rem;
+	--double-gap: 2rem;
+
+	/* Animation Timing */
 	--transition-time: .3s;
+
+	/* Font Sizes */
+	--font-xxl: 3.75rem;
+	--font-xl: 2rem;
+	--font-l: 1.5rem;
+	--font-n: 1rem;
+	--font-s: .75rem;
+	--font-xs: .65rem;
+
+	/* Font Weights */
+	--weight-extraheavy: 700;
+	--weight-heavy: 500;
+	--weight-normal: 300;
 }

@media (prefers-color-scheme: dark) {
@ -52,6 +70,16 @@
 	}
 }

+@media(max-width: 556px) {
+	:root {
+		/* Font Sizes */
+		--font-xxl: 1.75rem;
+		--font-xl: 1rem;
+		--font-l: 1rem;
+		--font-n: .85rem;
+	}
+}
+
 /* Global stylesheet */
 * {
 	box-sizing: border-box;
@ -62,7 +90,7 @@ body {
 	padding: 0;
 	margin: 0 auto;
 	font-family: var(--font-family);
-	font-weight: 300;
+	font-weight: var(--weight-normal);
 	font-variant-Ligatures: normal;
 	color: var(--text-color);
 	background-color: var(--background-color);
@ -73,14 +101,10 @@ html {
 body {
 	max-width: 40em;
 }
-
 a {
-	text-decoration: wavy underline;
 	text-decoration-color: var(--contrast-color);
 	text-decoration-thickness: .1rem;
-	text-decoration-skip: none;
 	transition: all .5s;
-	font-weight: 700;
 }

 /* https://www.a11yproject.com/posts/how-to-hide-content/ */
@ -95,33 +119,31 @@ a {
 }

 h1 {
-	font-family: 'Playfair Display';
-	font-weight: 700;
-	font-size: 3.75rem;
+	font-family: var(--font-family-headline);
+	font-weight: var(--weight-extraheavy);
+	font-size: var(--font-xxl);
 	font-style: normal;
 	line-height: 4rem;
 	padding-top: 3rem;
 	margin-bottom: 0;
 }

-@media(max-width: 556px) {
-	h1 {
-		font-size: 3rem;
-		padding-top: 0;
-	}
+h3 {
+	font-size: var(--font-l);
+	line-height: 1.25;
 }

 p:last-child {
 	margin-bottom: 0;
 }
 p, li {
-	line-height: 1.75;
-	font-size: 14pt;
+	line-height: 1.5;
+	font-size: var(--font-n);
 }

 main > p > img, main > p > a > img {
 	width: 100%;
-	padding-top: 2rem;
+	padding-top: var(--double-gap);
 }

 figure {
@ -138,7 +160,7 @@ figure > a > img {

 figcaption {
 	text-align: center;
-	padding-top: 1em;
+	padding-top: var(--single-gap);
 }

 .page-block {
@ -158,13 +180,13 @@ a[href]:active {
 }

 main {
-	padding: 1rem;
+	padding: var(--single-gap);
 }

 main h2 {
-	font-weight: 700;
-	font-size: 2em;
-	margin-top: 2em;
+	font-weight: var(--weight-extraheavy);
+	font-size: 2rem;
+	margin-top: var(--double-gap);
 }

 main :first-child {
@ -179,7 +201,7 @@ header {
 	list-style: none;
 	border-top: 1px solid var(--color-gray-20);
 	padding: 1em 0;
-	margin-top: 2rem;
+	margin-top: var(--double-gap);
 }

 table {
@ -221,15 +243,9 @@ header {
 	align-items: end;
 	padding: 1em;
 }
-@media(max-width: 556px) {
-	header {
-		padding: 1rem .5rem 1rem .5rem;
-	}
-}
-
 .home-link {
-	font-size: 1em; /* 16px /16 */
-	font-weight: 700;
+	font-size: var(--font-n); /* 16px /16 */
+	font-weight: var(--weight-extraheavy);
 	margin-right: 2em;
 	display: flex;
 	align-items: end;
@ -247,61 +263,65 @@ header {
 	margin: 0;
 	list-style: none;
 }
+nav ul {
+	display: flex;
+	align-items: end;
+	justify-content: space-between;
+	width: 20rem;
+}
 .nav-icon {
-	max-width: .5rem;
-	margin-right: .5rem;
+	width: var(--single-gap);
+	height: .8rem;
+	margin-right: .25rem;
+	fill: var(--color-gray-90);
+	padding-bottom: .3rem;
+	transition: all .5s;
 }
 .nav-item {
 	display: inline-block;
-	margin-right: 2em;
+	text-decoration: none;
+}
+.nav-item li {
+	display: flex;
+	align-items: end;
+	height: 2.8rem;
+	margin-right: .5em;
 	margin-bottom: 0;
 	text-transform: uppercase;
-	letter-spacing: .2rem;
-	font-size: .6rem;
-	font-weight: 500;
-	background-color: var(--nav-pill-background-color-inactive);
-	padding: .55em .85em .55em 1.2em;
-	border-radius: .75em;
-	color: var(--nav-pill-text-color);
+	letter-spacing: .15rem;
+	font-size: var(--font-xs);
+	font-weight: var(--weight-heavy);
+	color: var(--color-gray-90);
+	border-top: 1px solid var(--color-gray-90);
 	transition: all .5s;
 }
+.nav-item li:hover {
+	border-top: 20px solid var(--contrast-color);
+}
 .subscribe:hover {
-	background-color: rgba(225,90,0,1);
-	color: var(--nav-pill-text-color);
+	color: var(--color-gray-90);
 }
 .nav-item a[href]:visited {
-	color: var(--nav-pill-text-color-link-visited);
+	color: var(--color-gray-90);
 }
 .nav-item a[href]:hover {
 	text-decoration: none;
-	color: var(--nav-pill-text-color);
+	color: var(--color-gray-90);
 }
 .nav-item a[href]:not(:hover) {
 	text-decoration: none;
-	color: var(--nav-pill-text-color);
+	color: var(--color-gray-90);
 }
 .nav-item[data-currentpage="true"] {
-	background-color: var(--nav-pill-background-color-active);
 }

 .nav a[href][aria-current="page"] {
-	background-color: var(--nav-pill-background-color-active);
-	color: var(--nav-pill-text-color);
-}
-
-@media(max-width: 556px) {
-	.nav {
-		flex-flow: row wrap;
-	}
-	.nav-item {
-		margin-right: 1rem;
-		margin-bottom: .5rem;
-	}
+	color: var(--color-gray-90);
 }

 /* Posts list */
 .postlist h2 {
-	margin-bottom: 2rem;
+	margin-bottom: var(--double-gap);
 }
 .postlist-item-container {
 	display: flex;
@ -315,78 +335,49 @@ header {
 	margin-bottom: 1em;
 	width: 100%;
 	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-	padding: 1rem 1.1rem 1rem 1.1rem;
+	padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
 	border-radius: var(--card-radius);
 	background-color: white;
 }

 .post-image-container {
 	border-radius: var(--card-radius);
-	margin-right: 1rem;
+	margin-right: var(--single-gap);
 	overflow: hidden;
-	height: 10em;
+	max-height: 15rem;
 }
 .postlist-date,
 .postlist-item:before {
-	font-size: 0.8125em; /* 13px /16 */
+	font-size: var(--font-s); /* 13px /16 */
 	color: var(--color-gray-90);
 }
 .postlist-date {
 	word-spacing: -0.5px;
 }
 .postlist-link {
-	font-size: 1.1875em; /* 19px /16 */
-	font-weight: 700;
+	font-size: var(--font-xl); /* 19px /16 */
+	font-weight: var(--weight-extraheavy);
 	padding-right: .5em;
 	text-decoration: none;
 }
 .postlist-link h3 {
+		font-size: var(--font-l);
 		margin-bottom: 0;
 }
 .postlist-item-active .postlist-link {
-	font-weight: bold;
+	font-weight: var(--weight-extraheavy);
 }
 .post-copy {
 	display: flex;
 	flex-flow: column wrap;
 }
 .post-image {
-	width: 10em;
-	height: 10em;
+	width: 15rem;
+	height: 15rem;
 	object-fit: cover;
 	object-position: 50% 50%;
 }

-@media(max-width: 556px) {
-	.postlist {
-		padding-top: 0;
-	}
-	.postlist-item {
-		flex-flow: column wrap;
-	}
-	.postlist-link {
-		padding: 0;
-	}
-	.post-copy a h3 {
-		margin-top: .5em;
-	}
-	.post-image {
-		width: 100%;
-		height: auto;
-	}
-	.post-image-container {
-		margin-right: 0;
-		height: 10em;
-		min-width: 100%;
-	}
-}
-
-@media (prefers-color-scheme: dark) {
-	.postlist-item {
-		background-color: var(--card-color);
-	}
-}
-
 /* Tags */
 .post-tag, a.post-tag, .taglist li a {
 	display: inline-flex;
@ -419,12 +410,12 @@ a.post-tag:hover {
 	margin: 0em .5em 1.25em 0em;
 }
 .taglist li a {
-	font-size: 1.25rem;
+	font-size: var(--font-l);
 	text-decoration-color: var(--contrast-color);
 	text-decoration-thickness: .1rem;
 	text-decoration-skip: none;
 	transition: all .5s;
-	font-weight: 700;
+	font-weight: var(--weight-extraheavy);
 	padding: .4rem .8rem .4rem .8rem;
 }
 .postlist-item > .post-tag {
@ -444,25 +435,19 @@ a.post-tag:hover {
 	gap: .5em;
 	list-style: none;
 	padding: 0 0 0 .4em;
-	font-size: .8em;
+	font-size: var(--font-s);
 	margin-bottom: 5em;
 }
 .post-metadata time {
 	margin-right: .5em;
-	font-size: 1em;
-}
-
-@media(max-width: 556px) {
-	.post-metadata {
-		margin-bottom: 1em;
-	}
+	font-size: var(--font-n);
 }

 /* Direct Links / Markdown Headers */
-.header-anchor {
+a.header-anchor {
 	text-decoration: none;
 	font-style: normal;
-	font-size: 1em;
+	/* font-size: var(--font-n); */
 	margin-left: .1em;
 }
 a[href].header-anchor,
@ -479,5 +464,91 @@ a[href].header-anchor:focus,
 }

 h2 + .header-anchor {
-	font-size: 1.5em;
+	font-size: var(--font-l);
+}
+
+@media (prefers-color-scheme: dark) {
+	.postlist-item {
+		background-color: var(--card-color);
+	}
+}
+
+/* Mobile Styles */
+@media(max-width: 556px) {
+	body {
+		padding: 0rem 1.25rem 0rem 1.25rem;
+	}
+	figcaption {
+		font-size: var(--font-n);
+	}
+	h1 {
+		font-size: var(--font-xxl);
+		padding-top: 0;
+		line-height: 2rem;
+	}
+	h2, .postlist h2, main h2 {
+		font-size: var(--font-xl);
+		margin-bottom: var(--single-gap);
+	}
+	h3, .post-copy a h3 {
+		font-size: 1rem;
+	}
+	.nav-item li {
+		height: 2rem;
+	}
+	nav ul {
+		display: flex;
+		align-items: end;
+		justify-content: auto;
+		width: auto;
+	}
+	.post-copy a h3 {
+		margin-top: .5em;
+	}
+	.postlist {
+		padding-top: 0;
+	}
+	.postlist-item {
+		flex-flow: column wrap;
+	}
+	.postlist-link {
+		padding: 0;
+	}
+	.post-image {
+		width: 100%;
+		height: auto;
+	}
+	.post-image-container {
+		margin-right: 0;
+		height: 10em;
+		min-width: 100%;
+	}
+	.post-metadata {
+		margin-bottom: var(--single-gap);
+	}
+	header {
+		padding: 0rem .5rem var(--single-gap) .5rem;
+		margin-bottom: var(--single-gap);
+	}
+	.home-link {
+		max-width: 1rem;
+		margin-top: var(--single-gap);
+	}
+	.nav {
+		flex-flow: row wrap;
+	}
+	.nav-item {
+		margin-right: .5rem;
+	}
+	p, p.nodropcap.page-block, .post-copy p {
+		font-size: var(--font-n);
+		line-height: 1.25rem;
+		margin-top: var(--single-gap);
+	}
+	.post-metadata time, time.postlist-date {
+		font-size: var(--font-s);
+	}
+	.post-tag, a.post-tag, .taglist li a {
+		font-size: var(--font-xs);
+	}
 }
--- a/public/css/prism-diff.css
+++ b/public/css/prism-diff.css
@ -6,6 +6,8 @@ pre[class*="language-diff-"] {
 	--eleventy-code-padding: 1.25em;
 	padding-left: var(--eleventy-code-padding);
 	padding-right: var(--eleventy-code-padding);
+	font-family: monospace;
+	font-size: var(--font-n);
 }
 .token.deleted {
 	background-color: hsl(0, 51%, 37%);
--- a/public/img/book.svg
+++ b/public/img/book.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="1536"
+   height="1536"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <path
+     d="m 1502.3948,448.83333 c 22.9167,33 29.3333,76.08334 16.5,118.25 L 1266.8115,1397.5833 C 1243.8948,1475.5 1163.2281,1536 1084.3948,1536 H 238.31146 c -93.5,0 -193.416669,-74.25 -227.333336,-169.5833 -14.6666664,-41.25 -14.6666664,-81.5834 -1.8333331,-116.4167 1.8333331,-18.3333 5.5000001,-36.6667 6.4166671,-58.6667 0.916666,-14.6666 -7.3333338,-26.5833 -5.5,-37.5833 3.666666,-22 22.916666,-37.5833 37.583333,-62.3333 27.5,-45.8334 58.666669,-120.08337 68.749999,-167.75003 4.58333,-17.41667 -4.58333,-37.58334 0,-53.16667 4.58333,-17.41667 22,-30.25 31.16667,-46.75 24.75,-42.16667 56.83333,-123.75 61.41666,-166.83333 1.83334,-19.25 -7.33333,-40.33334 -1.83333,-55 6.41667,-21.08334 26.58333,-30.25 40.33333,-48.58334 22,-30.25 58.66667,-117.33333 64.16667,-165.91666 1.83333,-15.58334 -7.33333,-31.16667 -4.58333,-47.66667 3.66666,-17.41667 25.66666,-35.75 40.33333,-56.83333 38.5,-56.83334 45.83333,-182.41667 162.25,-149.41667 l -0.91667,2.75 c 15.58334,-3.66667 31.16667,-8.25 46.75,-8.25 h 697.58338 c 43.0833,0 81.5833,19.25 104.5,51.33333 23.8333,33 29.3333,76.08334 16.5,119.16667 L 1122.8948,1129 c -43.0833,141.1667 -66.9167,172.3333 -183.33334,172.3333 H 142.97812 c -11.91666,0 -26.58333,2.75 -34.83333,13.75 -7.33333,11 -8.249999,19.25 -0.91667,39.4167 18.33334,53.1667 81.58334,64.1667 132,64.1667 h 846.08338 c 33.9166,0 73.3333,-19.25 83.4166,-52.25 l 275,-904.75003 c 5.5,-17.41667 5.5,-35.75 4.5834,-52.25 21.0833,8.25 40.3333,21.08333 54.0833,39.41666 z m -975.33334,1.83334 c -5.5,16.5 3.66666,29.33333 20.16666,29.33333 h 557.33338 c 15.5833,0 33,-12.83333 38.5,-29.33333 L 1162.3115,392 c 5.5,-16.5 -3.6667,-29.33333 -20.1667,-29.33333 H 584.81146 c -15.58334,0 -33,12.83333 -38.5,29.33333 z m -76.08334,234.66666 c -5.5,16.5 3.66667,29.33334 20.16667,29.33334 h 557.33331 c 15.5834,0 33,-12.83334 38.5,-29.33334 l 19.25,-58.66666 c 5.5,-16.5 -3.6666,-29.33334 -20.1666,-29.33334 H 508.72812 c -15.58333,0 -33,12.83334 -38.5,29.33334 z"
+     id="path1"
+     style="stroke-width:0.916667;fill:#faf5f5;fill-opacity:1" />
+</svg>
--- a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-canvas.webp
+++ b/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-canvas.webp
--- a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-complete.webp
+++ b/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-complete.webp
--- a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp
+++ b/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp
--- a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-line.webp
+++ b/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-line.webp
--- a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-post-image.webp
+++ b/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-post-image.webp
--- a/public/img/posts/floss-and-smes/pedro-lastra-Nyvq2juw4_o-unsplash.webp
+++ b/public/img/posts/floss-and-smes/pedro-lastra-Nyvq2juw4_o-unsplash.webp
--- a/public/img/posts/seitan.webp
+++ b/public/img/posts/seitan.webp
--- a/public/img/default_post_image/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif
+++ b/public/img/default_post_image/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif
--- a/public/xsl/basic.xsl
+++ b/public/xsl/basic.xsl
@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xsl:stylesheet version="3.0"
+                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                xmlns:atom="http://www.w3.org/2005/Atom">
+  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
+  <xsl:template match="/">
+  <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+    <head>
+      <title>
+        RSS Feed | <xsl:value-of select="/atom:feed/atom:title"/>
+      </title>
+      <link rel="stylesheet" href="../css/index.css"/>
+    </head>
+    <body>
+      <p>
+        This is an RSS feed. Subscribe by copying the URL from the address bar into your newsreader. Don't have a newsreader? Visit
+        <a href="https://aboutfeeds.com">About Feeds</a>
+        to learn more and get started. It’s free.
+      </p>
+      <h1>RSS Feed Preview</h1>
+      <h2>Recent blog posts</h2>
+      <xsl:for-each select="/atom:feed/atom:entry">
+        <h3><a>
+          <xsl:attribute name="href">
+            <xsl:value-of select="atom:link/@href"/>
+          </xsl:attribute>
+          <xsl:value-of select="atom:title"/>
+        </a></h3>
+        Last updated:
+        <xsl:value-of select="substring(atom:updated, 0, 11)" />
+      </xsl:for-each>
+    </body>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>
Author	SHA1	Message	Date
Nathan Upchurch	bba64672c3	Merge pull request 'MobileOverhaul' (#1 ) from MobileOverhaul into main Reviewed-on: #1	2023-08-06 21:14:10 -04:00
N-Upchurch	e7e7f298d5	Nav fixes for desktop site	2023-08-06 20:11:46 -05:00
N-Upchurch	233e3e6e43	change how passthrough works	2023-08-06 19:52:01 -05:00
N-Upchurch	2fff7685e8	/me update	2023-08-06 19:26:43 -05:00
N-Upchurch	623bebce5e	Add bookwyrm to /me	2023-08-06 19:22:12 -05:00
N-Upchurch	57673b33fa	Mobile rework	2023-08-01 16:36:56 -05:00