From 2b91c84fc8e14d0b90d10d3cfdfec4366a5d53c4 Mon Sep 17 00:00:00 2001 From: Martin Sunnset Date: Sun, 13 Sep 2026 12:53:12 +0200 Subject: [PATCH 1/2] Created CSS variables file with common CSS declarations --- webdev-prosjekt1/src/App.css | 11 -------- webdev-prosjekt1/src/App.tsx | 1 + webdev-prosjekt1/src/components/Searchbar.css | 16 ------------ webdev-prosjekt1/src/components/Searchbar.tsx | 1 + webdev-prosjekt1/src/variables.css | 26 +++++++++++++++++++ 5 files changed, 28 insertions(+), 27 deletions(-) create mode 100644 webdev-prosjekt1/src/variables.css diff --git a/webdev-prosjekt1/src/App.css b/webdev-prosjekt1/src/App.css index bc61640..c8e3b9e 100644 --- a/webdev-prosjekt1/src/App.css +++ b/webdev-prosjekt1/src/App.css @@ -1,18 +1,7 @@ -:root { - font-family: 'Trebuchet MS', sans-serif; - color: #d4af37; - background: #11100f; -} - * { box-sizing: border-box; } -body { - margin: 0; - min-width: 320px; -} - .app-shell { min-height: 100vh; background: radial-gradient(circle at 78% 42%, diff --git a/webdev-prosjekt1/src/App.tsx b/webdev-prosjekt1/src/App.tsx index f4455a2..8a99c73 100644 --- a/webdev-prosjekt1/src/App.tsx +++ b/webdev-prosjekt1/src/App.tsx @@ -1,4 +1,5 @@ import './App.css'; +import './variables.css'; import { Button } from './components/Button'; import { Searchbar } from './components/Searchbar'; import filterIcon from './assets/filter.png'; diff --git a/webdev-prosjekt1/src/components/Searchbar.css b/webdev-prosjekt1/src/components/Searchbar.css index 1a0228e..cd65656 100644 --- a/webdev-prosjekt1/src/components/Searchbar.css +++ b/webdev-prosjekt1/src/components/Searchbar.css @@ -1,19 +1,3 @@ -.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; diff --git a/webdev-prosjekt1/src/components/Searchbar.tsx b/webdev-prosjekt1/src/components/Searchbar.tsx index 926d269..d07b068 100644 --- a/webdev-prosjekt1/src/components/Searchbar.tsx +++ b/webdev-prosjekt1/src/components/Searchbar.tsx @@ -1,4 +1,5 @@ import './Searchbar.css'; +import '../variables.css'; export const Searchbar = () => { return ( diff --git a/webdev-prosjekt1/src/variables.css b/webdev-prosjekt1/src/variables.css new file mode 100644 index 0000000..f26a102 --- /dev/null +++ b/webdev-prosjekt1/src/variables.css @@ -0,0 +1,26 @@ +:root { + font-family: 'Trebuchet MS', sans-serif; + color: #d4af37; + background: #11100f; +} + +body { + margin: 0; + min-width: 320px; +} + +.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); +} \ No newline at end of file From 9fcb5253772fd0c2920a16450e08874c43ff2fd7 Mon Sep 17 00:00:00 2001 From: Martin Sunnset Date: Sun, 13 Sep 2026 13:25:47 +0200 Subject: [PATCH 2/2] Fixed root css declarations --- webdev-prosjekt1/src/App.css | 14 ++++++--- webdev-prosjekt1/src/components/Button.css | 8 ++--- webdev-prosjekt1/src/components/Searchbar.css | 20 +++++++++++-- webdev-prosjekt1/src/index.css | 2 +- webdev-prosjekt1/src/main.tsx | 1 + webdev-prosjekt1/src/variables.css | 29 ++++--------------- 6 files changed, 39 insertions(+), 35 deletions(-) diff --git a/webdev-prosjekt1/src/App.css b/webdev-prosjekt1/src/App.css index c8e3b9e..549c75c 100644 --- a/webdev-prosjekt1/src/App.css +++ b/webdev-prosjekt1/src/App.css @@ -2,6 +2,12 @@ box-sizing: border-box; } +body { + margin: var(--margin); + min-width: 320px; + font-family: var(--font_family); +} + .app-shell { min-height: 100vh; background: radial-gradient(circle at 78% 42%, @@ -19,7 +25,7 @@ } .app-title { - color: rgb(212, 175, 55); + color: var(--primary_color); text-decoration: none; display: inline-flex; align-items: stretch; @@ -38,7 +44,7 @@ top: 0; height: 100%; - margin: 0; + margin: var(--margin); } .app-logo { @@ -53,7 +59,7 @@ .app-title-text { font-size: 48px; line-height: 0.95; - margin: 0; + margin: var(--margin); } .header-note { @@ -94,7 +100,7 @@ .hero-art { position: relative; - margin: 0; + margin: var(--margin); width: 520px; min-height: 460px; diff --git a/webdev-prosjekt1/src/components/Button.css b/webdev-prosjekt1/src/components/Button.css index da742a0..22ba9db 100644 --- a/webdev-prosjekt1/src/components/Button.css +++ b/webdev-prosjekt1/src/components/Button.css @@ -5,11 +5,11 @@ button { padding: 0 18px; - border: 1px solid #eab342; - border-radius: 4px; + border: 1px solid var(--primary_color); + border-radius: var(--box_border_radius); - color: #17130d; - background: #eab342; + color: var(--primary_background_color); + background: var(--primary_color); font: inherit; font-weight: 700; diff --git a/webdev-prosjekt1/src/components/Searchbar.css b/webdev-prosjekt1/src/components/Searchbar.css index cd65656..0aac8e5 100644 --- a/webdev-prosjekt1/src/components/Searchbar.css +++ b/webdev-prosjekt1/src/components/Searchbar.css @@ -1,7 +1,23 @@ +.searchbar { + flex: 1; + + display: flex; + align-items: center; + + min-width: 0; + + padding: 0 16px; + + border: 1px solid #716044; + border-radius: var(--box_border_radius); + + background: rgba(20, 18, 15, 0.8); +} + .search-icon { margin-right: 10px; - color: #eab342; + color: var(--primary_color); font-size: 1.6rem; line-height: 1; @@ -26,5 +42,5 @@ } .searchbar:focus-within { - border-color: #eab342; + border-color: var(--primary_color); } diff --git a/webdev-prosjekt1/src/index.css b/webdev-prosjekt1/src/index.css index 13cb8b9..fac3d9c 100644 --- a/webdev-prosjekt1/src/index.css +++ b/webdev-prosjekt1/src/index.css @@ -4,5 +4,5 @@ body { button, input { - font-family: inherit; + font-family: var(--font_family); } \ No newline at end of file diff --git a/webdev-prosjekt1/src/main.tsx b/webdev-prosjekt1/src/main.tsx index bef5202..931804e 100644 --- a/webdev-prosjekt1/src/main.tsx +++ b/webdev-prosjekt1/src/main.tsx @@ -1,6 +1,7 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' +import './variables.css' import App from './App.tsx' createRoot(document.getElementById('root')!).render( diff --git a/webdev-prosjekt1/src/variables.css b/webdev-prosjekt1/src/variables.css index f26a102..1071547 100644 --- a/webdev-prosjekt1/src/variables.css +++ b/webdev-prosjekt1/src/variables.css @@ -1,26 +1,7 @@ :root { - font-family: 'Trebuchet MS', sans-serif; - color: #d4af37; - background: #11100f; -} - -body { - margin: 0; - min-width: 320px; -} - -.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); + --font_family: sans-serif; + --primary_color: #d4af37; + --primary_background_color: #11100f; + --box_border_radius: 4px; + --margin: 0; } \ No newline at end of file