Add music platform with DGDN album player

- Create /music landing page with artist grid - Add /music/Darnea artist page with album listing - Build /music/Darnea/DGDN album player with clickable tracklist - Auto-play next track on completion - Dangrubb-branded styling with cyan accent colors - FLAC player pulls from /src/audio/DGDN - Move landing page links to bottom with yellow announcement box
2026-02-28 09:31:48 -05:00
parent 025fe8a80b
commit 9afda9a01a
41 changed files with 524 additions and 2 deletions
--- a/music/music.css
+++ b/music/music.css
@ -0,0 +1,152 @@
+/* Music Platform Styling */
+
+.music-container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+
+.music-header {
+  text-align: center;
+  margin-bottom: 50px;
+  border-bottom: 2px solid rgba(107, 225, 233, 0.3);
+  padding-bottom: 20px;
+}
+
+.music-header h1 {
+  margin: 0;
+  font-size: 2rem;
+  color: #9d9aa4;
+  font-weight: bold;
+}
+
+.music-header h1 a {
+  color: #6be1e9;
+  text-decoration: none;
+}
+
+.music-header h1 a:hover {
+  opacity: 0.8;
+}
+
+/* Artists Grid */
+.artists-grid,
+.albums-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 30px;
+  margin: 40px 0;
+}
+
+.artist-card,
+.album-card {
+  text-align: center;
+  padding: 20px;
+  background: rgba(157, 154, 164, 0.05);
+  border: 1px solid rgba(107, 225, 233, 0.2);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.artist-card:hover,
+.album-card:hover {
+  background: rgba(107, 225, 233, 0.1);
+  border-color: rgba(107, 225, 233, 0.5);
+  transform: translateY(-4px);
+}
+
+.artist-cover,
+.album-cover {
+  font-size: 4rem;
+  margin-bottom: 15px;
+}
+
+.artist-card h2,
+.album-card h3 {
+  margin: 10px 0;
+  font-size: 1.3rem;
+  color: #9d9aa4;
+}
+
+.artist-card h2 a,
+.album-card h3 a {
+  color: #6be1e9;
+  text-decoration: none;
+}
+
+.artist-card h2 a:hover,
+.album-card h3 a:hover {
+  opacity: 0.8;
+}
+
+.artist-meta,
+.album-meta {
+  color: #6be1e9;
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+/* Artist Detail */
+.artist-detail {
+  text-align: center;
+  margin: 40px 0;
+  padding: 40px 20px;
+  background: rgba(107, 225, 233, 0.05);
+  border-radius: 8px;
+}
+
+.artist-banner {
+  font-size: 5rem;
+  margin-bottom: 20px;
+}
+
+.artist-detail h2 {
+  margin: 0;
+  font-size: 2.5rem;
+  color: #9d9aa4;
+}
+
+/* Footer */
+.music-footer {
+  text-align: center;
+  margin-top: 60px;
+  padding-top: 20px;
+  border-top: 2px solid rgba(107, 225, 233, 0.3);
+}
+
+.music-footer p {
+  margin: 0;
+}
+
+.music-footer a {
+  color: #6be1e9;
+  text-decoration: none;
+}
+
+.music-footer a:hover {
+  opacity: 0.8;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .music-container {
+    padding: 20px 10px;
+  }
+
+  .music-header h1 {
+    font-size: 1.5rem;
+  }
+
+  .artists-grid,
+  .albums-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .artist-banner {
+    font-size: 3rem;
+  }
+
+  .artist-detail h2 {
+    font-size: 1.8rem;
+  }
+}