8 clean up app page code

webdev-prosjekt1/src/App.css

@@ -1,148 +1,173 @@
 :root {
 	font-family: 'Trebuchet MS', sans-serif;
-	color: #f8f0df;
+	color: #d4af37;
 	background: #11100f;
 }
 
-* { box-sizing: border-box; }
-body { min-width: 320px; }
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	min-width: 320px;
+}
 
 .app-shell {
 	min-height: 100vh;
-	background: radial-gradient(circle at 78% 42%, #43331e 0, #1c1814 28%, #11100f 66%);
+	background: radial-gradient(circle at 78% 42%,
+			#43331e 0,
+			#1c1814 28%,
+			#11100f 66%);
 	overflow: hidden;
 }
 
 .main-header {
 	max-width: 1240px;
 	margin: 0 auto;
-	padding: 28px 48px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	border-bottom: 1px solid rgba(212, 175, 55, 0.22);
+	padding: 18px 48px 14px;
+	border-bottom: 2px solid rgba(212, 175, 55, 0.22);
 }
 
 .app-title {
 	color: rgb(212, 175, 55);
 	text-decoration: none;
 	display: inline-flex;
-	flex-direction: column;
 	align-items: stretch;
+	position: relative;
+	padding-left: 70px;
+}
+
+.app-title-text-wrapper {
+	display: flex;
+	flex-direction: column;
+}
+
+.app-logo-wrapper {
+	position: absolute;
+	left: 0;
+	top: 0;
+
+	height: 100%;
+	margin: 0;
+}
+
+.app-logo {
+	display: block;
+
+	height: 100%;
+	width: auto;
+
+	object-fit: contain;
 }
 
 .app-title-text {
-	font-size: 56px;
+	font-size: 48px;
+	line-height: 0.95;
 	margin: 0;
 }
 
 .header-note {
-	font-size: 15px;
-	margin: 0;
+	font-size: 13px;
+	margin: 4px 0 0;
+
 	font-weight: 400;
 	letter-spacing: 0.08em;
+
 	text-transform: uppercase;
 	white-space: nowrap;
 	text-align: center;
 }
 
 .search-section {
-	position: relative;
-	max-width: 1240px;
-	margin: 0 auto;
-	display: grid;
-	grid-template-columns: 0.9fr 1.1fr;
-	padding: 30px 48px 70px;
+	display: flex;
+	gap: 10px;
+
+	width: calc(100% - 96px);
+	max-width: 1400px;
+
+	margin: 14px auto 0;
+	margin-left: 64px;
+	margin-right: 64px;
 }
 
-.search-section {
+.hero-section {
+	max-width: 1400px;
+	width: calc(100% - 96px);
+
+	margin: 0 auto;
+	padding: 18px 0 50px;
+
 	display: flex;
 	justify-content: flex-end;
-	align-items: center;
-	width: 100%;
 }
 
 .hero-art {
-	display: flex;
-	justify-content: flex-end;
+	position: relative;
+
+	margin: 0;
+
+	width: 520px;
+	min-height: 460px;
+
+	display: grid;
+	place-items: center;
 }
 
-.search-controls {
-	display: flex; 
-	gap: 10px; 
-	max-width: 480px; 
-}
-
-.searchbar { 
-	flex: 1; 
-	display: flex; 
-	align-items: center; 
-	min-width: 0; 
-	padding: 0 16px; 
-	border: 1px solid #716044; 
-	border-radius: 4px; 
-	background: rgba(20, 18, 15, 0.8); 
-}
-.search-icon { 
-	margin-right: 10px; 
-	color: #eab342; 
-	font-size: 1.6rem; 
-	line-height: 1; 
-}
-.searchbar input { 
-	width: 100%; 
-	padding: 15px 0; 
-	border: 0; 
-	outline: 0; 
-	color: #f8f0df; 
-	background: transparent; 
-	font: inherit; 
-}
-.searchbar input::placeholder { 
-	color: #847b6c; 
-}
-.search-controls button { 
-	display: flex; 
-	align-items: center; 
-	gap: 8px; 
-	padding: 0 18px; 
-	border: 1px solid #eab342; 
-	border-radius: 4px; 
-	color: #17130d; 
-	background: #eab342; 
-	font: inherit; 
-	font-weight: 700; 
-	cursor: pointer; 
-}
-.search-controls button:hover { 
-	background: #f7ca65; 
-}
-.search-controls button img { 
-	width: 17px; 
-	height: 17px; 
-	object-fit: contain; 
-}
-
-.hero-art { 
-	position: relative; 
-	align-self: stretch; 
-	min-height: 600px; 
-	display: grid; 
-	place-items: center; 
-}
-.hero-art img { 
-	position: relative; 
-	z-index: 1; 
-	width: min(100%, 680px); 
-	max-height: 760px; 
-	object-fit: contain; 
-	filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.45)); 
-}
-.art-glow { 
-	position: absolute; 
-	width: 62%; 
-	aspect-ratio: 1; 
-	border-radius: 50%; 
-	background: rgba(226, 157, 38, 0.13); 
-	filter: blur(45px); 
-}
+.hero-art img {
+	position: relative;
+	z-index: 1;
+
+	width: 100%;
+	max-width: 480px;
+	height: auto;
+
+	object-fit: contain;
+
+	filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.45));
+}
+
+.art-glow {
+	position: absolute;
+
+	width: 300px;
+	aspect-ratio: 1;
+
+	border-radius: 50%;
+
+	background: rgba(226, 157, 38, 0.13);
+
+	filter: blur(45px);
+}
+
+
+@media (max-width: 700px) {
+	.main-header {
+		padding: 16px 24px 12px;
+	}
+
+	.app-title-text {
+		font-size: 40px;
+	}
+
+	.search-controls {
+		width: calc(100% - 48px);
+	}
+
+	.hero-section {
+		width: calc(100% - 48px);
+	}
+
+	.hero-art {
+		width: 320px;
+		min-height: 380px;
+	}
+
+	.hero-art img {
+		max-width: 290px;
+	}
+
+	.art-glow {
+		width: 230px;
+	}
+}

