diff --git a/webdev-prosjekt1/src/App.css b/webdev-prosjekt1/src/App.css
index 7bb7cc9..bc61640 100644
--- a/webdev-prosjekt1/src/App.css
+++ b/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);
-}
\ No newline at end of file
+.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;
+ }
+}
diff --git a/webdev-prosjekt1/src/App.tsx b/webdev-prosjekt1/src/App.tsx
index 2493cb3..f4455a2 100644
--- a/webdev-prosjekt1/src/App.tsx
+++ b/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 (
<>
-
+
-
-
+
+
+
+
+
+
-