4 set up general site structure

webdev-prosjekt1/src/App.css

@@ -1,184 +1,148 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
+:root {
+	font-family: 'Trebuchet MS', sans-serif;
+	color: #f8f0df;
+	background: #11100f;
 }
 
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
+* { box-sizing: border-box; }
+body { min-width: 320px; }
 
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
+.app-shell {
+	min-height: 100vh;
+	background: radial-gradient(circle at 78% 42%, #43331e 0, #1c1814 28%, #11100f 66%);
+	overflow: hidden;
 }
 
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
+.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);
 }
 
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
+.app-title {
+	color: rgb(212, 175, 55);
+	text-decoration: none;
+	display: inline-flex;
+	flex-direction: column;
+	align-items: stretch;
 }
 
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
+.app-title-text {
+	font-size: 56px;
+	margin: 0;
 }
 
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
+.header-note {
+	font-size: 15px;
+	margin: 0;
+	font-weight: 400;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	white-space: nowrap;
+	text-align: center;
+}
 
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
+.search-section {
+	position: relative;
+	max-width: 1240px;
+	margin: 0 auto;
+	display: grid;
+	grid-template-columns: 0.9fr 1.1fr;
+	padding: 30px 48px 70px;
+}
 
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
+.search-section {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	width: 100%;
 }
 
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
+.hero-art {
+	display: flex;
+	justify-content: flex-end;
 }
 
-.ticks {
-  position: relative;
-  width: 100%;
+.search-controls {
+	display: flex; 
+	gap: 10px; 
+	max-width: 480px; 
+}
 
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
+.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; 
+}
 
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
+.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); 
+}

webdev-prosjekt1/src/App.tsx

@@ -1,11 +1,35 @@
-import { useState } from 'react'
-import './App.css'
+import './App.css';
+import { Button } from './components/Button';
+import { Searchbar } from './components/Searchbar';
+import filterIcon from './assets/filter.png';
+import musicWizImage from './assets/musicwiz.png';
 
 function App() {
 	return (
 		<>
+			<div 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>
+					</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'>
+						<div className='art-glow' />
+						<img src={musicWizImage} alt='A musical wizard' />
+					</div>
+				</main>
+			</div>
 		</>
 	)
 }
 
-export default App
+export default App;

webdev-prosjekt1/src/components/Button.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+type ButtonProps = {
+	content: ReactNode;
+}
+
+export const Button = ({ content }: ButtonProps) => {
+	return (
+		<button>
+			{content}
+		</button>
+	)
+}

webdev-prosjekt1/src/components/Searchbar.tsx

@@ -0,0 +1,8 @@
+export const Searchbar = () => {
+	return (
+		<label className='searchbar'>
+			<span className='search-icon' aria-hidden='true'>⌕</span>
+			<input type='search' placeholder='Search artists, albums or songs' aria-label='Search music' />
+		</label>
+	)
+}