fix: title + styles

config/filters/index.js

@@ -109,7 +109,7 @@ export default {
     entryData.forEach((entry) => {
       const md = mdGenerator()
       const dateKey = Object.keys(entry).find(key => key.includes('date'))
-      let { title, image, url, slug, link, authors, description, type, content, backdrop, rating, tags } = entry
+      let { artist, authors, backdrop, content, description, image, link, rating, slug, title, url, tags, type  } = entry
       const feedNote = '<hr/><p>This is a full text feed, but not all content can be rendered perfectly within the feed. If something looks off, feel free to <a href="https://coryd.dev">visit my site</a> for the original post.</p>'
       const processedEntry = { title: title.trim(), date: new Date(entry[dateKey]), content: description }
 
@@ -137,6 +137,7 @@ export default {
       if (rating) processedEntry['rating'] = rating
       if (tags) processedEntry['tags'] = tags
       if (type === 'album-release') {
+        if (artist) processedEntry['title'] = `${title} by ${artist}`
         processedEntry['excerpt'] = 'Check out the new release!'
         processedEntry['content'] = 'Check out the new release!'
       }
@@ -156,43 +157,45 @@ export default {
         url: item['url'],
         type: item['type']
       }
-      if (item['type'] === 'artist') {
+
-        normalized['title'] = item['title']
+      switch (item['type']) {
-        normalized['alt'] = `${item['plays']} plays of ${item['title']}`
+        case 'artist':
-        normalized['subtext'] = `${item['plays']} plays`
+          normalized.title = item['title']
+          normalized.alt = `${item['plays']} plays of ${item['title']}`
+          normalized.subtext = `${item['plays']} plays`
+          break
+        case 'album':
+          normalized.title = item['title']
+          normalized.alt = `${item['title']} by ${item['artist']}`
+          normalized.subtext = `${item['artist']}`
+          break
+        case 'album-release':
+          normalized.title = item['title']
+          normalized.alt = `${item['title']} by ${item['artist']}`
+          normalized.subtext = `${item['artist']} / ${item['date']}`
+          break
+        case 'movie':
+          normalized.title = item['title']
+          normalized.alt = item['title']
+          normalized.rating = item['rating']
+          normalized.favorite = item['favorite']
+          normalized.subtext = item.rating ? `${item['rating']} (${item['year']})` : `(${item['year']})`
+          break
+        case 'book':
+          normalized.title = `${item['title']} by ${item['author']}`
+          if (item['rating']) {
+            normalized.rating = item['rating']
+            normalized.subtext = item['rating']
           }
-      if (item['type'] === 'album') {
+          break
-        normalized['title'] = item['title']
+        case 'tv':
-        normalized['alt'] = `${item['title']} by ${item['artist']}`
+        case 'tv-range':
-        normalized['subtext'] = `${item['artist']}`
+          normalized.title = item['name']
-      }
+          normalized.alt = `${item['subtext']} ${item['type'] === 'tv' ? 'of' : 'from'} ${item['name']}`
-      if (item['type'] === 'album-release') {
+          normalized.subtext = item['subtext']
-        normalized['title'] = item['title']
+          break
-        normalized['alt'] = `${item['title']} by ${item['artist']}`
-        normalized['subtext'] = `${item['artist']} / ${item['date']}`
-      }
-      if (item['type'] === 'movie') {
-        normalized['title'] = item['title']
-        normalized['alt'] = item['title']
-        normalized['rating'] = item['rating']
-        normalized['favorite'] = item['favorite']
-        normalized['subtext'] = item.rating ? `${item['rating']} (${item['year']})` : `(${item['year']})`
-      }
-      if (item['type'] === 'book') {
-        normalized['title'] = `${item['title']} by ${item['author']}`
-        normalized['rating'] = item['rating']
-        if (item['rating']) normalized['subtext'] = item['rating']
-      }
-      if (item['type'] === 'tv') {
-        normalized['title'] = item['name']
-        normalized['alt'] = `${item['subtext']} of ${item['name']}`
-        normalized['subtext'] = item['subtext']
-      }
-      if (item['type'] === 'tv-range') {
-        normalized['title'] = item['name']
-        normalized['alt'] = `${item['subtext']} from ${item['name']}`
-        normalized['subtext'] = item['subtext']
       }
+
       return normalized
     })
   },

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "24.5.1",
+  "version": "24.5.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "24.5.1",
+      "version": "24.5.2",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",
@@ -30,7 +30,7 @@
         "markdown-it": "^14.1.0",
         "markdown-it-anchor": "^9.1.0",
         "markdown-it-footnote": "^4.0.0",
-        "postcss": "^8.4.43",
+        "postcss": "^8.4.44",
         "postcss-cli": "^11.0.0",
         "postcss-import": "^16.1.0",
         "postcss-import-ext-glob": "^2.1.1",
@@ -3261,9 +3261,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.43",
+      "version": "8.4.44",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.43.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.44.tgz",
-      "integrity": "sha512-gJAQVYbh5R3gYm33FijzCZj7CHyQ3hWMgJMprLUlIYqCwTeZhBQ19wp0e9mA25BUbEvY5+EXuuaAjqQsrBxQBQ==",
+      "integrity": "sha512-Aweb9unOEpQ3ezu4Q00DPvvM2ZTUitJdNKeP/+uQgr1IBIqu574IaZoURId7BKtWMREwzKa9OgzPzezWGPWFQw==",
       "dev": true,
       "funding": [
         {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "24.5.1",
+  "version": "24.5.2",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {
@@ -46,7 +46,7 @@
     "markdown-it": "^14.1.0",
     "markdown-it-anchor": "^9.1.0",
     "markdown-it-footnote": "^4.0.0",
-    "postcss": "^8.4.43",
+    "postcss": "^8.4.44",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
     "postcss-import-ext-glob": "^2.1.1",

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

@@ -10,7 +10,7 @@
   }
 
   & a {
-    outline: 0;
+    outline: none;
 
     &:focus img,
     &:focus-within img {

src/assets/styles/components/forms.css

@@ -32,9 +32,17 @@ input:focus,
 input:focus-within,
 textarea:focus,
 textarea:focus-within {
+  padding: calc(var(--sizing-sm) + 1px);
+}
+
+input:focus,
+input:focus-within,
+textarea:focus,
+textarea:focus-within,
+select:focus,
+select:focus-within {
   border: 0;
   outline: var(--outline-default);
-  padding: calc(var(--sizing-sm) + 1px);
 }
 
 select {
@@ -43,12 +51,6 @@ select {
   border-radius: var(--border-radius-slight);
   background-color: var(--background-color);
   padding: var(--sizing-xs) var(--sizing-sm);
-
-  &:focus,
-  &:focus-within {
-    border: 0;
-    outline: var(--outline-default)
-  }
 }
 
 .search__form {

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

@@ -52,7 +52,7 @@
       content: '';
       top: 0;
       left: 0;
-      box-shadow: inset 0 -85px 60px -60px var(--black);
+      box-shadow: var(--box-shadow-media);
       width: 100%;
       height: 100%;
       border: var(--border-default);

src/assets/styles/components/menu.css

@@ -24,8 +24,12 @@
 
 .menu-button-container {
   display: none;
+  outline: none;
   margin-left: var(--sizing-md);
-  outline: 0;
+
+  & svg {
+    cursor: pointer;
+  }
 
   &:focus,
   &:focus-within {
@@ -33,10 +37,6 @@
     border-radius: var(--border-radius-slight);
   }
 
-  & svg {
-    cursor: pointer;
-  }
-
   &:hover svg,
   &:focus svg,
   &:focus-within svg,
@@ -123,7 +123,7 @@
 
     &:focus a,
     &:focus-within a {
-      outline: 0;
+      outline: none;
     }
 
     &:focus,

src/assets/styles/components/modal.css

@@ -20,30 +20,8 @@
       position: absolute;
       top: var(--sizing-lg);
       right: var(--sizing-lg);
-      cursor: pointer;
       height: var(--sizing-svg-base);
       width: var(--sizing-svg-base);
-
-      &:focus svg,
-      &:focus-within svg {
-        outline: var(--outline-default);
-        border-radius: var(--border-radius-slight);
-      }
-
-      & svg {
-        stroke: var(--accent-color);
-
-        &:focus {
-          outline: var(--outline-default);
-          border-radius: var(--border-radius-slight);
-        }
-
-        &:hover,
-        &:focus,
-        &:active {
-          stroke: var(--accent-color-hover);
-        }
-      }
     }
   }
 }
@@ -60,7 +38,8 @@
   }
 }
 
-.modal-toggle {
+.modal-toggle,
+.modal-close {
   cursor: pointer;
   display: inline-flex;
   vertical-align: middle;

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

@@ -61,7 +61,7 @@
       line-height: 1.5;
 
       & a {
-        outline: 0;
+        outline: none;
       }
 
       &:focus,

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

@@ -1,10 +1,10 @@
 .progress-bar-wrapper {
   display: flex;
+  height: var(--sizing-lg);
+  width: 100%;
   background-color: rgba(217, 222, 228, .6);
   border-radius: var(--border-radius-full);
   overflow: hidden;
-  height: var(--sizing-lg);
-  width: 100%;
 
   & .progress-bar {
     background-color: var(--accent-color);

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

@@ -13,7 +13,7 @@
       position: absolute;
       z-index: 1;
       content: '';
-      box-shadow: inset 0 -120px 60px -60px var(--background-color);
+      box-shadow: var(--box-shadow-text-toggle);
       width: 100%;
       height: 20%;
       bottom: 0;

src/assets/styles/defaults/vars.css

@@ -123,6 +123,10 @@
   --stroke-width-bold: 2;
   --inline-margin-bottom: -5px;
 
+  /* shadows */
+  --box-shadow-media: inset 0 -85px 60px -60px var(--black);
+  --box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
+
   /* input accent color */
   accent-color: var(--accent-color);
 }

src/assets/styles/pages/blogroll.css

@@ -5,7 +5,7 @@
   & a {
     display: flex;
     align-items: center;
-    outline: 0;
+    outline: none;
 
     &:focus svg,
     &:focus-within svg {

src/assets/styles/pages/books.css

@@ -17,7 +17,6 @@
     display: flex;
   }
 
-
   & img {
     max-width: calc(var(--sizing-3xl) * 4);
     height: auto;
@@ -115,10 +114,6 @@
       }
     }
   }
-
-  p {
-    margin: var(--sizing-base) 0;
-  }
 }
 
 @media screen and (min-width: 768px) {

src/assets/styles/pages/contact.css

@@ -18,6 +18,10 @@
   justify-content: center;
   align-items: center;
   min-height: 60vh;
+
+  h2 {
+    margin: 0;
+  }
 }
 
 @media screen and (min-width: 768px) {

src/assets/styles/pages/watching.css

@@ -58,7 +58,7 @@ a:active > .watching.hero::after {
       content: '';
       top: 0;
       left: 0;
-      box-shadow: inset 0 -85px 60px -60px var(--black);
+      box-shadow: var(--box-shadow-media);
       width: 100%;
       height: 100%;
       border: var(--border-default);
@@ -140,7 +140,7 @@ a:active > .watching.hero::after {
       content: '';
       top: 0;
       left: 0;
-      box-shadow: inset 0 -85px 60px -60px var(--black);
+      box-shadow: var(--box-shadow-media);
       width: 100%;
       height: 100%;
       border: var(--border-default);