From 0825568b92a5de6229128d78dfefef88c9b2e950 Mon Sep 17 00:00:00 2001 From: ellawaal Date: Fri, 18 Sep 2026 15:14:37 +0200 Subject: [PATCH 1/3] =?UTF-8?q?Lagt=20til=20base=20sans-serif=20font=20for?= =?UTF-8?q?=20br=C3=B8dtekst=20og=20endret=20skriftst=C3=B8rrelse?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/index.css b/src/index.css index e69de29..4950170 100644 --- a/src/index.css +++ b/src/index.css @@ -0,0 +1,4 @@ +body { + font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; + font-size: 15px; +} From 09048e22b63c9b73fdde2f88efd2582e1d0e98d7 Mon Sep 17 00:00:00 2001 From: ellawaal Date: Fri, 18 Sep 2026 15:48:01 +0200 Subject: [PATCH 2/3] =?UTF-8?q?Ferdigstilt=20design=20og=20fikset=20respon?= =?UTF-8?q?siv=20rekkef=C3=B8lge?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Modernisert sidebar (kortstil, piller), sentrert og balansert layout, redesignet sangvisning med samlet kort, mindre albumbilde og tydelig fokus på sangteksten. Fikset rekkefølgen på mobil slik at sangvisningen vises før sanglisten, med scrollbar sangliste. --- src/App.css | 205 +++++++++++++++++++++++++++++------- src/components/SongCard.tsx | 29 +++-- src/index.css | 7 ++ 3 files changed, 196 insertions(+), 45 deletions(-) diff --git a/src/App.css b/src/App.css index a9848f4..f3f9b11 100644 --- a/src/App.css +++ b/src/App.css @@ -1,96 +1,162 @@ +:root { + --color-primary: #c2185b; + --color-primary-light: #fce4ec; + --color-primary-hover: #f48fb1; + --color-surface: #ffffff; + --color-border: #f3d4e0; + --radius: 10px; +} + .app { - width: min(1200px, 100%); + width: min(1100px, 92%); margin: 0 auto; padding: 24px; box-sizing: border-box; } .app-header { - background-color: #fce4ec; - padding: 24px; + background-color: var(--color-primary-light); + width: 100vw; + margin-left: calc(-50vw + 50%); + margin-top: -24px; + margin-bottom: 32px; + padding: 28px 24px; text-align: center; - margin: -24px -24px 24px -24px; } .app-header h1 { - color: #c2185b; + color: var(--color-primary); font-family: Georgia, serif; font-size: 32px; + letter-spacing: 0.5px; margin: 0; } .app-content { display: grid; - grid-template-columns: 280px minmax(0, 1fr); - gap: 32px; + grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1fr); + gap: 24px; } .sidebar { min-width: 0; + display: flex; + flex-direction: column; + gap: 12px; } .sidebar > section { - margin-bottom: 24px; + background-color: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); + padding: 12px; + margin-bottom: 0; +} + +.sidebar > section > h2 { + font-size: 13px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.4px; + color: var(--color-primary); + margin: 0 0 8px; } .song-section { min-width: 0; + background-color: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + padding: 20px 24px; } .song-controls { display: flex; + justify-content: space-between; + align-items: center; gap: 12px; - margin-bottom: 24px; + margin-bottom: 20px; +} + +.sidebar label { + display: block; + font-size: 12px; + font-weight: 600; + color: #767676; + margin-bottom: 4px; } .sidebar button, .sidebar select { - background-color: #fce4ec; + background-color: var(--color-primary-light); width: 100%; - padding: 8px 12px; - border: none; + padding: 6px 14px; + border: 1px solid var(--color-border); + border-radius: 999px; cursor: pointer; - transition: background-color 0.2s; + transition: + background-color 0.15s ease, + transform 0.1s ease; display: inline-flex; align-items: center; + font: inherit; + font-size: 13px; } .sidebar button:hover { - background-color: #f48fb1; + background-color: var(--color-primary-hover); } .sidebar button:active { - background-color: #f48fb1; + background-color: var(--color-primary-hover); + transform: scale(0.98); } .sidebar button.active { - background-color: #f48fb1; + background-color: var(--color-primary); + color: #fff; + font-weight: 600; } .sidebar ul { list-style: none; padding: 0; + margin: 0; } .sidebar li { - margin-bottom: 8px; -} - -.sidebar > section > div { - margin-bottom: 16px; + margin-bottom: 4px; } -.song-controls { - align-items: center; +.sidebar > section > div + div { + margin-top: 8px; } .song-controls button { - padding: 8px 12px; border: none; cursor: pointer; - transition: background-color 0.2s; + transition: + background-color 0.15s ease, + transform 0.1s ease; display: inline-flex; align-items: center; + font: inherit; +} + +.song-controls > button { + width: 40px; + height: 40px; + justify-content: center; + padding: 0; + border-radius: 999px; + background-color: var(--color-primary-light); + font-size: 18px; +} + +.song-controls > button:hover { + background-color: var(--color-primary-hover); } .song-controls nav { @@ -99,16 +165,18 @@ } .song-controls nav button { - background-color: #e0e0e0; - padding: 8px 16px; + background-color: #f0f0f0; + padding: 8px 18px; + border-radius: 999px; } .song-controls nav button:hover { - background-color: #b3b3b3; + background-color: #dcdcdc; } .song-controls nav button:active { - background-color: #b3b3b3; + background-color: #cfcfcf; + transform: scale(0.98); } .song-controls nav button:disabled { @@ -116,16 +184,70 @@ cursor: not-allowed; } +.app button:focus-visible, +.app select:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +.song-hero { + display: flex; + gap: 16px; + align-items: flex-start; + padding-bottom: 16px; + margin-bottom: 12px; + border-bottom: 1px solid var(--color-border); +} + +.song-meta { + display: flex; + flex-direction: column; + gap: 10px; + padding-top: 4px; +} + +.song-meta p { + margin: 0; + display: flex; + flex-direction: column; + gap: 2px; +} + +.meta-label { + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.4px; + color: #9a9a9a; +} + +.meta-value { + font-size: 15px; + font-weight: 600; + color: #222; +} + +.song-lyrics-heading { + font-size: 13px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.4px; + color: var(--color-primary); + margin: 0 0 12px; +} + .song-lyrics-wrapper { - margin-top: 16px; + margin-top: 12px; } .song-lyrics { margin: 0; + font-size: 14px; + line-height: 1.5; } .song-lyrics-stanza { - margin: 0 0 1.5em; + margin: 0 0 1em; } .song-lyrics-stanza:last-child { @@ -137,14 +259,16 @@ } .song-album-art { - margin-top: 24px; + flex-shrink: 0; } .song-album-art img { display: block; - width: min(100%, 320px); - height: auto; - border-radius: 4px; + width: 120px; + height: 120px; + object-fit: cover; + border-radius: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } @media (max-width: 768px) { @@ -155,4 +279,13 @@ .app-content { grid-template-columns: 1fr; } -} \ No newline at end of file + + .song-section { + order: -1; + } + + .sidebar ul { + max-height: 280px; + overflow-y: auto; + } +} diff --git a/src/components/SongCard.tsx b/src/components/SongCard.tsx index a3797d5..95cc7a8 100644 --- a/src/components/SongCard.tsx +++ b/src/components/SongCard.tsx @@ -15,10 +15,28 @@ export function SongCard({ song }: SongCardProps) { return (

{song.title}

-

Artist: {song.artist}

-

Album: {song.album}

+ +
+ {albumImage && ( +
+ {`Albumomslag: +
+ )} + +
+

+ Artist + {song.artist} +

+

+ Album + {song.album} +

+
+
+

Tekst

{isLoading ? (

Laster…

) : error || data?.error ? ( @@ -27,13 +45,6 @@ export function SongCard({ song }: SongCardProps) { ) : null}
- - {albumImage && ( -
- {`Albumomslag: -
- )} -
) } \ No newline at end of file diff --git a/src/index.css b/src/index.css index 4950170..068903d 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,11 @@ +html { + overflow-x: hidden; +} + body { + margin: 0; + overflow-x: hidden; + background-color: #fdf5f8; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; } From b7fb3fe1a4334522c7839ba68fa6f1d7e141e074 Mon Sep 17 00:00:00 2001 From: ellawaal Date: Fri, 18 Sep 2026 15:49:14 +0200 Subject: [PATCH 3/3] Lagt til .claude/ i gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index a547bf3..1cde8bc 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ dist-ssr .vscode/* !.vscode/extensions.json .idea +.claude/ .DS_Store *.suo *.ntvs*