From 1c4e08c3268f0a1a884ba253ff7edf70f994335b Mon Sep 17 00:00:00 2001 From: Tobias Hegge Date: Tue, 15 Sep 2026 11:59:23 +0200 Subject: [PATCH 1/3] made card text readable by making it white --- webdev-prosjekt1/src/components/TrackCard.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/webdev-prosjekt1/src/components/TrackCard.css b/webdev-prosjekt1/src/components/TrackCard.css index 9e6f94e..d8e6ac3 100644 --- a/webdev-prosjekt1/src/components/TrackCard.css +++ b/webdev-prosjekt1/src/components/TrackCard.css @@ -7,6 +7,7 @@ border-radius: 0.5rem; background-color: rgb(43, 43, 43); + color: #f8f0df; cursor: pointer; } @@ -46,13 +47,15 @@ .card-header { width: 100%; margin: 0; - + + color: #f8f0df; font-size: 1rem; } .artist-name { width: 100%; + color: #d9cdb8; font-size: 0.8rem; } @@ -61,3 +64,7 @@ align-items: center; justify-content: center; } + +.duration-display { + color: var(--primary_color); +} From da6e19f0531d456384d8fd21988007ee6da85224 Mon Sep 17 00:00:00 2001 From: Tobias Hegge Date: Tue, 15 Sep 2026 12:03:46 +0200 Subject: [PATCH 2/3] made all cards the same height no matter the length of the title --- webdev-prosjekt1/src/components/TrackCard.css | 16 ++++++++++++++-- webdev-prosjekt1/src/components/TrackCard.tsx | 2 +- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/webdev-prosjekt1/src/components/TrackCard.css b/webdev-prosjekt1/src/components/TrackCard.css index d8e6ac3..0bd622c 100644 --- a/webdev-prosjekt1/src/components/TrackCard.css +++ b/webdev-prosjekt1/src/components/TrackCard.css @@ -3,6 +3,7 @@ padding: 0.3rem; width: 100%; + height: 72px; border-radius: 0.5rem; @@ -23,7 +24,9 @@ } .card-image-wrapper { - max-width: 60px; + flex: 0 0 60px; + width: 60px; + height: 60px; border-radius: 0.5rem; overflow: hidden; } @@ -41,7 +44,8 @@ flex-direction: column; justify-content: center; - gap: 0.7rem; + min-width: 0; + gap: 0.35rem; } .card-header { @@ -50,10 +54,18 @@ color: #f8f0df; 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: #d9cdb8; font-size: 0.8rem; diff --git a/webdev-prosjekt1/src/components/TrackCard.tsx b/webdev-prosjekt1/src/components/TrackCard.tsx index 7cf0f22..d7a6d3c 100644 --- a/webdev-prosjekt1/src/components/TrackCard.tsx +++ b/webdev-prosjekt1/src/components/TrackCard.tsx @@ -30,7 +30,7 @@ export const TrackCard = ({ track, album, onClick }: TrackCardProps) => {
-

{track.name}

+

{track.name}

