add more practical info content, opening hours + some association sketching

web/src/app/praktisk/page.tsx

@@ -19,17 +19,17 @@ export default async function Page() {
         <span className="circlehead">Hopp til:</span>
         <ul>
           <li>
-            <a href="#" className="button">
+            <a href="#adresse-og-adkomst" className="button">
-              Adkomst
+              Adresse og adkomst
             </a>
           </li>
           <li>
-            <a href="#" className="button">
+            <a href="#apningstider" className="button">
               Åpningstider
             </a>
           </li>
           <li>
-            <a href="#" className="button">
+            <a href="#billetter" className="button">
               Billetter
             </a>
           </li>
@@ -60,6 +60,93 @@ export default async function Page() {
           </li>
         </ul>
       </div>
+      <section className="pageSection" id="adresse-og-adkomst">
+        <h1>Adresse og adkomst</h1>
+        <div className="pageSectionGroup">
+          <h2>Adresse</h2>
+          <p>
+            Chateau Neuf
+            <br />
+            Slemdalsveien
+            <br />
+            15 0369 Oslo
+          </p>
+          <a href="#">Åpne i Google Maps &rarr;</a>
+          <div className="iframe-wrap">
+            <iframe
+              loading="lazy"
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3997.986159638909!2d10.708115532212085!3d59.932257000000334!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46416ddb5278789f%3A0xadda2b97f9d1cad6!2sChateau+Neuf+-+The+Norwegian+Students'+Society!5e0!3m2!1sen!2sno!4v1554374857442!5m2!1sen!2sno"
+              allowfullscreen="allowfullscreen"
+              width="600"
+              height="450"
+              frameborder="0"
+            ></iframe>
+          </div>
+        </div>
+        <div className="pageSectionGroup">
+          <h2>Adkomst</h2>
+          <p>Skal vi si noe kort om hvordan du enklest kommer deg til Neuf?</p>
+          <h3>Kollektivt</h3>
+          <h3>Parkering</h3>
+        </div>
+      </section>
+      <section className="pageSection" id="apningstider">
+        <h1>Åpningstider</h1>
+        <div className="openingHoursGroup">
+          <h2>Serveringssteder</h2>
+          <div className="openingHoursItem">
+            <h3>Glassbaren (1. etasje)</h3>
+            <table className="openingHours">
+              <tr>
+                <td>Man—Tor</td>
+                <td>15:00—00:30</td>
+              </tr>
+              <tr>
+                <td>Fre</td>
+                <td>15:00—02:30</td>
+              </tr>
+              <tr>
+                <td>Lør—Søn</td>
+                <td>Åpent ved arrangement</td>
+              </tr>
+            </table>
+          </div>
+          <div className="openingHoursItem">
+            <h3>Bokcaféen (2. etasje)</h3>
+            <table className="openingHours">
+              <tr>
+                <td>Tir—Tor</td>
+                <td>19:00—23:30</td>
+              </tr>
+              <tr>
+                <td>Fre</td>
+                <td>19:00—01:30</td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <div className="openingHoursGroup">
+          <h2>Ekspedisjonen</h2>
+          <div className="openingHoursItem">
+            <h3>Slottsmester og telefon</h3>
+            <table className="openingHours">
+              <tr>
+                <td>Man—Fre</td>
+                <td>15:00—00:00</td>
+              </tr>
+              <tr>
+                <td>Lør</td>
+                <td>14:00—00:00</td>
+              </tr>
+            </table>
+            <p>Ekspedisjonen er også åpen under arrangementer på huset.</p>
+            <Link href="/kontakt">Se kontaktinfo til ekspedisjonen &rarr;</Link>
+          </div>
+        </div>
+      </section>
+      <section className="pageSectionAlt" id="billetter">
+        <h1>Billetter</h1>
+      </section>
       <IconListBlock />
     </main>
   );

web/src/components/associations/associationItem.module.scss

@@ -1,12 +1,18 @@
-.venueItem {
+.associationItem {
   position: relative;
   list-style: none;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  align-items: flex-start;
+  gap: 1rem;
+  background: var(--color-white);
+  color: var(--color-black);
+  padding: 1rem;
 }
 
 .image {
   width: 100%;
-  padding-top: 60%;
+  padding-top: 100%;
-  background: var(--color-placeholder);
   position: relative;
 
   img {
@@ -14,19 +20,21 @@
     top: 0;
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: contain;
   }
 }
 
 .text {
-  padding: .8rem 0;
+  padding: 0;
 }
 
-.excerpt {}
+.title {
+  font-size: 1.2rem;
+  margin-bottom: 1rem;
+}
 
-.title,
+.excerpt {
-.details {
+  font-size: var(--font-size-caption);
-  font-size: 1.6rem;
 }
 
 .details {

web/src/components/associations/associationList.module.scss

@@ -1,6 +1,6 @@
 .associationList {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
   row-gap: var(--spacing-gap-row);
   padding-bottom: var(--spacing-section-bottom);

web/src/components/layout/Footer.tsx

@@ -62,14 +62,22 @@ export const Footer = () => {
             </p>
           </li>
           <li className={styles.contactItem}>
-            <h2 className="suphead">Åpningstider</h2>
+            <h2 className="suphead">Åpningstider i dag</h2>
-            <p>
+            <table className="openingHours">
-              Glassbaren
+              <tr>
-              <br />
+                <td>Glassbaren</td>
-              Andre lokaler?
+                <td>15:00—00:30</td>
-              <br />
+              </tr>
-              Generelle åpningstider?
+              <tr>
-            </p>
+                <td>Bokcaféen</td>
+                <td>19:00—23:30</td>
+              </tr>
+              <tr>
+                <td>Ekspedisjonen</td>
+                <td>15:00—00:00</td>
+              </tr>
+            </table>
+            <Link href="/praktisk#apningstider">Se alle åpningstider</Link>
           </li>
         </ul>
       </div>

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

@@ -25,7 +25,7 @@
 
 .contactItem {
   list-style: none;
-  grid-column: span 3;
+  grid-column: span 4;
 
   h2 {
     margin-bottom: 1em;
@@ -36,7 +36,9 @@
   }
 
   ul,
-  p {
+  p,
+  table,
+  a {
     font-size: var(--font-size-caption);
   }
 }

web/src/css/base.scss

@@ -193,8 +193,8 @@ input[type="text"] {
 }
 
 .anchorLinks {
-  position: sticky;
+  /*position: sticky;
-  top: 0;
+  top: 0;*/
 
   >span {
     display: block;
@@ -213,4 +213,70 @@ input[type="text"] {
     background: var(--color-goldenBeige);
     color: var(--color-deepBrick);
   }
+}
+
+.pageSection {
+  background: var(--color-neufPink);
+  margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
+  padding: var(--spacing-sitepadding) var(--spacing-sitepadding) var(--spacing-section-bottom);
+
+  +.pageSection {
+    margin-top: calc(var(--spacing-sitepadding)*-2);
+  }
+
+  &:nth-of-type(even) {
+    background: var(--color-goldenBeige);
+    color: var(--color-)
+  }
+
+  h1 {
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    margin-bottom: 4rem;
+
+    &:before {
+      content: "";
+      display: inline-block;
+      background: currentColor;
+      border-radius: 1em;
+      height: 1em;
+      width: 1em;
+      vertical-align: middle;
+      margin-bottom: .2em;
+      margin-right: 1em;
+    }
+  }
+
+  h2 {
+    margin-bottom: 1rem;
+  }
+
+  h3 {
+    margin: 1rem 0;
+  }
+}
+
+.openingHours {
+  width: 100%;
+  max-width: 20em;
+  font-size: inherit;
+
+  td {
+    width: 50%;
+    vertical-align: top;
+    line-height: 1.2;
+    padding: .25em 0;
+
+    &:first-child {
+      padding-right: 1rem;
+    }
+  }
+}
+
+.openingHoursItem {
+  display: inline-block;
+  width: 50%;
+  vertical-align: top;
+  margin-bottom: var(--spacing-section-bottom);
 }