feat: spruce up design

2024-04-28 19:06:48 -07:00 · 2024-04-28 19:06:48 -07:00 · 94e28067f9
commit 94e28067f9
parent 2614dff452
51 changed files with 480 additions and 202 deletions
--- a/config/filters/index.js
+++ b/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
--- a/package.json
+++ b/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": {
--- a/src/_includes/base.liquid
+++ b/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/Poppins-Regular.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="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 }}" />
--- a/src/_includes/now.liquid
+++ b/src/_includes/now.liquid
@ -6,12 +6,12 @@ layout: default
 {% endcapture %}
 <script>{{ js }}</script>
 {{ content }}
-<div class="now-header-wrapper">
-  <h2 id="artists" class="now-header flex-centered">
+<div class="section-header-wrapper">
+  <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">
-  <h2 id="albums" class="now-header flex-centered">
+<div class="section-header-wrapper">
+  <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">
-  <h2 id="tracks" class="now-header flex-centered">
+<div class="section-header-wrapper">
+  <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>
--- a/src/_includes/partials/nav/link.liquid
+++ b/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 %}
--- a/src/_includes/partials/nav/menu.liquid
+++ b/src/_includes/partials/nav/menu.liquid
@ -1,8 +1,13 @@
-<nav
-  class="menu-primary flex-centered flex-wrap justify-center"
-  aria-label="Primary site navigation">
+<div class="flex-centered">
+  <input id="menu-toggle" type="checkbox" />
+  <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>
--- a/src/_includes/partials/now/albumReleases.liquid
+++ b/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>
--- a/src/_includes/partials/posts.liquid
+++ b/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>
--- a/src/_includes/post.liquid
+++ b/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>
--- a/src/assets/fonts/MonoLisa.min.woff2
+++ b/src/assets/fonts/MonoLisa.min.woff2
--- a/src/assets/fonts/Poppins-Bold.min.woff2
+++ b/src/assets/fonts/Poppins-Bold.min.woff2
--- a/src/assets/fonts/Poppins-Bold.woff2
+++ b/src/assets/fonts/Poppins-Bold.woff2
--- a/src/assets/fonts/Poppins-Regular.min.woff2
+++ b/src/assets/fonts/Poppins-Regular.min.woff2
--- a/src/assets/fonts/Poppins-Regular.woff2
+++ b/src/assets/fonts/Poppins-Regular.woff2
--- a/src/assets/img/avatar.png
+++ b/src/assets/img/avatar.png
--- a/src/assets/img/avatar.webp
+++ b/src/assets/img/avatar.webp
--- a/src/assets/img/pages/uses.jpg
+++ b/src/assets/img/pages/uses.jpg
--- a/src/assets/scripts/media-toggles.js
+++ b/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)
 }
--- a/src/assets/styles/base/index.css
+++ b/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 {
-  gap: var(--sizing-md);
-
-  & a,
-  & span {
-    height: var(--sizing-xl);
-  }
+a svg,
+button svg {
+  transform: rotate(0deg);
+  transition-property: transform;
+  transition-timing-function: var(--transition-ease-in-out);
+  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);
--- a/src/assets/styles/components/badge-grid.css
+++ b/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;
--- a/src/assets/styles/components/banners.css
+++ b/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);
    }
  }

--- a/src/assets/styles/components/forms.css
+++ b/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);
--- a/src/assets/styles/components/media-grid.css
+++ b/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;
-    }
-  }
 }
--- a/src/assets/styles/components/menu.css
+++ b/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);
+  }
+}
--- a/src/assets/styles/components/music-chart.css
+++ b/src/assets/styles/components/music-chart.css
@ -13,7 +13,6 @@

    & img {
      border: 1px solid var(--accent-color);
-      border-radius: var(--rounded);
    }

    & img,
--- a/src/assets/styles/components/paginator.css
+++ b/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%);
--- a/src/assets/styles/components/theme-toggle.css
+++ b/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; }

--- a/src/assets/styles/defaults/fonts.css
+++ b/src/assets/styles/defaults/fonts.css
@ -1,13 +1,5 @@
@font-face {
-  font-family: Poppins;
-  src: url('/assets/fonts/Poppins-Bold.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-family: MonoLisa;
+  src: url('/assets/fonts/MonoLisa.min.woff2') format("woff2");
  font-display: optional
 }
--- a/src/assets/styles/defaults/vars.css
+++ b/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-darkest: var(--black);
+  --color-lightest: var(--gray-lightest);
+  --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: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;
+  --font-mono: MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;

  /* text */
-  --font-size-xs: .75rem;
-  --line-height-xs: 1rem;
+  --font-size-xs: .725rem;
+  --line-height-xs: 1.225rem;

-  --font-size-sm: .875rem;
-  --line-height-sm: 1.25rem;
+  --font-size-sm: .825rem;
+  --line-height-sm: 1.325rem;

-  --font-size-base: 1rem;
-  --line-height-base: 1.5rem;
+  --font-size-base: .95rem;
+  --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-xl: 1.5rem;
-  --sizing-2xl: 1.75rem;
-  --sizing-3xl: 2rem;
+  --sizing-base: 1.5rem;
+  --sizing-xl: 1.75rem;
+  --sizing-2xl: 2rem;
+  --sizing-3xl: 2.25rem;
+
+  --sizing-svg-base: 24px;

  /* radii */
  --rounded-none: 0;
--- a/src/assets/styles/index.css
+++ b/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);
--- a/src/assets/styles/pages/contact.css
+++ b/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);
+  }
 }
--- a/src/assets/styles/pages/links.css
+++ b/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));
+  }
+}
--- a/src/assets/styles/pages/now.css
+++ b/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;
--- a/src/index.html
+++ b/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 %}
-{% endif %}
-{% 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 %}
+{% render "partials/posts.liquid" icon: "star", title: "Featured", postData:collections.posts, postType: "featured" %}
+{% render "partials/posts.liquid" icon: "clock-2", title: "Recent posts", postData:collections.posts %}
--- a/src/links.html
+++ b/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 %}
--- a/src/links/2024/2024-04-13-big-tech-s-corruption-was-25-years-in-the-making-by-mark-hurst---april-11--2024.md
+++ b/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."
--- a/src/pages/now.html
+++ b/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>
--- a/src/pages/tag-list.html
+++ b/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>
--- a/src/pages/uses.md
+++ b/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)
--- a/src/posts.html
+++ b/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 %}
--- a/src/posts/2023/2023-in-review.html
+++ b/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>
--- a/src/posts/2023/i-block-ads.md
+++ b/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.
--- a/src/posts/2023/i-dont-want-streaming-music.md
+++ b/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 -->
--- a/src/posts/2024/go-ahead-and-block-ai-web-crawlers.md
+++ b/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 -->

--- a/src/posts/2024/towards-a-quieter-friendlier-web.md
+++ b/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 -->

--- a/src/posts/2024/we-have-a-content-quality-problem-not-a-content-quantity-problem.md
+++ b/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 -->

--- a/src/social-preview.liquid
+++ b/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 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>
+  <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>

  <!-- 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"
-    fill="#fff"
+    font-weight="800"
+    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"
-    fill="#fff"
+    font-weight="800"
+    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 %}