themetoggle; layout changes; style tweaks;
This commit is contained in:
Spencer Flagg
parent
d74326aca2
commit
d43322d16e
5 changed files with 145 additions and 36 deletions
66
src/lib/components/ThemeToggle.svelte
Normal file
66
src/lib/components/ThemeToggle.svelte
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let theme;
|
||||
|
||||
function determineTheme() {
|
||||
const hour = new Date().getHours();
|
||||
return (hour >= 8 && hour <= 21) ? 'light' : 'dark';
|
||||
}
|
||||
|
||||
function setTheme(theme) {
|
||||
document.documentElement.style.setProperty('color-scheme', theme);
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
theme = theme === 'light' ? 'dark' : 'light';
|
||||
setTheme(theme);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
theme = determineTheme();
|
||||
setTheme(theme);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.theme-toggle {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
display: flex;
|
||||
border-radius: 999px;
|
||||
aspect-ratio: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.theme-toggle:hover, .theme-toggle:active, .theme-toggle:focus {
|
||||
background: none;
|
||||
--c-toggle: var(--c-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
<button class="theme-toggle" on:click={toggleTheme}>
|
||||
{#if theme === 'light'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-toggle)" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 1.992a10 10 0 1 0 9.236 13.838c.341 -.82 -.476 -1.644 -1.298 -1.31a6.5 6.5 0 0 1 -6.864 -10.787l.077 -.08c.551 -.63 .113 -1.653 -.758 -1.653h-.266l-.068 -.006l-.06 -.002z" stroke-width="0" fill="var(--c-toggle)" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-toggle)" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 19a1 1 0 0 1 .993 .883l.007 .117v1a1 1 0 0 1 -1.993 .117l-.007 -.117v-1a1 1 0 0 1 1 -1z" stroke-width="0" fill="var(--c-toggle)" />
|
||||
<path d="M18.313 16.91l.094 .083l.7 .7a1 1 0 0 1 -1.32 1.497l-.094 -.083l-.7 -.7a1 1 0 0 1 1.218 -1.567l.102 .07z" stroke-width="0" fill="var(--c-toggle)" />
|
||||
<path d="M7.007 16.993a1 1 0 0 1 .083 1.32l-.083 .094l-.7 .7a1 1 0 0 1 -1.497 -1.32l.083 -.094l.7 -.7a1 1 0 0 1 1.414 0z" stroke-width="0" fill="var(--c-toggle)" />
|
||||
<path d="M4 11a1 1 0 0 1 .117 1.993l-.117 .007h-1a1 1 0 0 1 -.117 -1.993l.117 -.007h1z" stroke-width="0" fill="var(--c-toggle)" />
|
||||
<path d="M21 11a1 1 0 0 1 .117 1.993l-.117 .007h-1a1 1 0 0 1 -.117 -1.993l.117 -.007h1z" stroke-width="0" fill="var(--c-toggle)" />
|
||||
<path d="M6.213 4.81l.094 .083l.7 .7a1 1 0 0 1 -1.32 1.497l-.094 -.083l-.7 -.7a1 1 0 0 1 1.217 -1.567l.102 .07z" stroke-width="0" fill="var(--c-toggle)" />
|
||||
<path d="M19.107 4.893a1 1 0 0 1 .083 1.32l-.083 .094l-.7 .7a1 1 0 0 1 -1.497 -1.32l.083 -.094l.7 -.7a1 1 0 0 1 1.414 0z" stroke-width="0" fill="var(--c-toggle)" />
|
||||
<path d="M12 2a1 1 0 0 1 .993 .883l.007 .117v1a1 1 0 0 1 -1.993 .117l-.007 -.117v-1a1 1 0 0 1 1 -1z" stroke-width="0" fill="var(--c-toggle)" />
|
||||
<path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" stroke-width="0" fill="var(--c-toggle)" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
import 'normalize.css/normalize.css';
|
||||
import 'milligram/dist/milligram.min.css';
|
||||
import '../styles/app.css';
|
||||
import ThemeToggle from '$lib/components/ThemeToggle.svelte';
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -32,6 +33,7 @@
|
|||
{/if}
|
||||
</a>
|
||||
</li>
|
||||
<li><ThemeToggle /></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -63,15 +63,13 @@
|
|||
|
||||
<section>
|
||||
<h2>Today</h2>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<ul class="column">
|
||||
<div class="today__list">
|
||||
<ul>
|
||||
{#each actions as action}
|
||||
<li><span class="badge badge--{action.type}">{action.type}</span> at {new Date(action.timestamp).toLocaleTimeString('en-NL', { hour: '2-digit', minute: '2-digit' })}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<Counters {actions} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
|
@ -73,7 +73,7 @@ import { onMount } from 'svelte';
|
|||
.day-header, .hour-label {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
background: #e9e9e9;
|
||||
background: var(--c-border);
|
||||
}
|
||||
.day-header {
|
||||
border-radius: 1em 1em 0 0;
|
||||
|
|
@ -86,17 +86,17 @@ import { onMount } from 'svelte';
|
|||
margin-left: .5rem;
|
||||
}
|
||||
.hour {
|
||||
border: 1px solid #e9e9e9;
|
||||
border: 1px solid var(--c-border);
|
||||
min-height: 60px;
|
||||
}
|
||||
.event {
|
||||
background-color: var(--color);
|
||||
border-radius: 4px;
|
||||
padding: .5em 1em;
|
||||
padding: 0.3em 0.8em;
|
||||
line-height: 1;
|
||||
margin: 2px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: rgba(255,255,255,.5);
|
||||
}
|
||||
|
|
@ -107,7 +107,13 @@ import { onMount } from 'svelte';
|
|||
text-transform: uppercase;
|
||||
letter-spacing: .2em;
|
||||
}
|
||||
|
||||
|
||||
.event__time {
|
||||
line-height: 1;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 300;
|
||||
color: rgba(255,255,255,.75);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="calendar-wrapper">
|
||||
|
|
@ -127,7 +133,7 @@ import { onMount } from 'svelte';
|
|||
<div class="hour">
|
||||
{#each actions as action}
|
||||
{#if getDayOfWeek(action.timestamp) === dayIndex && getHourOfDay(action.timestamp) === hour}
|
||||
<div class="event event--{action.type}"><span class="event__title">{action.type}</span><span>{formatTime(action.timestamp)}</span></div>
|
||||
<div class="event event--{action.type}"><span class="event__title">{action.type}</span><span class="event__time">{formatTime(action.timestamp)}</span></div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,37 @@
|
|||
--c-primary: darkorange; /* Replace #yourColor with your desired color */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f2f0ef;
|
||||
/* https://coolors.co/palette/5f0f40-9a031e-fb8b24-e36414-0f4c5c */
|
||||
|
||||
[class*='--food'] {
|
||||
--color: #136f63;
|
||||
}
|
||||
[class*='--poop'] {
|
||||
--color: #78290f;
|
||||
}
|
||||
[class*='--asleep'] {
|
||||
--color: #032b43;
|
||||
}
|
||||
[class*='--awake'] {
|
||||
--color: #ffba08;
|
||||
}
|
||||
[class*='--diaper'] {
|
||||
--color: #3f88c5;
|
||||
}
|
||||
/* d00000 ff7d00 */
|
||||
|
||||
html[data-theme='light'] body {
|
||||
background-color: #f2f0ef;
|
||||
--c-border: #e9e9e9;
|
||||
--c-toggle: #00464b;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] body {
|
||||
background-color: #181818;
|
||||
--c-border: #2b2b2b;
|
||||
--c-toggle: #ffe600;
|
||||
}
|
||||
|
||||
|
||||
a,
|
||||
input[type='text']:focus,
|
||||
|
|
@ -19,6 +47,15 @@ button,
|
|||
input[type='submit'] {
|
||||
background-color: var(--color);
|
||||
border-color: var(--color);
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
svg path {
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
|
|
@ -31,6 +68,12 @@ nav ul {
|
|||
|
||||
nav ul li {
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.today__list ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
@ -61,27 +104,9 @@ aside button {
|
|||
|
||||
section {
|
||||
margin-top: 4rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* https://coolors.co/palette/5f0f40-9a031e-fb8b24-e36414-0f4c5c */
|
||||
|
||||
[class*='--food'] {
|
||||
--color: #136f63;
|
||||
}
|
||||
[class*='--poop'] {
|
||||
--color: #78290f;
|
||||
}
|
||||
[class*='--asleep'] {
|
||||
--color: #032b43;
|
||||
}
|
||||
[class*='--awake'] {
|
||||
--color: #ffba08;
|
||||
}
|
||||
[class*='--diaper'] {
|
||||
--color: #3f88c5;
|
||||
}
|
||||
/* d00000 ff7d00 */
|
||||
|
||||
.badge {
|
||||
background-color: var(--color);
|
||||
display: inline-block;
|
||||
|
|
@ -96,12 +121,24 @@ section {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.counters {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: max-content;
|
||||
outline: 1px solid #ccc;
|
||||
background-color: #eee;
|
||||
outline: 1px solid var(--c-border);
|
||||
background-color: var(--c-border);
|
||||
padding: 2rem;
|
||||
border-radius: 2rem 0 0 2rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.counters {
|
||||
margin-right: -2rem;
|
||||
border-radius: 2rem 0 0 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue