chore: remove utility classes + cleanup

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-window" name="track-options" class="hidden" type="radio" aria-hidden="true" />
+  <input id="tracks-recent" name="track-options" type="radio" aria-hidden="true" checked />
+  <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>
+    <button type="submit">Send message</button>
   </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 > 1 && window?.umami) umami.trackEvent('Search', { query: query })
-      renderSearchResults(results)
+      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, 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) => {
-      $results.innerHTML = results.map(({ title, url }) => {
-        return `<li class="search__results--result"><a href="${url}">${title}</a></li>`
-      }).join('\n')
 
+    const renderSearchResults = (results, query = '') => {
       if (results.length > 0) {
-        $results.classList.remove('hidden')
+        $results.innerHTML = results.map(({ title, url }) => {
+          return `<li class="search__results--result"><a href="${url}">${title}</a></li>`
+        }).join('\n')
+        $results.style.display = 'block'
       } 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>