feat: dedicated music page

src/assets/styles/base/index.css

@@ -165,6 +165,10 @@ h6 { font-size: var(--font-size-xs) }
 .section-header {
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 
+  &.reduced-margin {
+    margin: var(--sizing-md) 0 var(--sizing-lg);
+  }
+
   &.posts {
     margin: 0 0 var(--sizing-lg);
   }
@@ -175,13 +179,17 @@ h6 { font-size: var(--font-size-xs) }
 }
 
 .section-header-buttons {
-  margin: 0 0 var(--sizing-lg);
+  margin: var(--sizing-3xl) 0 var(--sizing-lg);
+
+  &.reduced-margin {
+    margin: var(--sizing-md) 0 var(--sizing-lg);
+  }
 
   & > button {
-    margin-bottom: var(--sizing-sm);
+    margin-bottom: var(--sizing-sm) !important;
 
     &:last-of-type {
-      margin-right: 0;
+      margin-right: 0 !important;
     }
   }
 }
@@ -322,6 +330,7 @@ nav .active svg {
 .brand-npm svg { stroke: var(--brand-npm) !important; }
 .brand-mastodon svg { stroke: var(--brand-mastodon) !important; }
 .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; }
@@ -616,14 +625,6 @@ li {
     flex-direction: row;
   }
 
-  .section-header-buttons {
-    margin: var(--sizing-3xl) 0 var(--sizing-lg);
-
-    & > button {
-      margin-bottom: 0;
-    }
-  }
-
   article {
     & h2 {
       margin: 0 0 var(--sizing-xs);

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

@@ -6,6 +6,7 @@
 .media-grid {
   display: grid;
   gap: var(--sizing-sm);
+  margin-bottom: var(--sizing-base);
 
   &.square {
     grid-template-columns: var(--grid-square);

src/assets/styles/defaults/vars.css

@@ -48,6 +48,7 @@
   --brand-npm: #cc3534;
   --brand-mastodon: #6364ff;
   --brand-listenbrainz: #e97941;
+  --brand-music: #00bcd4;
   --brand-tv: #d63031;
   --brand-instapaper: var(--text-color);
   --brand-books: #10b582;