tweak upcoming design, use bgpig on event pages

web/src/app/arrangementer/[slug]/page.tsx

@@ -5,6 +5,7 @@ import { Blocks } from "@/components/blocks/Blocks";
 import Image from "@/components/general/Image";
 import { EventHeader } from "@/components/events/EventHeader";
 import { DateList } from "@/components/events/DateList";
+import { BgPig } from "@/components/general/BgPig";
 
 export async function generateStaticParams() {
   const allEventSlugsQuery = graphql(`
@@ -37,7 +38,6 @@ export default async function Page({ params }: { params: { slug: string } }) {
     }
   `);
 
-
   const { data, error } = await getClient().query(eventBySlugQuery, {
     slug: params.slug,
   });
@@ -45,6 +45,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
   const event = (data?.event ?? {}) as EventFragment;
 
   return (
+    <>
       <main className="site-main" id="main">
         <EventHeader event={event} />
         <section className="page-content">
@@ -52,5 +53,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
           <Blocks blocks={event.body} />
         </section>
       </main>
+      <BgPig type="dance" color="white" />
+    </>
   );
 }

web/src/components/events/EventHeader.tsx

@@ -5,7 +5,7 @@ import { Pig } from "../general/Pig";
 import Link from "next/link";
 
 export const EventHeader = ({ event }: { event: EventFragment }) => {
-  const featuredImage: any = event.featuredImage
+  const featuredImage: any = event.featuredImage;
 
   return (
     <div className={styles.eventHeader}>
@@ -72,9 +72,6 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
             sizes="100vw"
           />
         )}
-        <div className={styles.pig}>
-          <Pig type="student" />
-        </div>
       </div>
     </div>
   );

web/src/components/events/UpcomingEvents.tsx

@@ -6,7 +6,12 @@ import Link from "next/link";
 export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
   return (
     <section className={styles.upcomingWrapper}>
-      <h2 className="suphead">Denne uka på Chateau Neuf</h2>
+      <h2 className="circlehead">
+        <span className="circle"></span>
+        <span className="circle"></span>
+        <span className="circle"></span>
+        Denne uka på Chateau Neuf
+      </h2>
       <ul className={styles.eventList}>
         {events.slice(0, 5).map((event) => (
           <EventItem key={event.id} event={event} mode="list" size="medium" />

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

@@ -25,15 +25,3 @@
   font-family: var(--font-serif);
   font-size: var(--font-size-lead);
 }
-
-.pig {
-  position: absolute;
-  bottom: 0;
-  right: -2.5rem;
-  transform: translateY(50%);
-  color: var(--color-white);
-
-  >div {
-    width: 30vw;
-  }
-}

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

@@ -7,7 +7,7 @@
   overflow-x: hidden;
 
   h2 {
-    margin-bottom: 1rem;
+    margin-bottom: .5rem;
   }
 }
 

web/src/components/general/BgPig.tsx

@@ -15,6 +15,7 @@ import { useInView } from "react-intersection-observer";
 
 export const BgPig = ({
   type,
+  color,
 }: {
   type:
     | "logo"
@@ -28,11 +29,16 @@ export const BgPig = ({
     | "key"
     | "chill"
     | "peek";
+  color: "neufPink" | "white" | "goldenBeige";
 }) => {
   const { ref: observer, inView: IsInView } = useInView({ triggerOnce: false });
   return (
     <div className={styles.bgPigWrapper}>
-      <div className={`${styles.pig} ${styles.bgPig}`} data-inview={IsInView}>
+      <div
+        className={`${styles.pig} ${styles.bgPig}`}
+        style={{ "--color-pig": color }}
+        data-inview={IsInView}
+      >
         {type === "logo" && <LogoPig />}
         {type === "music" && <MusicPig />}
         {type === "drink" && <DrinkPig />}

web/src/components/general/pig.module.scss

@@ -7,13 +7,16 @@
   }
 }
 
+.bgPigWrapper {
+  --color-pig: var(--color-neufPink);
+}
+
 .bgPig {
   position: fixed;
   bottom: 0;
   right: 0;
   transform: translate(1vw, 20%);
-  z-index: 600;
-  --color-pig: var(--color-neufPink);
+  z-index: 1;
   transition: opacity .6s ease;
 
   &[data-inview=true] {
@@ -23,6 +26,5 @@
 
 .observer {
   position: absolute;
-  bottom: -5rem;
   right: 0;
 }

web/src/css/base.scss

@@ -91,6 +91,28 @@ h6 {
   letter-spacing: .05em;
 }
 
+.circlehead {
+  font-size: var(--font-size-caption);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+
+  .circle {
+    display: inline-block;
+    vertical-align: middle;
+    width: 1rem;
+    height: 1rem;
+    margin-bottom: .16rem;
+    margin-right: .5rem;
+    border-radius: 1rem;
+    background: var(--color-goldenOrange);
+
+    &:last-of-type {
+      margin-right: .75rem;
+    }
+  }
+}
+
 .breadcrumb {
   display: block;
   font-weight: 500;
@@ -110,7 +132,7 @@ button,
   border: none;
   padding: .5rem 1rem;
   margin: 0 0 .5rem;
-  font-family: inherit;
+  font-family: var(--font-main);
   font-size: var(--font-size-body);
   font-weight: 500;
   text-decoration: none;