52 ferdigstillings av design og responsiv webløsning

.gitignore

@@ -16,6 +16,7 @@ dist-ssr
 .vscode/*
 !.vscode/extensions.json
 .idea
+.claude/
 .DS_Store
 *.suo
 *.ntvs*

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,33 +165,89 @@
 }
 
 .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 {
   opacity: 0.5;
   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;
   }
-}
+
+  .song-section {
+    order: -1;
+  }
+
+  .sidebar ul {
+    max-height: 280px;
+    overflow-y: auto;
+  }
+}

src/components/SongCard.tsx

@@ -15,10 +15,28 @@ export function SongCard({ song }: SongCardProps) {
   return (
     <article>
       <h2>{song.title}</h2>
-      <p>Artist: {song.artist}</p>
-      <p>Album: {song.album}</p>
+
+      <div className="song-hero">
+        {albumImage && (
+          <div className="song-album-art">
+            <img src={albumImage} alt={`Albumomslag: ${song.album}`} />
+          </div>
+        )}
+
+        <div className="song-meta">
+          <p>
+            <span className="meta-label">Artist</span>
+            <span className="meta-value">{song.artist}</span>
+          </p>
+          <p>
+            <span className="meta-label">Album</span>
+            <span className="meta-value">{song.album}</span>
+          </p>
+        </div>
+      </div>
 
       <div className="song-lyrics-wrapper">
+        <h3 className="song-lyrics-heading">Tekst</h3>
         {isLoading ? (
           <p>Laster…</p>
         ) : error || data?.error ? (
@@ -27,13 +45,6 @@ export function SongCard({ song }: SongCardProps) {
           <LyricsDisplay lyrics={data.lyrics} />
         ) : null}
       </div>
-
-      {albumImage && (
-        <div className="song-album-art">
-          <img src={albumImage} alt={`Albumomslag: ${song.album}`} />
-        </div>
-      )}
-
     </article>
   )
 }

src/index.css

@@ -0,0 +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;
+}