feat: spruce up design

config/filters/index.js

@@ -68,6 +68,17 @@ export default {
     return tagMap[url] || ''
   },
 
+  // posts
+  filterByPostType: (posts, postType) => {
+    if (postType === 'featured') return posts.reverse().filter(post => post.data.featured === true).splice(0, 3)
+    return posts.splice(0, 5)
+  },
+  truncateByWordCount: (text, wordCount) => {
+    const words = sanitizeHtml(text, { allowedTags: ['']}).split(/\s+/);
+    if (words.length > wordCount) return `<p>${words.slice(0, wordCount).join(' ')}...</p>`
+    return text
+  },
+
   // authors
   authorLookup: (url) => {
     if (!url) return null

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "12.9.11",
+  "version": "13.0.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_includes/base.liquid

@@ -14,8 +14,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ pageTitle }}</title>
-    <link rel="preload" href="/assets/fonts/Poppins-Bold.min.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="/assets/fonts/MonoLisa.min.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="/assets/fonts/Poppins-Regular.min.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="stylesheet" href="/assets/styles/index.css?v={% appVersion %}" type="text/css" />
     <script async data-id="101449513" src="/23af0256fe76a.js"></script>
     <link rel="canonical" href="{{ fullUrl }}" />

src/_includes/now.liquid

@@ -6,12 +6,12 @@ layout: default
 {% endcapture %}
 <script>{{ js }}</script>
 {{ content }}
-<div class="now-header-wrapper">
+<div class="section-header-wrapper">
-  <h2 id="artists" class="now-header flex-centered">
+  <h2 id="artists" class="section-header flex-centered">
     {% tablericon "microphone-2" "Artists" %}
     Artists
   </h2>
-  <div class="now-header-buttons client-side">
+  <div class="section-header-buttons client-side">
     <button class="small active" data-toggle="artists-window">This week</button>
     <button class="small secondary" data-toggle="artists-month">This month</button>
     <button class="small secondary" data-toggle="artists-three-months">3 months</button>
@@ -30,12 +30,12 @@ layout: default
 <div class="hidden" id="artists-year">
   {% render "partials/now/media-grid.liquid", data:musicCharts.year.artists, shape: "square", count: 8 %}
 </div>
-<div class="now-header-wrapper">
+<div class="section-header-wrapper">
-  <h2 id="albums" class="now-header flex-centered">
+  <h2 id="albums" class="section-header flex-centered">
     {% tablericon "vinyl" "Albums" %}
     Albums
   </h2>
-  <div class="now-header-buttons client-side">
+  <div class="section-header-buttons client-side">
     <button class="small active" data-toggle="albums-window">This week</button>
     <button class="small secondary" data-toggle="albums-month">This month</button>
     <button class="small secondary" data-toggle="albums-three-months">3 months</button>
@@ -54,12 +54,12 @@ layout: default
 <div class="hidden" id="albums-year">
   {% render "partials/now/media-grid.liquid", data:musicCharts.year.albums, shape: "square", count: 8 %}
 </div>
-<div class="now-header-wrapper">
+<div class="section-header-wrapper">
-  <h2 id="tracks" class="now-header flex-centered">
+  <h2 id="tracks" class="section-header flex-centered">
     {% tablericon "playlist" "Tracks" %}
     Tracks
   </h2>
-  <div class="now-header-buttons client-side">
+  <div class="section-header-buttons client-side">
     <button class="small active" data-toggle="tracks-recent">Recent</button>
     <button class="small secondary" data-toggle="tracks-window">This week</button>
     <button class="small secondary" data-toggle="tracks-month">This month</button>
@@ -83,19 +83,19 @@ layout: default
   {% render "partials/now/track-chart.liquid", data:musicCharts.year.topTracks.data, mostPlayed:musicCharts.year.topTracks.mostPlayed %}
 </div>
 {% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %}
-<h2 id="books" class="now-header flex-centered">
+<h2 id="books" class="section-header flex-centered">
   {% tablericon "books" "Books" %}
   Books
 </h2>
 {% assign bookData = books | bookStatus: 'started' | reverse %}
 {% render "partials/now/media-grid.liquid", data:bookData, shape: "vertical", count: 6 %}
 {% render "partials/recent-links.liquid", links:collections.links %}
-<h2 id="movies" class="now-header flex-centered">
+<h2 id="movies" class="section-header flex-centered">
   {% tablericon "movie" "Movies" %}
   Movies
 </h2>
 {% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6 %}
-<h2 id="tv" class="now-header flex-centered">
+<h2 id="tv" class="section-header flex-centered">
   {% tablericon "device-tv" "TV" %}
   TV
 </h2>

src/_includes/partials/banners/github.liquid

@@ -1,3 +1,3 @@
 <div class="banner github">
-  <p>{% tablericon "brand-github" "GitHub repository" %} Take a look at <a href="{{ url }}">the GitHub repository for this project</a>. (And give it a star if you feel like it.)</p>
+  <p>{% tablericon "brand-github" "GitHub repository" %}Take a look at <a href="{{ url }}">the GitHub repository for this project</a>. (And give it a star if you feel like it.)</p>
 </div>

src/_includes/partials/banners/npm.liquid

@@ -1,3 +1,3 @@
 <div class="banner npm">
