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/lib/components/BrewProgress.svelte b/src/lib/components/BrewProgress.svelte new file mode 100644 index 0000000..c63abf4 --- /dev/null +++ b/src/lib/components/BrewProgress.svelte @@ -0,0 +1,201 @@ + + +
+

Brew progress

+ +
    + {#each steps as step} +
  1. + + + + {step.name} + {step.date} +
    2. + {/each} +
+ +
+

{brew.name} av {brew.by}

+
+
+ + diff --git a/src/lib/components/Graph.svelte b/src/lib/components/Graph.svelte index 695d458..ca6a80c 100644 --- a/src/lib/components/Graph.svelte +++ b/src/lib/components/Graph.svelte @@ -196,4 +196,5 @@ }); - + + diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index 02adeb1..57e6613 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -1,75 +1,75 @@ {#if open}

Navigation

- +
{/if}
-
- {#if !open} - - - - {:else} - - - - - {/if} +
+ {#if !open} + + + + {:else} + + + + + {/if} - {headerText} -
+ {headerText} +
diff --git a/src/lib/components/RelayControls.svelte b/src/lib/components/RelayControls.svelte index 329eece..706c5b7 100644 --- a/src/lib/components/RelayControls.svelte +++ b/src/lib/components/RelayControls.svelte @@ -22,7 +22,7 @@ } -
+

Manual relay controls

@@ -41,28 +41,15 @@ \ No newline at end of file + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 6988052..71e56d0 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,13 +1,14 @@
- +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 8e7c16a..2db7b72 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -3,7 +3,7 @@ import Display from '$lib/components/display.svelte' import VerticalSensorDisplay from '$lib/components/VerticalSensorDisplay.svelte' import Livestream from '$lib/components/Livestream.svelte' - import Navigation from '$lib/components/Navigation.svelte'; + import BrewProgress from '$lib/components/BrewProgress.svelte'; import type { PageData } from './$types'; import RelayControls from '../lib/components/RelayControls.svelte'; @@ -14,7 +14,7 @@
- + @@ -31,10 +31,10 @@ grid-template-columns: 1fr; column-gap: 2rem; row-gap: 15px; - margin: 1rem; + margin: 1rem 0; @include desktop { - grid-template-columns: 1fr 2fr 3fr; + grid-template-columns: 2fr 2fr 3fr; margin: 2rem; } } diff --git a/src/routes/brews/+page.svelte b/src/routes/brews/+page.svelte index 5bd640a..1a546de 100644 --- a/src/routes/brews/+page.svelte +++ b/src/routes/brews/+page.svelte @@ -9,7 +9,7 @@ -
+

Past brews

    @@ -20,7 +20,8 @@
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; -}