checkpoint: music link, mobile nav 2-row layout, logo scaling fixes

src/pages/index.astro

@@ -23,6 +23,8 @@ import CrushBase from '../layouts/CrushBase.astro';
       <span class="nav-dot">•</span>
       <a href="/blog" class="nav-item">BLOG</a>
       <span class="nav-dot">•</span>
+      <a href="/music" class="nav-item">MUSIC</a>
+      <span class="nav-dot">•</span>
       <a href="https://pi.dangrubb.net/jellyfin" class="nav-item">MEDIA</a>
       <span class="nav-dot">•</span>
       <a href="https://pi.dangrubb.net/nextcloud" class="nav-item">STORAGE</a>
@@ -102,8 +104,9 @@ import CrushBase from '../layouts/CrushBase.astro';
   }
 
   .logo-img {
-    width: 160px;
-    height: 160px;
+    width: 12%;
+    max-width: 160px;
+    aspect-ratio: 1;
     object-fit: contain;
     filter: drop-shadow(0 3px 8px rgba(0, 102, 102, 0.3));
   }
@@ -144,17 +147,36 @@ import CrushBase from '../layouts/CrushBase.astro';
     opacity: 0.5;
   }
 
-  @media (max-width: 768px) {
-    .top-banner { padding: 12px 15px 8px; }
-    .logo-img { width: 60px; height: 60px; }
-    .nav-item { font-size: 15px; padding: 6px 12px; }
-    .bottom-nav { padding: 16px 15px 20px; }
-  }
-
   @media (max-width: 480px) {
     .brand { font-size: 2.5rem; }
-    .logo-img { width: 60px; height: 60px; }
-    .bottom-nav { padding: 12px 12px 16px; }
+    .top-banner {
+      flex: 1;
+      flex-shrink: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 12px 15px;
+    }
+    .logo-section {
+      aspect-ratio: 3 / 4;
+      flex: none;
+    }
+    .splatter-img {
+      object-fit: cover;
+    }
+    .logo-img { width: 36%; }
+    .nav-item { font-size: 16px; padding: 8px 14px; }
+    .bottom-nav {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      gap: 3px;
+      padding: 4px 12px;
+    }
     .nav-dot { display: none; }
   }
 </style>