From 91442068329dec74437f41a2dbb14c943c8b6043 Mon Sep 17 00:00:00 2001
From: Spencer Flagg <work@spencerflagg.com>
Date: Sat, 27 Jan 2024 16:38:15 +0100
Subject: [PATCH] fixed mobile counter docking; docked header;

---
 src/lib/components/ThemeToggle.svelte |  1 +
 src/routes/+page.svelte               |  2 ++
 src/styles/app.css                    | 18 ++++++++++++++----
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte
index 6ce5d4f..6dfc4a9 100644
--- a/src/lib/components/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle.svelte
@@ -37,6 +37,7 @@
       aspect-ratio: 1;
       align-items: center;
       justify-content: center;
+      background: none;
     }
     .theme-toggle:hover, .theme-toggle:active, .theme-toggle:focus {
       background: none;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a456628..50678e2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -68,6 +68,8 @@
 
 <style lang="scss">
     .today__list {
+
+        margin-bottom: 25vh;;
         ul {
             display: flex;
             flex-direction: column;
diff --git a/src/styles/app.css b/src/styles/app.css
index 4517a05..20dc039 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -21,18 +21,22 @@
 }
 /* d00000 ff7d00 */
 
+body {
+  background-color: var(--c-bkg);
+}
+
 html[data-theme='light'] body {
-  background-color: #f2f0ef;
   --c-border: #e9e9e9;
   --c-toggle: #00464b;
   --c-zebra: #ececec;
+  --c-bkg: #f2f0ef;
 }
 
 html[data-theme='dark'] body {
-    background-color: #181818;
     --c-border: #2b2b2b;
     --c-toggle: #ffe600;
     --c-zebra: #ececec11;
+    --c-bkg: #181818;
   }
 
 
@@ -80,7 +84,13 @@ nav ul li {
 }
 
 header {
-	padding-top: 2rem;
+
+  position: sticky;
+    top: 0;
+    background: var(--c-bkg);
+    z-index: 1;
+    margin: 0 -2rem;
+    padding: 2rem 2rem 0 2rem;
 }
 
 /* aside {
@@ -145,7 +155,7 @@ section {
   }
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (max-width: 500px) {
   .counters {
     margin-right: -2rem;
     border-radius: 2rem 0 0 2rem;