misc design progress and testing

web/src/app/kontakt/page.tsx

@@ -5,6 +5,7 @@ import { NewsList } from "@/components/news/NewsList";
 import Link from "next/link";
 import { PageHeader } from "@/components/general/PageHeader";
 import { PersonSection } from "@/components/people/PersonSection";
+import { ContactInfo } from "@/components/contact/ContactInfo";
 
 export default async function Page() {
   return (
@@ -13,6 +14,7 @@ export default async function Page() {
         heading="Kontakt"
         lead="Her er info om hvordan du kan kontakte oss og sånt."
       />
+      <ContactInfo />
       <PersonSection heading="Styret" />
       <PersonSection heading="Administrasjonen" />
     </main>

web/src/app/praktisk/page.tsx

@@ -0,0 +1,30 @@
+import { graphql } from "@/gql";
+//import { NewsFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
+import Link from "next/link";
+import { PageHeader } from "@/components/general/PageHeader";
+import { IconListBlock } from "@/components/blocks/IconListBlock";
+
+export default async function Page() {
+  return (
+    <main className="site-main" id="main">
+      <PageHeader heading="Praktisk info" />
+      <p>Velkommen til oss!</p>
+      <div className="anchorLinks">
+        Hopp til:
+        <ul>
+          <li>
+            <button>Åpningstider</button>
+          </li>
+          <li>
+            <button>Adresse</button>
+          </li>
+          <li>
+            <button>Billetter</button>
+          </li>
+        </ul>
+      </div>
+      <IconListBlock />
+    </main>
+  );
+}

web/src/app/utleie/page.tsx

@@ -4,6 +4,7 @@ import { getClient } from "@/app/client";
 import { VenueList } from "@/components/venues/VenueList";
 import Link from "next/link";
 import { PageHeader } from "@/components/general/PageHeader";
+import { Pig } from "@/components/general/Pig";
 
 const VenueFragmentDefinition = graphql(`
   fragment Venue on VenuePage {
@@ -55,6 +56,9 @@ export default async function Page() {
     <main className="site-main" id="main">
       <PageHeader heading="Utleie" />
       <VenueList venues={venues} />
+      <div className="bg-pig">
+        <Pig type="key" />
+      </div>
     </main>
   );
 }

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>
+          {event.facebookUrl && (
-          <div>Billettlenke: {event.ticketUrl}</div>
+            <a href={event.facebookUrl} className="button">
-          <div>Ordinær pris: {event.priceRegular}</div>
+              Gå til Facebook-event
-          <div>Studentpris: {event.priceStudent}</div>
+            </a>
-          <div>Medlemspris: {event.priceMember}</div>
+          )}
-          <div>
+          {event.ticketUrl && (
-            Kategorier:{" "}
+            <a href={event.ticketUrl} className="button cta">
-            {event.categories && event.categories.map((x) => x.name).join(", ")}
+              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>
+          <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;
 }

web/src/css/base.scss

@@ -50,11 +50,18 @@ body {
 
 a {
   color: inherit;
-  text-underline-offset: .1rem;
+  text-underline-offset: .16em;
+  text-decoration-thickness: .05em;
+  transition: opacity var(--transition-easing);
+
+  &:hover {
+    opacity: .6;
+  }
 }
 
 p {
   font-size: var(--font-size-body);
+  max-width: 36em;
 
   &.lead {
     font-size: var(--font-size-lead);
@@ -86,6 +93,16 @@ h6 {
   letter-spacing: .05em;
 }
 
+.breadcrumb {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 1rem;
+
+  a {
+    text-decoration: none;
+  }
+}
+
 button,
 .button {
   border-radius: 10rem;
@@ -96,12 +113,17 @@ button,
   font-family: inherit;
   font-size: var(--font-size-body);
   font-weight: 500;
+  text-decoration: none;
   transition: opacity var(--transition-easing);
   cursor: pointer;
 
   &:hover {
     opacity: .8;
   }
+
+  a {
+    text-decoration: none;
+  }
 }
 
 blockquote {
@@ -125,6 +147,7 @@ input[type="text"] {
 
 .site-main {
   padding: var(--spacing-sitepadding);
+  min-height: 100vh;
 }
 
 .hiddenLink {
@@ -152,3 +175,11 @@ input[type="text"] {
     box-shadow: 0 0 0 1px var(--color-background), 0 0 0 3px var(--color-green-dark);
   }
 }
+
+.bg-pig {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 600;
+  --color-pig: var(--color-neufPink);
+}

web/src/css/variables.scss

@@ -36,7 +36,7 @@
   --spacing-sitepadding: 2rem;
   --spacing-gap-column: 2rem;
   --spacing-gap-row: 1.5rem;
-  --spacing-section-bottom: 5rem;
+  --spacing-section-bottom: 3rem;
 
   // animations
   --transition-easing: .3s ease;