misc design progress and testing

web/src/components/contact/ContactInfo.tsx

@@ -0,0 +1,22 @@
+import styles from "./contactInfo.module.scss";
+
+export const ContactInfo = () => {
+  return (
+    <section className={styles.contactInfo}>
+      <ul>
+        <li className={styles.contactItem}>
+          <strong>Generelle henvendelser</strong>
+          <a href="mailto:post@neuf.no">post@neuf.no</a>
+        </li>
+        <li className={styles.contactItem}>
+          <strong>Billetter</strong>
+          <a href="mailto:billetter@neuf.no">billetter@neuf.no</a>
+        </li>
+        <li className={styles.contactItem}>
+          <strong>Hittegods</strong>
+          <a href="mailto:hittegods@neuf.no">hittegods@neuf.no</a>
+        </li>
+      </ul>
+    </section>
+  );
+};

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

@@ -0,0 +1,28 @@
+.contactInfo {
+  margin: 0 calc(var(--spacing-sitepadding)*-1);
+  padding: var(--spacing-sitepadding) var(--spacing-sitepadding) var(--spacing-section-bottom);
+  background: var(--color-background-secondary);
+
+  ul {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: var(--spacing-gap-column);
+    row-gap: var(--spacing-gap-row);
+  }
+}
+
+.contactItem {
+  list-style: none;
+
+  strong {
+    display: block;
+    font-size: var(--font-size-caption);
+  }
+
+  a {
+    display: block;
+    font-family: var(--font-serif);
+    font-size: var(--font-size-lead);
+    color: var(--color-deepBrick);
+  }
+}

web/src/components/events/EventHeader.tsx

@@ -2,22 +2,62 @@ import { EventCategory, EventFragment } from "@/lib/event";
 import styles from "./eventHeader.module.scss";
 import Image from "@/components/general/Image";
 import { Pig } from "../general/Pig";
