feat: dedicated music page(s); pagination fixes; nav + color updates; assorted updates

src/assets/styles/base/index.css

@@ -147,6 +147,7 @@ a:active,
 /* headers */
 h1, h2, h3, h4, h5, h6 {
   font-weight: var(--font-weight-bold);
+  margin: var(--sizing-base) 0;
 }
 
 h1 { font-size: var(--font-size-xl) }
@@ -321,7 +322,7 @@ nav .active {
 
 .menu-primary .active svg,
 nav .active svg {
-  stroke: var(--accent-color) !important;
+  stroke: var(--accent-color-hover) !important;
 }
 
 /* social icons */
@@ -332,8 +333,11 @@ nav .active svg {
 .brain svg { stroke: var(--brand-listenbrainz) !important; }
 .headphones svg { stroke: var(--brand-music) !important; }
 .device-tv svg { stroke: var(--brand-tv) !important; }
-.news svg { stroke: var(--brand-instapaper) !important; }
 .books svg { stroke: var(--brand-books) !important; }
+.link svg { stroke: var(--brand-links) !important; }
+.info-square svg { stroke: var(--brand-about) !important }
+.search svg { stroke: var(--brand-search) !important }
+.news svg { stroke: var(--brand-instapaper) !important; }
 .coffee svg { stroke: var(--brand-buy-me-a-coffee) !important; }
 .heart-handshake svg { stroke: var(--webrings) !important; }
 .rss svg { stroke: var(--brand-rss) !important; }
@@ -399,6 +403,11 @@ article {
   }
 }
 
+.explainer {
+  padding-top: var(--sizing-lg);
+  margin-block: 0;
+}
+
 footer nav:first-child {
   gap: var(--sizing-sm);
   margin-top: var(--sizing-3xl);

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

@@ -1,4 +1,6 @@
 .music-chart {
+  margin-bottom: var(--sizing-base);
+
   & .item {
     justify-content: space-between;
 

src/assets/styles/defaults/vars.css

@@ -48,15 +48,18 @@
   --brand-npm: #cc3534;
   --brand-mastodon: #6364ff;
   --brand-listenbrainz: #e97941;
-  --brand-music: #00bcd4;
-  --brand-tv: #d63031;
+  --brand-music: #1e90ff;
+  --brand-tv: #ff4500;
+  --brand-books: #32cd32;
+  --brand-links: #9370db;
+  --brand-about: #ff6347;
+  --brand-search: #4682b4;
   --brand-instapaper: var(--text-color);
-  --brand-books: #10b582;
   --brand-buy-me-a-coffee: #40dca5;
   --brand-rss: #f26522;
-  --webrings: #e68abb;
-  --moon: #5a4ac4;
-  --sun: #ffb200;
+  --webrings: #da70d6;
+  --moon: #6a5acd;
+  --sun: #ffa500;
 
   /* fonts */
   --font-mono: MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;

src/assets/styles/index.css

@@ -21,7 +21,6 @@
 @import url('./pages/blogroll.css') layer(page);
 @import url('./pages/contact.css') layer(page);
 @import url('./pages/links.css') layer(page);
-@import url('./pages/now.css') layer(page);
 @import url('./pages/post.css') layer(page);
 @import url('./pages/watching.css') layer(page);
 @import url('./pages/webrings.css') layer(page);

src/assets/styles/pages/links.css

@@ -4,13 +4,16 @@
   grid-template-columns: repeat(1,minmax(0,1fr));
   margin-bottom: var(--sizing-base);
 
-  & .link {
+  & .link-box {
     border: 1px solid var(--gray-light);
     padding: var(--sizing-xs) var(--sizing-sm);
+    position: relative;
   }
 
   & button {
-    margin-left: var(--sizing-sm);
+    position: absolute;
+    bottom: var(--sizing-sm);
+    right: var(--sizing-sm);
   }
 }
 

src/assets/styles/pages/now.css

@@ -1,23 +0,0 @@
-/* now */
-.now-text {
-  padding-left: var(--sizing-base);
-
-  & p {
-    margin: var(--sizing-sm) 0;
-
-    & > svg {
-      display: inline;
-      vertical-align: middle;
-      height: var(--sizing-base);
-      width: var(--sizing-base);
-    }
-  }
-}
-
-.link-list {
-  margin-top: 0;
-}
-
-.now-explainer {
-  padding-top: var(--sizing-lg);
-}