misc design progress, more variables, news and event lists, remove old date list, etc

web/src/components/events/DateListOld.tsx

@@ -1,47 +0,0 @@
-import styles from "./dateListOld.module.scss";
-
-export const DateListOld = () => {
-  return (
-    <div className={styles.dateWrapper}>
-      <h2 className="suphead">Kommende datoer (4)</h2>
-      <ul className={styles.dateList}>
-        <li className={styles.date}>
-          <div className={styles.time}>
-            <span>27/05/2024</span>&nbsp;
-            <span>18.00</span>
-          </div>
-          <div className={styles.venue}>
-            <span>Storsalen</span>
-          </div>
-        </li>
-        <li className={styles.date}>
-          <div className={styles.time}>
-            <span>Mandag 27. mai 2024</span>&nbsp;
-            <span>kl. 18.00</span>
-            <div className={styles.venue}>
-              <span>i Storsalen</span>
-            </div>
-          </div>
-        </li>
-        <li className={styles.date}>
-          <div className={styles.time}>
-            <span>27. mai 2024</span>&nbsp;
-            <span>kl. 18.00</span>
-          </div>
-          <div className={styles.venue}>
-            <span>Storsalen</span>
-          </div>
-        </li>
-        <li className={styles.date}>
-          <div className={styles.venue}>
-            <span>Storsalen</span>
-          </div>
-          <div className={styles.time}>
-            <span>27.05.2024</span>&nbsp;
-            <span>18.00</span>
-          </div>
-        </li>
-      </ul>
-    </div>
-  );
-};

web/src/components/events/EventHeader.tsx

@@ -3,6 +3,7 @@ import styles from "./eventHeader.module.scss";
 import Image from "@/components/general/Image";
 import Link from "next/link";
 import { OrganizerList } from "./OrganizerList";
+import Icon from "../general/Icon";
 
 function formatPrice(price: number): string {
   if (price === null) {
@@ -26,7 +27,6 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
         </span>
         <h1 className={styles.title}>{event.title}</h1>
         <div className={styles.details}>
-          <p>Vise neste dato her?</p>
           <div className={styles.prices}>
             {/*<h2>Pris</h2>*/}
             <ul className={styles.priceList}>
@@ -57,7 +57,8 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
           </div>
           {event.ticketUrl && (
             <a href={event.ticketUrl} className="button cta">
-              Kjøp billetter
+              <span>Kjøp billetter</span>
+              <Icon />
             </a>
           )}
           {event.facebookUrl && (

web/src/components/events/OrganizerList.tsx

@@ -8,7 +8,7 @@ import Link from "next/link";
 
 export const OrganizerList = ({ event }: { event: EventFragment }) => {
   return (
-    <div>
+    <div className={styles.organizerList}>
       <h2>Arrangeres av</h2>
       <ul>
         {event.organizers.map((organizer) => {

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

@@ -1,38 +0,0 @@
-.dateList {
-  list-style: none;
-  background: var(--color-background-secondary);
-  margin: var(--spacing-s) calc(var(--spacing-sitepadding-inline)*-1);
-  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
-  display: flex;
-  gap: var(--spacing-gap-column);
-}
-
-.date {
-  font-family: var(--font-serif);
-  font-size: var(--font-size-lead);
-  margin-bottom: var(--spacing-s);
-  padding-left: 4rem;
-  position: relative;
-  min-height: 3.2rem;
-  line-height: 1.2;
-
-  &:before {
-    content: "";
-    display: block;
-    width: 3.2rem;
-    height: 3.2rem;
-    border-radius: 100%;
-    background: var(--color-goldenBeige);
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-}
-
-.time {
-  width: 100%;
-}
-
-.venue {
-  font-style: italic;
-}

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

@@ -34,36 +34,13 @@
 
 .priceList {
   list-style: none;
-  display: flex;
 }
 
 .priceItem {
-  font-family: var(--font-serif);
   font-size: var(--font-size-caption);
   position: relative;
-  padding: 0 1.5rem 0 var(--spacing-s);
-
-  &:after {
-    content: "/";
-    font-family: var(--font-serif);
-    font-size: 2rem;
-    position: absolute;
-    top: 0;
-    right: 0;
-    line-height: 1.2;
-  }
-
-  &:first-child {
-    padding-left: 0;
-  }
-
-  &:last-child {
-    &:after {
-      display: none;
-    }
-  }
 }
 
 .priceLabel {
-  display: block;
+  font-weight: 600;
 }

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

@@ -55,17 +55,16 @@
   &.large {
     align-content: start;
 
-    .time {
-      order: 1;
-
-    }
-
     .image {
-      order: 2;
+      order: 1;
       margin-bottom: var(--spacing-xs);
     }
 
     .text {
+      order: 2;
+    }
+
+    .time {
       order: 3;
     }
   }
@@ -86,11 +85,12 @@
 }
 
 .title {
-  font-size: var(--font-size-h2);
+  font-size: var(--font-size-h3);
 }
 
 .details {
   font-size: var(--font-size-lead);
+  margin-bottom: var(--spacing-xs);
 }
 
 .dates,
@@ -107,14 +107,16 @@
   font-size: var(--font-size-body);
   width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
+  gap: .2rem;
 }
 
-.datePill, .moreDates {
+.datePill,
+.moreDates {
   display: inline-block;
-  background: var(--color-background-secondary);
-  color: var(--color-chateauBlue);
+  background: var(--color-goldenBeige);
+  color: var(--color-deepBrick);
   border-radius: 2rem;
   padding: 0 .4rem;
   font-size: var(--font-size-xs);

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

@@ -3,5 +3,11 @@
   grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
   row-gap: var(--spacing-gap-row);
-  padding-bottom: var(--spacing-section-bottom);
+  padding-bottom: calc(var(--spacing-section-bottom)*2);
+}
+
+@media (max-width: 900px) {
+  .eventList {
+    grid-template-columns: 1fr;
+  }
 }

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

@@ -0,0 +1,10 @@
+.organizerList {
+  h2 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  ul {
+    list-style: none;
+  }
+}