+import Link from "next/link";
 
 export const EventHeader = ({ event }: { event: EventFragment }) => {
   return (
     <div className={styles.eventHeader}>
       <div className={styles.text}>
+        <span className="suphead breadcrumb">
+          <Link href="/arrangementer">Arrangement</Link>
+        </span>
         <h1 className={styles.title}>{event.title}</h1>
         <div className={styles.details}>
-          <div>Facebook: {event.facebookUrl}</div>
-          <div>Billettlenke: {event.ticketUrl}</div>
-          <div>Ordinær pris: {event.priceRegular}</div>
-          <div>Studentpris: {event.priceStudent}</div>
-          <div>Medlemspris: {event.priceMember}</div>
-          <div>
-            Kategorier:{" "}
-            {event.categories && event.categories.map((x) => x.name).join(", ")}
+          {event.facebookUrl && (
+            <a href={event.facebookUrl} className="button">
+              Gå til Facebook-event
+            </a>
+          )}
+          {event.ticketUrl && (
+            <a href={event.ticketUrl} className="button cta">
+              Kjøp billetter
+            </a>
+          )}
+          <div className={styles.prices}>
+            <h2>Pris</h2>
+            <ul className={styles.priceList}>
+              {!event.priceRegular &&
+                !event.priceStudent &&
+                !event.priceMember && (
+                  <li className={styles.priceItem}>
+                    <span>Gratis</span>
+                  </li>
+                )}
+              {event.priceRegular && (
+                <li className={styles.priceItem}>
+                  <span className={styles.priceLabel}>Ordinær:</span>{" "}
+                  {event.priceRegular} kr
+                </li>
+              )}
+              {event.priceStudent && (
+                <li className={styles.priceItem}>
+                  <span className={styles.priceLabel}>Student:</span>{" "}
+                  {event.priceStudent} kr
+                </li>
+              )}
+              {event.priceMember && (
+                <li className={styles.priceItem}>
+                  <span className={styles.priceLabel}>Medlem:</span>{" "}
+                  {event.priceMember} kr
+                </li>
+              )}
+            </ul>
           </div>
+          {event.categories.length > 0 && (
+            <div>
+              Kategorier: {event.categories.map((x) => x.name).join(", ")}
+            </div>
+          )}
         </div>
       </div>
       <div className={styles.image}>

web/src/components/events/UpcomingEvents.tsx

@@ -8,11 +8,13 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
     <section className={styles.upcomingWrapper}>
       <h2 className="suphead">Denne uka på Chateau Neuf</h2>
       <ul className={styles.eventList}>
-        {events.map((event) => (
+        {events.slice(0, 3).map((event) => (
           <EventItem key={event.id} event={event} mode="list" size="medium" />
         ))}
         <li>
-          <Link href="/arrangementer?mode=calendar">Vis kalender &rarr;</Link>
+          <div className={styles.calendarLink}>
+            <Link href="/arrangementer?mode=calendar">Vis kalender &rarr;</Link>
+          </div>
         </li>
       </ul>
     </section>

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

@@ -14,11 +14,16 @@
     display: grid;
     grid-template-columns: 1fr 2fr;
     column-gap: .6rem;
+    align-items: center;
 
     .title,
     .details {
       font-size: 1rem;
     }
+
+    .image {
+      padding-top: 100%;
+    }
   }
 }
 

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

@@ -1,6 +1,6 @@
 .upcomingWrapper {
   background: var(--color-deepBrick);
-  color: var(--color-betongGray);
+  color: var(--color-goldenBeige);
   margin: 0 calc(var(--spacing-sitepadding)*-1);
   padding: var(--spacing-sitepadding);
 
@@ -13,9 +13,34 @@
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   list-style: none;
+  align-items: center;
 
   li {
-    border-right: var(--border);
+    //border-right: var(--border);
     margin-right: .6rem;
+    padding-right: 1rem;
+
+    &:last-child {
+      border: none;
+    }
+
+    // testing testing
+    &:first-child {
+
+      >div:first-child {
+        border-radius: 50%;
+      }
+
+      img {
+        display: none;
+      }
+    }
   }
+}
+
+.calendarLink {
+  text-align: center;
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: var(--font-size-lead);
 }

web/src/components/layout/Header.tsx

@@ -65,7 +65,7 @@ export const Header = () => {
             </Link>
           </li>
           <li>
-            <Link href="/" data-active={pathname === "/praktisk"}>
+            <Link href="/praktisk" data-active={pathname === "/praktisk"}>
               Praktisk info
             </Link>
           </li>
@@ -99,7 +99,7 @@ export const Header = () => {
               </Link>
             </li>
             <li className={styles.menuItemLarge}>
-              <Link href="/" data-active={pathname === "/praktisk"}>
+              <Link href="/praktisk" data-active={pathname === "/praktisk"}>
                 Praktisk info
               </Link>
             </li>

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

@@ -4,6 +4,8 @@
   align-items: flex-end;
   padding: var(--spacing-sitepadding);
   background: var(--color-background-secondary);
+  position: relative;
+  z-index: 700;
 
   button {
     font-size: var(--font-size-caption);

web/src/components/people/PersonSection.tsx

@@ -5,6 +5,11 @@ export const PersonSection = ({ heading }: { heading: string }) => {
   return (
     <section className={styles.personSection}>
       <h2 className={styles.heading}>{heading}</h2>
+      <p className={styles.intro}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+        tristique rutrum nibh quis feugiat. Sed nisl ante, suscipit at justo ac,
+        elementum interdum justo. Sed sed mi sit amet nibh molestie lacinia.{" "}
+      </p>
       <PersonList />
     </section>
   );

web/src/components/people/personSection.module.scss

@@ -13,5 +13,9 @@
 }
 
 .heading {
-  margin: 2rem 0;
+  margin: 0 0 1.6rem;
+}
+
+.intro {
+  margin-bottom: 3rem;
 }