-  <p>{% tablericon "brand-npm" "NPM package" %} <a href="{{ url }}">You can take a look at this package on NPM</a> or install it by running <code>{{ command }}</code>.</p>
+  <p>{% tablericon "brand-npm" "NPM package" %}<a href="{{ url }}">You can take a look at this package on NPM</a> or install it by running <code>{{ command }}</code>.</p>
 </div>

src/_includes/partials/banners/old-post.liquid

@@ -1,6 +1,6 @@
 {% assign isOldPost = date | oldPost %}
 {% if isOldPost %}
   <div class="banner old-post">
-    <p>{% tablericon "clock-x" "Old post" %} This post is over 3 years old. I've probably changed my mind since it was written and it <em>could</em> be out of date.</p>
+    <p>{% tablericon "clock-x" "Old post" %}This post is over 3 years old. I've probably changed my mind since it was written and it <em>could</em> be out of date.</p>
   </div>
 {% endif %}

src/_includes/partials/banners/rss.liquid

@@ -1,3 +1,3 @@
 <div class="banner rss">
-  <p>{% tablericon "rss" "RSS feed" %} <a href="{{ url }}">{{ text }}</a>.</p>
+  <p>{% tablericon "rss" "RSS feed" %}<a href="{{ url }}">{{ text }}</a>.</p>
 </div>

src/_includes/partials/nav/link.liquid

@@ -9,11 +9,12 @@
   </span>
 {% else %}
   {% if icon %}
-    <a class="{{ icon | downcase }} {{ class }}" href="/{{ link | downcase }}">
+    <a class="{{ icon | downcase }} icon {{ class }}" href="/{{ link | downcase }}">
       {% tablericon icon link %}
+      <span>{{ link }}</span>
     </a>
   {% else %}
-    <a href="/{{ link | downcase }}">
+    <a class="icon" href="/{{ link | downcase }}">
       {{ link }}
     </a>
   {% endif %}

src/_includes/partials/nav/menu.liquid

@@ -1,8 +1,13 @@
-<nav
+<div class="flex-centered">
-  class="menu-primary flex-centered flex-wrap justify-center"
+  <input id="menu-toggle" type="checkbox" />
-  aria-label="Primary site navigation">
+  <label class="menu-button-container" for="menu-toggle">
+    <div class="menu-closed">{% tablericon "menu" "Menu closed" %}</div>
+    <div class="menu-open">{% tablericon "x" "Menu open" %}</div>
+  </label>
+  <ul class="menu-primary" aria-label="Primary site navigation">
     {% for link in nav.menu %}
-    {% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}
+    <li>{% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}</li>
     {% endfor %}
+  </ul>
   {% render "partials/nav/theme-toggle.liquid" %}
-</nav>
+</div>

src/_includes/partials/now/albumReleases.liquid

@@ -1,5 +1,5 @@
 {% if albumReleases.size > 0 %}
-  <h2 id="album-releases" class="now-header flex-centered">
+  <h2 id="album-releases" class="section-header flex-centered">
     {% tablericon "calendar-time" "Anticipated albums" %}
     Anticipated albums
   </h2>

src/_includes/partials/posts.liquid

@@ -0,0 +1,28 @@
+{%- assign posts = postData | filterByPostType: postType %}
+<div class="article-widget-wrapper">
+  <div class="section-header-wrapper">
+    <h2 id="artists" class="section-header posts flex-centered">
+      {% tablericon icon title %}
+      {{ title }}
+    </h2>
+  </div>
+  {% for post in posts %}
+  <article class="h-entry">
+    <div class="flex-centered gap-xs icon-small icon-light">
+      {% tablericon "calendar-month" "Date" %}
+      <time class="dt-published" datetime="{{ post.date }}">
+        {{ post.date | date: "%B %e, %Y" }}
+      </time>
+    </div>
+    <a href="{{ post.url }}">
+      <h3 class="flex-centered">{{ post.data.title }}</h3>
+    </a>
+    <span class="p-author h-card hidden">{{ meta.siteName }}</span>
+    <div class="p-summary hidden">{{ post.data.post_excerpt }}</div>
+    {{ post.data.post_excerpt | markdown | truncateByWordCount: 25 }}
+  </article>
+  {% endfor %}
+  {% if postType != 'featured' %}
+    <a class="view-all flex-centered" href="/posts">View all posts {% tablericon "arrow-right" "View all posts" %}</a>
+  {% endif %}
+</div>

src/_includes/post.liquid

@@ -6,12 +6,12 @@ schema: blog
 {%- capture postUrl %}{{ meta.url }}{{ page.url }}{% endcapture -%}
 <div class="default-wrapper">
   <article class="h-entry">
-    <div class="flex-centered">
+    <div class="flex-centered gap-xs icon-small icon-light">
+      {% render "partials/share-button.liquid", url:postUrl, title:title, tagMap:collections.tagMap %}
+      {% tablericon "calendar-month" "Date" %}
       <time class="dt-published" datetime="{{ date }}">
         {{ date | date: "%B %e, %Y" }}
-        <span class="client-side"> • </span>
       </time>
-      {% render "partials/share-button.liquid", url:postUrl, title:title, tagMap:collections.tagMap %}
     </div>
     <h2 class="p-name">{{ title }}</h2>
     <div class="text-small">{% render "partials/tags.liquid", tags:tags %}</div>

src/assets/scripts/media-toggles.js

@@ -25,6 +25,6 @@ window.onload = () => {
     })
   }
 
