diff --git a/_includes/layouts/baseBareBones.njk b/_includes/layouts/baseBareBones.njk
index 9f2b50e..6207d40 100644
--- 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 %}
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
index 9d5aa66..6840566 100644
--- 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 %}
{{ title }}
diff --git 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
index 35708f3..69c72f2 100644
--- 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.
-[](../../img/posts/build-an-svg-circle-grid-with-p5js/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]]);
```
-[](../../img/posts/build-an-svg-circle-grid-with-p5js/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:
-[](../../img/posts/build-an-svg-circle-grid-with-p5js/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 `` 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!
-[](../../img/posts/build-an-svg-circle-grid-with-p5js/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.
diff --git a/content/blog/floss-and-smes.md b/content/blog/floss-and-smes.md
index f34ce60..f2e883e 100644
--- 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.
diff --git a/content/blog/the-secrets-of-scrumptious-seitan.md b/content/blog/the-secrets-of-scrumptious-seitan.md
index d375621..a1f0dc1 100644
--- 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.
---
-[](/img/posts/seitan.webp)
+[](/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*.
diff --git a/content/feed/feed.njk b/content/feed/feed.njk
index 4912d24..84c8e84 100755
--- a/content/feed/feed.njk
+++ b/content/feed/feed.njk
@@ -3,6 +3,7 @@
permalink: /feed/feed.xml
---
+
{{ metadata.title }}{{ metadata.description }}
diff --git a/eleventy.config.js b/eleventy.config.js
index e04c73f..f68a859 100644
--- 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 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: "/",
};
};
diff --git a/package.json b/package.json
index 1163dd0..b10f40d 100644
--- 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",
diff --git a/public/css/code.css b/public/css/code.css
new file mode 100644
index 0000000..84f974d
--- /dev/null
+++ 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 */
+}
diff --git a/public/css/dropcap.css b/public/css/dropcap.css
index 275f39e..32ef683 100644
--- 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;
+ }
+}
diff --git a/public/css/index.css b/public/css/index.css
index 9cc9f22..34cd284 100644
--- 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);
+ }
}
diff --git a/public/css/prism-diff.css b/public/css/prism-diff.css
index 9f7e676..c76aab5 100644
--- 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%);
diff --git a/public/img/book.svg b/public/img/book.svg
new file mode 100644
index 0000000..f187cb2
--- /dev/null
+++ b/public/img/book.svg
@@ -0,0 +1,15 @@
+
+
diff --git a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-canvas.webp b/public/img/circle-grid-canvas.webp
similarity index 100%
rename from public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-canvas.webp
rename to public/img/circle-grid-canvas.webp
diff --git a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-complete.webp b/public/img/circle-grid-complete.webp
similarity index 100%
rename from public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-complete.webp
rename to public/img/circle-grid-complete.webp
diff --git a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp b/public/img/circle-grid-grid.webp
similarity index 100%
rename from public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp
rename to public/img/circle-grid-grid.webp
diff --git a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-line.webp b/public/img/circle-grid-line.webp
similarity index 100%
rename from public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-line.webp
rename to public/img/circle-grid-line.webp
diff --git a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-post-image.webp b/public/img/circle-grid-post-image.webp
similarity index 100%
rename from public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-post-image.webp
rename to public/img/circle-grid-post-image.webp
diff --git a/public/img/posts/floss-and-smes/pedro-lastra-Nyvq2juw4_o-unsplash.webp b/public/img/pedro-lastra-Nyvq2juw4_o-unsplash.webp
similarity index 100%
rename from public/img/posts/floss-and-smes/pedro-lastra-Nyvq2juw4_o-unsplash.webp
rename to public/img/pedro-lastra-Nyvq2juw4_o-unsplash.webp
diff --git a/public/img/posts/seitan.webp b/public/img/seitan.webp
similarity index 100%
rename from public/img/posts/seitan.webp
rename to public/img/seitan.webp
diff --git a/public/img/default_post_image/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif b/public/img/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif
similarity index 100%
rename from public/img/default_post_image/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif
rename to public/img/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif
diff --git a/public/xsl/basic.xsl b/public/xsl/basic.xsl
new file mode 100644
index 0000000..c1e6b5d
--- /dev/null
+++ b/public/xsl/basic.xsl
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+ RSS Feed | <xsl:value-of select="/atom:feed/atom:title"/>
+
+
+
+
+
+ This is an RSS feed. Subscribe by copying the URL from the address bar into your newsreader. Don't have a newsreader? Visit
+ About Feeds
+ to learn more and get started. It’s free.
+
Subscribe