adjust footer layout

web/src/components/layout/Footer.tsx

@@ -7,9 +7,7 @@ import { LogoNeuf } from "../general/Logo";
 export const Footer = () => {
   return (
     <footer className={styles.footer}>
-      <div className={styles.contact}>
-        <ul className={styles.contactList}>
-          <li className={styles.contactItem}>
+      <div className={styles.social}>
         <h2 className="suphead">Følg oss</h2>
         <ul>
           <li>
@@ -33,24 +31,30 @@ export const Footer = () => {
             </a>
           </li>
         </ul>
-          </li>
-          <li className={styles.contactItem}>
+      </div>
+      <div className={styles.contact}>
         <h2 className="suphead">Kontakt oss</h2>
-            <p>
-              Generell kontaktinfo
+        <div className={styles.emails}>
+          <div>
+            Generelle henvendelser
             <br />
+            <a href="/#">post@neuf.no</a>
+          </div>
+          <div>
             Billetter
             <br />
-              Hittegods
-              <br />
-              Telefon/mail?
-              <br />
-              Lenke til kontakt/ansatte?
-            </p>
-          </li>
-          <li className={styles.contactItem}>
+            <a href="/#">billetter@neuf.no</a>
+          </div>
+          <div>
+            <Link href="/kontakt">Øvrig kontaktinfo</Link>
+          </div>
+        </div>
+      </div>
+      <div className={styles.visit}>
         <h2 className="suphead">Besøk oss</h2>
-            <p>
+        <div className={styles.address}>
+          <h2 className="suphead">Adresse</h2>
+          <div>
             Det Norske Studentersamfund
             <br />
             Slemdalsveien 15
@@ -60,9 +64,10 @@ export const Footer = () => {
             <a href="#" target="_blank">
               Vis i Google Maps
             </a>
-            </p>
-          </li>
-          <li className={styles.contactItem}>
+          </div>
+        </div>
+
+        <div className={styles.openingHoursWrapper}>
           <h2 className="suphead">Åpningstider i dag</h2>
           <table className="openingHours">
             <tbody>
@@ -81,13 +86,14 @@ export const Footer = () => {
             </tbody>
           </table>
           <Link href="/praktisk#apningstider">Se alle åpningstider</Link>
-          </li>
-        </ul>
+        </div>
       </div>
       <div className={styles.pig}>
         <NeonChillPig />
       </div>
+      <div className={styles.toTop}>
         <ToTop />
+      </div>
     </footer>
   );
 };

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

@@ -39,12 +39,54 @@
   }
 }
 
-.logo {
-  width: 12rem;
+.social,
+.contact,
+.visit {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
   margin-bottom: var(--spacing-section-bottom);
 
+  ul {
+    list-style: none;
+  }
+
+  h2 {
+    margin-bottom: 1rem;
+    grid-column: span 3;
+  }
+}
+
+.social {
+  ul {
+    display: flex;
+    grid-column: span 9;
+    gap: 1rem;
+  }
+}
+
+.visit {
+
+  >div,
+  >ul {
+    grid-column: span 4;
+  }
+}
+
+.address {
+  line-height: 1.78;
+}
+
+.emails {
+  grid-column: span 9;
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  gap: var(--spacing-gap-column);
+
   >div {
-    width: 100%;
+    grid-column: span 4;
+    min-width: 0;
   }
 }
 
@@ -55,3 +97,9 @@
   transform: translate(1vw, 40%);
   z-index: 800;
 }
+
+.toTop {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}