From 695c030f33517ab30006d2a8f251bf1ae350bfe4 Mon Sep 17 00:00:00 2001
From: Alexander Heldt <me@alexanderheldt.se>
Date: Mon, 13 Jul 2026 20:50:41 +0000
Subject: [PATCH] Make the timer pill bigger and put it first in the day bar

---
 src/changelog.json | 1 +
 src/index.html     | 8 ++++----
 src/style.css      | 6 +++---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/changelog.json b/src/changelog.json
index b136aad..571bcce 100644
--- a/src/changelog.json
+++ b/src/changelog.json
@@ -1,4 +1,5 @@
 [
+  { "date": "2026-07-13", "text": "The awake/asleep timer is bigger and sits first in the top bar" },
   { "date": "2026-07-13", "text": "The sleep, daily counts and food charts now cover the last 14 days instead of 7" },
   { "date": "2026-07-13", "text": "The awake/asleep timer lives in the frozen top bar" },
   { "date": "2026-07-13", "text": "The day picker is a bar frozen at the top of the page" },
diff --git a/src/index.html b/src/index.html
index 8f1cf9e..d52c5e2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -78,16 +78,16 @@
 
     <main>
       <section class="day-bar">
-        <button type="button" id="day-prev" class="ghost" aria-label="Previous day">←</button>
-        <input type="date" id="day-picker" />
-        <button type="button" id="day-today" class="ghost">Today</button>
-        <button type="button" id="day-next" class="ghost" aria-label="Next day">→</button>
         <!-- Compact asleep/awake counter (the old big clock); hidden until a
              sleep event exists. Hover/long-press shows "since" via title. -->
         <div id="bar-clock" class="bar-clock" hidden>
           <span id="bar-clock-icon" aria-hidden="true"></span>
           <span id="bar-clock-time"></span>
         </div>
+        <button type="button" id="day-prev" class="ghost" aria-label="Previous day">←</button>
+        <input type="date" id="day-picker" />
+        <button type="button" id="day-today" class="ghost">Today</button>
+        <button type="button" id="day-next" class="ghost" aria-label="Next day">→</button>
       </section>
 
       <section class="quick-actions">
diff --git a/src/style.css b/src/style.css
index e625de0..40732de 100644
--- a/src/style.css
+++ b/src/style.css
@@ -162,11 +162,11 @@ body::before {
 .bar-clock {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 7px 12px;
+  gap: 8px;
+  padding: 8px 16px;
   border-radius: 999px;
   font-weight: 700;
-  font-size: 0.9rem;
+  font-size: 1.15rem;
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
 }