design adjustments to calendar and upcoming events

web/src/app/page.tsx

@@ -40,7 +40,7 @@ export default async function Home() {
   ];
 
   return (
-    <main className="site-main" id="main">
+    <main className="site-main index" id="main">
       <div>
         <FeaturedEvents events={featuredEvents} />
         <UpcomingEvents events={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>
+      </ul>
       <div className={styles.calendarLink}>
         <Link href="/arrangementer?mode=calendar">Vis kalender &rarr;</Link>
       </div>
-        </li>
-      </ul>
     </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);
+    font-size: var(--font-size-lead);
-    padding: 1rem var(--spacing-sitepadding);
+    //padding: 1rem var(--spacing-sitepadding);
-    background: var(--color-deepBrick);
+    padding: calc(var(--spacing-gap-column)/2);
-    color: var(--color-neufPink);
+    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;
+  --size-item-width: 17rem;
-  grid-template-columns: repeat(4, 1fr);
   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));
 }

web/src/css/base.scss

@@ -35,7 +35,14 @@ body {
 }
 
 .site-main {
-  animation: fadeIn 1s ease-out forwards;
+  padding: var(--spacing-sitepadding);
+  min-height: 100vh;
+  position: relative;
+  animation: fadeUp .8s ease-out forwards;
+
+  &.index {
+    animation: fadeIn .8s ease-out forwards;
+  }
 }
 
 @keyframes fadeIn {
@@ -48,6 +55,23 @@ body {
   }
 }
 
+@keyframes fadeUp {
+  0% {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+
+  50% {
+    opacity: .5;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 a {
   color: inherit;
   text-underline-offset: .16em;
@@ -105,11 +129,13 @@ h6 {
 
 button,
 .button {
+  display: inline-block;
   border-radius: 10rem;
   background: var(--color-cta-background);
   color: var(--color-cta-text);
   border: none;
   padding: .5rem 1rem;
+  margin: 0 0 .5rem;
   font-family: inherit;
   font-size: var(--font-size-body);
   font-weight: 500;
@@ -145,12 +171,6 @@ input[type="text"] {
   transition: opacity var(--transition-easing);
 }
 
-.site-main {
-  padding: var(--spacing-sitepadding);
-  min-height: 100vh;
-  position: relative;
-}
-
 .hiddenLink {
   position: absolute;
   top: 0;