n_u/nathanupchurch.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New style initial

Browse Source
This commit is contained in:
Nathan Upchurch
2026-06-28 20:18:03 -05:00
parent 9938f0f8ff
commit 677bf18e5b
45 changed files with 1454 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
_data/blogroll.js
View File

@@ -508,6 +508,13 @@ export default {
description: description:
"Started in 1997 by Floor64 founder Mike Masnick and then growing into a group blogging effort, the Techdirt blog relies on a proven economic framework to analyze and offer insight into news stories about changes in government policy, technology and legal issues that affect companies’ ability to innovate and grow.", "Started in 1997 by Floor64 founder Mike Masnick and then growing into a group blogging effort, the Techdirt blog relies on a proven economic framework to analyze and offer insight into news stories about changes in government policy, technology and legal issues that affect companies’ ability to innovate and grow.",
}, },
{
title: "The Canary",
feedUrl: "https://www.thecanary.co/feed/",
url: "https://www.thecanary.co/",
description:
"The Canary is a anti-oppression, decolonised, and recolonised radical media outlet that publishes the truth without fear or favour. We publish stories that matter to ordinary people across the UK, whether the corporate and state media like it or not.",
},
{ {
title: "Usermag", title: "Usermag",
feedUrl: "https://www.usermag.co/feed", feedUrl: "https://www.usermag.co/feed",

193
_data/metadata.js
View File

File diff suppressed because one or more lines are too long

51
_includes/articleAuthor.njk Normal file
View File

@@ -0,0 +1,51 @@
<div class="author">
{% if author %}
{% if author.profilePic %}
{% if author.url %}
<a href="{{ author.url }}">
{% endif %}
<img class="profilePic" src="{{ author.profilePic }}">
{% if author.url %}
</a>
{% endif %}
{% endif %}
<p>
{% if author.url %}
<a href="{{ author.url }}">
{% endif %}
{% if author.name %}
<span class="authorName">{{ author.name }}</span>
{% endif %}
{% if author.url %}
</a>
{% endif %}
{% if author.bio %}
<br>{{ author.bio }}
{% endif %}
</p>
{% else %}
{% if metadata.author.profilePic %}
{% if metadata.author.url %}
<a href="{{ metadata.author.url }}">
{% endif %}
<img class="profilePic" src="{{ metadata.author.profilePic }}">
{% if metadata.author.url %}
</a>
{% endif %}
{% endif %}
<p>
{% if metadata.author.url %}
<a href="{{ metadata.author.url }}">
{% endif %}
{% if metadata.author.name %}
<span class="authorName">{{ metadata.author.name }}</span>
{% endif %}
{% if metadata.author.url %}
</a>
{% endif %}
{% if metadata.author.bio %}
<br>{{ metadata.author.bio }}
{% endif %}
{% endif %}
</p>
</div>

31
_includes/footer.njk
View File

@@ -1,22 +1,25 @@
<footer> <footer>
<p>{% if metadata.copyrightNotice %}<span class="copyright-notice">{{ metadata.copyrightNotice }}</span>{% endif %} <div class="footerContainer">
<p>
{% if metadata.webrings %}<br> {% if metadata.copyrightNotice %}
{% for webring in metadata.webrings %} <span class="copyright-notice">{{ metadata.copyrightNotice }}</span>
{% endif %}
<br>Made by humans, not AI.
<div class="webringsContainer">
{% if metadata.webrings %}{% for webring in metadata.webrings %}
<span class="webring"> <span class="webring">
{% if webring.previousURL %}<a href="{{ webring.previousURL }}">←</a>{% endif %} {% if webring.previousURL %}<a href="{{ webring.previousURL }}">←</a>{% endif %}
{% if webring.ringURL %}<a href="{{ webring.ringURL }}">{{ webring.name }}</a>{% endif %} {% if webring.ringURL %}<a href="{{ webring.ringURL }}">{{ webring.name }}</a>{% endif %}
{% if webring.nextURL %}<a href="{{ webring.nextURL }}">→</a>{% endif %} {% if webring.nextURL %}<a href="{{ webring.nextURL }}">→</a>{% endif %}
</span> </span><br>
{% endfor %} {% endfor %}{% endif %}
{% endif %} </div>
<span class="webring"><a href="/search/">Search</a></span> <div class="linksContainer">
<span class="webring"><a href="/sitemap/">Sitemap</a></span> {% if metadata.footerLinks %}{% for link in metadata.footerLinks %}
<a {% if link.onClick %} onCLick="{{ link.onClick }}"{% endif %} href="{{ link.linkURL }}">{{ link.linkDisplay }}</a>
{% endfor %}{% endif %}
</div>
</p> </p>
<div id="buttonsAndStuffContainer">
<a href="https://notbyai.fyi/">
<img src="/img/written-by-human-not-by-ai-white.svg" alt="Written by humans, not by AI.">
</a>
{% include "settings/siteSettings.njk" %}
</div> </div>
</footer> </footer>
{% include "settings/siteSettings.njk" %}

8
_includes/header.njk
View File

@@ -1,12 +1,4 @@
<a href="#skip" class="visually-hidden">Skip to main content</a> <a href="#skip" class="visually-hidden">Skip to main content</a>
<header> <header>
<a
href="/"
class="home-link">
<img
class="logo"
src="{% if metadata.holidayLogo %}{{ metadata.holidayLogo }}{% else %}{{ metadata.logo }}{% endif %}"
alt="{{ metadata.title }}">
</a>
{% if not hideNav %}{% include "nav.njk" %}{% endif %} {% if not hideNav %}{% include "nav.njk" %}{% endif %}
</header> </header>

11
_includes/layouts/base.njk
View File

@@ -13,18 +13,9 @@
{% if tags and tags.includes('galleryImage') %} {% if tags and tags.includes('galleryImage') %}
<link rel="stylesheet" type="text/css" href="/css/gallery-images.css" /> <link rel="stylesheet" type="text/css" href="/css/gallery-images.css" />
{% endif %} {% endif %}
{% if tags and tags.includes('metadata') %}
<link rel="stylesheet" type="text/css" href="/css/metadata.css" />
{% endif %}
{% if tags and tags.includes('navigator') %} {% if tags and tags.includes('navigator') %}
<link rel="stylesheet" type="text/css" href="/css/navigator.css" /> <link rel="stylesheet" type="text/css" href="/css/navigator.css" />
{% endif %} {% endif %}
{% if tags and tags.includes('profilePic') %}
<link rel="stylesheet" type="text/css" href="/css/profile-pic.css" />
{% endif %}
{% if tags and tags.includes('postList') %}
<link rel="stylesheet" type="text/css" href="/css/post-list.css" />
{% endif %}
{% if tags and tags.includes('tagList') %} {% if tags and tags.includes('tagList') %}
<link rel="stylesheet" type="text/css" href="/css/tags.css" /> <link rel="stylesheet" type="text/css" href="/css/tags.css" />
{% endif %} {% endif %}
@@ -86,8 +77,8 @@
</section> </section>
{% endif %} {% endif %}
</main> </main>
{% include "birb.njk" %}
{% include "footer.njk" %} {% include "footer.njk" %}
{% include "birb.njk" %}
{% include "weather.njk" %} {% include "weather.njk" %}
{% include "wooMode.njk" %} {% include "wooMode.njk" %}
{% include "settings/settingsConfig.njk" %} {% include "settings/settingsConfig.njk" %}

2
_includes/layouts/links.njk
View File

@@ -8,7 +8,7 @@ layout: layouts/linksPage.njk
<div class="socialLinks"> <div class="socialLinks">
{% for link in metadata.socialLinks %} {% for link in metadata.socialLinks %}
<a class="link-button u-url" {% if link.customAttribute %} {{ link.customAttribute | safe }} {% endif %} href="{{ link.linkURL }}"> <a class="link-button u-url" {% if link.customAttribute %} {{ link.customAttribute | safe }} {% endif %} href="{{ link.linkURL }}">
<button type="button"><img src="{{ link.iconURL }}" />{{ link.linkDisplay }}</button> <button type="button">{{ link.iconSVG | safe }}{{ link.linkDisplay }}</button>
</a> </a>
{% endfor %} {% endfor %}
</div> </div>

65
_includes/layouts/post.njk
View File

@@ -2,44 +2,39 @@
layout: layouts/base.njk layout: layouts/base.njk
--- ---
<article class="post" data-pagefind-body> <article class="post" data-pagefind-body>
<h1>{{ title | markdownify | safe}}</h1> <div class="hero-container">
{% include "mastodonComments.njk" %} <div class="hero">
{% if not hideMetadata %} <p class="post-taglist">
<div class="post-metadata">
{% if author %}
{% if author.profilePic %}
<img class="profilePic" src="{{ author.profilePic }}">
{% endif %}
<div class="post-metadata-copy">
<p>{% if author.url %}<a href="{{ author.url }}">{% endif %}
{% if author.name %}By {{ author.name }}{% endif %}{% if author.url %}</a>&nbsp;•&nbsp;{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | niceDate }}</time>&nbsp;•&nbsp;{{ content | emojiReadTime }}</p>
{% else %}
{% if metadata.author.profilePic %}
<img class="profilePic" src="{{ metadata.author.profilePic }}">
{% endif %}
<div class="post-metadata-copy">
<p>{% if metadata.author.url %}<a href="{{ metadata.author.url }}">{% endif %}
{% if metadata.author.name %}By {{ metadata.author.name }}{% endif %}{% if metadata.author.url %}</a>&nbsp;•&nbsp;{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | niceDate }}</time>{% if tags and not tags.includes('quiz') %}&nbsp;•&nbsp;{{ content | emojiReadTime }}{% endif %}</p>
{% endif %}
<ul>
{%- for tag in tags | filterTagList %} {%- for tag in tags | filterTagList %}
{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %} {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
<li> <a href="{{ tagUrl }}">#{{ tag }}&nbsp;</a>
<a
href="{{ tagUrl }}"
class="post-tag">
{{ tag }}&nbsp;
</a>
</li>
{%- endfor %} {%- endfor %}
</ul> </p>
</div> <h1>{{ title | markdownify | safe}}</h1>
</div> {% if synopsis %}
<p class="post-synopsis">
{{ synopsis | markdownify | safe}}
</p>
{% endif %} {% endif %}
{{ content | safe }} {% if tags and tags.includes('quiz') %}
<p class="post-synopsis">
{{ content | markdownify | safe}}
</p>
{% endif %}
{% if not tags.includes('quiz') %}
{% if imageURL %}
<a href="{{ imageURL }}"><img class="post-image" src="{{ imageURL }}" alt="{{ imageAlt }}"></a>
{% endif %}
<p class="post-time-author">
<time datetime="{{ page.date | htmlDateString }}">{{ page.date | niceDate }}</time><br>
By <a href="{% if author %}{{ author.url }}{% else %}{{ metadata.author.url }}{% endif %}">{% if author %}{{ author.name }}{% else %}{{ metadata.author.name }}{% endif %}</a></p>
{% endif %}
</div>
</div>
{% if tags and not tags.includes('quiz') %}{{ content | safe }}{% endif %}
</article> </article>
{% if tags and not tags.includes('quiz') %}
{% include "articleAuthor.njk" %}
{% include "mastodonComments.njk" %}
{% endif %}
{% include "issoCommenting.njk" %} {% include "issoCommenting.njk" %}

6
_includes/layouts/quizzes.njk
View File

@@ -3,6 +3,12 @@ layout: layouts/post.njk
structuredData: none structuredData: none
--- ---
{{ content | safe }} {{ content | safe }}
{% if imageURL %}
<a href="{{ imageURL }}"><img class="post-image" src="{{ imageURL }}" alt="{{ imageAlt }}"></a>
{% endif %}
<p class="post-time-author">
<time datetime="{{ page.date | htmlDateString }}">{{ page.date | niceDate }}</time><br>
By <a href="{% if author %}{{ author.url }}{% else %}{{ metadata.author.url }}{% endif %}">{% if author %}{{ author.name }}{% else %}{{ metadata.author.name }}{% endif %}</a></p>
<section class="quiz"> <section class="quiz">
<form onsubmit="handleQuizSubmit(); return false"> <form onsubmit="handleQuizSubmit(); return false">
{% for question in questions %} {% for question in questions %}

10
_includes/mastodonComments.njk
View File

@@ -2,7 +2,15 @@
<div class="continue-discussion"> <div class="continue-discussion">
<a class="link-button" href="https://{{ metadata.mastodonHost }}/@{{ metadata.mastodonUser }}/{{ mastodon_id }}"> <a class="link-button" href="https://{{ metadata.mastodonHost }}/@{{ metadata.mastodonUser }}/{{ mastodon_id }}">
<button type="button"> <button type="button">
<img src="/img/mastodon.svg"> <svg
viewBox="0 0 1536 1792"
xmlns="http://www.w3.org/2000/svg">
<path
d="M1503.302 1111.386c-22.579 116.159-202.224 243.284-408.55 267.921-107.588 12.837-213.519 24.636-326.476 19.455-184.728-8.463-330.494-44.092-330.494-44.092 0 17.983 1.11 35.106 3.328 51.12 24.015 182.308 180.772 193.228 329.261 198.32 149.872 5.127 283.321-36.951 283.321-36.951l6.157 135.491s-104.827 56.293-291.574 66.646c-102.974 5.66-230.836-2.59-379.759-42.009C65.529 1641.797 10.219 1297.502 1.482 948.17-1.11 844.449.485 746.646.49 664.847.5 307.631 234.539 202.924 234.539 202.924c118.011-54.199 320.512-76.99 531.033-78.71h5.173c210.52 1.721 413.152 24.511 531.157 78.71 0 0 234.04 104.706 234.04 461.923 0 0 2.935 263.556-32.64 446.539zm-243.429-418.827c0-88.4-21.711-159.35-67.71-210.618-46.63-51.972-107.687-78.613-183.47-78.613-87.699 0-154.104 33.703-198.002 101.121L768 576l-42.683-71.55c-43.907-67.42-110.313-101.124-198.003-101.124-75.792 0-136.849 26.642-183.47 78.614-45.21 51.973-67.718 122.219-67.718 210.618v432.53h171.359V705.273c0-88.498 37.234-133.415 111.713-133.415 82.35 0 123.63 53.283 123.63 158.646v229.788h170.35V730.505c0-105.363 41.272-158.646 123.62-158.646 74.478 0 111.715 44.917 111.715 133.415v419.816h171.358V692.56z"
id="path1"
style="fill-opacity:1" />
</svg>
Discuss on Mastodon &#187; Discuss on Mastodon &#187;
</button> </button>
</a> </a>

14
_includes/nav.njk
View File

@@ -1,5 +1,17 @@
<nav> <nav>
<div class="nav-elements-grid-container">
<div class="nav-elements-container">
<h2 class="visually-hidden">Top level navigation menu</h2> <h2 class="visually-hidden">Top level navigation menu</h2>
<a
href="/"
class="home-link">
<svg class="logo" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.467 8.467"><path d="M23.248 20.452v6.444c0 1.12.902 2.023 2.023 2.023h4.421c1.12 0 2.023-.902 2.023-2.023v-4.421c0-1.12-.902-2.023-2.023-2.023h-6.444m1.516 1.924q.102.007.255.013a8 8 0 0 0 .848-.013l2.39 3.18V23.32q0-.313-.039-.478a.36.36 0 0 0-.165-.243q-.128-.076-.402-.095v-.128a18 18 0 0 0 .676.02 8 8 0 0 0 .567-.02v.128a.65.65 0 0 0-.312.095.36.36 0 0 0-.147.23 2.3 2.3 0 0 0-.032.44v3.638a1.712 1.712 0 0 0-.268 0l-2.734-3.715v2.753q0 .306.039.478.037.165.166.242.134.07.401.096v.127a3 3 0 0 0-.312-.013 11 11 0 0 0-.676 0q-.153 0-.255.013v-.127a.7.7 0 0 0 .312-.096.34.34 0 0 0 .141-.23q.038-.159.038-.44v-2.943q0-.236-.038-.344a.21.21 0 0 0-.14-.153.9.9 0 0 0-.313-.051zm5.092 3.671a.5.5 0 0 1 .357.128q.14.127.14.337t-.14.338a.5.5 0 0 1-.357.127.52.52 0 0 1-.363-.127.45.45 0 0 1-.134-.338q0-.21.134-.337a.52.52 0 0 1 .363-.128" style="fill-opacity:1;" transform="translate(-23.248 -20.452)"/></svg>
</a>
{% if tags and tags.includes('posts') and not tags.includes('quiz') and not hideBlogTitleFromHeader%}
<a class="blog-name" href="/blog">
{{ metadata.blogName }}
</a>
{% endif %}
<ul class="nav"> <ul class="nav">
{%- for entry in collections.all | eleventyNavigation %} {%- for entry in collections.all | eleventyNavigation %}
<li class="nav-item" {% if entry.url == page.url %} aria-current="page" data-currentpage="true"{% endif %}><a href="{{ entry.url }}">{{ entry.title }}</a></li> <li class="nav-item" {% if entry.url == page.url %} aria-current="page" data-currentpage="true"{% endif %}><a href="{{ entry.url }}">{{ entry.title }}</a></li>
@@ -7,4 +19,6 @@
<li class="subscribe nav-item"><a href="/feed/feed.xml">{% include "rssLogo.njk" %}Feed</a> <li class="subscribe nav-item"><a href="/feed/feed.xml">{% include "rssLogo.njk" %}Feed</a>
</li> </li>
</ul> </ul>
</div>
</div>
</nav> </nav>

2
_includes/navigator.njk
View File

@@ -2,7 +2,7 @@
{% for link in metadata.navigatorLinks %} {% for link in metadata.navigatorLinks %}
<div class="navigatorItem"> <div class="navigatorItem">
<a href="{{ link.linkURL }}"> <a href="{{ link.linkURL }}">
<img alt="" src="{{ link.iconURL }}"> {{ link.iconSVG | safe }}
<p>{{ link.linkDisplay }}</p> <p>{{ link.linkDisplay }}</p>
</a> </a>
</div> </div>

4
_includes/permalinkButtons.njk
View File

@@ -1,4 +1,5 @@
{% set numPages = pagination.pages | length %} {% set numPages = pagination.pages | length %}
<span class=buttonContainer>
{% if pagination.pageNumber > 0 %} {% if pagination.pageNumber > 0 %}
<a href="/{{ paginationRootDir }}/{% if pagination.pageNumber > 1%}page-{{ pagination.pageNumber }}/{% endif %}"> <a href="/{{ paginationRootDir }}/{% if pagination.pageNumber > 1%}page-{{ pagination.pageNumber }}/{% endif %}">
<button type="button">← Previous</button> <button type="button">← Previous</button>
@@ -7,6 +8,7 @@
{% if pagination.pageNumber < numPages - 1 %} {% if pagination.pageNumber < numPages - 1 %}
<a href="/{{ paginationRootDir }}/page-{{ pagination.pageNumber + 2 }}/"> <a href="/{{ paginationRootDir }}/page-{{ pagination.pageNumber + 2 }}/">
<button type="button">{% if pagination.pageNumber == 0%}More{% else %}Next{% endif %} →</button> <button type="button">{% if pagination.pageNumber == 0%}Next{% else %}Next{% endif %} →</button>
</a> </a>
{% endif %} {% endif %}
</span>

45
_includes/postslist.njk
View File

@@ -1,17 +1,8 @@
<section class="postlist{% if postListTypeMicroblog %} microblogList{% endif %}"> <section class="postlist{% if postListTypeMicroblog %} microblogList{% endif %}">
{% if postlistHeaderText %}<h2>{{ postlistHeaderText }}</h2>{% endif %} {% if postlistHeaderText %}<h2 class="postlist-header">{{ postlistHeaderText }}</h2>{% endif %}
<div class="postlist-item-container"> <div class="postlist-item-container">
{% for post in postslist %} {% for post in postslist %}
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}"> <article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
{% if not postListTypeMicroblog %}
<a href="{{ post.url }}" class="postlist-link">
<div class="post-image-container">
<img class="post-image" {% if post.data.imageURL %} src="{{ post.data.imageURL }}" alt="{{ post.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
</div>
</a>
{% endif %}
<div class="post-copy"> <div class="post-copy">
{% if not postListTypeMicroblog %} {% if not postListTypeMicroblog %}
<a href="{{ post.url }}" class="postlist-link"> <a href="{{ post.url }}" class="postlist-link">
@@ -23,6 +14,13 @@
</a> </a>
{% endif %} {% endif %}
{% if post.data.synopsis %}
<p>{{ post.data.synopsis | markdownify | safe }}</p>
{% endif %}
{% if not post.data.synopsis and post.data.description %}
<p>{{ post.data.description | markdownify | safe }}</p>
{% endif %}
<div class="post-metadata"> <div class="post-metadata">
<div class="post-metadata-copy"> <div class="post-metadata-copy">
<p> <p>
@@ -32,30 +30,25 @@
<a href="{{ post.data.author.url }}"> <a href="{{ post.data.author.url }}">
{% endif %} {% endif %}
{% if post.data.author.name %} {% if post.data.author.name %}
By {{ post.data.author.name }} {{ post.data.author.name }}
{% endif %} {% endif %}
{% if post.data.author.url %}</a>&nbsp;•&nbsp; {% if post.data.author.url %}</a>&nbsp;•&nbsp;
{% endif %} {% endif %}
{% else %}<a href="{{ metadata.author.url }}">By {{ metadata.author.name }}</a>&nbsp;•&nbsp; {% else %}<a href="{{ metadata.author.url }}">{{ metadata.author.name }}</a>&nbsp;•&nbsp;
{% endif %} {% endif %}
{% endif %} {% endif %}
<time datetime="{{ post.date | htmlDateString }}">{{ post.date | niceDate }}{% if post.data.time %}—{{ post.data.time }}{% endif %}</time> <time datetime="{{ post.date | htmlDateString }}">{{ post.date | niceDate }}{% if post.data.time %}—{{ post.data.time }}{% endif %}</time>
</p> </p>
<ul> </div>
{%- for tag in post.data.tags | filterTagList %} </div>
{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %} </div>
<li> {% if not postListTypeMicroblog %}
<a <a href="{{ post.url }}" class="postlist-link">
href="{{ tagUrl }}" <div class="post-image-container">
class="post-tag"> <img class="post-image" {% if post.data.imageURL %} src="{{ post.data.imageURL }}" alt="{{ post.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
{{ tag }}&nbsp; </div>
</a> </a>
</li> {% endif %}
{%- endfor %}
</ul>
</div>
</div>
</div>
</article> </article>
<hr> <hr>
{% endfor %} {% endfor %}

