chore: cleanup

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "24.3.5",
+  "version": "24.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "24.3.5",
+      "version": "24.4.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",
@@ -1829,9 +1829,9 @@
       }
     },
     "node_modules/escalade": {
-      "version": "3.1.2",
+      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
       "dev": true,
       "license": "MIT",
       "engines": {

package.json

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

src/assets/styles/base/index.css

@@ -29,14 +29,15 @@ body {
   background: var(--accent-color);
 }
 
-::-webkit-scrollbar-thumb {
-  background: var(--accent-color);
-}
-
 ::-webkit-scrollbar-track {
   background-color: var(--gray-light);
 }
 
+::-webkit-scrollbar-thumb {
+  background: var(--accent-color);
+  border-radius: var(--border-radius-full);
+}
+
 ::-webkit-scrollbar-button {
   background-color: var(--accent-color);
 }
@@ -47,15 +48,34 @@ body::-webkit-scrollbar {
   height: var(--sizing-md);
 }
 
-a:focus,
-a:focus-within {
-  outline: var(--outline-default);
-  text-decoration: none;
-}
-
 p {
   margin: var(--sizing-base) 0;
 
+  &.books,
+  &.concerts,
+  &.country,
+  &.favorite,
+  &.movies,
+  &.tv,
+  &.music,
+  &.posts,
+  &.tattoo {
+    &.books { --section-color: var(--books); }
+    &.concerts { --section-color: var(--concerts); }
+    &.country { --section-color: var(--country); }
+    &.favorite { --section-color: var(--favorite); }
+    &.movies, &.tv { --section-color: var(--tv); }
+    &.music { --section-color: var(--music); }
+    &.posts { --section-color: var(--posts); }
+    &.tattoo { --section-color: var(--tattoo); }
+
+    color: var(--section-color);
+
+    & svg {
+      stroke: var(--section-color);
+    }
+  }
+
   & a {
     text-decoration: underline;
     text-decoration-line: underline;
@@ -76,84 +96,7 @@ code {
   padding: var(--sizing-xs);
   color: var(--text-color-inverted);
   background-color: var(--background-color-inverted);
-}
+  border-radius: var(--border-radius-slight);
-
-/* social icons */
-:is(body, html, nav) a {
-  &.mail > svg { stroke: var(--brand-gmail); }
-  &.brand-github > svg { stroke: var(--brand-github); }
-  &.brand-npm > svg { stroke: var(--brand-npm); }
-  &.brand-mastodon > svg { stroke: var(--brand-mastodon); }
-  &.article > svg { stroke: var(--posts); }
-  &.books > svg { stroke: var(--books); }
-  &.device-watch > svg { stroke: var(--now); }
-  &.coffee > svg { stroke: var(--brand-buy-me-a-coffee); }
-  &.device-tv-old > svg { stroke: var(--tv); }
-  &.favorite > svg { stroke: var(--favorite); }
-  &.headphones > svg { stroke: var(--music); }
-  &.heart-handshake > svg { stroke: var(--webrings); }
-  &.info-square > svg { stroke: var(--about); }
-  &.link > svg { stroke: var(--links); }
-  &.mail-plus > svg { stroke: var(--newsletter); }
-  &.rss > svg { stroke: var(--brand-rss); }
-  &.search > svg { stroke: var(--search); }
-}
-
-p.books {
-  color: var(--books);
-
-  & svg {
-    stroke: var(--books);
-  }
-}
-
-p.concerts {
-  color: var(--concerts);
-
-  & svg {
-    stroke: var(--concerts);
-  }
-}
-
-p.favorite {
-  color: var(--favorite);
-
-  & svg {
-    stroke: var(--favorite);
-  }
-}
-
-p.movies,
-p.tv {
-  color: var(--tv);
-
-  & svg {
-    stroke: var(--tv);
-  }
-}
-
-p.music {
-  color: var(--music);
-
-  & svg {
-    stroke: var(--music);
-  }
-}
-
-p.posts {
-  color: var(--posts);
-
-  & svg {
-    stroke: var(--posts);
-  }
-}
-
-p.tattoo {
-  color: var(--tattoo);
-
-  & svg {
-    stroke: var(--tattoo);
-  }
 }
 
 p:not(.flex-centered):not(.banner p) > svg {
@@ -189,6 +132,24 @@ a {
   color: var(--accent-color);
   text-decoration: none;
 
+  &.mail > svg { stroke: var(--brand-gmail); }
+  &.brand-github > svg { stroke: var(--brand-github); }
+  &.brand-npm > svg { stroke: var(--brand-npm); }
+  &.brand-mastodon > svg { stroke: var(--brand-mastodon); }
+  &.article > svg { stroke: var(--posts); }
+  &.books > svg { stroke: var(--books); }
+  &.device-watch > svg { stroke: var(--now); }
+  &.coffee > svg { stroke: var(--brand-buy-me-a-coffee); }
+  &.device-tv-old > svg { stroke: var(--tv); }
+  &.favorite > svg { stroke: var(--favorite); }
+  &.headphones > svg { stroke: var(--music); }
+  &.heart-handshake > svg { stroke: var(--webrings); }
+  &.info-circle > svg { stroke: var(--about); }
+  &.link > svg { stroke: var(--links); }
+  &.mail-plus > svg { stroke: var(--newsletter); }
+  &.rss > svg { stroke: var(--brand-rss); }
+  &.search > svg { stroke: var(--search); }
+
   & svg {
     stroke: var(--accent-color);
 
@@ -204,6 +165,13 @@ a {
   stroke: var(--accent-color-hover);
 }
 
+a:focus,
+a:focus-within {
+  outline: var(--outline-default);
+  border-radius: var(--border-radius-slight);
+  text-decoration: none;
+}
+
 a:hover,
 a:focus,
 a:active,
@@ -224,6 +192,22 @@ a:active,
   stroke: var(--accent-color-hover);
 }
 
+:is(a):has(svg) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sizing-xs);
+
+  & svg {
+    stroke: var(--accent-color);
+  }
+
+  &:hover svg,
+  &:active svg,
+  &:focus svg {
+    stroke: var(--accent-color-hover);
+  }
+}
+
 /* headers */
 h1, h2, h3, h4, h5, h6 {
   font-weight: var(--font-weight-bold);
@@ -274,8 +258,10 @@ table {
   overflow-x: auto;
   width: 100%;
   border: 1px solid var(--gray-light);
+  border-radius: var(--border-radius-slight);
   white-space: nowrap;
   caption-side: bottom;
+  overscroll-behavior: none;
 }
 
 table,
@@ -356,47 +342,11 @@ th {
   }
 }
 
-a:hover svg,
-a:active svg,
-a:focus svg {
-  stroke: var(--accent-color-hover);
-}
-
-a svg {
-  stroke: var(--accent-color);
-}
-
-a:has(svg) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sizing-xs);
-
-  & svg {
-    stroke: var(--accent-color);
-  }
-
-  &:hover svg,
-  &:active svg,
-  &:focus svg {
-    stroke: var(--accent-color-hover);
-  }
-}
-
 /* nav */
-.menu-primary .active,
+.active,
-.menu-primary .active svg,
+.active svg {
-nav .active,
-nav .active svg {
   cursor: not-allowed;
-}
-
-.menu-primary .active,
-nav .active {
   color: var(--accent-color);
-}
-
-.menu-primary .active svg,
-nav .active svg {
   stroke: var(--accent-color-hover);
 }
 
@@ -498,28 +448,12 @@ article {
     display: inline-block;
   }
 
-  & a h2:hover,
-  & a h2:focus,
-  & a h2:active {
-    color: var(--accent-color-hover);
-    transition-timing-function: var(--transition-ease-in-out);
-    transition-duration: var(--transition-duration-default);
-  }
-
-  & [rel="author"],
   & time {
+    display: block;
     color: var(--gray-dark);
     font-size: var(--font-size-sm);
     margin-right: var(--sizing-xs);
   }
-
-  & time {
-    display: block;
-  }
-
-  & [rel="author"] {
-    margin-bottom: var(--sizing-xs);
-  }
 }
 
 /* lists */
@@ -547,6 +481,7 @@ ul, ol {
   color: var(--color-lightest);
   background-color: var(--accent-color);
   padding: var(--sizing-xs);
+  border-radius: var(--border-radius-slight);
 }
 
 .hidden {

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

@@ -14,7 +14,7 @@
 
     &:focus img,
     &:focus-within img {
-      outline: var(--outline-default)
+      outline: var(--outline-default);
     }
   }
 

src/assets/styles/components/banners.css

@@ -11,6 +11,7 @@
 .banner {
   padding: var(--sizing-md);
   border: 1px solid;
+  border-radius: var(--border-radius-slight);
 
   & p {
     font-size: var(--font-size-sm);
@@ -36,29 +37,12 @@
   &.old-post,
   &.rss,
   &.warning {
-    &.error {
+    &.error { --border-color: var(--error); }
-      --border-color: var(--error);
+    &.github { --border-color: var(--brand-github); }
-    }
+    &.npm { --border-color: var(--brand-npm); }
-
+    &.old-post { --border-color: var(--gray-dark); }
-    &.github {
+    &.rss { --border-color: var(--brand-rss); }
-      --border-color: var(--brand-github);
+    &.warning { --border-color: var(--warning); }
-    }
-
-    &.npm {
-      --border-color: var(--brand-npm);
-    }
-
-    &.old-post {
-      --border-color: var(--gray-dark);
-    }
-
-    &.rss {
-      --border-color: var(--brand-rss);
-    }
-
-    &.warning {
-      --border-color: var(--warning);
-    }
 
     border-color: var(--border-color);
 
@@ -68,6 +52,11 @@
       color: var(--border-color);
     }
 
+    & p a:focus,
+    & p a:focus-within {
+      outline: 2px dashed var(--border-color);
+    }
+
     & svg {
       stroke: var(--border-color);
     }

src/assets/styles/components/buttons.css

@@ -12,6 +12,7 @@ button,
 
   &:not(.theme-toggle) {
     border: 2px solid var(--accent-color);
+    border-radius: var(--border-radius-full);
     padding: var(--sizing-xs) var(--sizing-md);
     cursor: pointer;
     display: inline-flex;
@@ -48,6 +49,7 @@ button,
   &.theme-toggle:focus,
   &.theme-toggle:focus-within {
     outline: var(--outline-default);
+    border-radius: var(--border-radius-slight);
   }
 
   &.secondary {
@@ -61,8 +63,4 @@ button,
     color: var(--accent-color-hover);
     background: transparent;
   }
-
-  &.active {
-    cursor: not-allowed;
-  }
 }

src/assets/styles/components/forms.css

@@ -8,15 +8,15 @@ input[type="email"],
 input[type="search"],
 textarea {
   font-family: 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);
   border: var(--border-default);
+  border-radius: var(--border-radius-slight);
   padding: var(--sizing-sm);
-  font-size: var(--font-size-base);
   width: 100%;
-  border-radius: 0;
-  font-weight: var(--font-weight-base);
-  line-height: var(--line-height-base);
 }
 
 label:has(input):has(+ *) input,
@@ -40,7 +40,7 @@ textarea:focus-within {
 select {
   color: var(--text-color);
   border: 1px solid var(--text-color);
-  border-radius: 0;
+  border-radius: var(--border-radius-slight);
   background-color: var(--background-color);
   padding: var(--sizing-xs) var(--sizing-sm);
 

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

@@ -22,6 +22,7 @@
     & img {
       width: 100%;
       height: 100%;
+      border-radius: var(--border-radius-slight);
     }
   }
 
@@ -35,6 +36,7 @@
     & img {
       width: 100%;
       height: auto;
+      border-radius: var(--border-radius-slight);
     }
   }
 
@@ -43,35 +45,33 @@
     height: 100%;
     position: relative;
     display: flex;
-    overflow: hidden;
 
     &.shadow::after {
       position: absolute;
       z-index: 1;
       content: '';
       top: 0;
-      left: 1px;
+      left: 0;
       box-shadow: inset 0 -85px 60px -60px var(--black);
-      width: calc(100% - 2px);
+      width: 100%;
-      height: calc(100% - 1px);
+      height: 100%;
+      border: var(--border-default);
+      border-radius: var(--border-radius-slight);
+      transition-property: border-color;
+      transition-timing-function: var(--transition-ease-in-out);
+      transition-duration: 300ms;
     }
   }
 
-  & a:hover img,
+  & a:hover .item-wrapper.shadow::after,
-  & a:active img {
+  & a:active .item-wrapper.shadow::after {
     border-color: var(--accent-color-hover)
   }
 
-  & a:focus img,
+  & a:focus .item-wrapper.shadow::after,
-  & a:focus-within img {
+  & a:focus-within .item-wrapper.shadow::after {
-    border: 0
+    border: 0;
-  }
+    outline: var(----outline-default);
-
-  & a:focus .shadow::after,
-  & a:focus-within .shadow::after {
-    left: 0;
-    width: 100%;
-    height: 100%
   }
 
   & .meta-text {
@@ -94,13 +94,6 @@
       font-weight: var(--font-weight-bold);
     }
   }
-
-  & img {
-    border: var(--border-default);
-    transition-property: border-color;
-    transition-timing-function: var(--transition-ease-in-out);
-    transition-duration: 300ms;
-  }
 }
 
 @media screen and (min-width: 768px) {

src/assets/styles/components/menu.css

@@ -30,6 +30,7 @@
   &:focus,
   &:focus-within {
     outline: var(--outline-default);
+    border-radius: var(--border-radius-slight);
   }
 
   & svg {

src/assets/styles/components/modal.css

@@ -13,6 +13,7 @@
     width: 100%;
     inset: 0;
     overflow: scroll;
+    border-radius: var(--border-radius-slight);
     padding: var(--sizing-lg) var(--sizing-2xl);
 
     & .modal-close {
@@ -26,6 +27,7 @@
       &:focus svg,
       &:focus-within svg {
         outline: var(--outline-default);
+        border-radius: var(--border-radius-slight);
       }
 
       & svg {
@@ -33,6 +35,7 @@
 
         &:focus {
           outline: var(--outline-default);
+          border-radius: var(--border-radius-slight);
         }
 
         &:hover,
@@ -65,6 +68,7 @@
   &:focus svg,
   &:focus-within svg {
     outline: var(--outline-default);
+    border-radius: var(--border-radius-slight);
   }
 
   & svg {
@@ -73,6 +77,7 @@
 
     &:focus {
       outline: var(--outline-default);
+      border-radius: var(--border-radius-slight);
     }
 
     &:hover,

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

@@ -27,6 +27,7 @@
 
     & img {
       border: var(--border-default);
+      border-radius: var(--border-radius-slight);
       width: calc(var(--sizing-3xl) * 1.5);
       height: calc(var(--sizing-3xl) * 1.5);
     }
@@ -66,6 +67,7 @@
       &:focus,
       &:focus-within {
         outline: var(--outline-default);
+        border-radius: var(--border-radius-slight);
       }
     }
 

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

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

src/assets/styles/defaults/vars.css

@@ -53,6 +53,7 @@
   --about: #ff6347;
   --books: #32cd32;
   --concerts: #e75480;
+  --country: #20b2aa;
   --error: #d92525;
   --favorite: #ff69b4;
   --links: #9370db;
@@ -104,6 +105,10 @@
   --sizing-svg-sm: 18px;
   --sizing-svg-base: 24px;
 
+  /* radii */
+  --border-radius-slight: var(--sizing-xs);
+  --border-radius-full: 9999px;
+
   /* aspect ratios */
   --aspect-ratio-square: 1/1;
   --aspect-ratio-vertical: 2/3;

src/assets/styles/feed.xsl

@@ -18,6 +18,9 @@
             --sizing-2xl: 2rem;
             --sizing-3xl: 2.25rem;
 
+            --border-radius-slight: var(--sizing-xs);
+            --border-radius-full: 9999px;
+
             --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;
 
             --blue-50: #eff5ff;
@@ -106,9 +109,23 @@
             background: var(--accent-color);
           }
 
-          ::-webkit-scrollbar {
+          ::-webkit-scrollbar-track {
-            width: var(--sizing-xs);
+            background-color: var(--gray-light);
-            height: var(--sizing-xs);
+          }
+
+          ::-webkit-scrollbar-thumb {
+            background: var(--accent-color);
+            border-radius: var(--border-radius-full);
+          }
+
+          ::-webkit-scrollbar-button {
+            background-color: var(--accent-color);
+          }
+
+          ::-webkit-scrollbar,
+          body::-webkit-scrollbar {
+            width: var(--sizing-md);
+            height: var(--sizing-md);
           }
 
           body {
@@ -189,6 +206,7 @@
           a:focus,
           a:focus-within {
             outline: var(--outline-default);
+            border-radius: var(--border-radius-slight);
             text-decoration: none;
           }
 
@@ -231,6 +249,7 @@
 
           .item img {
             border: var(--border-default);
+            border-radius: var(--border-radius-slight);
             width: 100%;
             height: auto;
             display: block;
@@ -280,22 +299,28 @@
           }
 
           pre {
-            background-color: var(--code-bg-color);
-            color: var(--code-text-color);
             padding: var(--sizing-base);
-            border: 1px solid var(--border-color);
             overflow: auto;
             margin: var(--sizing-base) 0;
-            font-family: var(--font-mono);
             font-size: var(--body-font-size);
           }
 
           code {
-            background-color: var(--code-bg-color);
-            border: 1px solid var(--border-color);
-            color: var(--code-text-color);
             padding: 2px 4px;
+          }
+
+          .highlight-text,
+          pre,
+          code {
+            border-radius: var(--border-radius-slight);
+          }
+
+          pre, code {
             font-family: var(--font-mono);
+            background-color: var(--code-bg-color);
+            color: var(--code-text-color);
+            border: 1px solid var(--border-color);
+            border-radius: var(--border-radius-slight);
           }
 
           pre code {
@@ -327,7 +352,7 @@
             </section>
             <div class="default-wrapper">
               <p><xsl:value-of select="/rss/channel/description"/></p>
-              <p><strong class="highlight-text">Subscribe by adding the URL below to your feed reader of choice.</strong></p>
+              <p><span class="highlight-text">Subscribe by adding the URL below to your feed reader of choice.</span></p>
               <p>
                 <pre class="small">
                   <code><xsl:value-of select="rss/channel/atom:link/@href"/></code>

src/assets/styles/pages/blogroll.css

@@ -9,7 +9,8 @@
 
     &:focus svg,
     &:focus-within svg {
-      outline: var(--outline-default)
+      outline: var(--outline-default);
+      border-radius: var(--border-radius-slight);
     }
   }
 }

src/assets/styles/pages/books.css

@@ -59,6 +59,7 @@
 .book-focus {
   & img {
     border: var(--border-default);
+    border-radius: var(--border-radius-slight);
   }
 
   & .book-meta {

src/assets/styles/pages/links.css

@@ -6,6 +6,7 @@
 
   & .link-box {
     border: 1px solid var(--gray-light);
+    border-radius: var(--border-radius-slight);
     padding: var(--sizing-xs) var(--sizing-sm);
   }
 }

src/assets/styles/pages/music.css

@@ -12,6 +12,7 @@
 
   & img {
     border: var(--border-default);
+    border-radius: var(--border-radius-slight);
     width: 100%;
     height: auto;
     aspect-ratio: var(--aspect-ratio-square);

src/assets/styles/pages/watching.css

@@ -1,29 +1,29 @@
+a:focus > .watching.hero.shadow::after,
+a:focus-within > .watching.hero.shadow::after {
+  border: 0;
+  outline: var(--outline-default);
+}
+
+a:hover > .watching.hero.shadow::after,
+a:active > .watching.hero.shadow::after {
+  border-color: var(--accent-color-hover);
+}
+
 .watching {
-  & a:focus img,
-  & a:focus-within img {
-    border: 0
-  }
-
-  & a:focus .shadow:after,
-  & a:focus-within .shadow:after {
-    left: 0;
-    width: 100%;
-    height: 100%
-  }
-
   & img {
-    border: var(--border-default);
+    border-radius: var(--border-radius-slight);
     width: 100%;
     height: auto;
   }
 
   &.hero {
     position: relative;
-    overflow: hidden;
+    display: flex;
     aspect-ratio: var(--aspect-ratio-banner);
 
     & img {
       aspect-ratio: var(--aspect-ratio-banner);
+      border-radius: var(--border-radius-slight);
     }
 
     & div.meta-text {
@@ -56,11 +56,16 @@
       position: absolute;
       z-index: 1;
       content: '';
-      bottom: 1px;
+      top: 0;
-      left: 1px;
+      left: 0;
-      box-shadow: inset 0 -85px 60px -65px var(--black);
+      box-shadow: inset 0 -85px 60px -60px var(--black);
-      width: calc(100% - 2px);
+      width: 100%;
-      height: calc(100% - 1px);
+      height: 100%;
+      border: var(--border-default);
+      border-radius: var(--border-radius-slight);
+      transition-property: border-color;
+      transition-timing-function: var(--transition-ease-in-out);
+      transition-duration: 300ms;
     }
   }
 
@@ -75,6 +80,17 @@
       aspect-ratio: var(--aspect-ratio-banner);
     }
 
+    & a:hover .item.shadow::after,
+    & a:active .item-wrapper.shadow::after {
+      border-color: var(--accent-color-hover)
+    }
+
+    & a:focus .item.shadow::after,
+    & a:focus-within .item.shadow::after {
+      border: 0;
+      outline: var(----outline-default);
+    }
+
     & div {
       position: relative;
 
@@ -123,10 +139,15 @@
       z-index: 1;
       content: '';
       top: 0;
-      left: 1px;
+      left: 0;
-      box-shadow: inset 0 -85px 60px -65px var(--black);
+      box-shadow: inset 0 -85px 60px -60px var(--black);
-      width: calc(100% - 2px);
+      width: 100%;
-      height: calc(100% - 1px);
+      height: 100%;
+      border: var(--border-default);
+      border-radius: var(--border-radius-slight);
+      transition-property: border-color;
+      transition-timing-function: var(--transition-ease-in-out);
+      transition-duration: 300ms;
     }
   }
 }

src/assets/styles/plugins/prism.css

@@ -2,6 +2,7 @@ code[class*="language-"],
 pre[class*="language-"] {
   color: var(--blue-200);
   background: none;
+  border-radius: var(--border-radius-slight);
   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
   font-family: var(--font-mono);
   text-align: left;
@@ -26,6 +27,7 @@ pre[class*="language-"] {
   padding: var(--sizing-xs);
   white-space: normal;
   background: var(--gray-darkest);
+  border-radius: var(--border-radius-slight);
 }
 
 .namespace {

src/includes/partials/blocks/modal.liquid

@@ -11,7 +11,7 @@
 <div class="modal-wrapper">
   <div class="modal-body">
     <label class="modal-close" for="{{ id }}">
-      {% tablericon "square-x" "Close modal" %}
+      {% tablericon "circle-x" "Close modal" %}
     </label>
     {{ content }}
   </div>

src/includes/partials/nav/menu.liquid

@@ -2,7 +2,7 @@
   <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>
-    <div class="menu-open" aria-hidden="true">{% tablericon "square-x" "Menu open" %}</div>
+    <div class="menu-open" aria-hidden="true">{% tablericon "circle-x" "Menu open" %}</div>
   </label>
   <ul class="menu-primary" aria-label="Primary site navigation" id="primary-navigation">
     {%- for link in nav.primary -%}

src/pages/dynamic/index.html

@@ -4,4 +4,4 @@ permalink: /
 ---
 {% render "partials/home/status.liquid" status:status, music:music, books:books.all, tv:tv %}
 {% render "partials/home/posts.liquid" icon: "pencil-star", title: "Featured", postData:posts, postType: "featured" %}
-{% render "partials/home/posts.liquid" icon: "clock-2", title: "Recent posts", postData:posts %}
+{% render "partials/home/posts.liquid" icon: "clock", title: "Recent posts", postData:posts %}

src/pages/dynamic/music/artists/artist.html

@@ -42,6 +42,7 @@ schema: artist
     />
     <div class="artist-meta">
       <p class="title"><strong>{{ artist.name }}</strong></p>
+      <p class="sub-meta country">{% tablericon "map-pin" "Country" %} {{ artist.country }}</p>
       {%- if artist.favorite -%}
         <p class="sub-meta favorite">{% tablericon "heart" "Favorite" %} This is one of my favorite artists!</p>
       {%- endif -%}
@@ -90,7 +91,7 @@ schema: artist
           {% if venue %} at {{ venue }}{% endif %}
           {%- if concert.notes -%}
             {% assign notes = concert.notes | prepend: "### Notes\n" | markdown %}
-            {% render "partials/blocks/modal.liquid", label:"Concert info", icon:"info-square", content:notes, id:concert.id %}
+            {% render "partials/blocks/modal.liquid", label:"Concert info", icon:"info-circle", content:notes, id:concert.id %}
           {%- endif -%}
         </li>
       {% endfor %}

src/pages/dynamic/music/concerts.html

@@ -35,7 +35,7 @@ permalink: "/music/concerts/{% if pagination.pageNumber > 0 %}{{ pagination.page
       {% if venue %} at {{ venue }}{% endif %}
       {%- if concert.notes -%}
         {% assign notes = concert.notes | prepend: "### Notes\n" | markdown %}
-        {% render "partials/blocks/modal.liquid", label:"Concert info", icon:"info-square", content:notes, id:concert.id %}
+        {% render "partials/blocks/modal.liquid", label:"Concert info", icon:"info-circle", content:notes, id:concert.id %}
       {%- endif -%}
     </li>
   {%- endfor -%}