chore: remove utility classes + cleanup

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "24.8.7",
+  "version": "24.9.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "24.8.7",
+      "version": "24.9.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "24.8.7",
+  "version": "24.9.0",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {

src/assets/styles/base/index.css

@@ -83,6 +83,13 @@ p {
   }
 }
 
+.highlight-text {
+  color: var(--color-lightest);
+  background-color: var(--accent-color);
+  padding: var(--spacing-xs);
+  border-radius: var(--border-radius-slight);
+}
+
 blockquote {
   font-size: var(--font-size-lg);
   color: var(--gray-dark);
@@ -98,7 +105,7 @@ code {
   border-radius: var(--border-radius-slight);
 }
 
-p:not(.flex-centered):not(.banner p) > svg {
+p:not(.banner p) > svg {
   margin-bottom: var(--inline-margin-bottom);
 }
 
@@ -289,6 +296,7 @@ h6 {
 }
 
 .section-header {
+  display: flex;
   margin: var(--spacing-xl) 0 var(--spacing-lg);
   line-height: var(--line-height-sm);
 
@@ -470,22 +478,32 @@ article {
 }
 
 footer {
-  & p:first-of-type {
+  & .updated {
-    margin: var(--spacing-3xl) 0 var(--spacing-lg);
+    text-align: center;
     font-size: var(--font-size-sm);
+    margin: var(--spacing-3xl) 0 var(--spacing-lg);
   }
 
   & nav {
+    &.social,
+    &.sub-pages {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
+
     &.social {
       gap: var(--spacing-md);
       margin-bottom: var(--spacing-lg);
       width: 100%;
 
-      & svg {
+      & .icon > span,
-        margin-top: 0;
+      & .active > span {
+        display: none;
       }
 
-      & a {
+      & .active {
         display: flex;
       }
     }
@@ -510,7 +528,6 @@ footer {
 article {
   & h3 {
     margin: 0;
-    display: inline-block;
   }
 
   & time {
@@ -540,29 +557,3 @@ ul, ol {
   width: 100%;
   display: block;
 }
-
-/* utilities */
-.highlight-text {
-  color: var(--color-lightest);
-  background-color: var(--accent-color);
-  padding: var(--spacing-xs);
-  border-radius: var(--border-radius-slight);
-}
-
-.hidden {
-  display: none !important;
-}
-
-.text-centered {
-  text-align: center !important;
-}
-
-.flex-centered {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.justify-centered {
-  justify-content: center;
-}

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

@@ -2,7 +2,6 @@
   display: grid;
   gap: var(--spacing-md);
   grid-template-columns: repeat(3, 1fr);
-  margin-top: var(--spacing-2xl);
 
   @media screen and (min-width: 768px) {
     grid-template-columns: repeat(4, 1fr);

src/assets/styles/components/buttons.css

@@ -15,9 +15,6 @@ button,
     border-radius: var(--border-radius-full);
     padding: var(--spacing-xs) var(--spacing-md);
     cursor: pointer;
-    display: inline-flex;
-    flex-direction: row;
-    justify-content: center;
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-bold);
     line-height: var(--line-height-base);

src/assets/styles/components/forms.css

@@ -7,9 +7,7 @@ input[type="text"],
 input[type="email"],
 input[type="search"],
 textarea {
-  font-family: var(--font-mono);
+  font: var(--font-weight-base) var(--font-size-base) var(--font-mono);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-base);
   line-height: var(--line-height-base);
   color: var(--text-color);
   background-color: var(--background-color);
@@ -47,7 +45,7 @@ select:focus-within {
 
 select {
   color: var(--text-color);
-  border: 1px solid var(--text-color);
+  border: var(--border-gray);
   border-radius: var(--border-radius-slight);
   background-color: var(--background-color);
   padding: var(--spacing-xs) var(--spacing-sm);
@@ -55,12 +53,17 @@ select {
 
 .search__form {
   margin-top: 0;
+
+  & .search__form--input::-webkit-search-cancel-button {
+    cursor: pointer;
+  }
 }
 
 .search__results {
   margin: 0 0 var(--spacing-base);
   padding: 0;
   list-style: none;
+  display: none;
 
   & li {
     margin: var(--spacing-sm) 0;

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

@@ -66,9 +66,7 @@
       height: 100%;
       border: var(--border-default);
       border-radius: var(--border-radius-slight);
-      transition-property: border-color;
+      transition: border-color var(--transition-duration-default) var(--transition-ease-in-out);
-      transition-timing-function: var(--transition-ease-in-out);
-      transition-duration: var(--transition-duration-default);
     }
   }
 
@@ -104,8 +102,8 @@
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 6;
-      overflow: hidden;
       text-overflow: ellipsis;
+      overflow: hidden;
     }
   }
 }

src/assets/styles/components/menu.css

@@ -1,4 +1,9 @@
-.menu-primary {
+menu {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  & .menu-primary {
     display: flex;
     flex-direction: row;
     list-style: none;
@@ -22,7 +27,7 @@
     }
   }
 
-.menu-button-container {
+  & .menu-button-container {
     display: none;
     outline: none;
     margin-left: var(--spacing-md);
@@ -45,7 +50,7 @@
     }
   }
 
-#menu-toggle {
+  & #menu-toggle {
     display: none;
 
     &:checked + .menu-button-container {
@@ -139,3 +144,4 @@
       height: var(--sizing-svg-base);
     }
   }
+}

src/assets/styles/components/modal.css

@@ -2,7 +2,7 @@
   width: 100%;
   height: 100%;
   inset: 0;
-  background: #000000b3;
+  background: var(--gray-overlay);
   position: fixed;
   z-index: 3;
 

src/assets/styles/components/paginator.css

@@ -1,4 +1,7 @@
 .pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   justify-content: space-between;
 
   & button {
@@ -11,6 +14,11 @@
     display: flex;
   }
 
+  & p {
+    text-align: center;
+    margin: 0;
+  }
+
   & span.disabled svg[data-tablericon-name^="arrow-"] {
     cursor: not-allowed;
     stroke: color-mix(in srgb, var(--text-color), transparent 50%);

src/assets/styles/components/progress-bar.css

@@ -2,7 +2,7 @@
   display: flex;
   height: var(--sizing-lg);
   width: 100%;
-  background-color: #d9dee499;
+  background-color: var(--gray-background-transparent);
   border-radius: var(--border-radius-full);
 
   & .progress-bar {

src/assets/styles/components/tab-buttons.css

@@ -1,3 +1,5 @@
+#tracks-recent,
+#tracks-window,
 #tracks-recent ~ .tracks-recent,
 #tracks-window ~ .tracks-window {
   display: none;
@@ -8,9 +10,9 @@
   display: block;
 }
 
-input[id="tracks-recent"] ~ [for="tracks-recent"],
+input[id="tracks-recent"] ~ .tracks-recent,
-input[id="tracks-window"] ~ [for="tracks-window"] {
+input[id="tracks-window"] ~ .tracks-window {
-  margin-bottom: var(--spacing-base);
+  margin-top: var(--spacing-base);
 }
 
 input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-window"]) {

src/assets/styles/defaults/fonts.css

@@ -1,5 +1,5 @@
 @font-face {
   font-family: MonoLisa;
   src: url('/assets/fonts/MonoLisa.min.woff2') format('woff2');
-  font-display: optional
+  font-display: optional;
 }

src/assets/styles/defaults/vars.css

@@ -30,6 +30,10 @@
   --gray-lighter: var(--gray-100);
   --gray-dark: var(--gray-950);
 
+  /* semi-transparent overlay color */
+  --gray-overlay: #000000b3;
+  --gray-background-transparent: #d9dee499;
+
   /* base theme */
   --color-lightest: var(--gray-50);
   --color-darkest: var(--gray-1000);

src/assets/styles/pages/about.css

@@ -7,9 +7,12 @@
 }
 
 .avatar-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
   margin-bottom: var(--spacing-sm);
   width: 100%;
-  justify-content: center;
 
   & .interior {
     display: flex;
@@ -21,3 +24,7 @@
     }
   }
 }
+
+.about-title {
+  text-align: center;
+}

src/assets/styles/pages/contact.css

@@ -6,6 +6,11 @@
     flex-direction: row;
   }
 
+  & label.hp,
+  & label > span {
+    display: none;
+  }
+
   & textarea {
     height: calc(var(--sizing-3xl) * 5);
     resize: none;

src/assets/styles/pages/watching.css

@@ -126,6 +126,8 @@ a:active > .watching.hero::after {
         }
 
         .subheader {
+          display: flex;
+          align-items: center;
           gap: var(--spacing-xs);
         }
 

src/assets/styles/pages/webrings.css

@@ -1,7 +1,15 @@
 .webring-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
   margin: var(--margin-vertical-base-horizontal-zero);
 
   & .webring-navigation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     gap: var(--spacing-sm);
 
     & a {

src/includes/partials/blocks/avatar.liquid

@@ -1,4 +1,4 @@
-<div class="avatar-wrapper flex-centered">
+<div class="avatar-wrapper">
   <div class="interior">
     <img
       srcset="

src/includes/partials/footer.liquid

@@ -1,13 +1,13 @@
 <footer{% unless updated %} style="margin-top:var(--spacing-3xl)"{% endunless %}>
   {%- if updated -%}
-    <p class="text-centered"><em>This page was last updated on {{ updated | strip }}.</em></p>
+    <p class="updated"><em>This page was last updated on {{ updated | strip }}.</em></p>
   {%- endif -%}
-  <nav aria-label="Social icons" class="social flex-centered justify-centered text-centered">
+  <nav aria-label="Social icons" class="social">
     {%- for link in nav.footer_icons -%}
-      {% render "partials/nav/linked-icon.liquid", title:link.title, url:link.permalink, icon:link.icon %}
+      {% render "partials/nav/link.liquid", page:page, title:link.title, url:link.permalink, icon:link.icon %}
     {%- endfor -%}
   </nav>
-  <nav aria-label="Secondary site navigation" class="sub-pages flex-centered justify-centered text-centered">
+  <nav aria-label="Secondary site navigation" class="sub-pages">
     {%- for link in nav.footer_text -%}
       {% render "partials/nav/link.liquid", page:page, title:link.title, url:link.permalink, icon:link.icon %}
       {% if not forloop.last %}<span>/</span>{% endif %}

src/includes/partials/home/posts.liquid

@@ -1,7 +1,7 @@
 {%- assign posts = postData | filterByPostType: postType %}
 <div class="article-widget-wrapper">
   <div class="section-header-wrapper">
-    <h2 class="section-header posts flex-centered">
+    <h2 class="section-header posts">
       {% tablericon icon title %}
       {{ title }}
     </h2>
@@ -14,8 +14,6 @@
       <a href="{{ post.slug }}">
         <h3>{{ post.title }}</h3>
       </a>
-      <span class="p-author h-card hidden">{{ globals.site_name }}</span>
-      <div class="p-summary hidden">{{ post.data.post_excerpt }}</div>
       {{ post.description | normalize_whitespace | markdown | truncatewords: 50 }}
     </article>
   {%- endfor -%}

src/includes/partials/media/watching/grid.liquid

@@ -8,7 +8,7 @@
         <div class="meta-text">
           {%- if item.type == 'movie' -%}
             <div class="header">{{ item.title }}</div>
-            <div class="subheader flex-centered">
+            <div class="subheader">
               {%- if item.rating -%}
                 <span class="rating"> {{ item.rating }}</span>
               {%- endif -%}
@@ -16,7 +16,7 @@
             </div>
           {%- else -%}
             <div class="header">{{ item.name }}</div>
-            <div class="subheader flex-centered">({{ item.year }})</div>
+            <div class="subheader">({{ item.year }})</div>
           {%- endif -%}
         </div>
         {%- assign loadingStrategy = loading | default: 'lazy' -%}

src/includes/partials/nav/menu.liquid

@@ -1,4 +1,4 @@
-<div class="flex-centered">
+<menu>
   <input id="menu-toggle" type="checkbox" aria-hidden="true" />
   <label class="menu-button-container" for="menu-toggle" tabindex="0">
     <div class="menu-closed" aria-hidden="true">{% tablericon "menu-2" "Menu closed" %}</div>
@@ -10,4 +10,4 @@
     {%- endfor -%}
   </ul>
   {% render "partials/nav/theme-toggle.liquid" %}
-</div>
+</menu>

src/includes/partials/nav/paginator.liquid

@@ -1,5 +1,5 @@
 <script type="module" src="/assets/scripts/components/select-pagination.js?v={% appVersion %}"></script>
-<nav aria-label="Pagination" class="pagination flex-centered">
+<nav aria-label="Pagination" class="pagination">
   {%- if pagination.href.previous -%}
     <a href="{{ pagination.href.previous }}" aria-label="Previous page">
       {% tablericon "arrow-left" "Previous" %}
@@ -19,9 +19,9 @@
       {%- endfor -%}
     </select>
     <noscript>
-      <div class="text-centered">
+      <p>
         <span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
-      </div>
+      </p>
     </noscript>
   </select-pagination>
   {%- if pagination.href.next -%}

src/includes/webrings/css-joy.liquid

@@ -1,8 +1,8 @@
 <div class="webring-wrapper">
-  <a href="https://cs.sjoy.lol">
+  <h3>
-    <h3 class="text-centered">CSS JOY Webring</h3>
+    <a href="https://cs.sjoy.lol">CSS JOY Webring</a>
-  </a>
+  </h3>
-  <div class="webring-navigation flex-centered justify-centered">
+  <div class="webring-navigation">
     <a href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
       {% tablericon "arrow-left" "Previous site" %}
     </a>

src/includes/webrings/the-claw.liquid

@@ -1,5 +1,4 @@
 <div class="webring-wrapper">
-  <div class="flex-centered justify-centered">
     <img
       srcset="
         https://cdn.coryd.dev/{{ logo }}?class=w200&type=webp 200w,
@@ -18,11 +17,10 @@
       width="200"
       height="169"
     />
-  </div>
+  <h3>The Claw Webring</h3>
-  <h3 class="text-centered">The Claw Webring</h3>
+  <p>
-  <div class="flex-centered justify-centered">
     <strong>
       <a class="no-underline" href="https://github.com/whitep4nth3r/the-claw-webring">Join!</a>
     </strong>
-  </div>
+  </p>
 </div>

src/pages/dynamic/music/index.html

@@ -26,7 +26,7 @@ schema: music-index
   </a>
 </h3>
 {% render "partials/media/grid.liquid", data:music.week.albums, shape: "square", count: 8 %}
-<div class="section-header-wrapper flex-centered">
+<div class="section-header-wrapper">
   <h3 id="tracks" class="section-header">
     <a class="icon-link" href="/music/tracks/this-week">
       {% tablericon "playlist" "Tracks" %}
@@ -35,8 +35,8 @@ schema: music-index
   </h3>
 </div>
 <div class="track-display">
-  <input id="tracks-recent" name="track-options" class="hidden" type="radio" aria-hidden="true" checked />
+  <input id="tracks-recent" name="track-options" type="radio" aria-hidden="true" checked />
-  <input id="tracks-window" name="track-options" class="hidden" type="radio" aria-hidden="true" />
+  <input id="tracks-window" name="track-options" type="radio" aria-hidden="true" />
   <label for="tracks-recent" class="button" data-toggle="tracks-recent">Recent</label>
   <label for="tracks-window" class="button" data-toggle="tracks-window">This week</label>
   <div class="tracks-recent">
@@ -47,7 +47,7 @@ schema: music-index
   </div>
 </div>
 {% if albumReleases.size > 0 %}
-<h3 id="album-releases" class="section-header flex-centered">
+<h3 id="album-releases" class="section-header">
   {% tablericon "calendar-time" "Anticipated albums" %}
   Anticipated albums
 </h3>

src/pages/static/about.md

@@ -6,7 +6,7 @@ permalink: /about.html
 {%- assign artist = music.week.artists | first -%}
 {%- assign book = books.all | bookStatus: 'started' | reverse | first -%}
 {%- assign show = tv.recentlyWatched | first -%}
-<div class="avatar-wrapper flex-centered">
+<div class="avatar-wrapper">
   <div class="interior">
     {%- capture about_alt -%}{{ globals.site_name }} - image by @joel@fosstodon.org{%- endcapture -%}
     <img
@@ -25,7 +25,7 @@ permalink: /about.html
     />
   </div>
 </div>
-<h2 class="text-centered">Hi, I'm Cory</h2>
+<h2 class="about-title">Hi, I'm Cory</h2>
 
 <strong class="highlight-text">I'm a software developer based in Camarillo, California</strong>. I enjoy hanging out with my beautiful family and 3 rescue dogs, technology, automation, [music](https://coryd.dev/music), [writing](https://coryd.dev/posts), [reading](https://coryd.dev/books), [tv](https://coryd.dev/watching#tv) and [movies](https://coryd.dev/watching#movies). Lately I've been listening to a lot of <strong class="highlight-text">{{ artist.title }}</strong>, reading <strong class="highlight-text">{{ book.title }}</strong> and watching <strong class="highlight-text">{{ show.name }}</strong>.
 

src/pages/static/contact.html

@@ -16,20 +16,18 @@ description: How to contact me.
     </ul>
   </div>
   <form data-form="contact" class="column" method="POST" action="https://coryd.dev/api/contact" name="contact">
-    <label class="hidden">
+    <label class="hp">
       Don't fill this out if you're human: <input type="text" name="hp_name">
     </label>
     <label>
-      <span class="hidden">Name</span>
+      <span>Name</span>
       <input type="text" name="name" placeholder="Name" required />
     </label>
     <label>
-      <span class="hidden">Email</span>
+      <span>Email</span>
       <input type="email" name="email" placeholder="Email" required />
     </label>
     <textarea name="message" placeholder="Message" required></textarea>
-    <div class="flex-centered justify-centered">
     <button type="submit">Send message</button>
-    </div>
   </form>
 </div>

src/pages/static/search.html

@@ -31,9 +31,13 @@ permalink: /search.html
     $input.addEventListener('input', () => {
       const query = $input.value
       const results = (query.length > 1) ? getSearchResults(query) : []
-      if (query === '') renderSearchResults([])
+      if (query.length === 0) {
+        // Clear the results when input is empty
+        renderSearchResults([])
+      } else {
         if (query.length > 1 && window?.umami) umami.trackEvent('Search', { query: query })
-      renderSearchResults(results)
+        renderSearchResults(results, query)
+      }
     })
 
     $input.addEventListener('keydown', (event) => {
@@ -41,15 +45,20 @@ permalink: /search.html
     })
 
     const getSearchResults = (query) => miniSearch.search(query, { prefix: true, fuzzy: 0.2, boost: { title: 2 } }).map(({ id }) => resultsById[id])
-    const renderSearchResults = (results) => {
+
+    const renderSearchResults = (results, query = '') => {
+      if (results.length > 0) {
         $results.innerHTML = results.map(({ title, url }) => {
           return `<li class="search__results--result"><a href="${url}">${title}</a></li>`
         }).join('\n')
-
+        $results.style.display = 'block'
-      if (results.length > 0) {
-        $results.classList.remove('hidden')
       } else {
-        $results.classList.add('hidden')
+        if (query.trim() !== '') {
+          $results.innerHTML = `<li class="search__results--no-results">No results found for "${query}"</li>`
+        } else {
+          $results.innerHTML = ''
+        }
+        $results.style.display = 'block'
       }
     }
   })()
@@ -64,4 +73,4 @@ permalink: /search.html
   <input class="search__form--input" placeholder="Search" type="search" name="q" autocomplete="off" autofocus>
   <input class="search__form--fallback" type="hidden" placeholder="Type away..." name="sites" value="coryd.dev">
 </form>
-<ul class="search__results hidden"></ul>
+<ul class="search__results"></ul>