1
_includes/settings/siteSettings.njk
View File

@@ -1,5 +1,4 @@
<div id="siteSettingsContainer"> <div id="siteSettingsContainer">
<button onclick="siteSettings.showModal();">Site Settings</button>
<dialog id="siteSettings"> <dialog id="siteSettings">
<h2>Site Settings</h2> <h2>Site Settings</h2>
{% include "settings/controllers/birbController.njk" %} {% include "settings/controllers/birbController.njk" %}

11
_includes/statusList.njk
View File

@@ -18,17 +18,16 @@
{% endif %} {% endif %}
{% if metadata.author.url %} {% if metadata.author.url %}
</a><br /> </a>
{% endif %} {% endif %}
• {{ status.date | niceDate }}<br />
</span> </span>
{% if status.data.comment %}
{{ status.data.comment | markdownify | safe }}<br /> {{ status.data.comment | markdownify | safe }}<br />
{% endif %}
<span class="status-metadata">
{{ status.date | niceDate }}
</span>
</p> </p>
</div> </div>
</div> </div>
</article> </article>
{% endfor %} {% endfor %}

11
content/about-feeds/index.md
View File

@@ -1,10 +1,11 @@
--- ---
layout: layouts/post.njk layout: layouts/base.njk
title: How to Use Feeds title: Nathan Upchurch | How to Use Feeds
structuredData: none structuredData: none
hideMetadata: yep
--- ---
<p><!-- a <p> just to stop the dropcap from happening --></p> <article data-pagefind-body>
<h1>How to Use Feeds</h1>
Get all the latest content from your favorite creators with no algorithm, no spam, and no spying. This page is based on [Matt Webb](https://interconnected.org)'s *[About Feeds](https://aboutfeeds.com/)*. Get all the latest content from your favorite creators with no algorithm, no spam, and no spying. This page is based on [Matt Webb](https://interconnected.org)'s *[About Feeds](https://aboutfeeds.com/)*.
@@ -66,3 +67,5 @@ It doesn't matter which you choose; newsreaders usually make it fairly easy to e
[^1]: Please note that I haven't tested all of these options personally; your mileage may vary. [^1]: Please note that I haven't tested all of these options personally; your mileage may vary.
</article>

9
content/about/index.md
View File

@@ -10,16 +10,17 @@ eleventyNavigation:
<p class="page-block nodropcap">I’m a prolific vegan home cook, classical trombonist, incense maker, a <abbr title="Free/Libre Open Source Software">FLOSS</abbr> enthusiast, designer, programmer, music producer, print lover, and human with too many interests and too little time.<br><br> <p class="page-block nodropcap">I’m a prolific vegan home cook, classical trombonist, incense maker, a <abbr title="Free/Libre Open Source Software">FLOSS</abbr> enthusiast, designer, programmer, music producer, print lover, and human with too many interests and too little time.<br><br>
This is my little corner of the internet where I talk about whatever I like without worrying about maintaining a ‘personal brand’, or constraining my writing to topics which might help advance my career or establish me as a ‘thought leader’. I’m here to express myself and have fun writing about topics I enjoy.<br><br> This is my little corner of the internet where I talk about whatever I like without worrying about maintaining a ‘personal brand’, or constraining my writing to topics which might help advance my career or establish me as a ‘thought leader’. I’m here to express myself and have fun writing about topics I enjoy.<br><br>
If you’d like to learn more about my professional accomplishments and work, I’ll link my professional website here when I get around to it.</p> If you’d like to learn more about my professional accomplishments and work, I’ll link my professional website here when I get around to it.</p>
<span class="buttonContainer">
<a href="./colophon/"> <a href="./colophon/">
<button type="button">Colophon »</button> <button type="button">Colophon</button>
</a> </a>
<a href="../me/"> <a href="../me/">
<button type="button">Contact »</button> <button type="button">Contact</button>
</a> </a>
<a href="./privacy/"> <a href="./privacy/">
<button type="button">Privacy »</button> <button type="button">Privacy</button>
</a> </a>
</span>
</article> </article>

32
content/blog/index.njk
View File

@@ -1,6 +1,7 @@
--- ---
eleventyExcludeFromCollections: true eleventyExcludeFromCollections: true
layout: layouts/base.njk layout: layouts/base.njk
hideBlogTitleFromHeader: true
title: "The Stochastic Bletherist | The Personal Blog of Nathan Upchurch" title: "The Stochastic Bletherist | The Personal Blog of Nathan Upchurch"
tags: tags:
- metadata - metadata
@@ -19,31 +20,28 @@ paginationRootDir: blog
<h1>The Stochastic Bletherist</h1> <h1>The Stochastic Bletherist</h1>
<p class="page-block nodropcap"> <p class="page-block nodropcap">
The personal blog of Nathan Upchurch, where he writes about everything from <a href="/tags/storytime">personal stories</a> to <a href="/tags/gnu-linux">tech</a>, <a href="/tags/vegan-cooking">food</a>, and <a href="/tags/incense">incense</a>.<br /> <em>The Stochastic Bletherist</em> is the personal blog of Nathan Upchurch, where he writes about whatever he fancies at the time. <a href="/feed/feed.xml">Subscribe</a> if you’re interested in musings on life, music, and technology, weird and wonderful incense reviews, the occasional bit of spicy discourse, or learning how to make things like vegan ranch dressing or incense sticks. There’s something for everyone here.
<span class="buttonContainer">
<a href="/tags/">
<button type="button">Topics »</button>
</a>
<a href="../blogroll/"> <a href="../blogroll/">
<button type="button">Blogroll »</button> <button type="button">Blogroll</button>
</a> </a>
<a href="/search/">
<button type="button">Search</button>
</a>
<a href="/tags/">
<button type="button">Topics</button>
</a>
</div>
</p> </p>
<h2>What’s New:</h2>
{% else %} {% else %}
<h1>The Stochastic Bletherist Blog</h1> <h1>The Stochastic Bletherist</h1>
<p class="page-block nodropcap">
Writing about everything from <a href="/tags/storytime">personal stories</a> to <a href="/tags/gnu-linux">tech</a>, <a href="/tags/vegan-cooking">food</a>, and <a href="/tags/incense">incense</a>.<br />
<a href="/tags/"> <p class="page-block nodropcap">
<button type="button">Topics »</button> <em>The Stochastic Bletherist</em> is the personal blog of Nathan Upchurch, where he writes about whatever he fancies at the time. <a href="/feed/feed.xml">Subscribe</a> if you’re interested in musings on life, music, and technology, weird and wonderful incense reviews, the occasional bit of spicy discourse, or learning how to make things like vegan ranch dressing or incense sticks. There’s something for everyone here.
</a>
<a href="../blogroll/">
<button type="button">Blogroll »</button>
</a>
</p> </p>
<h2>More posts:</h2> <h2 class="postlist-header">More posts:</h2>
{% endif %} {% endif %}

6
content/galleries/gallery-image-page-generator.njk
View File

@@ -18,15 +18,15 @@ eleventyComputed:
<div class="buttonContainer galleryButtons"> <div class="buttonContainer galleryButtons">
{% if picture.previousImage %} {% if picture.previousImage %}
<a href="../{{ picture.previousImage | slugify }}"> <a href="../{{ picture.previousImage | slugify }}">
<button type="button">Previous</button> <button type="button">← Previous</button>
</a> </a>
{% endif %} {% endif %}
<a href="/gallery/{{ picture.containingGallery | slugify }}/"> <a href="/gallery/{{ picture.containingGallery | slugify }}/">
<button type="button">Gallery</button> <button type="button">🕮 Gallery</button>
</a> </a>
{% if picture.nextImage %} {% if picture.nextImage %}
<a href="../{{ picture.nextImage | slugify }}"> <a href="../{{ picture.nextImage | slugify }}">
<button type="button">Next</button> <button type="button">Next →</button>
</a> </a>
{% endif %} {% endif %}
</div> </div>

3
content/index.njk
View File

@@ -1,7 +1,4 @@
--- ---
layout: layouts/home.njk layout: layouts/home.njk
eleventyNavigation:
key: Home
order: 1
--- ---
{% include "navigator.njk" %} {% include "navigator.njk" %}

6
content/now-burning/index.njk
View File

@@ -10,9 +10,9 @@ postlistHeaderText: "What I've been burning:"
<h1>Now Burning:</h1> <h1>Now Burning:</h1>
<article class="post microblog-post" data-pagefind-body> <article class="post microblog-post" data-pagefind-body>
<img class="microblog-icon" src="/img/censer.svg"> <svg class="microblog-icon" xmlns="http://www.w3.org/2000/svg" width="397.265" height="1334.648" viewBox="0 0 105.11 353.126"><path d="M107.422 160.854s-16.31-.307-10.002-23.543c6.309-23.235 9.079-29.543 2.616-38.16s-8.31-16.927-2.924-20.312 19.542-1.23 22.927 8.002c3.386 9.232-8.001-9.233-18.464-4.001-10.464 5.232 19.388 15.541 16.002 28.005-3.385 12.464-8.85 11.387-7.312 20.158 1.539 8.77 11.62 13.54 7.466 21.542s-10.31 8.31-10.31 8.31" style="fill-opacity:.1;stroke-width:.176994;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill" transform="translate(-105.56 -112.273)scale(1.47357)"/><path d="M76.434 211.488c-2.753 4.398-4.194 9.316-4.194 14.313 0 11.22 7.23 22.978 18.772 28.19v3.851c0 1.274 1.026 2.3 2.3 2.3h1.298c1.274 0 2.3-1.026 2.3-2.3v-1.752q.972.26 1.96.47-.05.235-.05.483v.805c0 1.275 1.026 2.3 2.3 2.3h10.121c1.275 0 2.3-1.025 2.3-2.3v-.805l-.001-.08q.96-.15 1.911-.345v1.224c0 1.274 1.027 2.3 2.301 2.3h1.297c1.274 0 2.3-1.026 2.3-2.3v-2.925c12.764-4.806 21.011-17.124 21.01-29.116 0-4.997-1.44-9.915-4.193-14.313H105zM105 148.46v61.93h4.6v-61.93z" style="stroke-width:.260177;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill" transform="translate(-105.56 -112.273)scale(1.47357)"/><path d="M107.3 142.38a2.295 2.295 0 0 0-2.3 2.3v2.682h4.6v-2.681c0-1.275-1.026-2.3-2.3-2.3" style="fill-opacity:1;stroke-width:.264583;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill" transform="translate(-105.56 -112.273)scale(1.47357)"/></svg>
<div class="microblog-status"> <div class="microblog-status">
<h2 class="">{{ burning.data.title }}{% if burning.data.manufacturer %}, {{ burning.data.manufacturer }}{% endif %}, {{ burning.date | niceDate }}, {{ burning.data.time }}</h2> <h2 class="">{{ burning.data.title }}{% if burning.data.manufacturer %}, {{ burning.data.manufacturer }}{% endif %}, <br>{{ burning.date | niceDate }}, {{ burning.data.time }}</h2>
{% if burning.content %} {% if burning.content %}
<div class="microblog-comment"> <div class="microblog-comment">
{{ burning.content | safe }} {{ burning.content | safe }}
@@ -21,5 +21,5 @@ postlistHeaderText: "What I've been burning:"
</div> </div>
</article> </article>
<a href="/once-burned/"> <a href="/once-burned/">
<button type="button">Previous Entries »</button> <button type="button">Previous Entries</button>
</a> </a>

10
content/now/index.njk
View File

@@ -18,7 +18,13 @@ tags:
<div class="buttonContainer"> <div class="buttonContainer">
<a class="link-button" href="/feeds/now.xml"> <a class="link-button" href="/feeds/now.xml">
<button type="button"> <button type="button">
<img src="/img/RSS.svg"> <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"></ellipse>
<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>
<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"></path>
</g>
</svg>
Subscribe to “Now” Posts Subscribe to “Now” Posts
</button> </button>
</a> </a>
@@ -31,7 +37,7 @@ tags:
</div> </div>
{% set postsCount = collections.now | removeMostRecent | length %} {% set postsCount = collections.now | removeMostRecent | length %}
{% if postsCount > 1 %} {% if postsCount > 1 %}
<h2>Previous Entries:</h2> <h2 class="postlist-header">Previous Entries:</h2>
{% set postslist = collections.now | removeMostRecent %} {% set postslist = collections.now | removeMostRecent %}
{% set showPostListHeader = false %} {% set showPostListHeader = false %}
{% include "postslist.njk" %} {% include "postslist.njk" %}

5
content/once-burned/index.njk
View File

@@ -25,11 +25,12 @@ paginationRootDir: once-burned
{% else %} {% else %}
<p>Nothing’s here yet!</p> <p>Nothing’s here yet!</p>
{% endif %} {% endif %}
<span class="buttonContainer">
{% include "permalinkButtons.njk" %} {% include "permalinkButtons.njk" %}
<a href="/now-burning/"> <a href="/now-burning/">
<button type="button">Latest »</button> <button type="button">Latest</button>
</a> </a>
</span>
</div> </div>

2
content/prior-thoughts/index.njk
View File

@@ -27,7 +27,7 @@ paginationRootDir: prior-thoughts
{% include "permalinkButtons.njk" %} {% include "permalinkButtons.njk" %}
<a href="/status/"> <a href="/status/">
<button type="button">Latest »</button> <button type="button">Latest</button>
</a> </a>
</div> </div>

2
content/quizzes/index.njk
View File

@@ -13,7 +13,7 @@ description: "Bored? Take a fun quiz to while away the time!"
<p>Test your knowledge, learn about yourself, and waste your precious time, right here, right now, with a quiz!</p> <p>Test your knowledge, learn about yourself, and waste your precious time, right here, right now, with a quiz!</p>
{% set postsCount = collections.quiz | length %} {% set postsCount = collections.quiz | length %}
<h2>Available quizzes:</h2> <h2 class="postlist-header">Available quizzes:</h2>
{% set postslist = collections.quiz | reverse %} {% set postslist = collections.quiz | reverse %}
{% set showPostListHeader = false %} {% set showPostListHeader = false %}
{% include "postslist.njk" %} {% include "postslist.njk" %}

11
content/status/index.njk
View File

@@ -7,7 +7,7 @@ permalink: "/status/index.html"
--- ---
{% set status = collections.status | last %} {% set status = collections.status | last %}
<h1>Nathan’s status:</h1> <h1>Current status:</h1>
<article class="post microblog-post" data-pagefind-body> <article class="post microblog-post" data-pagefind-body>
<div class="microblog-status card"> <div class="microblog-status card">
<span class="microblog-emoji">{{ status.data.emoji }}</span> <span class="microblog-emoji">{{ status.data.emoji }}</span>
@@ -24,20 +24,17 @@ permalink: "/status/index.html"
{% endif %} {% endif %}
{% if metadata.author.url %} {% if metadata.author.url %}
</a><br /> </a>
{% endif %} {% endif %}
• {{ status.date | niceDate }}<br />
</span> </span>
{% if status.data.comment %} {% if status.data.comment %}
{{ status.data.comment | markdownify | safe }}<br /> {{ status.data.comment | markdownify | safe }}<br />
{% endif %} {% endif %}
<span class="status-metadata">
{{ status.date | niceDate }}
</span>
</p> </p>
</div> </div>
</div> </div>
</article> </article>
<a href="/prior-thoughts/"> <a href="/prior-thoughts/">
<button type="button">Previous Entries »</button> <button type="button">Previous Entries</button>
</a> </a>

14
content/tags/tag-page-generator.njk
View File

@@ -41,17 +41,25 @@ eleventyComputed:
</h1> </h1>
<p class="page-block nodropcap"> <p class="page-block nodropcap">
Here’s everything I’ve posted tagged “{{ tag }}.” Want to be notified when I post on this topic? Subscribe to “{{ tag }}” using the button below.<br> Here’s everything I’ve posted tagged “{{ tag }}.” Want to be notified when I post on this topic? Subscribe to “{{ tag }}” using the button below.<br>
<span class="buttonContainer">
<a class="link-button" href="/tags/"> <a class="link-button" href="/tags/">
<button type="button"> <button type="button">
More topics » More topics
</button> </button>
</a> </a>
<a class="link-button" href="/feeds/{{ tag | slugify }}.xml"> <a class="link-button" href="/feeds/{{ tag | slugify }}.xml">
<button type="button"> <button type="button">
<img src="/img/RSS.svg"> <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">
Subscribe » <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"></ellipse>
<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>
<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"></path>
</g>
</svg>
Subscribe
</button> </button>
</a> </a>
</span>
</p> </p>
{% set postslist = collections[ tag ] | reverse %} {% set postslist = collections[ tag ] | reverse %}

197
public/css/comments.css
View File

@@ -1,21 +1,124 @@
.isso-comment-header { .isso-auth-section {
height: var(--space-2xl) !important; display: flex !important;
flex-flow: row wrap;
gap: var(--space-3xs);
& .isso-input-wrapper {
flex-basis: 30%;
flex-grow: 1;
}
}
@container (width < 460px) {
.isso-auth-section {
flex-flow: column;
}
} }
h4.isso-thread-heading { .isso-comment {
color: var(--text-color) !important; & > .isso-avatar {
font-size: var(--step-2) !important; margin-left: var(--space-l);
font-variation-settings: margin-top: var(--space-l);
"opsz" 50, & img {
"wght" 350, border-radius: var(--large-rounded-radius);
"SOFT" 20, border-top-left-radius: 0;
"WONK" 1 !important; }
line-height: calc(var(--step-2) * 0.25 + var(--step-2)) !important; }
margin-bottom: var(--space-m) !important; & .isso-comment-footer {
margin-top: var(--space-m) !important; display: flex;
padding-bottom: 0 !important; flex-flow: row nowrap;
padding-top: 0 !important; align-items: center;
text-wrap: pretty !important; & a {
position: inherit;
}
& .isso-reply {
color: var(--contrast-color);
font-family: var(--font-family-ui);
font-size: var(--step--2);
font-variation-settings: "wght" 700;
letter-spacing: var(--wide-letter-spacing);
text-align: end;
text-transform: uppercase;
}
& .isso-spacer {
display: none;
}
& .isso-votes {
color: var(--contrast-color);
font-family: var(--font-family-ui);
font-size: var(--step--1);
font-variation-settings: "wght" 700;
letter-spacing: var(--wide-letter-spacing);
text-transform: uppercase;
}
& svg {
fill: var(--contrast-color) !important;
}
}
& .isso-comment-header {
color: var(--contrast-color) !important;
margin-bottom: var(--space-s);
& a[href].isso-author, a[href].isso-author:visited, a[href].isso-author:hover {
color: var(--contrast-color) !important;
}
& .isso-author {
color: var(--contrast-color);
font-family: var(--font-family-ui);
font-size: var(--step--1);
font-variation-settings: "wght" 600;
&::after {
content: "\A";
white-space: pre;
}
}
& .isso-permalink {
color: var(--contrast-color);
font-family: var(--font-family-ui);
font-size: var(--step--2);
font-variation-settings: "wght" 500;
}
& .isso-spacer {
display: none;
}
}
& > .isso-follow-up {
border-top-right-radius: 0;
margin-top: var(--space-xs);
margin-bottom: var(--space-l);
& .isso-text-wrapper {
border-top-left-radius: var(--large-rounded-radius);
border-top-right-radius: 0;
}
}
& > .isso-text-wrapper {
background-color: var(--contrast-color-tint);
border-radius: var(--large-rounded-radius);
border-top-left-radius: 0;
padding: var(--space-l);
& .isso-text p {
font-style: italic;
margin-block: 0 1lh !important;
}
}
&:not(:first-of-type), .isso-follow-up .isso-comment {
border-top: none !important;
}
}
section#isso-thread {
& h4.isso-thread-heading {
color: var(--contrast-color);
font-family: var(--font-family-ui);
font-size: var(--step-0);
font-variation-settings: "wght" 450;
letter-spacing: var(--wide-letter-spacing);
line-height: calc(var(--step-0) * 0.25 + var(--step-0));
margin-block: 0 1lh;
margin-top: var(--space-m);
padding-bottom: 0;
padding-top: 0;
text-transform: uppercase;
text-wrap: pretty;
}
} }
.isso-text > h1, .isso-text > h1,
@@ -24,15 +127,15 @@ h4.isso-thread-heading {
} }
.isso-form-wrapper > .isso-auth-section > .isso-post-action > input { .isso-form-wrapper > .isso-auth-section > .isso-post-action > input {
background-color: var(--contrast-color) !important; background-color: var(--contrast-color-tint) !important;
border: none !important; border: none !important;
border-radius: var(--border-radius) !important; border-radius: var(--border-radius) !important;
color: var(--background-color) !important; color: var(--contrast-color) !important;
font-family: var(--font-family-ui) !important; font-family: var(--font-family-ui) !important;
font-size: var(--step--2) !important; font-size: var(--step--2) !important;
font-variation-settings: var(--font-variation-ui) !important; font-variation-settings: var(--font-variation-ui) !important;
height: var(--space-m-l) !important; height: var(--space-m-l) !important;
letter-spacing: var(--ui-letter-spacing) !important; letter-spacing: var(--wide-letter-spacing) !important;
margin: var(--space-s) 0 0 0 !important; margin: var(--space-s) 0 0 0 !important;
padding: 0 var(--space-xs) !important; padding: 0 var(--space-xs) !important;
text-transform: uppercase !important; text-transform: uppercase !important;
@@ -44,8 +147,7 @@ p.isso-input-wrapper {
display: block !important; display: block !important;
margin: 0 !important; margin: 0 !important;
max-width: 100% !important; max-width: 100% !important;
& > label, & > label {
& > input {
font-family: var(--font-family-ui) !important; font-family: var(--font-family-ui) !important;
font-size: var(--step--2) !important; font-size: var(--step--2) !important;
font-variation-settings: var(--font-variation-ui) !important; font-variation-settings: var(--font-variation-ui) !important;
@@ -55,15 +157,56 @@ p.isso-input-wrapper {
margin-block: inherit !important; margin-block: inherit !important;
} }
} }
@container (width < 460px) {
p.isso-input-wrapper > label {
margin-top: 0 !important;
}
}
.isso-postbox {
background-color: var(--contrast-color);
border-radius: var(--large-rounded-radius);
border-top-left-radius: 0;
color: var(--background-color);
padding: var(--space-l) calc((100cqw - (var(--grid-gutter) * 11)) / 12) var(--space-2xs) calc((100cqw - (var(--grid-gutter) * 11)) / 12);
margin-left: calc(((100cqw - (var(--grid-gutter) * 11)) / 12) * -1) !important;
margin-block: 1lh 1lh;
width: calc(((100cqw) / 12) * 14);
}
@container (width < 460px) {
.isso-postbox {
padding: var(--space-l) var(--space-m) var(--space-s) var(--space-m);
}
}
.isso-post-action { .isso-post-action {
display: inline-block !important; display: inline-block !important;
float: inherit !important; float: inherit !important;
margin: 0 var(--space-2xs) 0 0 !important; margin-left: 0 !important;
&::after { &::after {
content: "" !important; content: "" !important;
} }
} }
@container (width < 460px) {
.isso-post-action {
margin-bottom: 0 !important;
}
}
.isso-text {
color: var(--text-color);
& > blockquote {
margin: 0;
padding: var(--space-3xs) var(--space-s);
&::before {
font-size: var(--step-5);
margin-top: -4.5px;
}
& p {
padding: 0 0 0 var(--space-s);
}
}
& p {
margin-bottom: 0 !important;
}
}
textarea.isso-textarea { textarea.isso-textarea {
background-color: var(--background-color) !important; background-color: var(--background-color) !important;
@@ -76,7 +219,13 @@ textarea.isso-textarea {
font-variation-settings: var(--font-variation-default) !important; font-variation-settings: var(--font-variation-default) !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
min-height: var(--space-l) !important; min-height: var(--space-l) !important;
padding: 0 var(--space-3xs) !important;
resize: vertical !important; resize: vertical !important;
width: 100%; width: 100%;
} }
@media (max-width: 900px) {
.isso-postbox {
margin-left: auto !important;
width: 100%;
}
}

8
public/css/continue-discussion-on-mastodon.css
View File

@@ -2,6 +2,12 @@
grid-column: var(--span-grid); grid-column: var(--span-grid);
} }
.continue-discussion button { .continue-discussion button {
margin-top: calc(var(--space-s) * -1);
margin-bottom: var(--space-m); margin-bottom: var(--space-m);
& > svg {
aspect-ratio: 1 / 1;
fill: var(--background-color);
height: var(--space-xs);
margin-right: var(--space-2xs);
width: var(--space-xs);
}
} }

9
public/css/dropcap.css
View File

@@ -1,16 +1,13 @@
main > section > article.post > p:not(.nodropcap):first-of-type:first-letter { main > section > article.post > p:not(.nodropcap):first-of-type:first-letter {
float: left; float: left;
font-size: var(--step-5); font-size: var(--step-4);
padding: var(--space-2xs); padding-top: var(--space-3xs);
color: var(--contrast-color); color: var(--contrast-color);
border: solid 2px var(--contrast-color);
font-family: var(--font-family-headline); font-family: var(--font-family-headline);
font-variation-settings: font-variation-settings:
"opsz" 144, "opsz" 144,
"wght" 500, "wght" 600,
"SOFT" 10, "SOFT" 10,
"WONK" 0; "WONK" 0;
margin: 0.5rem 0.7rem 0 0; margin: 0.5rem 0.7rem 0 0;
border-radius: 0.2em;
border-top-left-radius: 0;
} }

3
public/css/gallery-images.css
View File

@@ -7,7 +7,8 @@
width: var(--space-7xl-8xl); width: var(--space-7xl-8xl);
height: var(--space-7xl-8xl); height: var(--space-7xl-8xl);
.gallery-image { .gallery-image {
border-radius: var(--border-radius); border-radius: 1em;
border-top-left-radius: 0;
width: var(--space-7xl-8xl); width: var(--space-7xl-8xl);
height: var(--space-7xl-8xl); height: var(--space-7xl-8xl);
object-fit: cover; object-fit: cover;

31
public/css/guestbook.css
View File

@@ -1,31 +1,48 @@
.guestbook-message blockquote { .guestbook-message blockquote {
margin-bottom: var(--space-m); margin-bottom: var(--space-m);
margin-top: var(--space-3xs); margin-top: var(--space-3xs);
padding: var(--space-m) var(--space-2xl);
&:before {
color: var(--contrast-color);
content: "“";
font-size: 10rem;
font-variation-settings:
"opsz" 72,
"wght" 360,
"SOFT" 0,
"WONK" 0;
margin-left: calc((var(--space-xl) * 1.25) * -1);
margin-top: calc((var(--space-s) * 1.3) * -1);
position: absolute;
}
} }
.guestbook-message p { .guestbook-message p {
margin-block: 0 0; margin-block: 0 0;
position: relative; position: relative;
z-index: 1;
} }
.guestbook-message p b, .guestbook-message p b,
.guestbook-message p small { .guestbook-message p small {
font-family: var(--meta-font-family); color: var(--color-metadata);
font-size: var(--meta-font-size); font-family: var(--font-family-metadata);
font-variation-settings: var(--meta-font-variation-settings); font-size: var(--font-size-metadata);
font-variation-settings: var(--font-variation-settings-metadata);
text-transform: var(--text-transform-metadata);
letter-spacing: var(--letter-spacing-metadata);
& a[href] {
color: var(--color-metadata);
}
} }
#guestbooks___challenge-answer-container br, #guestbooks___challenge-answer-container br,
.guestbooks___input-container br { .guestbooks___input-container br {
display: none; display: none;
} }
.guestbook-message-reply { .guestbook-message-reply {
border-left: var(--border-details);
margin-left: var(--space-l); margin-left: var(--space-l);
margin-top: calc(var(--space-s) * -1); margin-top: calc(var(--space-s) * -1);
opacity: 0.9;
padding-left: var(--space-s); padding-left: var(--space-s);
font-style: italic; font-style: italic;
& blockquote { & blockquote {
margin-left: 0; padding-left: var(--space-s);
} }
& blockquote::before { & blockquote::before {
content: ""; content: "";

812
public/css/index.css
View File

File diff suppressed because it is too large Load Diff

23
public/css/me.css
View File

@@ -16,16 +16,27 @@
justify-content: center; justify-content: center;
width: 100%; width: 100%;
margin: 0 0 var(--space-s) 0; margin: 0 0 var(--space-s) 0;
& > img { & > svg {
max-width: var(--space-s); fill: var(--background-color);
margin-right: var(--space-xs);
width: var(--space-s);
height: var(--space-s);
} }
} }
h1.socialTitle { h1.socialTitle {
padding: 0; padding: 0;
margin: 0; margin-top: var(--space-m);;
font-size: var(--step-4);
line-height: calc(var(--step-4) * 0.5 + var(--step-4)); color: var(--contrast-color);
font-family: var(--font-family-ui);
font-size: var(--step-0);
font-style: normal;
font-variation-settings: "wght" 450;
letter-spacing: var(--wide-letter-spacing);
line-height: calc(var(--step-0) * 0.25 + var(--step-0));
text-transform: uppercase;
text-wrap: pretty;
} }
.links-container p { .links-container p {
@@ -37,5 +48,5 @@ h1.socialTitle {
img.profilePic { img.profilePic {
max-width: var(--space-6xl); max-width: var(--space-6xl);
border-radius: 50%; border-radius: 50%;
border: solid 2px var(--text-color); border: solid 2px var(--contrast-color);
} }

32
public/css/metadata.css
View File

@@ -1,32 +0,0 @@
.post-metadata {
display: flex;
flex-flow: row nowrap;
padding: 0 0 var(--space-l) 0;
}
.post-metadata-copy {
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
.post-metadata p,
.post-metadata ul,
.post-metadata ul li,
time,
.metadata {
display: flex;
flex-flow: row wrap;
font-family: var(--meta-font-family);
font-size: var(--meta-font-size);
font-style: var(--meta-font-style);
font-variation-settings: var(--meta-font-variation-settings);
line-height: calc(var(--meta-font-size) * 0.5 + var(--meta-font-size));
list-style: none;
margin: 0;
padding-left: 0em;
}
.post-metadata {
padding-left: 0.15rem;
}

59
public/css/microblog.css
View File

@@ -1,5 +1,5 @@
.microblog-comment { .microblog-comment {
p { & p {
font-style: italic; font-style: italic;
margin: 0; margin: 0;
padding: var(--space-s) 0 0 0; padding: var(--space-s) 0 0 0;
@@ -12,20 +12,42 @@
} }
.microblog-icon { .microblog-icon {
filter: var(--logo-filter); fill: var(--contrast-color);
height: var(--space-4xl); height: var(--space-4xl);
padding-right: var(--space-s); padding-right: var(--space-s);
width: var(--space-2xl); width: var(--space-2xl);
} }
.microblog-list { .microblog-list {
.post-metadata { & .postlist-item-container {
display: flex;
flex-flow: column nowrap;
gap: var(--space-s);
& .postlist-item {
& .post-copy {
& .post-metadata {
& .post-metadata-copy {
& p {
margin-bottom: 0;
}
}
}
& h3 {
&:before {
content: "";
margin-left: 0;
}
}
}
}
}
& .post-metadata {
padding: 0; padding: 0;
} }
} }
.microblog-post { .microblog-post {
display: flex; display: flex;
.microblog-comment { & .microblog-comment {
p { & p {
padding-top: 0; padding-top: 0;
padding-bottom: var(--space-2xs); padding-bottom: var(--space-2xs);
} }
@@ -37,25 +59,28 @@
align-items: center; align-items: center;
padding: var(--space-s); padding: var(--space-s);
} }
.microblog-status-copy { & h2 {
margin-top: var(--space-m);
}
& .microblog-status-copy {
align-items: center; align-items: center;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
p { p {
margin: 0; margin: 0;
} }
.status-metadata { & .status-metadata {
font-family: var(--meta-font-family); color: var(--color-metadata);
font-size: var(--meta-font-size); font-family: var(--font-family-metadata);
font-style: var(--meta-font-style); font-size: var(--font-size-metadata);
font-variation-settings: var(--meta-font-variation-settings); font-variation-settings: var(--font-variation-settings-metadata);
line-height: calc(var(--meta-font-size) * 0.5 + var(--meta-font-size)); letter-spacing: var(--letter-spacing-metadata);
line-height: calc(var(--font-size-metadata) * 0.5 + var(--font-size-metadata));
text-transform: var(--text-transform-metadata);
& a[href] {
color: var(--color-metadata);
text-decoration: none;
} }
} }
} }
.postlist-item-container {
display: flex;
flex-flow: column nowrap;
gap: var(--space-s);
} }

36
public/css/navigator.css
View File

@@ -2,43 +2,45 @@
display: grid; display: grid;
gap: var(--space-2xs) var(--space-2xs); gap: var(--space-2xs) var(--space-2xs);
grid-template-columns: repeat(auto-fill, minmax(var(--space-6xl), 1fr)); grid-template-columns: repeat(auto-fill, minmax(var(--space-6xl), 1fr));
margin-bottom: var(--space-xl);
margin-top: var(--space-xl);
width: 100%; width: 100%;
.navigatorItem { .navigatorItem {
background-color: var(--background-color); background-color: var(--background-color);
border: 1.5px solid var(--color-gray-20); border: var(--border-header-footer);
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: var(--text-color); color: var(--text-color);
display: flex; display: flex;
flex-flow: column wrap; flex-flow: row nowrap;
height: var(--space-3xl); height: var(--space-3xl);
text-align: center; text-align: center;
a { & a[href] {
height: 100%; height: 100%;
padding: var(--space-s) var(--space-xs); padding: var(--space-s) var(--space-xs);
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
img { & p {
font-family: var(--font-family-ui);
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
text-transform: uppercase;
letter-spacing: var(--wide-letter-spacing);
}
& svg {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
filter: var(--logo-filter); fill: var(--text-color);
max-height: var(--space-m);
width: var(--space-m); width: var(--space-m);
} }
} }
&:hover { &:hover {
background-color: var(--text-color); background-color: var(--contrast-color);
border: 1.25px solid var(--text-color);
transition: var(--transition-normal); transition: var(--transition-normal);
a { & a {
color: var(--background-color); color: var(--background-color);
transition: var(--transition-normal); transition: var(--transition-normal);
img { & svg {
filter: none; fill: var(--background-color);
transition: var(--transition-normal);
}
@media (prefers-color-scheme: dark) {
img {
filter: brightness(0) saturate(100%) invert(16%) sepia(0%)
saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
}
} }
} }
} }

91
public/css/post-list.css
View File

@@ -1,91 +0,0 @@
/* Posts list */
.postlist,
.links-nextprev {
container: postlist / inline-size;
}
.postlist-item {
align-items: flex-start;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
width: 100%;
}
.postlist-item-container {
display: flex;
flex-flow: column nowrap;
gap: var(--space-s);
}
.post-image {
width: var(--space-4xl);
height: var(--space-4xl);
object-fit: cover;
object-position: 50% 50%;
}
.post-image-container {
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
height: var(--space-4xl);
max-height: var(--space-4xl);
overflow: hidden;
width: var(--space-4xl);
}
.postlist-date,
.postlist-item:before {
color: var(--color-gray-90);
font-size: var(--meta-font-size);
}
.postlist-date {
word-spacing: -0.5px;
}
.postlist-link {
font-size: var(--step-5);
padding-right: 0.5em;
text-decoration: none;
}
.postlist-link p {
background-color: var(--color-gray-90);
border-radius: 100px;
color: var(--background-color);
font-family: var(--font-family-ui);
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
letter-spacing: var(--ui-letter-spacing);
margin-top: calc(var(--space-3xs) * -1);
padding-left: var(--space-xs);
padding-right: var(--space-xs);
text-transform: uppercase;
width: max-content;
}
.post-copy {
display: flex;
flex-flow: column wrap;
}
@container postlist (max-width: 500px) {
.postlist-item {
flex-flow: column wrap;
}
.post-image-container {
margin-left: 0;
min-height: var(--space-10xl);
width: 100%;
}
.post-image-container img.post-image {
width: 100cqw;
height: var(--space-10xl);
}
.postlist-link {
padding: 0;
}
.postlist-link h3 {
padding-top: var(--space-m);
}
.postlist-link p {
margin-top: var(--space-xs);
}
.post-metadata {
padding-bottom: 0;
}
}

6
public/css/profile-pic.css
View File

@@ -1,6 +0,0 @@
.profilePic:not(.links-container > img.profilePic) {
border-radius: 100%;
height: var(--space-xl);
margin-right: var(--space-s);
width: var(--space-xl);
}

4
public/css/quiz.css
View File

@@ -18,7 +18,7 @@ details:not(.toc) {
font-size: var(--step--2); font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui); font-variation-settings: var(--font-variation-ui);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: var(--ui-letter-spacing); letter-spacing: var(--wide-letter-spacing);
font-family: var(--font-family-ui); font-family: var(--font-family-ui);
::marker { ::marker {
@@ -40,7 +40,7 @@ details:not(.toc) {
font-size: var(--step--2); font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui); font-variation-settings: var(--font-variation-ui);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: var(--ui-letter-spacing); letter-spacing: var(--wide-letter-spacing);
font-family: var(--font-family-ui); font-family: var(--font-family-ui);
} }
} }

33
public/css/search.css
View File

@@ -28,13 +28,44 @@ mark {
font-family: var(--font-family-ui) !important; font-family: var(--font-family-ui) !important;
font-size: var(--step--2) !important; font-size: var(--step--2) !important;
font-variation-settings: var(--font-variation-ui) !important; font-variation-settings: var(--font-variation-ui) !important;
letter-spacing: var(--ui-letter-spacing) !important; letter-spacing: var(--wide-letter-spacing) !important;
margin: var(--space-xs) 0 0 0 !important; margin: var(--space-xs) 0 0 0 !important;
padding: 0 var(--space-xs) !important; padding: 0 var(--space-xs) !important;
text-transform: uppercase !important; text-transform: uppercase !important;
transition: var(--transition-normal) !important; transition: var(--transition-normal) !important;
white-space: nowrap !important; white-space: nowrap !important;
} }
.pagefind-ui__results-area {
.pagefind-ui__message {
font-family: var(--font-family-ui);
font-size: var(--step--2);
font-variation-settings: "wght" 500;
letter-spacing: var(--wide-letter-spacing);
padding-top: 0;
text-transform: uppercase;
}
.pagefind-ui__results {
& .pagefind-ui__result {
& .pagefind-ui__result-inner {
& .pagefind-ui__result-excerpt {
font-size: var(--step-0);
line-height: calc(var(--step-0) * 0.5 + var(--step-0));
}
& .pagefind-ui__result-title {
font-family: var(--font-family-ui);
font-size: var(--step--1);
font-variation-settings: "wght" 700;
letter-spacing: var(--wide-letter-spacing);
line-height: calc(var(--step--1) * 0.5 + var(--step--1));
text-transform: uppercase;
& a[href] {
color: var(--contrast-color);
}
}
}
}
}
}
.pagefind-ui__search-clear { .pagefind-ui__search-clear {
font-family: var(--meta-font-family) !important; font-family: var(--meta-font-family) !important;

22
public/css/tags.css
View File

@@ -1,31 +1,27 @@
a.post-tag { a.post-tag {
background-color: var(--color-gray-20); color: var(--background-color);
border-radius: 1rem;
color: var(--text-color);
font-family: var(--meta-font-family); font-family: var(--meta-font-family);
font-variation-settings: "wght" 300; font-variation-settings: "wght" 300;
margin-top: var(--space-3xs);
margin-right: var(--space-3xs);
padding: 0 var(--space-3xs);
text-decoration: none; text-decoration: none;
} }
a.post-tag:before { a.post-tag:before {
content: "#"; content: "#";
} }
a.post-tag:visited { a.post-tag:visited {
color: var(--text-color); color: var(--background-color);
} }
a.post-tag:hover { a[href].post-tag:hover {
color: var(--text-color); color: var(--background-color);
} }
.tag-feed-icon { .tag-feed-icon {
fill: var(--rss-orange); fill: var(--rss-orange);
height: var(--space-m);
transition: var(--transition-normal);
width: var(--space-m);
&.small {
height: var(--space-s); height: var(--space-s);
transition: var(--transition-normal);
width: var(--space-s); width: var(--space-s);
&.small {
height: var(--space-xs);
width: var(--space-xs);
} }
} }
.taglist { .taglist {

43
public/css/toc.css
View File

@@ -1,11 +1,46 @@
details.toc {
padding-bottom: var(--space-m);
}
.toc { .toc {
padding-bottom: var(--space-m);
& div.toc {
background-color: var(--contrast-color-tint);
border-radius: var(--large-rounded-radius);
border-top-left-radius: 0;
color: var(--contrast-color);
font-family: var(--font-family-ui);
font-variation-settings: "wght" 360;
margin-left: 0;
margin-right: 0;
padding: var(--space-s) var(--space-l) var(--space-m) var(--space-m);
}
& ol { & ol {
margin-bottom: 0; margin-bottom: 0;
margin-top: 0; margin-top: 0;
padding-left: var(--space-m); padding-left: var(--space-m);
& li {
font-size: var(--step--1);
& a {
text-decoration: none;
}
}
}
&[open] {
& summary::marker {
content: "✸ ";
font-size: var(--step--1);
}
}
& summary {
cursor: pointer;
font-family: var(--font-family-ui);
font-size: var(--step--2);
font-variation-settings: "wght" 700;
letter-spacing: var(--wide-letter-spacing);
margin-left: -1.5em;
text-transform: uppercase;
&::marker {
color: var(--contrast-color);
content: "✸ ";
font-size: var(--step--1);
padding-top: 1em;
}
} }
} }

6
public/xsl/basic.xsl
View File

@@ -11,14 +11,12 @@
</title> </title>
<link rel="stylesheet" href="../css/index.css"/> <link rel="stylesheet" href="../css/index.css"/>
<link rel="stylesheet" href="../css/webfonts/webfonts.css"/> <link rel="stylesheet" href="../css/webfonts/webfonts.css"/>
<link rel="stylesheet" href="../css/post-list.css"/>
<link rel="stylesheet" href="../css/metadata.css"/> <link rel="stylesheet" href="../css/metadata.css"/>
</head> </head>
<body> <body>
<main> <main>
<h1>RSS Feed Preview</h1> <h1 class="feed-preview">RSS Feed Preview</h1>
<p class="nodropcap page-block">This is an RSS feed. Subscribe by copying the URL from the address bar into your newsreader. Don’t have a newsreader? <a href="../about-feeds/">Learn more and get started</a>. It’s free. Below is a preview of what you’ll see in your newsreader when you subscribe. Done here? <a href="../">Go back to nathanupchurch.com</a></p> <p class="nodropcap page-block">This is an RSS feed. Subscribe by copying the URL from the address bar into your newsreader. Don’t have a newsreader? <a href="../about-feeds/">Learn more and get started</a>. It’s free. Below is a preview of what you’ll see in your newsreader when you subscribe. Done here? <a href="../">Go back to nathanupchurch.com</a></p>
<h2>Posts</h2>
<section class="postlist"> <section class="postlist">
<div class="postlist-item-container"> <div class="postlist-item-container">
<xsl:for-each select="/atom:feed/atom:entry"> <xsl:for-each select="/atom:feed/atom:entry">
@@ -40,7 +38,7 @@
<xsl:attribute name="href"> <xsl:attribute name="href">
<xsl:value-of select="atom:link/@href"/> <xsl:value-of select="atom:link/@href"/>
</xsl:attribute> </xsl:attribute>
<h3> <h3 class="postlist-link">
<xsl:value-of select="atom:title"/> <xsl:value-of select="atom:title"/>
</h3> </h3>
</a> </a>