tweak upcoming design, use bgpig on event pages

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

@@ -24,16 +24,4 @@
 .details {
   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;
 }