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

web/src/components/blocks/imageSliderBlock.module.scss

@@ -3,7 +3,7 @@
   padding-top: 56%;
   background: var(--color-black);
   color: var(--color-goldenBeige);
-  margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepaddign-inline)*-1);
+  margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepadding-inline)*-1);
 
   figure {
     width: 100%;

web/src/components/blocks/pageSection.module.scss

@@ -1,8 +1,12 @@
 .pageSection {
-  margin: 5rem auto;
-  padding: 2rem 0;
+  margin: var(--spacing-m) auto;
+  padding: var(--spacing-m) 0;
   border-top: var(--border-s);
 
+  &:nth-of-type(1) {
+    margin-top: var(--spacing-l);
+  }
+
   &:nth-of-type(3n+1) {
     .icon {
       background: var(--color-neufPink);
@@ -23,12 +27,15 @@
 }
 
 .sectionHeader {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
   align-items: center;
   gap: 1.6rem;
+  margin-bottom: var(--spacing-section-bottom);
 
-  h1 {
+  h2 {
     font-size: var(--font-size-h2);
+    grid-column: span 11;
   }
 }
 

web/src/components/blocks/richTextBlock.module.scss

@@ -1,5 +1,25 @@
 .richTextBlock {
   padding-bottom: var(--spacing-section-bottom);
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  column-gap: var(--spacing-gap-column);
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  ul,
+  ol,
+  blockquote {
+    grid-column: 2 / span 10;
+
+    @media (max-width: 1200px) {
+      grid-column: 1 / -1;
+    }
+  }
 
   h1,
   h2,
@@ -7,7 +27,7 @@
   h4,
   h5,
   h6 {
-    margin: var(--spacing-m) auto var(--spacing-s);
+    margin: var(--spacing-m) 0 var(--spacing-s);
     max-width: var(--size-width-p);
   }
 
@@ -18,14 +38,14 @@
   }
 
   p {
-    margin: 0 auto 1.4em;
+    margin: 0 0 1.4em;
     font-size: var(--font-size-body);
     max-width: var(--size-width-p);
   }
 
   ul,
   ol {
-    margin: 1em auto 2em;
+    margin: 1em 0 2em;
     font-size: var(--font-size-body);
     max-width: var(--size-width-p);
     list-style: none;
@@ -80,7 +100,7 @@
     font-size: 2.8rem;
     font-style: italic;
     max-width: calc(var(--size-width-p) * 1.4);
-    margin: 2rem auto 3.2rem;
+    margin: 2rem 0 3.2rem;
     text-align: center;
   }
 
@@ -118,7 +138,7 @@
   }
 
   hr {
-    margin: 2rem auto;
+    margin: 2rem 0;
     max-width: var(--size-width-p);
     border: none;
     height: 1px;

web/src/components/blocks/swiper.scss

@@ -11,13 +11,15 @@
     content: "";
     display: block;
     position: absolute;
-    width: 3rem;
-    height: 3rem;
+    width: var(--size-icon-circle);
+    height: var(--size-icon-circle);
     background-size: 100%;
   }
 }
 
 .swiper-button-next {
+  right: 0;
+
   &:before {
     background-image: url("/assets/icons/circle-arrow-right.svg");
     right: var(--spacing-sitepadding-inline);
@@ -30,6 +32,8 @@
 }
 
 .swiper-button-prev {
+  left: 0;
+
   &:before {
     background-image: url("/assets/icons/circle-arrow-left.svg");
     left: var(--spacing-sitepadding-inline);

web/src/components/contact/contactInfo.module.scss

@@ -1,5 +1,5 @@
 .contactInfo {
-  margin: 0 calc(var(--spacing-sitepadding)*-1);
+  margin: 0 calc(var(--spacing-sitepadding-inline)*-1);
   padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline) var(--spacing-section-bottom);
   background: var(--color-background-secondary);
 

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;
+  }
+}

web/src/components/general/PageHeader.tsx

@@ -11,7 +11,7 @@ export const PageHeader = ({
     <div className={styles.pageHeader}>
       <h1 className={styles.title}>{heading}</h1>
       {lead && (
-        <p className="lead" dangerouslySetInnerHTML={{ __html: lead }} />
+        <div className="lead" dangerouslySetInnerHTML={{ __html: lead }} />
       )}
     </div>
   );

web/src/components/news/newsItem.module.scss

@@ -25,6 +25,7 @@
 .date {
   font-family: var(--font-serif);
   font-size: var(--font-size-caption);
+  color: var(--color-chateauBlue-05);
 }
 
 .title {

web/src/components/news/newsList.module.scss

@@ -1,10 +1,6 @@
 .newsWrapper {
   margin: 0 calc(var(--spacing-sitepadding-inline)*-1);
   padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
-
-  h2 {
-    margin-bottom: var(--spacing-s);
-  }
 }
 
 .newsList {