From 8cf97f4c9fde6b686deb1e5abcb0fb87adb01609 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Wed, 20 Aug 2025 20:00:40 -0600
Subject: [PATCH] Lunar phase styled

---
 calendar.js | 17 +++++++++--------
 cells.css   |  9 ++-------
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/calendar.js b/calendar.js
index 3089bfa..68a9bc1 100644
--- a/calendar.js
+++ b/calendar.js
@@ -331,14 +331,8 @@ class InfiniteCalendar {
         labelYear = cur.getFullYear()
       }
 
-  const day = document.createElement('h1')
-  day.textContent = String(cur.getDate())
-
-  // lunar phase symbol (only for main phases)
-  const moon = document.createElement('span')
-  moon.className = 'lunar-phase'
-  moon.textContent = lunarPhaseSymbol(cur) || ''
-  if (moon.textContent) cell.appendChild(moon)
+      const day = document.createElement('h1')
+      day.textContent = String(cur.getDate())
 
       const date = toLocalString(cur)
       cell.dataset.date = date
@@ -386,6 +380,13 @@ class InfiniteCalendar {
       }
 
       cell.appendChild(day)
+      const luna = lunarPhaseSymbol(cur)
+      if (luna) {
+        const moon = document.createElement('span')
+        moon.className = 'lunar-phase'
+        moon.textContent = luna
+        cell.appendChild(moon)
+      }
       daysGrid.appendChild(cell)
       cur.setDate(cur.getDate() + 1)
     }
diff --git a/cells.css b/cells.css
index d7b64ae..64ceaea 100644
--- a/cells.css
+++ b/cells.css
@@ -3,7 +3,7 @@
 .cell {
   position: relative;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-start;
   justify-content: flex-start;
   padding: .25em;
@@ -19,15 +19,10 @@
   right: .25em;
   padding: 0;
   margin: 0;
+  min-width: 1.5em;
   transition: background-color .15s ease;
   font-size: 1em;
 }
-.cell .lunar-phase {
-  position: absolute;
-  z-index: 1;
-  top: .25em;
-  left: 50%;
-}
 .cell.today h1 {
   border-radius: 2em;
   background: var(--today);