Redesign layout: 3-per-row 2-row grid, 6 days, bigger fonts

- Show 6 days in a 3x2 grid (3 columns, 2 rows) with info panel
  spanning the full right column
- Day columns explicitly grid-placed to prevent auto-flow into panel column
- Larger fonts throughout: event cards 14px, day number 26px, clock 52px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app.py

@@ -133,7 +133,7 @@ def parse_member_and_title(summary, family_members):
     return None, summary
 
 
-NUM_DAYS = 5
+NUM_DAYS = 6
 
 
 def empty_days_payload(start_date, members):

static/css/style.css

@@ -65,7 +65,8 @@ html, body {
 .week-grid {
     flex: 1;
     display: grid;
-    grid-template-columns: repeat(5, 1fr) 190px;
+    grid-template-columns: repeat(3, 1fr) 210px;
+    grid-template-rows: 1fr 1fr;
     gap: 12px;
     min-height: 0;
 }
@@ -89,7 +90,7 @@ html, body {
 }
 
 .day-name {
-    font-size: 11px;
+    font-size: 13px;
     font-weight: 700;
     text-transform: uppercase;
     color: #A6AAB4;
@@ -97,13 +98,13 @@ html, body {
 }
 
 .day-number {
-    font-size: 20px;
+    font-size: 26px;
     font-weight: 700;
     color: #1F2430;
 }
 
 .day-count {
-    font-size: 11px;
+    font-size: 12px;
     color: #A6AAB4;
     margin-top: 2px;
 }
@@ -118,16 +119,16 @@ html, body {
 
 .event-card {
     border-radius: 8px;
-    padding: 6px 8px;
+    padding: 8px 10px;
     border-left: 5px solid transparent;
-    font-size: 12.5px;
+    font-size: 14px;
     line-height: 1.35;
 }
 
 .event-time {
     font-weight: 700;
     color: rgba(0, 0, 0, 0.5);
-    font-size: 11.5px;
+    font-size: 13px;
 }
 
 .event-title {
@@ -137,7 +138,7 @@ html, body {
 }
 
 .event-member {
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.45);
     margin-top: 2px;
@@ -165,7 +166,7 @@ html, body {
 }
 
 .info-clock {
-    font-size: 42px;
+    font-size: 52px;
     font-weight: 700;
     color: #1F2430;
     letter-spacing: -1px;

static/js/app.js

@@ -157,6 +157,12 @@ function eventCardHTML(event) {
     `;
 }
 
+// Grid positions for 6 days arranged 3-per-row, info panel in col 4 spanning both rows
+const DAY_GRID_POSITIONS = [
+    {col: 1, row: 1}, {col: 2, row: 1}, {col: 3, row: 1},
+    {col: 1, row: 2}, {col: 2, row: 2}, {col: 3, row: 2},
+];
+
 function renderDays(data) {
     const grid = document.getElementById('week-grid');
     grid.innerHTML = '';
@@ -164,12 +170,15 @@ function renderDays(data) {
     const todayISO = toISODate(new Date());
     const now = new Date();
 
-    data.days.forEach(day => {
+    data.days.forEach((day, i) => {
         const dayDate = new Date(day.date + 'T00:00:00');
         const events = filterEvents(day.events);
+        const pos = DAY_GRID_POSITIONS[i];
 
         const column = document.createElement('div');
         column.className = 'day-column' + (day.date === todayISO ? ' is-today' : '');
+        column.style.gridColumn = pos.col;
+        column.style.gridRow = pos.row;
         column.innerHTML = `
             <div class="day-header">
                 <div class="day-name">${DAY_LABELS[dayDate.getDay()]}</div>
@@ -188,6 +197,8 @@ function renderDays(data) {
     const minutes = String(now.getMinutes()).padStart(2, '0');
     const panel = document.createElement('div');
     panel.className = 'info-panel';
+    panel.style.gridColumn = '4';
+    panel.style.gridRow = '1 / 3';
     panel.innerHTML = `
         <div id="info-clock" class="info-clock">${hours}:${minutes}</div>
         <div class="info-weekday">${DAY_LABELS[now.getDay()]}</div>