webdev-prosjekt1/src/App.tsx

@@ -4,31 +4,41 @@ import { Searchbar } from './components/Searchbar';
 import filterIcon from './assets/filter.png';
 import musicWizImage from './assets/musicwiz.png';
 import { searchTrack, searchAlbum, searchArtist } from "./api/spotify"
+import logoImage from './assets/music-wiz-logo.png';
 
 function App() {
 	return (
 		<>
-			<div className='app-shell'>
+			<main className='app-shell'>
 				<header className='main-header'>
+
 					<a className='app-title' href='/'>
-						<h1 className='app-title-text'>MUSIC WIZ</h1>
-						<h3 className='header-note'>Your personal music magician</h3>
+						<figure className='app-logo-wrapper'>
+							<img
+								className='app-logo'
+								src={logoImage}
+								alt=''
+							/>
+						</figure>
+						<span className='app-title-text-wrapper'>
+							<h1 className='app-title-text'>MUSIC WIZ</h1>
+							<h3 className='header-note'>Your personal music magician</h3>
+						</span>
 					</a>
-					<div className='hero-copy'>
-						<div className='search-controls'>
-							<Searchbar />
-							<Button content={<><img src={filterIcon} alt='' /> <span>Filter</span></>} />
-						</div>
-					</div>
 				</header>
 
-				<main className='search-section'>
-					<div className='hero-art'>
+				<section className='search-section'>
+					<Searchbar />
+					<Button content={<><img src={filterIcon} alt='' /> <span>Filter</span></>} />
+				</section>
+
+				<section className='hero-section'>
+					<figure className='hero-art'>
 						<div className='art-glow' />
 						<img src={musicWizImage} alt='A musical wizard' />
-					</div>
-				</main>
-			</div>
+					</figure>
+				</section>
+			</main>
 		</>
 	)
 }

webdev-prosjekt1/src/components/Button.css

@@ -0,0 +1,29 @@
+button {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+
+	padding: 0 18px;
+
+	border: 1px solid #eab342;
+	border-radius: 4px;
+
+	color: #17130d;
+	background: #eab342;
+
+	font: inherit;
+	font-weight: 700;
+
+	cursor: pointer;
+}
+
+button:hover {
+	background: #f7ca65;
+}
+
+button img {
+	width: 17px;
+	height: 17px;
+
+	object-fit: contain;
+}

webdev-prosjekt1/src/components/Button.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import './Button.css';
 
 type ButtonProps = {
 	content: ReactNode;