-  const buttonSets = document.querySelectorAll('.now-header-buttons')
+  const buttonSets = document.querySelectorAll('.section-header-buttons')
   buttonSets.forEach(initializeButtonSet)
 }

src/assets/styles/base/index.css

@@ -1,8 +1,9 @@
 body,
 html {
   color: var(--text-color);
-  font-family: var(--font-sans);
+  font-family: var(--font-mono);
   font-size: var(--font-size-base);
+  letter-spacing: -.05rem;
   line-height: var(--line-height-base);
   background: var(--background-color);
   accent-color: var(--accent-color)
@@ -37,7 +38,6 @@ body::-webkit-scrollbar {
 
 ::-webkit-scrollbar-thumb {
   background: var(--accent-color);
-  border-radius: var(--rounded-full);
 }
 
 ::-webkit-scrollbar-track {
@@ -46,15 +46,24 @@ body::-webkit-scrollbar {
 
 ::-webkit-scrollbar-button {
   background-color: var(--accent-color);
-  border-radius: var(--rounded);
 }
 
-p,
 blockquote {
   line-height: var(--line-height-lg);
   margin: var(--sizing-base) 0;
 }
 
+p {
+  margin: var(--sizing-base) 0;
+
+  & a {
+    text-decoration: underline;
+    text-decoration-line: underline;
+    text-decoration-style: dashed;
+    text-underline-offset: var(--sizing-xs);
+  }
+}
+
 blockquote {
   font-size: var(--font-size-lg);
   padding-left: var(--sizing-lg);
@@ -82,6 +91,14 @@ a.linked-header {
 
 sup.footnote-ref {
   line-height: var(--line-height-xs);
+
+  & a {
+    text-decoration: none;
+  }
+}
+
+.footnote-item a {
+  text-decoration: none;
 }
 
 strong,
@@ -139,6 +156,37 @@ h4 { font-size: var(--font-size-lg) }
 h5 { font-size: var(--font-size-base) }
 h6 { font-size: var(--font-size-sm) }
 
+.section-header-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.section-header {
+  margin: var(--sizing-3xl) 0 var(--sizing-lg);
+
+  &.posts {
+    margin: 0 0 var(--sizing-lg);
+  }
+}
+
+.default-wrapper > .section-header:first-of-type {
+  margin-top: 0;
+}
+
+.section-header-buttons {
+  margin: 0 0 var(--sizing-lg);
+
+  & > button {
+    margin-bottom: var(--sizing-sm);
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+}
+
+/* dividers */
 hr {
   height: 1px;
   background-color: var(--gray-light);
@@ -157,7 +205,6 @@ table {
   max-width: fit-content;
   margin: 0 auto;
   white-space: nowrap;
-  border-radius: var(--rounded);
   border: 1px solid var(--gray-light);
 }
 
@@ -194,25 +241,31 @@ th {
   width: 100%;
   padding-top: var(--sizing-3xl);
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
 
   & h1 {
     line-height: 1.25;
     margin: 0;
-    padding-bottom: var(--sizing-md);
+    padding-bottom: 0;
     font-size: var(--font-size-3xl);
+    font-weight: var(--font-weight-extrabold);
     line-height: var(--line-height-3xl);
+
+    & a {
+      text-decoration: none;
+    }
   }
 }
 
 /* nav */
-nav.menu-primary {
+a svg,
-  gap: var(--sizing-md);
+button svg {
-
+  transform: rotate(0deg);
-  & a,
+  transition-property: transform;
-  & span {
+  transition-timing-function: var(--transition-ease-in-out);
-    height: var(--sizing-xl);
+  transition-duration: var(--transition-duration-default);
-  }
 }
 
 :is(a:hover, a:active, a:focus) svg,
@@ -220,7 +273,27 @@ a svg:hover,
 a svg:active,
 a svg:focus,
 button:hover svg,
-button svg:hover,
+button svg:hover {
+  transform: rotate(8deg);
+}
+
+a svg:hover,
+a svg:active,
+a svg:focus {
+  stroke: var(--accent-color-hover);
+}
+
+a.view-all svg {
+  stroke: var(--accent-color);
+}
+
+a.view-all:hover svg,
+a.view-all:active svg,
+a.view-all:focus svg {
+  transform: rotate(0deg);
+  stroke: var(--accent-color-hover);
+}
+
 .icon--bold > svg {
   stroke-width: var(--stroke-width-bold);
 }
@@ -236,13 +309,6 @@ nav ul li .active svg {
   stroke: var(--accent-color);
 }
 
-.active:hover svg,
-.active svg:hover,
-nav ul li .active:hover svg,
-nav ul li .active svg:hover {
-  stroke-width: var(--stroke-width-default);
-}
-
 /* social icons */
 .at svg { stroke: var(--brand-hey) !important; }
 .brand-github svg { stroke: var(--brand-github) !important; }
@@ -256,9 +322,32 @@ nav ul li .active svg:hover {
 .heart-handshake svg { stroke: var(--webrings) !important; }
 .rss svg { stroke: var(--brand-rss) !important; }
 
+.coffee:hover,
+.coffee:active,
+.coffee:focus {
+  color: var(--brand-buy-me-a-coffee) !important;
+}
+
+.brand-mastodon:hover,
+.brand-mastodon:active,
+.brand-mastodon:focus {
+  color: var(--brand-mastodon) !important;
+}
+
+.rss:hover,
+.rss:active,
+.rss:focus {
+  color: var(--brand-rss) !important;
+}
+
 /* layout */
 .default-wrapper {
   padding-top: var(--sizing-2xl);
+
+  & .posts-wrapper article:last-of-type,
+  & .article-widget-wrapper:last-of-type {
+    border-bottom: none;
+  }
 }
 
 .main-wrapper {
@@ -285,6 +374,15 @@ article {
   margin-top: 0;
 }
 
+.article-widget-wrapper {
+  border-bottom: 1px solid var(--gray-light);
+  margin-bottom: var(--sizing-base);
+
+  & article {
+    border-bottom: none;
+  }
+}
+
 footer nav:first-child {
   gap: var(--sizing-sm);
   margin-top: var(--sizing-3xl);
@@ -331,7 +429,6 @@ code {
 /* articles */
 article {
   & h2 {
-    color: var(--text-color);
     line-height: var(--line-height-2xl);
     margin: 0 0 var(--sizing-lg);
     transition-property: color;
@@ -398,6 +495,10 @@ svg {
   vertical-align: middle;
 }
 
+.icon-light > svg {
+  stroke: var(--gray-dark) !important;
+}
+
 /* lists */
 ul, ol {
   list-style-position: inside;
@@ -485,22 +586,32 @@ li {
   flex-wrap: wrap;
 }
 
+.gap-xs { gap: var(--sizing-xs) }
+.gap-sm { gap: var(--sizing-sm) }
+.gap-md { gap: var(--sizing-md) }
+.gap-base { gap: var(--sizing-base) }
+.gap-xl { gap: var(--sizing-xl) }
+.gap-2xl { gap: var(--sizing-2xl) }
+.gap-3xl { gap: var(--sizing-3xl) }
+
 /* screens: md */
 @media screen and (min-width: 768px) {
-  .main-title {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .main-title h1 {
-    padding-bottom: 0;
-  }
-
   main {
     max-width: 768px;
   }
 
+  .section-header-wrapper {
+    flex-direction: row;
+  }
+
+  .section-header-buttons {
+    margin: var(--sizing-3xl) 0 var(--sizing-lg);
+
+    & > button {
+      margin-bottom: 0;
+    }
+  }
+
   article {
     & h2 {
       margin: 0 0 var(--sizing-xs);

src/assets/styles/components/badge-grid.css

@@ -2,6 +2,7 @@
   display: grid;
   gap: var(--sizing-md);
   grid-template-columns: repeat(3,minmax(0,1fr));
+  margin-top: var(--sizing-2xl);
 
   &  > * {
     display: flex;

src/assets/styles/components/banners.css

@@ -19,7 +19,7 @@
       vertical-align: middle;
       height: var(--sizing-lg);
       width: var(--sizing-lg);
-      margin-right: var(--sizing-xs);
+      margin-right: var(--sizing-sm);
     }
   }
 

src/assets/styles/components/forms.css

@@ -7,14 +7,13 @@ input[type="text"],
 input[type="email"],
 input[type="search"],
 textarea {
-  font-family: var(--font-sans);
+  font-family: var(--font-mono);
   color: var(--text-color);
   background-color: var(--background-color);
   border: 1px solid var(--accent-color);
   padding: var(--sizing-sm);
   font-size: var(--font-size-base);
   width: 100%;
-  border-radius: var(--rounded);
   outline: none;
   margin-bottom: var(--sizing-base);
   font-weight: var(--font-weight-base);

src/assets/styles/components/media-grid.css

@@ -3,32 +3,6 @@
   --grid-vertical: repeat(3,minmax(0,1fr));
 }
 
-.now-header {
-  margin: var(--sizing-3xl) 0 var(--sizing-lg);
-}
-
-.default-wrapper > .now-header:first-of-type {
-  margin-top: 0;
-}
-
-.now-header-buttons {
-  margin: 0 0 var(--sizing-lg);
-
-  & > button {
-    margin-bottom: var(--sizing-sm);
-
-    &:last-of-type {
-      margin-right: 0;
-    }
-  }
-}
-
-.now-header-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
 .media-grid {
   display: grid;
   gap: var(--sizing-sm);
@@ -60,7 +34,6 @@
       content: '';
       top: 0;
       left: 1px;
-      border-radius: calc(var(--sizing-xs) * .85);
       box-shadow: inset 0 -70px 50px -40px #000;
       width: calc(100% - 2px);
       height: calc(100% - 1px);
@@ -103,7 +76,6 @@
 
   & img {
     border: 1px solid var(--accent-color);
-    border-radius: var(--rounded);
     transition-property: border-color;
     transition-timing-function: var(--transition-ease-in-out);
     transition-duration: 300ms;
@@ -115,16 +87,4 @@
     --grid-square: repeat(4,minmax(0,1fr));
     --grid-vertical: repeat(6,minmax(0,1fr));
   }
-
-  .now-header-wrapper {
-    flex-direction: row;
-  }
-
-  .now-header-buttons {
-    margin: var(--sizing-3xl) 0 var(--sizing-lg);
-
-    & > button {
-      margin-bottom: 0;
-    }
-  }
 }

src/assets/styles/components/menu.css

@@ -0,0 +1,124 @@
+.menu-primary {
+  display: flex;
+  flex-direction: row;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--sizing-md);
+
+  & > li {
+    overflow: hidden;
+    margin: 0;
+
+    & .icon > svg {
+      display: block;
+    }
+
+    & .icon > span {
+      display: none;
+    }
+  }
+}
+
+theme-toggle {
+  margin-left: var(--sizing-md)
+}
+
+.menu-button-container {
+  display: none;
+}
+
+#menu-toggle {
+  display: none;
+}
+
+.menu-button-container .menu-open,
+.menu-button-container .menu-closed {
+  cursor: pointer;
+}
+
+.menu-button-container svg {
+  transform: rotate(0deg);
+  transition-property: transform;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
+}
+
+.menu-button-container svg:hover,
+.menu-button-container svg:active,
+.menu-button-container svg:focus {
+  stroke: var(--accent-color-hover);
+  transform: rotate(8deg);
+}
+
+#menu-toggle:checked + .menu-button-container .menu-closed {
+  display: none;
+}
+
+#menu-toggle:checked + .menu-button-container .menu-open {
+  display: block;
+}
+
+#menu-toggle:not(:checked) + .menu-button-container .menu-closed {
+  display: block;
+}
+
+#menu-toggle:not(:checked) + .menu-button-container .menu-open {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .menu-primary {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-top: calc(var(--sizing-3xl) * 2.25);
+    flex-direction: column;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    gap: 0;
+
+    & > li {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+      padding: var(--sizing-sm) 0;
+      width: 100%;
+      color: var(--text-color);
+      background: var(--background-color);
+
+      & .icon > svg {
+        display: none;
+      }
+
+      & .icon > span {
+        display: inline;
+      }
+    }
+  }
+
+  #menu-toggle ~ .menu-primary li {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  #menu-toggle:checked ~ .menu-primary li {
+    border-bottom: 1px solid var(--gray-light);
+    height: var(--sizing-3xl);
+    padding: var(--sizing-sm);
+
+    &:first-child {
+      border-top: 1px solid var(--gray-light);
+    }
+  }
+
+  .menu-button-container {
+    display: unset;
+    width: var(--sizing-svg-base);
+    height: var(--sizing-svg-base);
+  }
+}

src/assets/styles/components/music-chart.css

@@ -13,7 +13,6 @@
 
     & img {
       border: 1px solid var(--accent-color);
-      border-radius: var(--rounded);
     }
 
     & img,

src/assets/styles/components/paginator.css

@@ -16,6 +16,14 @@
     }
   }
 
+  & :is(a:hover, a:active, a:focus) svg,
+  & a svg:hover,
+  & a svg:active,
+  & a svg:focus {
+    transform: rotate(0deg);
+    stroke: var(--accent-color-hover);
+  }
+
   & span.disabled svg {
     cursor: not-allowed;
     stroke: color-mix(in srgb, var(--text-color), transparent 50%);

src/assets/styles/components/theme-toggle.css

@@ -1,3 +1,9 @@
+theme-toggle {
+  width: var(--sizing-svg-base);
+  height: var(--sizing-svg-base);
+  display: flex;
+}
+
 .theme-toggle {
   background: transparent;
   padding: 0;
@@ -6,11 +12,6 @@
     cursor: pointer;
   }
 
-  &:hover,
-  & svg:hover {
-    stroke-width: var(--stroke-width-bold);
-  }
-
   & > .light svg { stroke: var(--sun) !important; }
   & > .dark svg { stroke: var(--moon) !important; }
 

src/assets/styles/defaults/fonts.css

@@ -1,13 +1,5 @@
 @font-face {
-  font-family: Poppins;
+  font-family: MonoLisa;
-  src: url('/assets/fonts/Poppins-Bold.min.woff2') format("woff2");
+  src: url('/assets/fonts/MonoLisa.min.woff2') format("woff2");
-  font-weight: 700;
-  font-display: optional
-}
-
-@font-face {
-  font-family: Poppins;
-  src: url('/assets/fonts/Poppins-Regular.min.woff2') format("woff2");
-  font-weight: 400;
   font-display: optional
 }

src/assets/styles/defaults/vars.css

@@ -12,6 +12,7 @@
   --blue-900: #1e478a;
   --blue-950: #172e54;
 
+  --gray-lightest: #fafafa;
   --gray-50: #f6f7f8;
   --gray-100: #eaecef;
   --gray-200: #d9dee4;
@@ -23,6 +24,7 @@
   --gray-800: #5a6173;
   --gray-900: #4b515d;
   --gray-950: #30333b;
+  --gray-darkest: #191919;
 
   --white: #fff;
   --black: #000;
@@ -32,8 +34,8 @@
   --gray-dark: var(--gray-700);
 
   /* base theme */
-  --color-lightest: var(--white);
+  --color-lightest: var(--gray-lightest);
-  --color-darkest: var(--black);
+  --color-darkest: var(--gray-darkest);
   --text-color: var(--color-darkest);
   --background-color: var(--color-lightest);
   --text-color-inverted: var(--color-lightest);
@@ -57,21 +59,20 @@
   --sun: #ffa700;
 
   /* fonts */
-  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+  --font-mono: MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;
-  --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;
 
   /* text */
-  --font-size-xs: .75rem;
+  --font-size-xs: .725rem;
-  --line-height-xs: 1rem;
+  --line-height-xs: 1.225rem;
 
-  --font-size-sm: .875rem;
+  --font-size-sm: .825rem;
-  --line-height-sm: 1.25rem;
+  --line-height-sm: 1.325rem;
 
-  --font-size-base: 1rem;
+  --font-size-base: .95rem;
-  --line-height-base: 1.5rem;
+  --line-height-base: 1.45rem;
 
   --font-size-lg: 1.125rem;
-  --line-height-lg: 1.75rem;
+  --line-height-lg: 1.5rem;
 
   --font-size-xl: 1.25rem;
   --line-height-xl: 1.75rem;
@@ -79,21 +80,24 @@
   --font-size-2xl: 1.5rem;
   --line-height-2xl: 2rem;
 
-  --font-size-3xl: 1.875rem;
+  --font-size-3xl: 1.7rem;
   --line-height-3xl: 2.25rem;
 
   --font-weight-base: 400;
-  --font-weight-bold: 700;
+  --font-weight-bold: 600;
+  --font-weight-extrabold: 800;
 
   /* spacing */
   --sizing-xs: .25rem;
   --sizing-sm: .5rem;
   --sizing-md: .75rem;
   --sizing-lg: 1rem;
-  --sizing-base: 1.25rem;
+  --sizing-base: 1.5rem;
-  --sizing-xl: 1.5rem;
+  --sizing-xl: 1.75rem;
-  --sizing-2xl: 1.75rem;
+  --sizing-2xl: 2rem;
-  --sizing-3xl: 2rem;
+  --sizing-3xl: 2.25rem;
+
+  --sizing-svg-base: 24px;
 
   /* radii */
   --rounded-none: 0;

src/assets/styles/index.css

@@ -20,6 +20,7 @@
 @import url('./pages/books.css') layer(page);
 @import url('./pages/blogroll.css') layer(page);
 @import url('./pages/contact.css') layer(page);
+@import url('./pages/links.css') layer(page);
 @import url('./pages/now.css') layer(page);
 @import url('./pages/post.css') layer(page);
 @import url('./pages/webrings.css') layer(page);
@@ -33,6 +34,7 @@
 @import url('./components/link-peek.css') layer(components);
 @import url('./components/mastodon-post.css') layer(components);
 @import url('./components/media-grid.css') layer(components);
+@import url('./components/menu.css') layer(components);
 @import url('./components/paginator.css') layer(components);
 @import url('./components/post-graph.css') layer(components);
 @import url('./components/progress-bar.css') layer(components);

src/assets/styles/pages/contact.css

@@ -6,10 +6,6 @@
     height: calc(var(--sizing-3xl) * 5);
     resize: none;
   }
-
-  & .column.description p:first-child {
-    margin-top: 0;
-  }
 }
 
 .contact-success-header {
@@ -28,4 +24,8 @@
       padding-right: var(--sizing-xl);
     }
   }
+
+  form {
+    margin-top: var(--sizing-base);
+  }
 }

src/assets/styles/pages/links.css

@@ -0,0 +1,21 @@
+.link-grid {
+  display: grid;
+  gap: var(--sizing-sm);
+  grid-template-columns: repeat(1,minmax(0,1fr));
+  margin-bottom: var(--sizing-base);
+
+  & .link {
+    border: 1px solid var(--gray-light);
+    padding: var(--sizing-xs) var(--sizing-sm) 0;
+
+    & button {
+      margin-right: var(--sizing-xs);
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .link-grid {
+    grid-template-columns: repeat(2,minmax(0,1fr));
+  }
+}

src/assets/styles/pages/now.css

@@ -3,7 +3,7 @@
   padding-left: var(--sizing-base);
 
   & p {
-    margin: var(--sizing-xs) 0;
+    margin: var(--sizing-sm) 0;
 
     & > svg {
       display: inline;

src/index.html

@@ -1,27 +1,6 @@
 ---
 layout: default
-pagination:
-  data: collections.posts
-  size: 8
-  reverse: true
-  alias: posts
 ---
-{% if pagination.pageNumber == 0 %}
+{% render "partials/now/topper.liquid" status:status, artists:music.artists, books:books, tv:tv %}
-  {% render "partials/now/topper.liquid" status:status, artists:music.artists, books:books, tv:tv %}
+{% render "partials/posts.liquid" icon: "star", title: "Featured", postData:collections.posts, postType: "featured" %}
-{% endif %}
+{% render "partials/posts.liquid" icon: "clock-2", title: "Recent posts", postData:collections.posts %}
-{% for post in pagination.items %}
-<article class="h-entry">
-  <time class="dt-published" datetime="{{ post.date }}">
-    {{ post.date | date: "%B %e, %Y" }}
-  </time>
-  <a href="{{ post.url }}">
-    <h2 class="flex-centered">{{ post.data.title }}</h2>
-  </a>
-  <div class="text-small">{% render "partials/tags.liquid", tags:post.data.tags %}</div>
-  <span class="p-author h-card hidden">{{ meta.siteName }}</span>
-  <div class="p-summary hidden">{{ post.data.post_excerpt }}</div>
-  {{ post.data.post_excerpt | markdown }}
-  <p><a href="{{ post.url }}">Read more →</a></p>
-</article>
-{% endfor %}
-{% render "partials/paginator.liquid", pagination:pagination %}

src/links.html

@@ -11,15 +11,17 @@ pagination:
 <p>These are links I've liked or otherwise found interesting.</p>
 <hr class="large-spacing" />
 {% endif %}
-<ul class="link-list reduced-spacing">
+<div class="link-grid">
   {% for link in pagination.items %}
   {% assign author = link.data.link | stripUtm | authorLookup %}
-    <li>
+  <div class="link">
+    {% render "partials/share-button.liquid", url:link.data.link, title:link.data.title, tagMap:collections.tagMap %}
     <a href="{{ link.data.link }}" title="{{ link.data.title | escape }}">
       <strong>{{ link.data.title }}</strong>
     </a>
     {% if author %} via {{ author }}{% endif %}
-    </li>
+    <div class="text-small">{% render "partials/tags.liquid", tags:link.data.tags %}</div>
+  </div>
   {% endfor %}
-</ul>
+</div>
 {% render "partials/paginator.liquid", pagination:pagination %}

src/links/2024/2024-04-13-big-tech-s-corruption-was-25-years-in-the-making-by-mark-hurst---april-11--2024.md

@@ -1,5 +1,5 @@
 ---
-title: "Big Tech’s corruption was 25 years in the making By Mark Hurst • April 11, 2024"
+title: "Big Tech’s corruption was 25 years in the making"
 date: "2024-04-13T14:04-08:00"
 tags: ["tech"]
 description: "I had some fun on the April 1st Techtonic last week, broadcasting an hour of tech news from 1999. The episode page is here; click “Pop-up player” to listen."

src/pages/now.html

@@ -4,7 +4,7 @@ layout: now
 permalink: /now.html
 description: "See what I'm doing now."
 ---
-<h2 class="now-header flex-centered">
+<h2 class="section-header flex-centered">
   {% tablericon "clock-heart" "Currently" %}
   Currently
 </h2>
@@ -27,7 +27,7 @@ description: "See what I'm doing now."
     <a href="https://coryd.dev/posts/2024/on-getting-tattooed/">Getting tattooed</a>.
   </p>
 </div>
-<h2 class="now-header flex-centered">
+<h2 class="section-header flex-centered">
   {% tablericon "terminal-2" "Making" %}
   Making
 </h2>

src/pages/tag-list.html

@@ -11,11 +11,14 @@ eleventyComputed:
 {% assign posts = collections[tag] | reverse %}
 {% for post in posts %}
 <article class="h-entry">
+  <div class="flex-centered gap-xs icon-small icon-light">
+    {% tablericon "calendar-month" "Date" %}
     <time class="dt-published" datetime="{{ post.date }}">
       {{ post.date | date: "%B %e, %Y" }}
     </time>
+  </div>
   <a href="{{ post.url }}">
-    <h2 class="flex-centered">{{ post.data.title }}</h2>
+    <h3 class="flex-centered">{{ post.data.title }}</h3>
   </a>
   <p class="p-summary">{{ post.data.post_excerpt | markdown }}</p>
   <p><a href="{{ post.url }}">Read more →</a></p>

src/pages/uses.md

@@ -9,8 +9,6 @@ image: /assets/img/pages/uses.jpg
 
 Software and services that I use for work and my own enjoyment.
 
-{% image 'https://coryd.dev/assets/img/pages/uses.jpg', 'My desk', 'image-banner', 'eager' %}
-
 <h3>Computer setup</h3>
 
 - Midnight MacBook Air (2022 - M2)

src/posts.html

@@ -0,0 +1,27 @@
+---
+layout: default
+pagination:
+  data: collections.posts
+  size: 8
+  reverse: true
+  alias: posts
+---
+<div class="posts-wrapper">
+  {% for post in pagination.items %}
+  <article class="h-entry">
+    <div class="flex-centered gap-xs icon-small icon-light">
+      {% tablericon "calendar-month" "Date" %}
+      <time class="dt-published" datetime="{{ post.date }}">
+        {{ post.date | date: "%B %e, %Y" }}
+      </time>
+    </div>
+    <a href="{{ post.url }}">
+      <h3 class="flex-centered">{{ post.data.title }}</h3>
+    </a>
+    <span class="p-author h-card hidden">{{ meta.siteName }}</span>
+    <div class="p-summary hidden">{{ post.data.post_excerpt }}</div>
+    {{ post.data.post_excerpt | markdown }}
+  </article>
+  {% endfor %}
+</div>
+{% render "partials/paginator.liquid", pagination:pagination %}

src/posts/2023/2023-in-review.html

@@ -14,12 +14,12 @@ tags: ['books', 'music', 'development', 'Eleventy']
   <li><a href="https://www.last.fm/user/coryd_">I listened to a bunch of music</a></li>
   <li><a href="https://trakt.tv/users/cdransf">I watched a bunch of movies and TV</a>, but picking favorites feels weird when so much of that consisted of catching up on "classics" and things I'd either ignored or never seen.</li>
 </ul>
-<h2 class="now-header flex-centered">
+<h2 class="section-header flex-centered">
   {% tablericon "books" "Favorite books" %}
   Favorite books
 </h2>
 {% render "partials/now/media-grid.liquid", data:roundups['2023'].books, shape: "vertical", count: 6 %}
-<h2 class="now-header flex-centered">
+<h2 class="section-header flex-centered">
   {% tablericon "vinyl" "Favorite albums" %}
   Favorite books
 </h2>

src/posts/2023/i-block-ads.md

@@ -4,6 +4,7 @@ title: 'I block ads'
 description: "I block ads in the browser. I block ads at the DNS level."
 tags: ['advertising', 'privacy', 'tech']
 image: /assets/img/og/adblocks.webp
+featured: true
 ---
 
 I block ads in the browser.

src/posts/2023/i-dont-want-streaming-music.md

@@ -3,6 +3,7 @@ date: '2023-04-05'
 title: "I don't want streaming music, I just want to stream my music"
 description: "I don't want your streaming music service, I just want the music I've collected and care about available to stream."
 tags: ['music', 'streaming']
+featured: true
 ---
 
 I don't want your streaming music service, I just want the music I've collected and care about available to stream.<!-- excerpt -->

src/posts/2024/go-ahead-and-block-ai-web-crawlers.md

@@ -3,6 +3,7 @@ date: '2024-03-02'
 title: 'Go ahead and block AI web crawlers'
 description: 'AI companies are crawling the open web to, ostensibly, improve the quality of their models and products. This process is extractive and accrues the benefit to said companies, not the owners of sites both small and large.'
 tags: ['AI', 'tech', 'development']
+featured: true
 ---
 AI companies are crawling the open web to, ostensibly, improve the quality of their models and products. This process is extractive and accrues the benefit to said companies, not the owners of sites both small and large.<!-- excerpt -->
 

src/posts/2024/towards-a-quieter-friendlier-web.md

@@ -3,6 +3,7 @@ date: '2024-02-27'
 title: 'Towards a quieter, friendlier web'
 description: "I love the internet, I grew up on it and (probably) spend too much time on it. I found the music I love on it, I've made friends on it, I went to school for business but built a career on the web instead. I often have a hard time reconciling where the web is now with what it was like when I first dove into it."
 tags: ['tech', 'social media', 'privacy', 'AI']
+featured: true
 ---
 I *love* the internet, I grew up on it and (probably) spend too much time on it. [I found the music I love on it](https://coryd.dev/posts/2024/i-found-the-music-i-love-on-the-internet/), I've made friends on it, I went to school for business but built a career on the web instead. I often have a hard time reconciling where the web is now with what it was like when I first dove into it.<!-- excerpt -->
 

src/posts/2024/we-have-a-content-quality-problem-not-a-content-quantity-problem.md

@@ -3,6 +3,7 @@ date: '2024-03-26T09:15-08:00'
 title: 'We have a content quality problem, not a content quantity problem'
 description: 'Are you short on things to read? Things to watch? Things to listen to? Things to scroll through? Me neither.'
 tags: ['tech', 'AI', 'music']
+featured: true
 ---
 Are you short on things to read? Things to watch? Things to listen to? Things to scroll through? Me neither.<!-- excerpt -->
 

src/social-preview.liquid

@@ -7,8 +7,7 @@ permalink: '/assets/img/social-preview/{{ preview.data.title | slugify }}-previe
 eleventyExcludeFromCollections: true
 ---
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="1200" height="628" viewBox="0 0 1200 628" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+<svg width="1200" height="630" viewBox="0 0 1200 630" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
->
   {% assign titleInLines = preview.data.title | splitLines: 40 %}
   {% assign numberOfLines = titleInLines.length %}
   {% if numberOfLines == 1 %}
@@ -23,15 +22,14 @@ eleventyExcludeFromCollections: true
     {% assign verticalStartingPoint = 170 %}
   {% endif %}
 
-  <!-- background -->
+  <svg id="visual" viewBox="0 0 1200 630" width="1200" height="630" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="1200" height="630" fill="#191919"></rect></svg>
-  <svg height="628" viewBox="0 0 1200 628" width="1200" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h1200v628h-1200z"/><path d="m0 482 33.3-3.2c33.4-3.1 100-9.5 166.7-9.6 66.7-.2 133.3 5.8 200 14.3s133.3 19.5 200 30.5 133.3 22 200 20 133.3-17 200-30.2c66.7-13.1 133.3-24.5 166.7-30.1l33.3-5.7v161h-33.3c-33.4 0-100 0-166.7 0s-133.3 0-200 0-133.3 0-200 0-133.3 0-200 0-133.3 0-200 0-133.3 0-166.7 0h-33.3z" fill="#3b82f6" stroke-linecap="round"/></svg>
 
   <!-- date -->
   <text
-    font-family="-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif"
+    font-family="MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace"
     font-size="24"
-    font-weight="bold"
+    font-weight="800"
-    fill="#fff"
+    fill="#fafafa"
   >
     <tspan x="80" y="{{ verticalStartingPoint | minus: 120 }}">
       {{ preview.date | date: "%B %e, %Y" }}
@@ -41,14 +39,14 @@ eleventyExcludeFromCollections: true
   <!-- title -->
   <text
     id="text"
-    font-family="-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif"
+    font-family="MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace"
     font-size="40"
-    font-weight="900"
+    font-weight="800"
-    fill="#fff"
+    fill="#fafafa"
   >
     {% for line in titleInLines %}
     {% capture spacing %}{{ forloop.index0 | times: 50 }}{% endcapture %}
-    <tspan x="80" y="{{ verticalStartingPoint | minus: 20 | plus: spacing }}">
+    <tspan x="80" y="{{ verticalStartingPoint | plus: spacing }}">
       {{ line }}
     </tspan>
     {% endfor %}