From 677bf18e5bcf806567b7cf99539ef27de5b5d7ae Mon Sep 17 00:00:00 2001 From: Nathan Upchurch Date: Sun, 28 Jun 2026 20:18:03 -0500 Subject: [PATCH] New style initial --- _data/blogroll.js | 7 + _data/metadata.js | 193 +++- _includes/articleAuthor.njk | 51 ++ _includes/footer.njk | 41 +- _includes/header.njk | 8 - _includes/layouts/base.njk | 11 +- _includes/layouts/links.njk | 2 +- _includes/layouts/post.njk | 71 +- _includes/layouts/quizzes.njk | 6 + _includes/mastodonComments.njk | 10 +- _includes/nav.njk | 30 +- _includes/navigator.njk | 2 +- _includes/permalinkButtons.njk | 22 +- _includes/postslist.njk | 41 +- _includes/settings/siteSettings.njk | 1 - _includes/statusList.njk | 39 +- content/about-feeds/index.md | 11 +- content/about/index.md | 21 +- content/blog/index.njk | 36 +- .../gallery-image-page-generator.njk | 6 +- content/index.njk | 3 - content/now-burning/index.njk | 6 +- content/now/index.njk | 10 +- content/once-burned/index.njk | 11 +- content/prior-thoughts/index.njk | 2 +- content/quizzes/index.njk | 2 +- content/status/index.njk | 11 +- content/tags/tag-page-generator.njk | 30 +- public/css/comments.css | 197 ++++- .../css/continue-discussion-on-mastodon.css | 8 +- public/css/dropcap.css | 9 +- public/css/gallery-images.css | 3 +- public/css/guestbook.css | 31 +- public/css/index.css | 832 ++++++++++++++---- public/css/me.css | 23 +- public/css/metadata.css | 32 - public/css/microblog.css | 61 +- public/css/navigator.css | 36 +- public/css/post-list.css | 91 -- public/css/profile-pic.css | 6 - public/css/quiz.css | 4 +- public/css/search.css | 33 +- public/css/tags.css | 22 +- public/css/toc.css | 43 +- public/xsl/basic.xsl | 6 +- 45 files changed, 1454 insertions(+), 667 deletions(-) create mode 100644 _includes/articleAuthor.njk delete mode 100644 public/css/metadata.css delete mode 100644 public/css/post-list.css delete mode 100644 public/css/profile-pic.css diff --git a/_data/blogroll.js b/_data/blogroll.js index 2fe2f01..6b6be76 100644 --- a/_data/blogroll.js +++ b/_data/blogroll.js @@ -508,6 +508,13 @@ export default { 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.", }, + { + 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", feedUrl: "https://www.usermag.co/feed", diff --git a/_data/metadata.js b/_data/metadata.js index 0a76532..06530d5 100644 --- a/_data/metadata.js +++ b/_data/metadata.js @@ -1,12 +1,57 @@ export default { + blogName: "The Stochastic Bletherist", title: "Nathan Upchurch", logo: "/img/logo.svg", holidayLogo: "", url: "https://nathanupchurch.com/", language: "en", + pageELementBackgroundImage: + "/img/Still_Life_with_Lemons_Oranges_and_a_Pomegranate_about_1620–1630_Jacob_van_Hulsdonck.webp", + defaultHeroImage: + "/img/Still_Life_with_Lemons_Oranges_and_a_Pomegranate_about_1620–1630_Jacob_van_Hulsdonck.webp", description: "The personal website and blog of Nathan Upchurch, where I write about incense, free and open source software, design, vegan cooking, music, and all sorts of other topics that I find interesting.", + footerLinks: [ + { + linkDisplay: "About", + linkURL: "/about/", + }, + { + linkDisplay: "Blog", + linkURL: "/blog/", + }, + { + linkDisplay: "Contact", + linkURL: "/me/", + }, + { + linkDisplay: "Colophon", + linkURL: "/about/colophon/", + }, + { + linkDisplay: "Feed", + linkURL: "/feed/feed.xml", + }, + { + linkDisplay: "Privacy", + linkURL: "/about/privacy/", + }, + { + linkDisplay: "Search", + linkURL: "/search/", + }, + { + linkDisplay: "Site Settings", + linkURL: "#", + onClick: "event.preventDefault();siteSettings.showModal()", + }, + { + linkDisplay: "Sitemap", + linkURL: "/sitemap/", + }, + ], author: { + bio: "Nathan likes to cook vegan food, play the trombone, make incense, design stuff, muck about with free software and tech, and more. He dreams of living in a cottage somewhere and spending his days making incense sticks. Sadly, he can not afford to do this.", givenName: "Nathan", familyName: "Upchurch", name: "Nathan Upchurch", @@ -22,77 +67,127 @@ export default { mastodonUser: "nathanu", navigatorLinks: [ { - iconURL: "/img/icons/breeze/typewriter.svg", + iconSVG: ` + + + `, linkDisplay: "Blog", linkURL: "/blog/", }, { - iconURL: "/img/icons/breeze/view-list-text.svg", + iconSVG: ` + + + `, linkDisplay: "Blogroll", linkURL: "/blogroll/", }, { - iconURL: "/img/icons/breeze/view-preview.svg", + iconSVG: ` + + + `, linkDisplay: "Galleries", linkURL: "/galleries/", }, { - iconURL: "/img/icons/breeze/story-editor.svg", + iconSVG: ` + + + `, linkDisplay: "Guestbook", linkURL: "/guestbook/", }, { - iconURL: "/img/censer_short.svg", + iconSVG: ` + + + + + + `, linkDisplay: "Incense", linkURL: "/incense/", }, { - iconURL: "/img/icons/breeze/news-subscribe.svg", + iconSVG: ` + + + `, linkDisplay: "Life Updates", linkURL: "/now/", }, { - iconURL: "/img/icons/breeze/link-symbolic.svg", + iconSVG: ` + + + + + `, linkDisplay: "Links", linkURL: "/links/", }, { - iconURL: "/img/icons/breeze/amarok_cart_view.svg", + iconSVG: ` + + + `, linkDisplay: "Not Amazon", linkURL: "/not-amazon/", }, { - iconURL: "/img/burn.svg", + iconSVG: ` + + + `, linkDisplay: "Now Burning", linkURL: "/now-burning/", }, { - iconURL: "/img/icons/breeze/document-edit-sign.svg", + iconSVG: ` + + + `, linkDisplay: "Quizzes", linkURL: "/quizzes/", }, { - iconURL: "/img/icons/breeze/file-search-symbolic.svg", + iconSVG: ` + + + `, linkDisplay: "Search", linkURL: "/search/", }, { - iconURL: "/img/icons/breeze/map-globe.svg", + iconSVG: ` + + + `, linkDisplay: "Sitemap", linkURL: "/sitemap/", }, { - iconURL: "/img/icons/breeze/clock-symbolic.svg", + iconSVG: ` + + + `, linkDisplay: "Status", linkURL: "/status/", }, { - iconURL: "/img/icons/breeze/tag.svg", + iconSVG: ` + + + `, linkDisplay: "Topics", linkURL: "/tags/", }, { - iconURL: "/img/icons/breeze/kstars_supernovae.svg", + iconSVG: ` + + + `, linkDisplay: "Wishes", linkURL: "/wish/", }, @@ -105,77 +200,106 @@ export default { title: "My Blog", linkURL: "https://nathanupchurch.com", linkDisplay: "Blog", - iconURL: "/img/logo.svg", + iconSVG: ``, }, { customAttribute: `rel="me"`, title: "BookWyrm", linkURL: "https://ramblingreaders.org/user/NathanU", linkDisplay: "BookWyrm", - iconURL: "/img/book.svg", + iconSVG: ` + + + `, }, { customAttribute: `rel="me"`, title: "Email Me", linkURL: "Mailto:blog@upchur.ch", linkDisplay: "Email", - iconURL: "/img/envelope.svg", + iconSVG: ` + + + `, }, { customAttribute: `rel="me"`, title: "Friendica", linkURL: "https://friendica.world/profile/nathan", linkDisplay: "Friendica", - iconURL: "/img/friendica.svg", + iconSVG: ``, }, { customAttribute: `rel="me"`, title: "Keyoxide Identity Profile", linkURL: "https://keyoxide.org/31E809FAEA1532AC91BBDCF1EC499D3513F69340", linkDisplay: "Keyoxide", - iconURL: "/img/keyoxide.svg", + iconSVG: ` + + + + + `, }, { customAttribute: `rel="me"`, title: "Lemmy", linkURL: "https://lemmy.ml/u/NathanUp", linkDisplay: "Lemmy", - iconURL: "/img/Lemmy_logo.svg", + iconSVG: ``, }, { customAttribute: `rel="me"`, title: "Mastodon", linkURL: "https://lounge.town/@nathanu", linkDisplay: "Mastodon", - iconURL: "/img/mastodon.svg", + iconSVG: ` + + + `, }, { customAttribute: `rel="me"`, title: "Matrix", linkURL: "https://matrix.to/#/@nathan:upchur.ch", linkDisplay: "Matrix", - iconURL: "/img/matrix-org.svg", + iconSVG: ` + + + `, }, { customAttribute: `rel="me"`, title: "Movim", linkURL: "https://xmpp.earth/blog/Nathan", linkDisplay: "Movim", - iconURL: "/img/movim.svg", + iconSVG: ``, }, { customAttribute: `rel="me"`, title: "PeerTube", linkURL: "https://makertube.net/a/nathan/video-channels", linkDisplay: "PeerTube", - iconURL: "/img/peertube.svg", + iconSVG: ` + + + + + + + `, }, { customAttribute: `rel="me"`, title: "Pixelfed", linkURL: "https://pixelfed.social/@nathanu", linkDisplay: "Pixelfed", - iconURL: "/img/pixelfed.svg", + iconSVG: ` + + + `, }, { customAttribute: `rel="me"`, @@ -183,25 +307,34 @@ export default { linkURL: "https://signal.me/#eu/j-om4cfsGXtfKo0UX28EQfEL_Gd1KpJr8nQpI9Smhdsb-r98eT5F6obQ1BcYZCcW", linkDisplay: "Signal", - iconURL: "/img/Signal-Logo-White.svg", + iconSVG: ` + + + + + + `, }, { customAttribute: `rel="me"`, title: "XMPP", linkURL: "xmpp:nathan_u@member.fsf.org", linkDisplay: "XMPP", - iconURL: "/img/XMPP.svg", + iconSVG: ` + + + `, }, { customAttribute: `rel="me"`, title: "WAFRN", linkURL: "https://app.wafrn.net/blog/nathan", linkDisplay: "WAFRN", - iconURL: "/img/wafrn.svg", + iconSVG: ``, }, ], weatherOnByDefault: false, - weatherSymbol: "🌸", + weatherSymbol: "🌞", webrings: [ { name: "Fediring", diff --git a/_includes/articleAuthor.njk b/_includes/articleAuthor.njk new file mode 100644 index 0000000..0f0337e --- /dev/null +++ b/_includes/articleAuthor.njk @@ -0,0 +1,51 @@ +
+ {% if author %} + {% if author.profilePic %} + {% if author.url %} + + {% endif %} + + {% if author.url %} + + {% endif %} + {% endif %} +

+ {% if author.url %} + + {% endif %} + {% if author.name %} + {{ author.name }} + {% endif %} + {% if author.url %} + + {% endif %} + {% if author.bio %} +
{{ author.bio }} + {% endif %} +

+ {% else %} + {% if metadata.author.profilePic %} + {% if metadata.author.url %} + + {% endif %} + + {% if metadata.author.url %} + + {% endif %} + {% endif %} +

+ {% if metadata.author.url %} + + {% endif %} + {% if metadata.author.name %} + {{ metadata.author.name }} + {% endif %} + {% if metadata.author.url %} + + {% endif %} + {% if metadata.author.bio %} +
{{ metadata.author.bio }} + {% endif %} + {% endif %} +

+
diff --git a/_includes/footer.njk b/_includes/footer.njk index 151b424..f99391b 100644 --- a/_includes/footer.njk +++ b/_includes/footer.njk @@ -1,22 +1,25 @@ +{% include "settings/siteSettings.njk" %} diff --git a/_includes/header.njk b/_includes/header.njk index 4471aa6..93f18fc 100644 --- a/_includes/header.njk +++ b/_includes/header.njk @@ -1,12 +1,4 @@
- - - {% if not hideNav %}{% include "nav.njk" %}{% endif %}
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index ebd6a5c..c1a2336 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -13,18 +13,9 @@ {% if tags and tags.includes('galleryImage') %} {% endif %} - {% if tags and tags.includes('metadata') %} - - {% endif %} {% if tags and tags.includes('navigator') %} {% endif %} - {% if tags and tags.includes('profilePic') %} - - {% endif %} - {% if tags and tags.includes('postList') %} - - {% endif %} {% if tags and tags.includes('tagList') %} {% endif %} @@ -86,8 +77,8 @@ {% endif %} - {% include "birb.njk" %} {% include "footer.njk" %} + {% include "birb.njk" %} {% include "weather.njk" %} {% include "wooMode.njk" %} {% include "settings/settingsConfig.njk" %} diff --git a/_includes/layouts/links.njk b/_includes/layouts/links.njk index 90b8c31..bffd8cb 100644 --- a/_includes/layouts/links.njk +++ b/_includes/layouts/links.njk @@ -8,7 +8,7 @@ layout: layouts/linksPage.njk
{% for link in metadata.socialLinks %} - + {% endfor %}
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk index fa30c85..f030e6c 100644 --- a/_includes/layouts/post.njk +++ b/_includes/layouts/post.njk @@ -2,44 +2,39 @@ layout: layouts/base.njk ---
-

{{ title | markdownify | safe}}

-{% include "mastodonComments.njk" %} -{% if not hideMetadata %} -
- {% if author %} - {% if author.profilePic %} - - {% endif %} -
-

{% if author.url %}{% endif %} - {% if author.name %}By {{ author.name }}{% endif %}{% if author.url %} • {% endif %} • {{ content | emojiReadTime }}

- - {% else %} - {% if metadata.author.profilePic %} - - {% endif %} -
-

{% if metadata.author.url %}{% endif %} - {% if metadata.author.name %}By {{ metadata.author.name }}{% endif %}{% if metadata.author.url %} • {% endif %}{% if tags and not tags.includes('quiz') %} • {{ content | emojiReadTime }}{% endif %}

- - {% endif %} - - -
    - {%- for tag in tags | filterTagList %} - {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %} -
  • - - {{ tag }}  - -
    • - {%- endfor %} -
+
+
+

+ {%- for tag in tags | filterTagList %} + {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %} + #{{ tag }}  + {%- endfor %} +

+

{{ title | markdownify | safe}}

+ {% if synopsis %} +

+ {{ synopsis | markdownify | safe}} +

+ {% endif %} + {% if tags and tags.includes('quiz') %} +

+ {{ content | markdownify | safe}} +

+ {% endif %} + {% if not tags.includes('quiz') %} + {% if imageURL %} + {{ imageAlt }} + {% endif %} +

+
+ By {% if author %}{{ author.name }}{% else %}{{ metadata.author.name }}{% endif %}

+ {% endif %} +
-
-{% endif %} -{{ content | safe }} +{% if tags and not tags.includes('quiz') %}{{ content | safe }}{% endif %}
+{% if tags and not tags.includes('quiz') %} +{% include "articleAuthor.njk" %} +{% include "mastodonComments.njk" %} +{% endif %} {% include "issoCommenting.njk" %} diff --git a/_includes/layouts/quizzes.njk b/_includes/layouts/quizzes.njk index 7bfc0be..2622bd2 100644 --- a/_includes/layouts/quizzes.njk +++ b/_includes/layouts/quizzes.njk @@ -3,6 +3,12 @@ layout: layouts/post.njk structuredData: none --- {{ content | safe }} +{% if imageURL %} + {{ imageAlt }} +{% endif %} +

+
+ By {% if author %}{{ author.name }}{% else %}{{ metadata.author.name }}{% endif %}

{% for question in questions %} diff --git a/_includes/mastodonComments.njk b/_includes/mastodonComments.njk index 8d251f9..74f14f6 100644 --- a/_includes/mastodonComments.njk +++ b/_includes/mastodonComments.njk @@ -2,7 +2,15 @@
diff --git a/_includes/nav.njk b/_includes/nav.njk index d0360be..cbc9d12 100644 --- a/_includes/nav.njk +++ b/_includes/nav.njk @@ -1,10 +1,24 @@ diff --git a/_includes/navigator.njk b/_includes/navigator.njk index 121349e..5bf61a3 100644 --- a/_includes/navigator.njk +++ b/_includes/navigator.njk @@ -2,7 +2,7 @@ {% for link in metadata.navigatorLinks %}
- + {{ link.iconSVG | safe }}

{{ link.linkDisplay }}
diff --git a/_includes/permalinkButtons.njk b/_includes/permalinkButtons.njk index 332f900..4dcb9f6 100644 --- a/_includes/permalinkButtons.njk +++ b/_includes/permalinkButtons.njk @@ -1,12 +1,14 @@ {% set numPages = pagination.pages | length %} -{% if pagination.pageNumber > 0 %} - - - -{% endif %} + + {% if pagination.pageNumber > 0 %} + + + + {% endif %} -{% if pagination.pageNumber < numPages - 1 %} - - - -{% endif %} + {% if pagination.pageNumber < numPages - 1 %} + + + + {% endif %} + diff --git a/_includes/postslist.njk b/_includes/postslist.njk index 15e1fe7..ea49fee 100644 --- a/_includes/postslist.njk +++ b/_includes/postslist.njk @@ -1,17 +1,8 @@
- {% if postlistHeaderText %}

{{ postlistHeaderText }}

{% endif %} + {% if postlistHeaderText %}

{{ postlistHeaderText }}

{% endif %}
{% for post in postslist %}
- - {% if not postListTypeMicroblog %} - -
- {{ post.data.imageAlt }} -
- - {% endif %} -
{% if not postListTypeMicroblog %} @@ -23,6 +14,13 @@ {% endif %} + {% if post.data.synopsis %} +

{{ post.data.synopsis | markdownify | safe }}

+ {% endif %} + {% if not post.data.synopsis and post.data.description %} +

{{ post.data.description | markdownify | safe }}

+ {% endif %} +

@@ -32,30 +30,25 @@ {% endif %} {% if post.data.author.name %} - By {{ post.data.author.name }} + {{ post.data.author.name }} {% endif %} {% if post.data.author.url %} •  {% endif %} - {% else %}By {{ metadata.author.name }} •  + {% else %}{{ metadata.author.name }} •  {% endif %} {% endif %}

-
    - {%- for tag in post.data.tags | filterTagList %} - {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %} -
  • - - {{ tag }}  - -
    • - {%- endfor %} -
+ {% if not postListTypeMicroblog %} + +
+ {{ post.data.imageAlt }} +
+ + {% endif %}
{% endfor %} diff --git a/_includes/settings/siteSettings.njk b/_includes/settings/siteSettings.njk index 345fc0a..fb09d7b 100644 --- a/_includes/settings/siteSettings.njk +++ b/_includes/settings/siteSettings.njk @@ -1,5 +1,4 @@
-

Site Settings

{% include "settings/controllers/birbController.njk" %} diff --git a/_includes/statusList.njk b/_includes/statusList.njk index b0d1d56..6f32edc 100644 --- a/_includes/statusList.njk +++ b/_includes/statusList.njk @@ -7,28 +7,27 @@ {{ status.data.emoji }}
-

- - {% if metadata.author.url %} - +

+ + {% if metadata.author.url %} + + {% endif %} + + {% if metadata.author.name %} + {{ metadata.author.name }} + {% endif %} + + {% if metadata.author.url %} + + {% endif %} + • {{ status.date | niceDate }}
+ + {% if status.data.comment %} + {{ status.data.comment | markdownify | safe }}
{% endif %} - - {% if metadata.author.name %} - {{ metadata.author.name }} - {% endif %} - - {% if metadata.author.url %} -
- {% endif %} - - - {{ status.data.comment | markdownify | safe }}
- - - {{ status.date | niceDate }} - -

+

+
{% endfor %} diff --git a/content/about-feeds/index.md b/content/about-feeds/index.md index 2bab46d..5402d56 100644 --- a/content/about-feeds/index.md +++ b/content/about-feeds/index.md @@ -1,10 +1,11 @@ --- -layout: layouts/post.njk -title: How to Use Feeds +layout: layouts/base.njk +title: Nathan Upchurch | How to Use Feeds structuredData: none -hideMetadata: yep --- -

+
+ +

How to Use Feeds

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. + +
diff --git a/content/about/index.md b/content/about/index.md index 67f485a..ff49125 100644 --- a/content/about/index.md +++ b/content/about/index.md @@ -10,16 +10,17 @@ eleventyNavigation:

I’m a prolific vegan home cook, classical trombonist, incense maker, a FLOSS enthusiast, designer, programmer, music producer, print lover, and human with too many interests and too little time.

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.

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.

- - - + + + + - - - - - - - + + + + + + + diff --git a/content/blog/index.njk b/content/blog/index.njk index 48a2a55..35f9bf3 100644 --- a/content/blog/index.njk +++ b/content/blog/index.njk @@ -1,6 +1,7 @@ --- eleventyExcludeFromCollections: true layout: layouts/base.njk +hideBlogTitleFromHeader: true title: "The Stochastic Bletherist | The Personal Blog of Nathan Upchurch" tags: - metadata @@ -19,31 +20,28 @@ paginationRootDir: blog

The Stochastic Bletherist

-The personal blog of Nathan Upchurch, where he writes about everything from personal stories to tech, food, and incense.
- - - - - - - +The Stochastic Bletherist is the personal blog of Nathan Upchurch, where he writes about whatever he fancies at the time. Subscribe 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. + + + + + + + + + + +

-

What’s New:

{% else %} -

The Stochastic Bletherist Blog

-

-Writing about everything from personal stories to tech, food, and incense.
+

The Stochastic Bletherist

- - - - - - +

+The Stochastic Bletherist is the personal blog of Nathan Upchurch, where he writes about whatever he fancies at the time. Subscribe 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.

-

More posts:

+

More posts:

{% endif %} diff --git a/content/galleries/gallery-image-page-generator.njk b/content/galleries/gallery-image-page-generator.njk index d1e3c2b..83bef2e 100644 --- a/content/galleries/gallery-image-page-generator.njk +++ b/content/galleries/gallery-image-page-generator.njk @@ -18,15 +18,15 @@ eleventyComputed:
{% if picture.previousImage %} - + {% endif %} - + {% if picture.nextImage %} - + {% endif %}
diff --git a/content/index.njk b/content/index.njk index 12a3f77..8376170 100644 --- a/content/index.njk +++ b/content/index.njk @@ -1,7 +1,4 @@ --- layout: layouts/home.njk -eleventyNavigation: - key: Home - order: 1 --- {% include "navigator.njk" %} diff --git a/content/now-burning/index.njk b/content/now-burning/index.njk index 5e607f8..9fccd57 100644 --- a/content/now-burning/index.njk +++ b/content/now-burning/index.njk @@ -10,9 +10,9 @@ postlistHeaderText: "What I've been burning:"

Now Burning:

- +
-

{{ burning.data.title }}{% if burning.data.manufacturer %}, {{ burning.data.manufacturer }}{% endif %}, {{ burning.date | niceDate }}, {{ burning.data.time }}

+

{{ burning.data.title }}{% if burning.data.manufacturer %}, {{ burning.data.manufacturer }}{% endif %},
{{ burning.date | niceDate }}, {{ burning.data.time }}

{% if burning.content %}
{{ burning.content | safe }} @@ -21,5 +21,5 @@ postlistHeaderText: "What I've been burning:"
- + diff --git a/content/now/index.njk b/content/now/index.njk index 2db01cb..f304db5 100644 --- a/content/now/index.njk +++ b/content/now/index.njk @@ -18,7 +18,13 @@ tags:
@@ -31,7 +37,7 @@ tags:
{% set postsCount = collections.now | removeMostRecent | length %} {% if postsCount > 1 %} -

Previous Entries:

+

Previous Entries:

{% set postslist = collections.now | removeMostRecent %} {% set showPostListHeader = false %} {% include "postslist.njk" %} diff --git a/content/once-burned/index.njk b/content/once-burned/index.njk index bc5ea87..be9fb52 100644 --- a/content/once-burned/index.njk +++ b/content/once-burned/index.njk @@ -25,11 +25,12 @@ paginationRootDir: once-burned {% else %}

Nothing’s here yet!

{% endif %} + + {% include "permalinkButtons.njk" %} -{% include "permalinkButtons.njk" %} - - - - + + + +
diff --git a/content/prior-thoughts/index.njk b/content/prior-thoughts/index.njk index dfa0fcf..0701004 100644 --- a/content/prior-thoughts/index.njk +++ b/content/prior-thoughts/index.njk @@ -27,7 +27,7 @@ paginationRootDir: prior-thoughts {% include "permalinkButtons.njk" %} - + diff --git a/content/quizzes/index.njk b/content/quizzes/index.njk index bf1e8e7..7233cb9 100644 --- a/content/quizzes/index.njk +++ b/content/quizzes/index.njk @@ -13,7 +13,7 @@ description: "Bored? Take a fun quiz to while away the time!"

Test your knowledge, learn about yourself, and waste your precious time, right here, right now, with a quiz!

{% set postsCount = collections.quiz | length %} -

Available quizzes:

+

Available quizzes:

{% set postslist = collections.quiz | reverse %} {% set showPostListHeader = false %} {% include "postslist.njk" %} diff --git a/content/status/index.njk b/content/status/index.njk index fc89a7f..81df99a 100644 --- a/content/status/index.njk +++ b/content/status/index.njk @@ -7,7 +7,7 @@ permalink: "/status/index.html" --- {% set status = collections.status | last %} -

Nathan’s status:

+

Current status:

{{ status.data.emoji }} @@ -24,20 +24,17 @@ permalink: "/status/index.html" {% endif %} {% if metadata.author.url %} -
+ {% endif %} + • {{ status.date | niceDate }}
{% if status.data.comment %} {{ status.data.comment | markdownify | safe }}
{% endif %} - - - {{ status.date | niceDate }} -

- + diff --git a/content/tags/tag-page-generator.njk b/content/tags/tag-page-generator.njk index e50d9a6..64e19e1 100644 --- a/content/tags/tag-page-generator.njk +++ b/content/tags/tag-page-generator.njk @@ -41,17 +41,25 @@ eleventyComputed:

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.
- - - - - - + + + + + + + +

{% set postslist = collections[ tag ] | reverse %} diff --git a/public/css/comments.css b/public/css/comments.css index 44dada7..0504845 100644 --- a/public/css/comments.css +++ b/public/css/comments.css @@ -1,21 +1,124 @@ -.isso-comment-header { - height: var(--space-2xl) !important; +.isso-auth-section { + 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 { - color: var(--text-color) !important; - font-size: var(--step-2) !important; - font-variation-settings: - "opsz" 50, - "wght" 350, - "SOFT" 20, - "WONK" 1 !important; - line-height: calc(var(--step-2) * 0.25 + var(--step-2)) !important; - margin-bottom: var(--space-m) !important; - margin-top: var(--space-m) !important; - padding-bottom: 0 !important; - padding-top: 0 !important; - text-wrap: pretty !important; +.isso-comment { + & > .isso-avatar { + margin-left: var(--space-l); + margin-top: var(--space-l); + & img { + border-radius: var(--large-rounded-radius); + border-top-left-radius: 0; + } + } + & .isso-comment-footer { + display: flex; + flex-flow: row nowrap; + align-items: center; + & 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, @@ -24,15 +127,15 @@ h4.isso-thread-heading { } .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-radius: var(--border-radius) !important; - color: var(--background-color) !important; + color: var(--contrast-color) !important; font-family: var(--font-family-ui) !important; font-size: var(--step--2) !important; font-variation-settings: var(--font-variation-ui) !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; padding: 0 var(--space-xs) !important; text-transform: uppercase !important; @@ -44,8 +147,7 @@ p.isso-input-wrapper { display: block !important; margin: 0 !important; max-width: 100% !important; - & > label, - & > input { + & > label { font-family: var(--font-family-ui) !important; font-size: var(--step--2) !important; font-variation-settings: var(--font-variation-ui) !important; @@ -55,15 +157,56 @@ p.isso-input-wrapper { 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 { display: inline-block !important; float: inherit !important; - margin: 0 var(--space-2xs) 0 0 !important; + margin-left: 0 !important; &::after { 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 { background-color: var(--background-color) !important; @@ -76,7 +219,13 @@ textarea.isso-textarea { font-variation-settings: var(--font-variation-default) !important; margin-bottom: 0 !important; min-height: var(--space-l) !important; - padding: 0 var(--space-3xs) !important; resize: vertical !important; width: 100%; } + +@media (max-width: 900px) { + .isso-postbox { + margin-left: auto !important; + width: 100%; + } +} \ No newline at end of file diff --git a/public/css/continue-discussion-on-mastodon.css b/public/css/continue-discussion-on-mastodon.css index 2e9eb75..be283b6 100644 --- a/public/css/continue-discussion-on-mastodon.css +++ b/public/css/continue-discussion-on-mastodon.css @@ -2,6 +2,12 @@ grid-column: var(--span-grid); } .continue-discussion button { - margin-top: calc(var(--space-s) * -1); 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); + } } diff --git a/public/css/dropcap.css b/public/css/dropcap.css index 88e5239..7fd4bc4 100644 --- a/public/css/dropcap.css +++ b/public/css/dropcap.css @@ -1,16 +1,13 @@ main > section > article.post > p:not(.nodropcap):first-of-type:first-letter { float: left; - font-size: var(--step-5); - padding: var(--space-2xs); + font-size: var(--step-4); + padding-top: var(--space-3xs); color: var(--contrast-color); - border: solid 2px var(--contrast-color); font-family: var(--font-family-headline); font-variation-settings: "opsz" 144, - "wght" 500, + "wght" 600, "SOFT" 10, "WONK" 0; margin: 0.5rem 0.7rem 0 0; - border-radius: 0.2em; - border-top-left-radius: 0; } diff --git a/public/css/gallery-images.css b/public/css/gallery-images.css index 9ad7566..aa187d3 100644 --- a/public/css/gallery-images.css +++ b/public/css/gallery-images.css @@ -7,7 +7,8 @@ width: var(--space-7xl-8xl); height: var(--space-7xl-8xl); .gallery-image { - border-radius: var(--border-radius); + border-radius: 1em; + border-top-left-radius: 0; width: var(--space-7xl-8xl); height: var(--space-7xl-8xl); object-fit: cover; diff --git a/public/css/guestbook.css b/public/css/guestbook.css index 331f7e6..91c51cf 100644 --- a/public/css/guestbook.css +++ b/public/css/guestbook.css @@ -1,31 +1,48 @@ .guestbook-message blockquote { margin-bottom: var(--space-m); 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 { margin-block: 0 0; position: relative; - z-index: 1; } .guestbook-message p b, .guestbook-message p small { - font-family: var(--meta-font-family); - font-size: var(--meta-font-size); - font-variation-settings: var(--meta-font-variation-settings); + color: var(--color-metadata); + font-family: var(--font-family-metadata); + 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___input-container br { display: none; } .guestbook-message-reply { - border-left: var(--border-details); margin-left: var(--space-l); margin-top: calc(var(--space-s) * -1); - opacity: 0.9; padding-left: var(--space-s); font-style: italic; & blockquote { - margin-left: 0; + padding-left: var(--space-s); } & blockquote::before { content: ""; diff --git a/public/css/index.css b/public/css/index.css index f6e5119..207246a 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -5,15 +5,15 @@ --font-family-ui: "Manrope", sans-serif; --font-variation-default: "opsz" 18, "wght" 310, "SOFT" 40, "WONK" 0; --font-variation-ui: "wght" 500; - --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; + --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; --meta-font-family: "Manrope", sans-serif; - --meta-font-size: var(--step--2); + --meta-font-size: var(--step--1); --meta-font-style: normal; - --meta-font-variation-settings: "wght" 500; - --ui-letter-spacing: calc(var(--space-3xs) * 0.5); + --meta-font-variation-settings: "wght" 350; + --wide-letter-spacing: 15%; } /* Design Tokens */ @@ -24,9 +24,11 @@ --card-color: rgba(250, 250, 250, 1); --contrast-color: rgb(2, 120, 96); - --contrast-color-translucent: rgba(2, 120, 96, 0.5); - --background-color: #faf5f5; + --contrast-color-translucent: rgba(2, 94, 74, 0.5); + --background-color: rgb(235, 245, 240); --rss-orange: rgb(255, 152, 0); + --contrast-color-tint: rgb(225, 240, 236); + --nav-footer-color: white; --text-color: var(--color-gray-90); --text-color-link: var(--text-color); --text-color-tag: var(--contrast-color); @@ -87,29 +89,33 @@ --grid-gutter: var(--space-s-s, clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem)); --grid-columns: 12; - /* Span grid utility */ + /* Utilities */ --span-grid: 1 / span 12; - - /* Change SVG color with filter */ - --logo-filter: brightness(0) saturate(100%) invert(16%) sepia(0%) - saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%); - --icon-filter: none; + --color-metadata: var(--contrast-color); + --font-family-metadata: var(--font-family-ui); + --line-height-metadata: calc(var(--step--2) * 0.25 + var(--step--2)); + --font-size-metadata: var(--step--2); + --letter-spacing-metadata: var(--wide-letter-spacing); + --text-transform-metadata: uppercase; + --font-variation-settings-metadata: "wght" 500; /* Corners */ --border-radius: 0.3rem; + --large-rounded-radius: 1rem; /* Transitions */ --transition-normal: all 0.3s allow-discrete; /* Links */ - --link-decoration-thickness: 0.06rem; + --link-decoration-thickness: 0.15rem; /* Borders */ --border-details: 1px solid var(--color-gray-20); + --border-header-footer: 1px solid var(--contrast-color); --border-hr: 0.5px solid var(--color-gray-20); - --border-nav: 1px solid var(--text-color); - --border-nav-currentpage: var(--space-xs-s) solid var(--contrast-color); - --border-nav-hover: var(--space-xs-s) solid var(--text-color); + --border-nav: 1px solid var(--background-color); + --border-nav-currentpage: var(--space-xs-s) solid var(--background-color); + --border-nav-hover: var(--space-xs-s) solid var(--background-color); /* Shadow */ --box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); @@ -119,17 +125,14 @@ :root { --color-gray-20: #253848; --color-gray-90: #dad8d8; - --card-color: #333333; + --card-color: rgb(0,50,40); --contrast-color: rgb(4, 196, 158); + --contrast-color-tint: rgb(21, 58, 56); --contrast-color-translucent: rgba(4, 196, 158, 0.5); - + --nav-footer-color: rgb(0,50,40); /* --text-color is assigned to --color-gray-_ above */ --text-color-link: var(--text-color); - - --background-color: #15202b; - --logo-filter: none; - --icon-filter: brightness(0) saturate(100%) invert(9%) sepia(76%) - saturate(340%) hue-rotate(168deg) brightness(95%) contrast(94%); + --background-color: rgb(24, 27, 32); } .socialLinks a li img { filter: auto; @@ -148,12 +151,22 @@ body { font-family: var(--font-family); font-variation-settings: var(--font-variation-default); font-variant-ligatures: normal; - margin: 0 auto; + margin: 0; padding: 0; } html { font-size: 13px; - overflow-y: scroll; + height: 100%; +} +abbr { + cursor: help; + text-decoration-thickness: var(--link-decoration-thickness); + text-decoration-color: var(--contrast-color); +} +article.post { + & > p:first-of-type { + margin-top: var(--space-xl); + } } input:not(.answer, .siteSettingsToggle input), textarea { @@ -167,50 +180,74 @@ textarea { font-variation-settings: var(--font-variation-default); margin-block: 0 1lh; min-height: var(--space-l); - padding: 0 var(--space-3xs); width: 100%; &:focus { box-shadow: 0 0 0 2px var(--contrast-color); outline: none; } + &::placeholder { + font-style: italic; + } } label { display: block; margin-bottom: var(--space-3xs); } -article:not(.postlist-item) { - & h2 { - padding-top: var(--space-m); +blockquote { + background-color: var(--contrast-color-tint); + border-radius: var(--large-rounded-radius); + border-top-left-radius: 0; + color: var(--contrast-color); + font-style: italic; + font-variation-settings: + "opsz" 18, + "wght" 360, + "SOFT" 40, + "WONK" 0; + margin-left: 0; + margin-right: 0; + padding: var(--space-m) var(--space-l) var(--space-3xs) var(--space-l); + position: relative; + z-index: -1; + & p { + padding-left: var(--space-xl); } } -blockquote p { - font-style: italic; -} + blockquote:before { color: var(--contrast-color); content: "“"; font-size: 10rem; - margin-left: -4rem; - margin-top: -2rem; + font-variation-settings: + "opsz" 72, + "wght" 360, + "SOFT" 0, + "WONK" 0; + margin-left: calc(var(--space-s) * -1); + margin-top: calc(var(--space-s) * -1); position: absolute; - filter: opacity(0.15); - z-index: 0; } + .blogroll { h2:first-of-type { padding-top: 0; } } body { + container-type: inline-size; + display: flex; + flex-direction: column; font-size: var(--step-0); - margin-inline: auto; - max-width: var(--grid-max-width); + height: 100cqh; padding-inline: var(--grid-gutter); - padding-top: var(--space-m); - padding-bottom: var(--space-m); + /*! width: 100vw; */ } button { + align-items: center; + display: flex; + flex-flow: row nowrap; height: var(--space-m-l); + width: fit-content; } .buttonContainer { display: flex; @@ -219,31 +256,28 @@ button { margin-bottom: var(--space-m); button { margin-top: var(--space-s); + & svg { + fill: var(--background-color); + height: var(--space-2xs); + margin-right: var(--space-2xs); + width: var(--space-2xs); + } } &.galleryButtons { margin-top: calc(var(--space-l) * -1); + width: 100%; } } button, .nav-item { font-family: var(--font-family-ui); } -header, -footer, -main { - display: grid; - gap: var(--grid-gutter); - grid-template-columns: repeat(var(--grid-columns), 1fr); -} .indexFeature:not(:last-child) { padding-bottom: var(--space-l); } mark { background-color: var(--contrast-color); } -nav { - grid-column: 2 / span 12; -} .now { display: grid; grid-column: var(--span-grid); @@ -252,10 +286,8 @@ ol { padding-left: 0; } section { + container-type: inline-size; grid-column: var(--span-grid); - p { - grid-column: var(--span-grid); - } } ::selection { background: var(--contrast-color); @@ -265,10 +297,6 @@ section { grid-column: var(--span-grid); margin: 0; } -ul { - margin: 0; - grid-column: var(--span-grid); -} a { text-decoration-color: var(--contrast-color); @@ -286,15 +314,54 @@ a { width: 1px; } footer { - padding: var(--space-xl) 0 var(--space-m) 0; + border-top: var(--border-header-footer); + background-color: var(--nav-footer-color); + color: var(--contrast-color); + font-family: var(--font-family-ui); + font-size: var(--step--1); + font-variation-settings: "wght" 500; + margin-left: calc(var(--grid-gutter) * -1); + margin-right: calc(var(--grid-gutter) * -1); + min-height: calc(var(--space-3xl) * 3); + padding: var(--space-xl) var(--grid-gutter) 0 var(--grid-gutter); + width: calc(100% + var(--grid-gutter) * 2); + & .footerContainer { + display: grid; + gap: var(--grid-gutter); + grid-template-columns: repeat(var(--grid-columns), 1fr); + margin: auto; + max-width: var(--grid-max-width); + & .webringsContainer { + display: flex; + flex-flow: row wrap; + gap: var(--space-2xs) var(--space-xs); + grid-column: 1 / 4; + } + & .linksContainer { + display: flex; + flex-flow: row wrap; + gap: var(--space-2xs) var(--space-xs); + grid-column: 4 / 12; + } + } + & a[href]:not(.icon-button) { + color: var(--contrast-color); + text-decoration: none; + &:visited { + color: var(--contrast-color); + } + &:hover { + color: var(--contrast-color); + } + } & p { - font-size: var(--step-0); + font-size: var(--step--1); grid-column: var(--span-grid); + line-height: calc(var(--step--1) * 0.25 + var(--step--1)); margin-bottom: 0; } & .webring { display: inline; - padding-right: var(--space-xs); } } @@ -302,48 +369,80 @@ h1, h2, h3 { color: var(--text-color); - grid-column: var(--span-grid); margin: 0; - width: 100%; } h1 { + color: var(--contrast-color); font-family: var(--font-family-headline); + font-size: var(--step-5); + font-style: italic; font-variation-settings: "opsz" 100, - "wght" 500, - "SOFT" 10, + "wght" 400, + "SOFT" 20, "WONK" 1; - font-size: var(--step-4); - font-style: normal; - line-height: calc(var(--step-4) * 0.25 + var(--step-4)); + line-height: calc(var(--step-5) * 0.25 + var(--step-5)); padding-bottom: var(--space-l); text-wrap: balance; } h2 { - font-size: var(--step-2); - font-variation-settings: - "opsz" 50, - "wght" 350, - "SOFT" 20, - "WONK" 1; - line-height: calc(var(--step-2) * 0.25 + var(--step-2)); - padding-bottom: var(--space-s); - padding-top: var(--space-s); + 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 0.5lh; + text-transform: uppercase; + text-wrap: pretty; } h3 { - font-size: var(--step-1); - line-height: calc(var(--step-1) * 0.25 + var(--step-1)); + 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; + text-wrap: pretty; + &::before { + color: var(--contrast-color); + content: "🢒"; + margin-left: calc(1em * -1); + } +} +h4 { + font-family: var(--font-family-ui); + font-size: var(--step--2); + font-variation-settings: "wght" 600; + letter-spacing: var(--wide-letter-spacing); + line-height: calc(var(--step--2) * 0.5 + var(--step--2)); + text-transform: uppercase; text-wrap: pretty; } -.logo { - filter: var(--logo-filter); +ul:not(.taglist) { + list-style-type: "◦"; + margin-left: -1.7em; + & ::marker { + color: var(--contrast-color); + } + & li { + line-height: calc(var(--step-1) * 0.5 + var(--step-1)); + padding-left: 0.5em; + } } main { display: grid; - grid-column: 1 / 12; - padding-top: var(--space-3xl); + flex: 1; + gap: var(--grid-gutter); + grid-template-columns: repeat(var(--grid-columns), 1fr); + margin: auto; + max-width: var(--grid-max-width); + margin-top: var(--space-5xl); + padding-bottom: var(--space-3xl); + width: 100%; } + main > p > img, main > p > a > img { width: 100%; @@ -361,21 +460,15 @@ li { line-height: calc(var(--step-0) * 0.5 + var(--step-0)); text-wrap: pretty; } - -th { - font-variation-settings: - "opsz" 25, - "wght" 500, - "SOFT" 40, - "WONK" 0; - padding-bottom: var(--space-2xs); - text-align: left; -} figure { - margin: 0; + margin: 0 calc(((100cqw - (var(--grid-gutter) * 11)) / 12) * -1); /* Expand beyond text grid */ margin-block: 1lh 1lh; - width: 100%; } + +figure > a > img { + cursor: zoom-in; +} + figure > a > img, figure > div > iframe { border-radius: 1em; @@ -406,7 +499,7 @@ button { color: var(--background-color); font-size: var(--step--2); font-variation-settings: var(--font-variation-ui); - letter-spacing: var(--ui-letter-spacing); + letter-spacing: var(--wide-letter-spacing); margin: var(--space-xs) 0 0 0; padding: 0 var(--space-xs); text-transform: uppercase; @@ -417,7 +510,6 @@ button > img { max-width: 1em; margin-right: 0.5em; margin-bottom: -0.1rem; - filter: var(--icon-filter); } a { &:has(button) { @@ -447,12 +539,58 @@ a[href]:active:not(.icon-button) { margin-top: var(--space-m); } +/* Tables */ table { - margin: 1em 0; + border: 2px solid var(--contrast-color); + border-collapse: separate; + border-left: 0; + border-radius: var(--space-xs); + border-spacing: 0px; + margin-block: 0 1lh; + width: 100%; } -table td, -table th { - padding-right: 1em; +td { + border-top: 2px solid var(--contrast-color); +} +th, +td { + font-style: italic; + padding: var(--space-2xs); + text-align: left; + vertical-align: top; + border-left: 2px solid var(--contrast-color); +} +thead { + border-collapse: separate; + border-color: inherit; + color: var(--contrast-color); + display: table-header-group; + font-family: var(--font-family-ui); + font-size: var(--step--1); + font-variation-settings: "wght" 800; + letter-spacing: var(--wide-letter-spacing); + text-transform: uppercase; + vertical-align: middle; + & tr th { + background-color: var(--contrast-color-tint); + } + & th { + font-style: normal; + } +} +tr { + display: table-row; + vertical-align: inherit; + border-color: inherit; +} +thead tr th:first-child { + border-radius: var(--space-xs) 0 0 0; +} +tbody:last-child tr:last-child td:first-child { + border-radius: 0 0 0 var(--space-xs); +} +thead tr th:last-child { + border-radius: 0 var(--space-xs) 0 0; } /* Footnotes */ @@ -483,13 +621,43 @@ hr { } /* Header */ -header .home-link { - display: grid; - grid-column: 1 / 1; +header { + container-type: inline-size; } -.logo { - aspect-ratio: 1 / 1; - width: var(--space-l-xl); + +/* Post Metadata */ +article > .post-image, +.hero > a > .post-image { + border-radius: 1em; + border-top-left-radius: 0; + cursor: zoom-in; + height: 100%; + margin: 0 calc(((100cqw - (var(--grid-gutter) * 11)) / 12) * -1); /* Expand beyond text grid */ + margin-block: 1lh 1lh; + max-width: calc(((100cqw) / 12) * 14); + width: calc(((100cqw) / 12) * 14); +} + +.post-synopsis { + font-size: var(--step-1); +} + +.post-time-author, +.post-taglist { + color: var(--color-metadata); + display: block; + font-family: var(--font-family-metadata); + font-size: var(--font-size-metadata); + font-variation-settings: var(--font-variation-settings-metadata); + letter-spacing: var(--letter-spacing-metadata); + line-height: var(--line-height-metadata); + text-transform: var(--text-transform-metadata); + & a[href], + a[href]:hover, + a[href]:visited { + color: var(--contrast-color); + text-decoration: none; + } } /* Info Box */ @@ -505,78 +673,226 @@ header .home-link { } } +/* Author / Profile Pic */ +.author { + align-items: flex-start; + display: flex; + background-color: var(--contrast-color-tint); + border-radius: var(--large-rounded-radius); + border-top-left-radius: 0; + margin-block: 0 1lh; + margin-left: 0; + margin-right: 0; + padding: var(--space-m) var(--space-l) var(--space-s) var(--space-l); + & a { + text-decoration: none; + & .authorName { + color: var(--contrast-color); + display: block; + font-family: var(--font-family-ui); + font-size: var(--step--1); + font-variation-settings: "wght" 600; + letter-spacing: var(--wide-letter-spacing); + text-transform: uppercase; + } + } + & .profilePic { + border-radius: var(--large-rounded-radius); + border-top-left-radius: 0; + height: var(--space-3xl); + margin-right: var(--space-s); + width: var(--space-3xl); + } + & p { + font-family: var(--font-family-ui); + font-size: var(--step--2); + font-variation-settings: "wght" 400; + line-height: calc(var(--step--2) * 0.25 + var(--step--2)); + } +} + /* Nav */ -.nav { - padding: 0; - margin: 0; - list-style: none; -} -nav ul { - align-items: end; - display: flex; - justify-content: flex-end; - gap: var(--space-xs-s); - flex-flow: row wrap; -} -.nav-icon { - fill: var(--color-gray-90); - height: var(--space-2xs); - margin-right: 0.25rem; - transition: var(--transition-normal); - width: var(--space-2xs); -} -.nav-item { - align-items: baseline; - border-top: var(--border-nav); - display: flex; - font-size: var(--step--2); - font-variation-settings: var(--font-variation-ui); - height: var(--space-l-xl); - margin-bottom: 0; - padding-top: var(--space-m); - text-transform: uppercase; - transition: var(--transition-normal); - letter-spacing: var(--ui-letter-spacing); -} -.nav-item a { - color: var(--text-color); - margin-top: calc(var(--space-xs-s) * -1); /* Compensate for padding */ - padding-top: var(--space-xs-s); /* Give a larger click area */ -} -.nav-item:hover { - border-top: var(--border-nav-hover); /* Increase border thickness */ -} -.nav-item:hover a { - margin-top: calc( - var(--space-xs-s) * -2 - ); /* Compensate for border thickness */ -} -.nav-item a[href]:visited { - color: var(--text-color); -} -.nav-item:hover a[href] { - color: var(--text-color); - text-decoration: none; -} -.nav-item a[href]:not(:hover) { - text-decoration: none; -} -.nav-item[data-currentpage="true"] { - border-top: var(--border-nav-currentpage); -} -.nav-item[data-currentpage="true"] a, -.nav-item[data-currentpage="true"] a[href]:visited, -.nav-item[data-currentpage="true"]:hover a { - color: var(--contrast-color); - margin-top: calc( - var(--space-xs-s) * -2 - ); /* Compensate for border thickness */ +nav { + background-color: var(--nav-footer-color); + border-bottom: var(--border-header-footer); + left: 0; + margin-left: calc(var(--grid-gutter) * -1); + margin-right: calc(var(--grid-gutter) * -1); + padding-inline: calc(var(--grid-gutter) * 2); + position: fixed; + top: 0; + width: calc(100% + var(--grid-gutter) * 2); + z-index: 10; + & .nav-elements-grid-container { + container-type: inline-size; + display: grid; + gap: var(--grid-gutter); + grid-template-columns: repeat(var(--grid-columns), 1fr); + margin: auto; + max-width: var(--grid-max-width); + & .nav-elements-container { + grid-column: 1 / span 12; + color: var(--contrast-color); + display: flex; + align-items: center; + justify-content: space-between; + & .blog-name { + align-self: center; + color: var(--contrast-color); + font-family: var(--font-family); + font-size: var(--step-1); + font-variation-settings: + "opsz" 80, + "wght" 450, + "SOFT" 0, + "WONK" 1; + text-align: center; + text-decoration: none; + } + & .home-link { + & .logo { + aspect-ratio: 1 / 1; + fill: var(--contrast-color); + width: var(--space-m-l); + height: var(--space-m-l); + margin: var(--space-2xs) 0; + } + } + & ul { + display: flex; + gap: var(--space-xs-s); + flex-flow: row wrap; + justify-content: flex-end; + list-style: none; + margin: 0; + padding: 0; + & .nav-item { + align-items: baseline; + font-size: var(--step--2); + font-variation-settings: var(--font-variation-ui); + text-transform: uppercase; + letter-spacing: var(--wide-letter-spacing); + & a[href], + a[href]:visited, + a[href]:hover { + color: var(--contrast-color); + text-decoration: none; + } + & .nav-icon { + fill: var(--contrast-color); + height: var(--space-2xs); + margin-right: 0.25rem; + width: var(--space-2xs); + } + } + } + } + } } sup { line-height: 0; } +/* Post list */ +.postlist { + & .postlist-item-container { + display: flex; + flex-flow: column nowrap; + gap: var(--space-s); + margin-top: var(--space-xl); + & .postlist-item { + align-items: flex-start; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + width: 100%; + & .post-copy { + display: flex; + flex-flow: column wrap; + flex: 1; + padding-right: var(--space-xl); + & > p { + margin: var(--space-xs) 0; + } + & p { + } + & .post-metadata { + & .post-metadata-copy { + & p, + p a { + color: var(--color-metadata); + font-family: var(--font-family-metadata); + font-size: var(--font-size-metadata); + letter-spacing: var(--letter-spacing-metadata); + text-decoration: none; + text-transform: var(--text-transform-metadata); + } + } + } + } + & .postlist-link { + font-size: var(--step-5); + padding-right: 0.5em; + text-decoration: none; + & h3 { + 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); + line-height: calc(var(--step--1) * 0.5 + var(--step--1)); + text-transform: uppercase; + &:before { + content: ""; + margin-left: 0; + } + } + & .post-image-container { + border-radius: 0.25em; + border-top-left-radius: 0; + box-shadow: var(--box-shadow); + height: var(--space-5xl); + max-height: var(--space-5xl); + overflow: hidden; + width: var(--space-5xl); + & .post-image { + width: var(--space-5xl); + height: var(--space-5xl); + object-fit: cover; + object-position: 50% 50%; + } + } + } + } + } +} +.postlist-header { + margin-top: var(--space-2xl); +} +/* XML Feed Preview */ +h1.feed-preview { + grid-column: var(--span-grid); +} +.postlist-date { + color: var(--color-metadata); + font-family: var(--font-family-metadata); + font-size: var(--font-size-metadata); + letter-spacing: var(--letter-spacing-metadata); + text-decoration: none; + text-transform: var(--text-transform-metadata); +} + +h3.postlist-link { + 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); + line-height: calc(var(--step--1) * 0.5 + var(--step--1)); + text-transform: uppercase; +} + /* Site Settings */ #siteSettings { border: 1.5px solid var(--color-gray-20); @@ -594,11 +910,11 @@ sup { @starting-style { opacity: 0; } - } - &[open]::backdrop { - opacity: 1; - @starting-style { - opacity: 0; + &::backdrop { + opacity: 1; + @starting-style { + opacity: 0; + } } } } /* TODO: figure out why exit animation doesn't work */ @@ -613,7 +929,7 @@ sup { font-size: var(--step--2); font-variation-settings: var(--font-variation-ui); text-transform: uppercase; - letter-spacing: var(--ui-letter-spacing); + letter-spacing: var(--wide-letter-spacing); font-family: var(--font-family-ui); & label { display: inline; @@ -635,7 +951,6 @@ sup { /* Direct Links / Markdown Headers */ a.header-anchor { font-style: normal; - margin-left: 0.1em; text-decoration: none; } a[href].header-anchor, @@ -655,19 +970,6 @@ h2 + .header-anchor { } /* Components */ -#buttonsAndStuffContainer { - /* This lives in the footer*/ - display: flex; - grid-column: var(--span-grid); - width: 100%; - & a, - img, - div { - display: inline-block; - height: var(--space-m-l); - margin-right: var(--space-3xs); - } -} .card { align-items: flex-start; background-color: var(--card-color); @@ -681,6 +983,16 @@ h2 + .header-anchor { width: 100%; } +ul.taglist { + & li { + & a[href], + a[href]:hover, + a[href]:visited { + color: var(--contrast-color); + } + } +} + /* Utilities */ .grid-container { max-width: var(--grid-max-width); @@ -695,3 +1007,135 @@ h2 + .header-anchor { .hidden { display: none !important; } + +/* Dark mode overrides */ +@media (prefers-color-scheme: dark) { + .isso-preview { + background: repeating-linear-gradient( + -45deg, + rgb(50, 50, 70), + rgb(50, 50, 70) 10px, + var(--background-color) 10px, + var(--background-color) 20px + ) !important; + } + .logo { + fill: var(--text-color); + } +} + +/* Small Screen Overrides */ +@media (max-width: 900px) { + figure, + .hero > a > .post-image { + margin-left: auto; + margin-right: auto; + max-width: var(--grid-max-width); + width: 100%; + } +} + +@media (max-width: 540px) { + .author { + display: flex; + flex-flow: column nowrap; + justify-content: center; + text-align: center; + & a { + display: flex; + justify-content: center; + width: 100%; + & img.profilePic { + aspect-ratio: 1/1; + margin-bottom: var(--space-s); + margin-right: 0; + } + } + } + .continue-discussion a { + display: flex; + justify-content: center; + width: 100%; + } + nav { + & > .nav-elements-grid-container { + & > .nav-elements-container { + & > .blog-name { + font-size: var(--step-0); + } + & > .home-link { + } + & > ul.nav { + flex-flow: column nowrap; + gap: 0; + & li { + line-height: calc(var(--step-0) * 0.25 + var(--step-0)); + } + } + } + } + } + .postlist { + & .postlist-item-container { + margin-top: var(--space-s); + & .postlist-item { + flex-flow: column wrap; + & .post-copy { + & .post-metadata { + padding-bottom: 0; + } + } + & .postlist-link { + padding: 0; + & h3 { + padding-top: 0; + } + & p { + margin-top: var(--space-xs); + } + & .post-image-container { + margin-left: 0; + min-height: var(--space-10xl); + width: 100%; + & .post-image { + width: 100cqw; + height: var(--space-10xl); + } + } + } + } + } + } + .postlist-header { + margin-top: var(--space-l); + } +} + + +@container (width < 540px) { + .footerContainer { + & p { + margin-bottom: 0 !important; + } + } + .webringsContainer { + grid-column: 1 / span 12 !important; + grid-row: 2 / 2; + } + .linksContainer { + grid-column: 1 / span 12 !important; + grid-row: 3 / 3; + } +} + +@container (width < 400px) { + blockquote { + padding: var(--space-s) var(--space-s); + & p { + margin-block: 0 !important; + margin-bottom: 0; + padding-left: 0; + padding-top: var(--space-xl); + } + } +} diff --git a/public/css/me.css b/public/css/me.css index bccc220..f680a2f 100644 --- a/public/css/me.css +++ b/public/css/me.css @@ -16,16 +16,27 @@ justify-content: center; width: 100%; margin: 0 0 var(--space-s) 0; - & > img { - max-width: var(--space-s); + & > svg { + fill: var(--background-color); + margin-right: var(--space-xs); + width: var(--space-s); + height: var(--space-s); } } h1.socialTitle { padding: 0; - margin: 0; - font-size: var(--step-4); - line-height: calc(var(--step-4) * 0.5 + var(--step-4)); + margin-top: var(--space-m);; + + 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 { @@ -37,5 +48,5 @@ h1.socialTitle { img.profilePic { max-width: var(--space-6xl); border-radius: 50%; - border: solid 2px var(--text-color); + border: solid 2px var(--contrast-color); } diff --git a/public/css/metadata.css b/public/css/metadata.css deleted file mode 100644 index 16f2e53..0000000 --- a/public/css/metadata.css +++ /dev/null @@ -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; -} diff --git a/public/css/microblog.css b/public/css/microblog.css index da81b66..9809784 100644 --- a/public/css/microblog.css +++ b/public/css/microblog.css @@ -1,5 +1,5 @@ .microblog-comment { - p { + & p { font-style: italic; margin: 0; padding: var(--space-s) 0 0 0; @@ -12,20 +12,42 @@ } .microblog-icon { - filter: var(--logo-filter); + fill: var(--contrast-color); height: var(--space-4xl); padding-right: var(--space-s); width: var(--space-2xl); } .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; } } .microblog-post { display: flex; - .microblog-comment { - p { + & .microblog-comment { + & p { padding-top: 0; padding-bottom: var(--space-2xs); } @@ -37,25 +59,28 @@ align-items: center; padding: var(--space-s); } - .microblog-status-copy { + & h2 { + margin-top: var(--space-m); + } + & .microblog-status-copy { align-items: center; display: flex; flex-flow: column nowrap; p { margin: 0; } - .status-metadata { - 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)); + & .status-metadata { + color: var(--color-metadata); + font-family: var(--font-family-metadata); + font-size: var(--font-size-metadata); + font-variation-settings: var(--font-variation-settings-metadata); + 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); -} diff --git a/public/css/navigator.css b/public/css/navigator.css index bea63d1..0f174de 100644 --- a/public/css/navigator.css +++ b/public/css/navigator.css @@ -2,43 +2,45 @@ display: grid; gap: var(--space-2xs) var(--space-2xs); grid-template-columns: repeat(auto-fill, minmax(var(--space-6xl), 1fr)); + margin-bottom: var(--space-xl); + margin-top: var(--space-xl); width: 100%; .navigatorItem { background-color: var(--background-color); - border: 1.5px solid var(--color-gray-20); + border: var(--border-header-footer); border-radius: var(--border-radius); color: var(--text-color); display: flex; - flex-flow: column wrap; + flex-flow: row nowrap; height: var(--space-3xl); text-align: center; - a { + & a[href] { height: 100%; padding: var(--space-s) var(--space-xs); text-decoration: none; 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; - filter: var(--logo-filter); + fill: var(--text-color); + max-height: var(--space-m); width: var(--space-m); } } &:hover { - background-color: var(--text-color); - border: 1.25px solid var(--text-color); + background-color: var(--contrast-color); transition: var(--transition-normal); - a { + & a { color: var(--background-color); transition: var(--transition-normal); - img { - filter: none; - 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%); - } + & svg { + fill: var(--background-color); } } } diff --git a/public/css/post-list.css b/public/css/post-list.css deleted file mode 100644 index 337c681..0000000 --- a/public/css/post-list.css +++ /dev/null @@ -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; - } -} diff --git a/public/css/profile-pic.css b/public/css/profile-pic.css deleted file mode 100644 index 26e06a1..0000000 --- a/public/css/profile-pic.css +++ /dev/null @@ -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); -} diff --git a/public/css/quiz.css b/public/css/quiz.css index 69b6913..b5b604d 100644 --- a/public/css/quiz.css +++ b/public/css/quiz.css @@ -18,7 +18,7 @@ details:not(.toc) { font-size: var(--step--2); font-variation-settings: var(--font-variation-ui); text-transform: uppercase; - letter-spacing: var(--ui-letter-spacing); + letter-spacing: var(--wide-letter-spacing); font-family: var(--font-family-ui); ::marker { @@ -40,7 +40,7 @@ details:not(.toc) { font-size: var(--step--2); font-variation-settings: var(--font-variation-ui); text-transform: uppercase; - letter-spacing: var(--ui-letter-spacing); + letter-spacing: var(--wide-letter-spacing); font-family: var(--font-family-ui); } } diff --git a/public/css/search.css b/public/css/search.css index 494a608..6bb8dfa 100644 --- a/public/css/search.css +++ b/public/css/search.css @@ -28,13 +28,44 @@ mark { font-family: var(--font-family-ui) !important; font-size: var(--step--2) !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; padding: 0 var(--space-xs) !important; text-transform: uppercase !important; transition: var(--transition-normal) !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 { font-family: var(--meta-font-family) !important; diff --git a/public/css/tags.css b/public/css/tags.css index a13598d..93bb6c1 100644 --- a/public/css/tags.css +++ b/public/css/tags.css @@ -1,31 +1,27 @@ a.post-tag { - background-color: var(--color-gray-20); - border-radius: 1rem; - color: var(--text-color); + color: var(--background-color); font-family: var(--meta-font-family); font-variation-settings: "wght" 300; - margin-top: var(--space-3xs); - margin-right: var(--space-3xs); - padding: 0 var(--space-3xs); + text-decoration: none; } a.post-tag:before { content: "#"; } a.post-tag:visited { - color: var(--text-color); + color: var(--background-color); } -a.post-tag:hover { - color: var(--text-color); +a[href].post-tag:hover { + color: var(--background-color); } .tag-feed-icon { fill: var(--rss-orange); - height: var(--space-m); + height: var(--space-s); transition: var(--transition-normal); - width: var(--space-m); + width: var(--space-s); &.small { - height: var(--space-s); - width: var(--space-s); + height: var(--space-xs); + width: var(--space-xs); } } .taglist { diff --git a/public/css/toc.css b/public/css/toc.css index 0d57c18..07fc7a6 100644 --- a/public/css/toc.css +++ b/public/css/toc.css @@ -1,11 +1,46 @@ -details.toc { - padding-bottom: var(--space-m); -} - .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 { margin-bottom: 0; margin-top: 0; 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; + } } } diff --git a/public/xsl/basic.xsl b/public/xsl/basic.xsl index 1b95702..98c476e 100644 --- a/public/xsl/basic.xsl +++ b/public/xsl/basic.xsl @@ -11,14 +11,12 @@ -
-

RSS Feed Preview

+

RSS Feed Preview

This is an RSS feed. Subscribe by copying the URL from the address bar into your newsreader. Don’t have a newsreader? Learn more and get started. It’s free. Below is a preview of what you’ll see in your newsreader when you subscribe. Done here? Go back to nathanupchurch.com

-

Posts

@@ -40,7 +38,7 @@ -

+