{artistNames}
From 188683bf5b3fb6c0e809b0feae0669d809c81c90 Mon Sep 17 00:00:00 2001 From: Tobias Hegge Date: Tue, 15 Sep 2026 12:10:11 +0200 Subject: [PATCH 3/3] moved all hard coded colors to variables-file --- webdev-prosjekt1/src/App.css | 9 +++---- .../src/components/AlbumDetailPage.css | 22 ++++++++--------- .../src/components/ArtistDetailPage.css | 22 ++++++++--------- webdev-prosjekt1/src/components/Button.css | 2 +- webdev-prosjekt1/src/components/Header.css | 2 +- webdev-prosjekt1/src/components/Searchbar.css | 8 +++---- .../src/components/SongDetailPage.css | 24 +++++++++---------- webdev-prosjekt1/src/components/TrackCard.css | 8 +++---- webdev-prosjekt1/src/variables.css | 19 +++++++++++++++ 9 files changed, 66 insertions(+), 50 deletions(-) diff --git a/webdev-prosjekt1/src/App.css b/webdev-prosjekt1/src/App.css index 7d977c5..63a8f47 100644 --- a/webdev-prosjekt1/src/App.css +++ b/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); } diff --git a/webdev-prosjekt1/src/components/AlbumDetailPage.css b/webdev-prosjekt1/src/components/AlbumDetailPage.css index 76dd114..6467406 100644 --- a/webdev-prosjekt1/src/components/AlbumDetailPage.css +++ b/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; } diff --git a/webdev-prosjekt1/src/components/ArtistDetailPage.css b/webdev-prosjekt1/src/components/ArtistDetailPage.css index 1bc8deb..3a2081e 100644 --- a/webdev-prosjekt1/src/components/ArtistDetailPage.css +++ b/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; } diff --git a/webdev-prosjekt1/src/components/Button.css b/webdev-prosjekt1/src/components/Button.css index 22ba9db..000bf8e 100644 --- a/webdev-prosjekt1/src/components/Button.css +++ b/webdev-prosjekt1/src/components/Button.css @@ -18,7 +18,7 @@ button { } button:hover { - background: #f7ca65; + background: var(--primary_color_hover); } button img { diff --git a/webdev-prosjekt1/src/components/Header.css b/webdev-prosjekt1/src/components/Header.css index f19f58f..4d88695 100644 --- a/webdev-prosjekt1/src/components/Header.css +++ b/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 { diff --git a/webdev-prosjekt1/src/components/Searchbar.css b/webdev-prosjekt1/src/components/Searchbar.css index 0aac8e5..70cf389 100644 --- a/webdev-prosjekt1/src/components/Searchbar.css +++ b/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 { diff --git a/webdev-prosjekt1/src/components/SongDetailPage.css b/webdev-prosjekt1/src/components/SongDetailPage.css index a5ba47d..1900baa 100644 --- a/webdev-prosjekt1/src/components/SongDetailPage.css +++ b/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,12 +77,12 @@ .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 { @@ -90,12 +90,12 @@ 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; } diff --git a/webdev-prosjekt1/src/components/TrackCard.css b/webdev-prosjekt1/src/components/TrackCard.css index 0bd622c..74c9d26 100644 --- a/webdev-prosjekt1/src/components/TrackCard.css +++ b/webdev-prosjekt1/src/components/TrackCard.css @@ -7,8 +7,8 @@ border-radius: 0.5rem; - background-color: rgb(43, 43, 43); - color: #f8f0df; + background-color: var(--surface_background); + color: var(--text_primary); cursor: pointer; } @@ -52,7 +52,7 @@ width: 100%; margin: 0; - color: #f8f0df; + color: var(--text_primary); font-size: 1rem; line-height: 1.2; display: -webkit-box; @@ -67,7 +67,7 @@ text-overflow: ellipsis; white-space: nowrap; - color: #d9cdb8; + color: var(--text_secondary); font-size: 0.8rem; } diff --git a/webdev-prosjekt1/src/variables.css b/webdev-prosjekt1/src/variables.css index 1071547..fb24ff5 100644 --- a/webdev-prosjekt1/src/variables.css +++ b/webdev-prosjekt1/src/variables.css @@ -1,7 +1,26 @@ :root { --font_family: sans-serif; --primary_color: #d4af37; + --primary_color_hover: #f7ca65; --primary_background_color: #11100f; + --page_background_gradient: radial-gradient(circle at 78% 42%, #43331e 0, #1c1814 28%, #11100f 66%); + --detail_background_gradient: radial-gradient(circle at 26% 44%, #43331e 0, #1c1814 31%, #11100f 70%); + --surface_background: #2b2b2b; + --text_primary: #f8f0df; + --text_secondary: #d9cdb8; + --text_muted: #a79a86; + --text_subtle: #847b6c; + --border_color: #716044; + --border_gold: rgba(212, 175, 55, 0.42); + --border_gold_subtle: rgba(212, 175, 55, 0.32); + --border_gold_faint: rgba(212, 175, 55, 0.22); + --border_gold_inner: rgba(212, 175, 55, 0.2); + --surface_dark_transparent: rgba(17, 16, 15, 0.72); + --shadow_gold: rgba(212, 175, 55, 0.08); + --shadow_black: rgba(0, 0, 0, 0.36); + --shadow_hero: rgba(0, 0, 0, 0.45); + --hero_glow: rgba(226, 157, 38, 0.13); + --search_background: rgba(20, 18, 15, 0.8); --box_border_radius: 4px; --margin: 0; } \ No newline at end of file