Lunar phase styled

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)
     }

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);