feat: tattoo callout

src/_data/artists.js

@@ -54,7 +54,7 @@ const fetchGenreMapping = async () => {
 
 export default async function () {
   const genreMapping = await fetchGenreMapping()
-  const artists = await fetchPaginatedData('artists', 'id, mbid, name_string, image, total_plays, country, description, favorite, genres')
+  const artists = await fetchPaginatedData('artists', 'id, mbid, name_string, image, total_plays, country, description, favorite, tattoo, genres')
   const albums = await fetchPaginatedData('albums', 'mbid, name, release_year, total_plays, artist')
   const albumsByArtist = albums.reduce((acc, album) => {
     if (!acc[album.artist]) acc[album.artist] = []

src/assets/styles/defaults/vars.css

@@ -61,6 +61,7 @@
   --posts: #008080;
   --search: #4682b4;
   --sun: #ffa500;
+  --tattoo: #b22222;
   --tv: #ff4500;
   --warning: #ff8c00;
   --webrings: #da70d6;

src/assets/styles/pages/music.css

@@ -52,6 +52,14 @@
           }
         }
 
+        &.tattoo {
+          color: var(--tattoo);
+
+          & svg {
+            stroke: var(--tattoo);
+          }
+        }
+
         &.brain:focus,
         &.brain:focus-within {
           outline: 0;

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

@@ -42,6 +42,9 @@ schema: artist
       {%- if artist.favorite -%}
         <p class="sub-meta favorite flex-centered">{% tablericon "heart" "Favorite" %} This is one of my favorite artists!</p>
       {%- endif -%}
+      {%- if artist.tattoo -%}
+        <p class="sub-meta tattoo flex-centered">{% tablericon "needle" "Tattoo" %} I have a tattoo inspired by this artist!</p>
+      {%- endif -%}
       {%- if artist.total_plays > 0 -%}
         <p class="sub-meta"><strong class="highlight-text">{{ artist.total_plays }} plays</strong></p>
       {%- endif -%}