feat: artist pages

src/assets/styles/base/index.css

@@ -210,19 +210,17 @@ hr {
 /* tables */
 table {
   display: block;
-  overflow-x: scroll;
-  overscroll-behavior: contain;
+  overflow-x: auto;
   width: 100%;
-  max-width: fit-content;
-  margin: 0 auto;
-  white-space: nowrap;
   border: 1px solid var(--gray-light);
+  white-space: nowrap;
 }
 
 table,
 th,
 td {
   border-collapse: collapse;
+  width: 100%;
 }
 
 :is(th, td):not(:last-child) {
@@ -237,8 +235,13 @@ tr:not(:last-child) {
 th,
 td {
   padding: var(--sizing-sm);
-  min-width: calc(var(--sizing-3xl) * 2);
+  min-width: max-content;
   word-break: break-word;
+  width: 100%;
+}
+
+td {
+  min-width: calc(var(--sizing-3xl) * 2);
 }
 
 th {
@@ -342,6 +345,7 @@ nav .active svg {
 .coffee svg { stroke: var(--brand-buy-me-a-coffee) !important; }
 .heart-handshake svg { stroke: var(--webrings) !important; }
 .rss svg { stroke: var(--brand-rss) !important; }
+.favorite svg { stroke: var(--favorite) !important }
 
 /* layout */
 .default-wrapper {

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

@@ -0,0 +1,21 @@
+[data-toggle-content].text-toggle-hidden {
+  position: relative;
+  height: calc(var(--sizing-3xl) * 5);
+  overflow: hidden;
+  margin-bottom: var(--sizing-base);
+}
+
+[data-toggle-content].text-toggle-hidden::after {
+  position: absolute;
+  z-index: 1;
+  content: '';
+  top: 0;
+  left: 0;
+  box-shadow: inset 0 -100px 50px -60px var(--background-color);
+  width: 100%;
+  height: 100%;
+}
+
+[data-toggle-button] {
+  margin-bottom: var(--sizing-base) !important;
+}

src/assets/styles/defaults/vars.css

@@ -60,6 +60,7 @@
   --webrings: #da70d6;
   --moon: #6a5acd;
   --sun: #ffa500;
+  --favorite: #ff69b4;
 
   /* fonts */
   --font-mono: MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;

src/assets/styles/index.css

@@ -21,6 +21,7 @@
 @import url('./pages/blogroll.css') layer(page);
 @import url('./pages/contact.css') layer(page);
 @import url('./pages/links.css') layer(page);
+@import url('./pages/music.css') layer(page);
 @import url('./pages/post.css') layer(page);
 @import url('./pages/watching.css') layer(page);
 @import url('./pages/webrings.css') layer(page);
@@ -37,5 +38,6 @@
 @import url('./components/paginator.css') layer(components);
 @import url('./components/progress-bar.css') layer(components);
 @import url('./components/share-button.css') layer(components);
+@import url('./components/text-toggle.css') layer(components);
 @import url('./components/theme-toggle.css') layer(components);
 @import url('./components/music-chart.css') layer(components);

src/assets/styles/pages/music.css

@@ -0,0 +1,57 @@
+.artist-focus {
+  border-bottom: 0;
+
+  & img {
+    border: 1px solid var(--accent-color);
+  }
+
+  & .artist-display {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sizing-xs);
+    margin-top: var(--sizing-base);
+    margin-bottom: var(--sizing-base);
+
+    .artist-meta {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sizing-xs);
+
+      & p {
+        &.title {
+          font-size: var(--font-size-xl);
+        }
+
+        &.sub-meta {
+          font-size: var(--font-size-xs);
+          line-height: var(--line-height-xs);
+        }
+
+        &.title,
+        &.sub-meta {
+          margin: 0;
+        }
+
+        &.sub-meta svg {
+          width: 16px;
+          height: 16px;
+          margin-right: var(--sizing-xs);
+        }
+
+        &.favorite {
+          color: var(--favorite);
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .artist-focus {
+    & .artist-display {
+      margin-top: 0;
+      flex-direction: row;
+      gap: var(--sizing-md);
+    }
+  }
+}