30 update cards

webdev-prosjekt1/src/App.css

@@ -10,10 +10,7 @@ body {
 
 .app-shell {
 	min-height: 100vh;
-	background: radial-gradient(circle at 78% 42%,
-			#43331e 0,
-			#1c1814 28%,
-			#11100f 66%);
+	background: var(--page_background_gradient);
 	overflow: hidden;
 }
 
@@ -93,7 +90,7 @@ body {
 
 	object-fit: contain;
 
-	filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.45));
+	filter: drop-shadow(0 20px 25px var(--shadow_hero));
 }
 
 .art-glow {
@@ -104,7 +101,7 @@ body {
 
 	border-radius: 50%;
 
-	background: rgba(226, 157, 38, 0.13);
+	background: var(--hero_glow);
 
 	filter: blur(45px);
 }

webdev-prosjekt1/src/components/AlbumDetailPage.css

@@ -1,8 +1,8 @@
 .album-detail-page {
 	min-height: 100vh;
 	padding-bottom: 80px;
-	color: #f8f0df;
-	background: radial-gradient(circle at 26% 44%, #43331e 0, #1c1814 31%, #11100f 70%);
+	color: var(--text_primary);
+	background: var(--detail_background_gradient);
 }
 
 .album-detail-page .detail-content {
@@ -22,16 +22,16 @@
 	width: 100%;
 	margin: 0;
 	aspect-ratio: 1;
-	border: 1px solid rgba(212, 175, 55, 0.42);
-	background: rgba(17, 16, 15, 0.72);
-	box-shadow: 18px 22px 0 rgba(212, 175, 55, 0.08), 0 24px 50px rgba(0, 0, 0, 0.36);
+	border: 1px solid var(--border_gold);
+	background: var(--surface_dark_transparent);
+	box-shadow: 18px 22px 0 var(--shadow_gold), 0 24px 50px var(--shadow_black);
 }
 
 .album-detail-page .detail-art::after {
 	content: '';
 	position: absolute;
 	inset: 13px;
-	border: 1px solid rgba(212, 175, 55, 0.2);
+	border: 1px solid var(--border_gold_inner);
 }
 
 .album-detail-page .detail-art img {
@@ -77,12 +77,12 @@
 .album-detail-page .detail-subtitle {
 	margin: 22px 0 0;
 	font-size: clamp(1.05rem, 2vw, 1.35rem);
-	color: #d9cdb8;
+	color: var(--text_secondary);
 }
 
 .album-detail-page .detail-meta {
 	margin: 12px 0 0;
-	color: #a79a86;
+	color: var(--text_muted);
 	text-transform: capitalize;
 }
 
@@ -91,14 +91,14 @@
 	height: 1px;
 	margin: 36px 0 18px;
 	border: 0;
-	background: rgba(212, 175, 55, 0.32);
+	background: var(--border_gold_subtle);
 }
 
 .album-tracks {
 	max-width: 1000px;
 	margin: 30px auto 0;
 	padding: 56px 48px 0;
-	border-top: 1px solid rgba(212, 175, 55, 0.32);
+	border-top: 1px solid var(--border_gold_subtle);
 }
 
 .album-tracks h2 {
@@ -110,7 +110,7 @@
 .album-tracks p {
 	max-width: 660px;
 	margin: 28px 0 0;
-	color: #d9cdb8;
+	color: var(--text_secondary);
 	font-size: 1.05rem;
 	line-height: 1.9;
 }

webdev-prosjekt1/src/components/ArtistDetailPage.css

@@ -1,8 +1,8 @@
 .artist-detail-page {
 	min-height: 100vh;
 	padding-bottom: 80px;
-	color: #f8f0df;
-	background: radial-gradient(circle at 26% 44%, #43331e 0, #1c1814 31%, #11100f 70%);
+	color: var(--text_primary);
+	background: var(--detail_background_gradient);
 }
 
 .artist-detail-page .detail-content {
@@ -22,18 +22,18 @@
 	width: 100%;
 	margin: 0;
 	aspect-ratio: 1;
-	border: 1px solid rgba(212, 175, 55, 0.42);
+	border: 1px solid var(--border_gold);
 	border-radius: 50%;
 	overflow: hidden;
-	background: rgba(17, 16, 15, 0.72);
-	box-shadow: 18px 22px 0 rgba(212, 175, 55, 0.08), 0 24px 50px rgba(0, 0, 0, 0.36);
+	background: var(--surface_dark_transparent);
+	box-shadow: 18px 22px 0 var(--shadow_gold), 0 24px 50px var(--shadow_black);
 }
 
 .artist-detail-page .detail-art::after {
 	content: '';
 	position: absolute;
 	inset: 13px;
-	border: 1px solid rgba(212, 175, 55, 0.2);
+	border: 1px solid var(--border_gold_inner);
 	border-radius: 50%;
 }
 
@@ -80,12 +80,12 @@
 .artist-detail-page .detail-subtitle {
 	margin: 22px 0 0;
 	font-size: clamp(1.05rem, 2vw, 1.35rem);
-	color: #d9cdb8;
+	color: var(--text_secondary);
 }
 
 .artist-detail-page .detail-meta {
 	margin: 12px 0 0;
-	color: #a79a86;
+	color: var(--text_muted);
 	text-transform: capitalize;
 }
 
@@ -94,14 +94,14 @@
 	height: 1px;
 	margin: 36px 0 18px;
 	border: 0;
-	background: rgba(212, 175, 55, 0.32);
+	background: var(--border_gold_subtle);
 }
 
 .artist-content {
 	max-width: 1000px;
 	margin: 30px auto 0;
 	padding: 56px 48px 0;
-	border-top: 1px solid rgba(212, 175, 55, 0.32);
+	border-top: 1px solid var(--border_gold_subtle);
 }
 
 .artist-content h2 {
@@ -113,7 +113,7 @@
 .artist-content p {
 	max-width: 660px;
 	margin: 28px 0 0;
-	color: #d9cdb8;
+	color: var(--text_secondary);
 	font-size: 1.05rem;
 	line-height: 1.9;
 }

webdev-prosjekt1/src/components/Button.css

@@ -18,7 +18,7 @@ button {
 }
 
 button:hover {
-	background: #f7ca65;
+	background: var(--primary_color_hover);
 }
 
 button img {

webdev-prosjekt1/src/components/Header.css

@@ -2,7 +2,7 @@
 	max-width: 1240px;
 	margin: 0 auto;
 	padding: 18px 48px 14px;
-	border-bottom: 2px solid rgba(212, 175, 55, 0.22);
+	border-bottom: 2px solid var(--border_gold_faint);
 }
 
 .app-title {

webdev-prosjekt1/src/components/Searchbar.css

@@ -8,10 +8,10 @@
 
 	padding: 0 16px;
 
-	border: 1px solid #716044;
+	border: 1px solid var(--border_color);
     border-radius: var(--box_border_radius);
 
-	background: rgba(20, 18, 15, 0.8);
+	background: var(--search_background);
 }
 
 .search-icon {
@@ -31,14 +31,14 @@
 	border: 0;
 	outline: 0;
 
-	color: #f8f0df;
+	color: var(--text_primary);
 	background: transparent;
 
 	font: inherit;
 }
 
 .searchbar input::placeholder {
-	color: #847b6c;
+	color: var(--text_subtle);
 }
 
 .searchbar:focus-within {

webdev-prosjekt1/src/components/SongDetailPage.css

@@ -1,8 +1,8 @@
 .song-detail-page {
 	min-height: 100vh;
 	padding-bottom: 80px;
-	color: #f8f0df;
-	background: radial-gradient(circle at 26% 44%, #43331e 0, #1c1814 31%, #11100f 70%);
+	color: var(--text_primary);
+	background: var(--detail_background_gradient);
 }
 
 .detail-content {
@@ -22,16 +22,16 @@
 	width: 100%;
 	margin: 0;
 	aspect-ratio: 1;
-	border: 1px solid rgba(212, 175, 55, 0.42);
-	background: rgba(17, 16, 15, 0.72);
-	box-shadow: 18px 22px 0 rgba(212, 175, 55, 0.08), 0 24px 50px rgba(0, 0, 0, 0.36);
+	border: 1px solid var(--border_gold);
+	background: var(--surface_dark_transparent);
+	box-shadow: 18px 22px 0 var(--shadow_gold), 0 24px 50px var(--shadow_black);
 }
 
 .detail-art::after {
 	content: '';
 	position: absolute;
 	inset: 13px;
-	border: 1px solid rgba(212, 175, 55, 0.2);
+	border: 1px solid var(--border_gold_inner);
 }
 
 .detail-art img {
@@ -77,25 +77,25 @@
 .detail-subtitle {
 	margin: 22px 0 0;
 	font-size: clamp(1.05rem, 2vw, 1.35rem);
-	color: #d9cdb8;
+	color: var(--text_secondary);
 }
 
 .detail-meta {
 	margin: 12px 0 0;
-	color: #a79a86;
+	color: var(--text_muted);
 }
 
 .detail-divider {
 	width: 100%;
 	height: 1px;
 	margin: 36px 0 18px;
 	border: 0;
-	background: rgba(212, 175, 55, 0.32);
+	background: var(--border_gold_subtle);
 }
 
 .detail-coming-soon {
 	margin: 0;
-	color: #847b6c;
+	color: var(--text_subtle);
 	font-size: 0.95rem;
 }
 
@@ -106,7 +106,7 @@
 	max-width: 1000px;
 	margin: 30px auto 0;
 	padding: 56px 48px 0;
-	border-top: 1px solid rgba(212, 175, 55, 0.32);
+	border-top: 1px solid var(--border_gold_subtle);
 }
 
 .lyrics-heading h2 {
@@ -116,7 +116,7 @@
 }
 
 .lyrics-copy {
-	color: #d9cdb8;
+	color: var(--text_secondary);
 	font-size: 1.05rem;
 	line-height: 1.9;
 }

webdev-prosjekt1/src/components/TrackCard.css

@@ -3,10 +3,12 @@
     padding: 0.3rem;
 
     width: 100%;
+    height: 72px;
 
     border-radius: 0.5rem;
 
-    background-color: rgb(43, 43, 43);
+    background-color: var(--surface_background);
+    color: var(--text_primary);
     cursor: pointer;
 }
 
@@ -22,7 +24,9 @@
 }
 
 .card-image-wrapper {
-    max-width: 60px;
+    flex: 0 0 60px;
+    width: 60px;
+    height: 60px;
     border-radius: 0.5rem;
     overflow: hidden;
 }
@@ -40,19 +44,30 @@
     flex-direction: column;
     justify-content: center;
 
-    gap: 0.7rem;
+    min-width: 0;
+    gap: 0.35rem;
 }
 
 .card-header {
     width: 100%;
     margin: 0;
-
+
+    color: var(--text_primary);
     font-size: 1rem;
+    line-height: 1.2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
 }
 
 .artist-name {
     width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
+    color: var(--text_secondary);
     font-size: 0.8rem;
 }
 
@@ -61,3 +76,7 @@
     align-items: center;
     justify-content: center;
 }
+
+.duration-display {
+    color: var(--primary_color);
+}

webdev-prosjekt1/src/components/TrackCard.tsx

@@ -30,7 +30,7 @@ export const TrackCard = ({ track, album, onClick }: TrackCardProps) => {
 
             <div className='card-info-container'>
                 <div className='title-and-artist'>
-                    <h3 className='card-header'>{track.name}</h3>
+                    <h3 className='card-header' title={track.name}>{track.name}</h3>
                     <span className='artist-name'>{artistNames}</span>
                 </div>
                 <div className='duration-display-container'>