design adjustments to calendar and upcoming events

web/src/components/events/UpcomingEvents.tsx

@@ -8,15 +8,13 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
     <section className={styles.upcomingWrapper}>
       <h2 className="suphead">Denne uka på Chateau Neuf</h2>
       <ul className={styles.eventList}>
-        {events.slice(0, 3).map((event) => (
+        {events.slice(0, 5).map((event) => (
           <EventItem key={event.id} event={event} mode="list" size="medium" />
         ))}
-        <li>
-          <div className={styles.calendarLink}>
-            <Link href="/arrangementer?mode=calendar">Vis kalender &rarr;</Link>
-          </div>
-        </li>
       </ul>
+      <div className={styles.calendarLink}>
+        <Link href="/arrangementer?mode=calendar">Vis kalender &rarr;</Link>
+      </div>
     </section>
   );
 };

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

@@ -1,9 +1,9 @@
 .eventWrapper {
-  margin: calc(var(--spacing-sitepadding)*-1) calc(var(--spacing-sitepadding)*-1);
+  //margin: calc(var(--spacing-sitepadding)*-1) calc(var(--spacing-sitepadding)*-1);
 }
 
 .eventList {
-  padding: var(--spacing-sitepadding);
+  padding: var(--spacing-sitepadding) 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
@@ -15,7 +15,7 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--spacing-gap-column);
-  padding: 0 var(--spacing-sitepadding);
+  //padding: 0 var(--spacing-sitepadding);
 
   button {
     border-radius: 0;
@@ -29,11 +29,14 @@
 }
 
 .calendarYearMonth {
+  margin-top: var(--spacing-sitepadding);
+
   h2 {
-    font-size: var(--font-size-h1);
-    padding: 1rem var(--spacing-sitepadding);
-    background: var(--color-deepBrick);
-    color: var(--color-neufPink);
+    font-size: var(--font-size-lead);
+    //padding: 1rem var(--spacing-sitepadding);
+    padding: calc(var(--spacing-gap-column)/2);
+    background: var(--color-chateauBlue);
+    color: var(--color-betongGray);
     position: sticky;
 
     &:first-letter {
@@ -66,13 +69,13 @@
     background: var(--color-background);
   }
 
-  &:first-child {
+  /*&:first-child {
     padding-left: var(--spacing-sitepadding);
   }
 
   &:last-child {
     padding-right: var(--spacing-sitepadding);
-  }
+  }*/
 
   h3 {
     font-family: var(--font-serif);

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

@@ -12,9 +12,10 @@
 
   &.medium {
     display: grid;
-    grid-template-columns: 1fr 2fr;
+    grid-template-columns: 1fr auto;
     column-gap: .6rem;
     align-items: center;
+    width: var(--size-item-width);
 
     .title,
     .details {
@@ -22,6 +23,7 @@
     }
 
     .image {
+      width: 5rem;
       padding-top: 100%;
     }
   }

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

@@ -2,7 +2,9 @@
   background: var(--color-deepBrick);
   color: var(--color-goldenBeige);
   margin: 0 calc(var(--spacing-sitepadding)*-1);
-  padding: var(--spacing-sitepadding);
+  padding: 1rem var(--spacing-sitepadding);
+  position: relative;
+  overflow-x: hidden;
 
   h2 {
     margin-bottom: 1rem;
@@ -10,37 +12,26 @@
 }
 
 .eventList {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  --size-item-width: 17rem;
   list-style: none;
-  align-items: center;
+  display: flex;
+  width: calc(var(--size-item-width) * 5);
 
   li {
-    //border-right: var(--border);
-    margin-right: .6rem;
     padding-right: 1rem;
-
-    &:last-child {
-      border: none;
-    }
-
-    // testing testing
-    &:first-child {
-
-      >div:first-child {
-        border-radius: 50%;
-      }
-
-      img {
-        display: none;
-      }
-    }
   }
 }
 
 .calendarLink {
-  text-align: center;
+  padding: 1rem var(--spacing-sitepadding);
+  text-align: right;
   font-family: var(--font-serif);
   font-style: italic;
   font-size: var(--font-size-lead);
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 40%;
+  background: linear-gradient(90deg, transparent, var(--color-deepBrick));
 }