From 851ecac5abbe6c455f3b3fd7cb20249e5d387f10 Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Mon, 29 May 2023 12:27:40 +0200 Subject: [PATCH] Consolidated global styles & variables, simpler import in layout --- src/app.html | 24 ++++++------- src/routes/+layout.svelte | 1 + {static => src/styles}/global.css | 59 +++++++++++++++++++++++++++++++ src/styles/variables.css | 35 ------------------ static/variables.css | 41 --------------------- 5 files changed, 70 insertions(+), 90 deletions(-) rename {static => src/styles}/global.css (57%) delete mode 100644 src/styles/variables.css delete mode 100644 static/variables.css diff --git a/src/app.html b/src/app.html index cc6882a..d71a741 100644 --- a/src/app.html +++ b/src/app.html @@ -1,19 +1,15 @@ - - - - - - - + + + + + - %sveltekit.head% - + %sveltekit.head% + - -
%sveltekit.body%
- + +
%sveltekit.body%
+ - - diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 6988052..2f9bd51 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,6 +1,7 @@ diff --git a/static/global.css b/src/styles/global.css similarity index 57% rename from static/global.css rename to src/styles/global.css index 1328e79..4048b83 100644 --- a/static/global.css +++ b/src/styles/global.css @@ -1,4 +1,29 @@ +:root { + --mobile-width: 768px; + --tablet-width: 1200px; + --background: white; + --backdrop: #f5f5f7; + --text-color: black; + --red: #ff97a3; + --blue: #9ad9ff; + --green: #19a786; + + --header-height: 80px; + --color-transition-duration: 0.4s; +} + +.dark { + --background: black; + --backdrop: #202124; + --text-color: white; +} + +* { + box-sizing: border-box; +} + body { + margin: 0; font-family: 'Roboto'; background-color: var(--backdrop); color: var(--text-color); @@ -9,6 +34,40 @@ body { font-family var(--color-transition-duration) ease-in-out; } +a { + color: inherit; /* blue colors for links too */ + text-decoration: inherit; /* no underline */ +} + +ul, +li { + margin: 0; + padding: 0; +} + +li { + list-style-type: none; +} + +.card { + height: fit-content; + padding: 2.25rem 1rem; + border-radius: 0.75rem; + background-color: var(--background); + transition: all 0.2s ease, background-color var(--color-transition-duration) ease-in-out; +} + +.card h1 { + margin-top: 0; + text-align: center; +} + +@media (min-width: var(--mobile-width)) { + .card { + padding: 2.25rem 2rem; + } +} + /* Nunito regular */ @font-face { font-family: 'Nunito'; diff --git a/src/styles/variables.css b/src/styles/variables.css deleted file mode 100644 index 1e04a9b..0000000 --- a/src/styles/variables.css +++ /dev/null @@ -1,35 +0,0 @@ -:root { - --background: white; - --backdrop: #f5f5f7; - --text-color: black; - --red: #ff97a3; - --blue: #9ad9ff; - --header-height: 200px; - - --color-transition-duration: 0.4s; -} - -.dark { - --background: pink; - --backdrop: #202124; - --text-color: white; -} - -* { - box-sizing: border-box; -} - -a { - color: inherit; /* blue colors for links too */ - text-decoration: inherit; /* no underline */ -} - -ul, -li { - margin: 0; - padding: 0; -} - -li { - list-style-type: none; -} diff --git a/static/variables.css b/static/variables.css deleted file mode 100644 index 6daf1e8..0000000 --- a/static/variables.css +++ /dev/null @@ -1,41 +0,0 @@ -:root { - --background: white; - --backdrop: #f5f5f7; - --text-color: black; - --red: #ff97a3; - --blue: #9ad9ff; - --green: #19a786; - - --header-height: 70px; - - --color-transition-duration: 0.4s; -} - -.dark { - --background: black; - --backdrop: #202124; - --text-color: white; -} - -* { - box-sizing: border-box; -} - -body { - margin: 0; -} - -a { - color: inherit; /* blue colors for links too */ - text-decoration: inherit; /* no underline */ -} - -ul, -li { - margin: 0; - padding: 0; -} - -li { - list-style-type: none; -}