From 0f16893cf98e759fa0d22773641a56d577f4ed32 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Sun, 12 May 2024 23:05:27 +0200
Subject: [PATCH] more calendar stylings

---
 web/src/components/events/EventContainer.tsx  |  7 +++-
 web/src/components/events/EventItem.tsx       |  8 ++++-
 .../events/eventContainer.module.scss         | 34 +++++++++++++++++--
 .../components/events/eventItem.module.scss   |  8 +++++
 .../components/general/pageHeader.module.scss |  4 +++
 5 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/web/src/components/events/EventContainer.tsx b/web/src/components/events/EventContainer.tsx
index 47e9ba7..400f355 100644
--- a/web/src/components/events/EventContainer.tsx
+++ b/web/src/components/events/EventContainer.tsx
@@ -67,7 +67,12 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
                   </h3>
                   <ul>
                     {eventsByDate[yearMonth][week][day].map((event) => (
-                      <EventItem key={event.id} event={event} mode="calendar" />
+                      <EventItem
+                        key={event.id}
+                        event={event}
+                        mode="calendar"
+                        size="small"
+                      />
                     ))}
                   </ul>
                 </div>
diff --git a/web/src/components/events/EventItem.tsx b/web/src/components/events/EventItem.tsx
index b64eba9..27da146 100644
--- a/web/src/components/events/EventItem.tsx
+++ b/web/src/components/events/EventItem.tsx
@@ -9,12 +9,18 @@ import { toLocalTime, formatDate, commonDateFormat } from "@/lib/date";
 export const EventItem = ({
   event,
   mode,
+  size,
 }: {
   event: SingularEvent | EventFragment;
   mode: "list" | "calendar";
+  size?: "small" | "medium" | "large";
 }) => {
   return (
-    <li className={`${styles.eventItem} linkItem`}>
+    <li
+      className={`${styles.eventItem} ${
+        size ? styles[size] : styles.large
+      } linkItem`}
+    >
       <div className={styles.image}>
         {event.featuredImage && (
           <Image
diff --git a/web/src/components/events/eventContainer.module.scss b/web/src/components/events/eventContainer.module.scss
index e880ee4..226b291 100644
--- a/web/src/components/events/eventContainer.module.scss
+++ b/web/src/components/events/eventContainer.module.scss
@@ -3,6 +3,7 @@
 }
 
 .eventList {
+  padding: var(--spacing-sitepadding);
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
@@ -12,9 +13,9 @@
 
 .displayOptions {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(3, 1fr);
   gap: var(--spacing-gap-column);
-  margin-bottom: var(--spacing-sitepadding);
+  padding: 0 var(--spacing-sitepadding);
 
   button {
     border-radius: 0;
@@ -30,7 +31,7 @@
     font-size: var(--font-size-h1);
     padding: 1rem var(--spacing-sitepadding);
     background: var(--color-deepBrick);
-    color: var(--color-goldenOrange);
+    color: var(--color-neufPink);
     position: sticky;
 
     &:first-letter {
@@ -82,4 +83,31 @@
       text-transform: capitalize;
     }
   }
+}
+
+@media (max-width: 1200px) {
+  .calendarWeek {
+    grid-template-columns: 1fr;
+  }
+
+  .calendarDay {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: var(--spacing-gap-column);
+    min-height: 0;
+    padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding);
+
+    &.empty {
+      display: none;
+    }
+
+    h3 {
+      grid-column: 1 / -1;
+    }
+
+    &:first-child,
+    &:last-child {
+      padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding);
+    }
+  }
 }
\ No newline at end of file
diff --git a/web/src/components/events/eventItem.module.scss b/web/src/components/events/eventItem.module.scss
index 8cf1975..c6e751d 100644
--- a/web/src/components/events/eventItem.module.scss
+++ b/web/src/components/events/eventItem.module.scss
@@ -1,6 +1,14 @@
 .eventItem {
   position: relative;
   list-style: none;
+
+  &.small {
+
+    .title,
+    .details {
+      font-size: 1rem;
+    }
+  }
 }
 
 .image {
diff --git a/web/src/components/general/pageHeader.module.scss b/web/src/components/general/pageHeader.module.scss
index 592b9dc..fa061cc 100644
--- a/web/src/components/general/pageHeader.module.scss
+++ b/web/src/components/general/pageHeader.module.scss
@@ -1,3 +1,7 @@
 .pageHeader {
   position: relative;
+}
+
+.title {
+  font-size: var(--font-size-h1);
 }
\ No newline at end of file