mess around with footer + misc adjustments on event header and venue item

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

@@ -33,4 +33,10 @@
 .label {
   font-weight: 600;
   width: 7rem;
+}
+
+@media (max-width: 800px) {
+  .content {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }

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

@@ -37,4 +37,8 @@
   .eventHeader {
     grid-template-columns: 1fr;
   }
+
+  .categories {
+    margin: var(--spacing-s) 0 0;
+  }
 }

web/src/components/layout/Footer.tsx

@@ -39,7 +39,7 @@ export const Footer = () => {
     <>
     <footer className={styles.footer}>
       <div className={styles.social}>
-        <h2 className="suphead">Følg oss</h2>
+        <h2>Følg oss</h2>
         <ul>
           <li>
             <a
@@ -74,7 +74,7 @@ export const Footer = () => {
         </ul>
       </div>
       <div className={styles.contact}>
-        <h2 className="suphead">Kontakt oss</h2>
+        <h2>Kontakt oss</h2>
         <div className={styles.emails}>
           <div>
             Generelle henvendelser
@@ -91,14 +91,14 @@ export const Footer = () => {
             </a>
           </div>
           <div>
-            <Link href="/kontakt">Øvrig kontaktinfo</Link>
+            <Link href="/kontakt">Øvrig kontaktinfo&nbsp;<Icon type="arrowRight" /></Link>
           </div>
         </div>
       </div>
       <div className={styles.visit}>
-        <h2 className="suphead">Besøk oss</h2>
+        <h2>Besøk oss</h2>
         <div className={styles.address}>
-          <h2 className="suphead">Adresse</h2>
+          <h3 className="suphead">Adresse</h3>
           <div>
             Chateau Neuf
             <br />
@@ -107,26 +107,26 @@ export const Footer = () => {
             0369 Oslo
             <br />
             <a href="#" target="_blank">
-              Vis i Google Maps
+              Vis i Google Maps&nbsp;<Icon type="externalLink" />
             </a>
           </div>
         </div>
 
         <div className={styles.openingHoursWrapper}>
-          <h2 className="suphead">Åpningstider i dag</h2>
+          <h3 className="suphead">Åpningstider i dag</h3>
           <OpeningHoursTable />
-          <Link href="/praktisk#apningstider">Se alle åpningstider</Link>
+          <Link href="/praktisk#apningstider">Se alle åpningstider&nbsp;<Icon type="arrowRight" /></Link>
         </div>
       </div>
       <div className={styles.pig}>
         <NeonChillPig />
       </div>
+    </footer>
+    <div className={styles.pigPattern}>
       <div className={styles.toTop}>
         <ToTop />
       </div>
-    </footer>
-    <div className={styles.pigPattern}>
-      </div>
-      </>
+    </div>
+  </>
   );
 };

web/src/components/layout/ToTop.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { useInView } from "react-intersection-observer";
+import Icon from "../general/Icon";
 
 export const ToTop = () => {
   const scrollToTop = () => {
@@ -8,5 +9,8 @@ export const ToTop = () => {
       behavior: "smooth",
     });
   };
-  return <button onClick={scrollToTop}>Til toppen</button>;
+  return <button onClick={scrollToTop}>
+    Til toppen
+    <Icon type="arrowUp" />
+  </button>;
 };

web/src/components/layout/footer.module.scss

@@ -6,6 +6,16 @@
   z-index: 700;
   font-size: var(--font-size-caption);
   overflow: hidden;
+
+  h2 {
+    font-family: var(--font-serif);
+    font-weight: 400;
+    font-size: var(--font-size-h3);
+  }
+
+  h3 {
+    margin-bottom: 1em;
+  }
 }
 
 .contactList {
@@ -20,10 +30,6 @@
   list-style: none;
   grid-column: span 4;
 
-  h2 {
-    margin-bottom: 1em;
-  }
-
   ul {
     list-style: none;
   }
@@ -90,8 +96,7 @@
 }
 
 .emailLink {
-  font-family: var(--font-serif);
-  font-size: var(--font-size-lead);
+  font-size: var(--font-size-caption);
 }
 
 .pig {

web/src/components/venues/VenueItem.tsx

@@ -22,13 +22,11 @@ export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
       <div className={styles.text}>
         <h1 className={styles.title}>{venue.title}</h1>
         <div className={styles.details}>
-          Egner seg for:
-          <br />
-          <span className={styles.people}>50—115 personer</span>
-          <br />
-          <span className={styles.uses}>
-            Konsert, foredrag, fest, debatt, teater, filmvisning
-          </span>
+          <strong>Passer for:</strong>
+          <ul>
+            <li>50—115 personer</li>
+            <li>Konsert, foredrag, fest, debatt, teater, filmvisning</li>
+          </ul>
         </div>
       </div>
       <Link href={`/lokaler/${venue.slug}`} className="hiddenLink">

web/src/components/venues/venueItem.module.scss

@@ -22,11 +22,22 @@
   padding: .8rem 0;
 }
 
-.title,
-.details {
+.title {
   font-size: 1.6rem;
 }
 
 .details {
   font-family: var(--font-serif);
+  font-size: var(--font-size-caption);
+  border-top: var(--border);
+  margin-top: var(--spacing-xs);
+  padding-top: .4rem;
+
+  strong {
+    font-family: var(--font-main);
+  }
+
+  ul {
+    margin: .2rem 0 0 .7rem;
+  }
 }