KevinMidboe/brewpi
1
0
Fork 0
mirror of https://github.com/KevinMidboe/brewPi.git synced 2025-10-29 16:50:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Consolidated global styles & variables, simpler import in layout

Browse Source
This commit is contained in:
Kevin
2023-05-29 12:27:40 +02:00
parent d1dee871bb
commit 851ecac5ab
5 changed files with 70 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app.html
View File

@@ -1,19 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content="" /> <meta name="description" content="" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link rel="stylesheet" type="text/css" href="/global.css" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="/variables.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-prefetch> <body data-sveltekit-prefetch>
<div>%sveltekit.body%</div> <div>%sveltekit.body%</div>
</body> </body>
</html> </html>
<style lang="scss"></style>

1
src/routes/+layout.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import HeaderComponent from '$lib/components/Header.svelte'; import HeaderComponent from '$lib/components/Header.svelte';
// import Darkmode from '$lib/components/Darkmode.svelte' // import Darkmode from '$lib/components/Darkmode.svelte'
import '../styles/global.css';
</script> </script>
<HeaderComponent /> <HeaderComponent />

59
static/global.css → src/styles/global.css
View File

@@ -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 { body {
margin: 0;
font-family: 'Roboto'; font-family: 'Roboto';
background-color: var(--backdrop); background-color: var(--backdrop);
color: var(--text-color); color: var(--text-color);
@@ -9,6 +34,40 @@ body {
font-family var(--color-transition-duration) ease-in-out; 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 */ /* Nunito regular */
@font-face { @font-face {
font-family: 'Nunito'; font-family: 'Nunito';

35
src/styles/variables.css
View File

@@ -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;
}

41
static/variables.css
View File

@@ -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;
}