make some calendar stylings

web/src/components/events/EventContainer.tsx

@@ -51,7 +51,7 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
   const eventsByDate = organizeEventsByDate(futureSingularEvents);
 
   return (
-    <div className={styles.eventList}>
+    <div className={styles.eventCalendar}>
       {Object.keys(eventsByDate).map((yearMonth) => (
         <div key={yearMonth} className={styles.calendarYearMonth}>
           <h2>{formatYearMonth(yearMonth)}</h2>

web/src/components/events/eventContainer.module.scss

@@ -1,7 +1,5 @@
 .eventWrapper {
-  background: #ccc;
   margin: calc(var(--spacing-sitepadding)*-1) calc(var(--spacing-sitepadding)*-1);
-  padding: var(--spacing-sitepadding);
 }
 
 .eventList {
@@ -23,17 +21,65 @@
   }
 }
 
+.eventCalendar {
+  position: relative;
+}
+
 .calendarYearMonth {
-  h2:first-letter {
-    text-transform: capitalize
+  h2 {
+    font-size: var(--font-size-h1);
+    padding: 1rem var(--spacing-sitepadding);
+    background: var(--color-deepBrick);
+    color: var(--color-goldenOrange);
+    position: sticky;
+
+    &:first-letter {
+      text-transform: capitalize;
+    }
   }
 }
 
-.calendarWeek {}
+.calendarWeek {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+
+  &:nth-of-type(even) {
+    .calendarDay {
+      background: var(--color-background);
+
+      &:nth-of-type(even) {
+        background: var(--color-background-secondary);
+      }
+    }
+  }
+}
 
 .calendarDay {
-  h3:first-letter {
-    text-transform: capitalize
+  background: var(--color-background-secondary);
+  min-height: 12rem;
+  padding: calc(var(--spacing-gap-column)/2);
+
+  &:nth-of-type(even) {
+    background: var(--color-background);
+  }
+
+  &:first-child {
+    padding-left: var(--spacing-sitepadding);
+  }
+
+  &:last-child {
+    padding-right: var(--spacing-sitepadding);
+  }
+
+  h3 {
+    font-family: var(--font-serif);
+    font-size: var(--font-size-body);
+    font-weight: 400;
+    margin-bottom: 1rem;
+
+
+    &:first-letter {
+      text-transform: capitalize;
+    }
   }
 }
-

web/src/css/variables.scss

@@ -7,6 +7,7 @@
   --font-size-body: 1rem;
   --font-size-lead: 1.4rem;
   --font-size-h2: 1.8rem;
+  --font-size-h1: 2.4rem;
 
 
   // colors