calendar design progress

web/src/components/events/EventContainer.tsx

@@ -272,7 +272,7 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
             data-collapsed={!visibleYearMonths.includes(yearMonth)}
           >
             <h2 onClick={() => toggleYearMonth(yearMonth)}>
-              {formatYearMonth(yearMonth)}
+              {formatYearMonth(yearMonth)} <span className={styles.eventCounter}>({Object.keys(eventsByDate[yearMonth]).length})</span>
             </h2>
             {Object.keys(eventsByDate[yearMonth]).map((week) => (
               <CalendarWeek key={week} days={eventsByDate[yearMonth][week]} />

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

@@ -41,31 +41,61 @@
 
 .eventCalendar {
   position: relative;
+  margin: var(--spacing-sitepadding-block) 0 var(--spacing-section-bottom);
 }
 
 .calendarYearMonth {
-  margin: var(--spacing-sitepadding-block) 0;
+  border-top: var(--border);
+  &:last-child {
+    border-bottom: var(--border);
+  }
 
   h2 {
-    font-size: var(--font-size-lead);
+    font-size: var(--font-size-h3);
-    padding: calc(var(--spacing-gap-column)/2);
+    padding: var(--spacing-s) 0;
-    background: var(--color-chateauBlue);
+    position: relative;
-    color: var(--color-betongGray);
+    cursor: pointer;
-    position: sticky;
 
     &:first-letter {
       text-transform: capitalize;
     }
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: var(--size-icon);
+      height: var(--size-icon);
+      background-size: 100%;
+      background-image: url("/assets/icons/circle-arrow-right.svg");
+      right: 0;
+      transform: rotate(-90deg);
+      transition: transform .3s ease;
+    }
   }
 
-  &[data-collapsed=true] > .calendarWeek {
+  &[data-collapsed=true] {
-    display: none;
+    > .calendarWeek {
+      display: none;
+    }
+    h2:before {
+      transform: rotate(90deg);
+    }
   }
 }
 
 .calendarWeek {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
+  border: 1px solid var(--color-background-secondary);
+
+  .calendarDay {
+    background: var(--color-background-secondary);
+
+    &:nth-of-type(even) {
+      background: var(--color-background);
+    }
+  }
 
   &:nth-of-type(even) {
     .calendarDay {
@@ -76,22 +106,33 @@
       }
     }
   }
+
+  &:first-of-type {
+    margin-top: var(--spacing-s);
+  }
+
+  &:last-child {
+    margin-bottom: var(--spacing-section-bottom);
+  }
 }
 
 .calendarDay {
-  background: var(--color-background-secondary);
+  min-height: 11rem;
-  min-height: 12rem;
+  padding: .4rem;
-  padding: calc(var(--spacing-gap-column)/2);
 
   &:nth-of-type(even) {
     background: var(--color-background);
   }
 
   h3 {
-    font-family: var(--font-serif);
+    font-family: var(--font-main);
-    font-size: var(--font-size-body);
+    font-size: var(--font-size-caption);
-    font-weight: 400;
+    font-weight: 500;
-    margin-bottom: var(--spacing-s);
+    margin: -.3rem -.3rem .4rem -.3rem;
+    text-align: center;
+    background: var(--color-chateauBlue);
+    color: var(--color-betongGray);
+    padding: .3em .4em;
 
 
     &:first-letter {
@@ -100,6 +141,14 @@
   }
 }
 
+.eventCounter {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-size: var(--font-size-body);
+  display: inline-block;
+  vertical-align: middle;
+}
+
 @media (max-width: 1200px) {
   .eventList {
     grid-template-columns: 1fr 1fr;
@@ -112,7 +161,11 @@
   .calendarDay {
 
     min-height: 0;
-    padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding-inline);
+    padding: 0 0 calc(var(--spacing-gap-column)/2);
+
+    h3 {
+      margin: 0 0 .4rem;
+    }
 
     &.empty {
       display: none;
@@ -120,14 +173,14 @@
 
     ul {
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: repeat(4, 1fr);
       column-gap: var(--spacing-gap-column);
       row-gap: var(--spacing-gap-row);
     }
 
     &:first-child,
     &:last-child {
-      padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding-inline);
+      padding: 0 0 calc(var(--spacing-gap-column)/2);
     }
   }
 }
@@ -136,6 +189,14 @@
   .eventList {
     grid-template-columns: 1fr;
   }
+  .calendarDay {
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: var(--spacing-gap-column);
+      row-gap: var(--spacing-gap-row);
+    }
+  }
   .displayOptions {
     .displayButtons {
       width: 100%;

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

@@ -7,15 +7,26 @@
   &.small {
 
     .title,
-    .details {
+    .details,
-      font-size: var(--font-size-body);
+    .dates {
+      font-size: var(--font-size-caption);
     }
 
     .text {
+      padding: 0;
+      margin: .4em 0;
       &:before {
         display: none;
       }
     }
+
+    @media (max-width: 700px) {
+      --size-image-width: 8.2rem;
+      grid-template-columns: var(--size-image-width) auto;
+      column-gap: .6rem;
+      align-items: flex-start;
+      width: var(--size-item-width);
+    }
   }
 
   &.medium {