From f22b110bf0674d6a349a1100e39a98c81cc1745f Mon Sep 17 00:00:00 2001 From: elisejakob Date: Thu, 23 May 2024 00:00:33 +0200 Subject: [PATCH] tweak upcoming design, use bgpig on event pages --- web/src/app/arrangementer/[slug]/page.tsx | 19 ++++++++------- web/src/components/events/EventHeader.tsx | 5 +--- web/src/components/events/UpcomingEvents.tsx | 7 +++++- .../components/events/eventHeader.module.scss | 12 ---------- .../events/upcomingEvents.module.scss | 2 +- web/src/components/general/BgPig.tsx | 8 ++++++- web/src/components/general/pig.module.scss | 8 ++++--- web/src/css/base.scss | 24 ++++++++++++++++++- 8 files changed, 54 insertions(+), 31 deletions(-) diff --git a/web/src/app/arrangementer/[slug]/page.tsx b/web/src/app/arrangementer/[slug]/page.tsx index fecbf81..c659b1d 100644 --- a/web/src/app/arrangementer/[slug]/page.tsx +++ b/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,12 +45,15 @@ export default async function Page({ params }: { params: { slug: string } }) { const event = (data?.event ?? {}) as EventFragment; return ( -
- -
- - -
-
+ <> +
+ +
+ + +
+
+ + ); } diff --git a/web/src/components/events/EventHeader.tsx b/web/src/components/events/EventHeader.tsx index 9dcae39..a97c3c3 100644 --- a/web/src/components/events/EventHeader.tsx +++ b/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 (
@@ -72,9 +72,6 @@ export const EventHeader = ({ event }: { event: EventFragment }) => { sizes="100vw" /> )} -
- -
); diff --git a/web/src/components/events/UpcomingEvents.tsx b/web/src/components/events/UpcomingEvents.tsx index 35eb2e1..be2fc27 100644 --- a/web/src/components/events/UpcomingEvents.tsx +++ b/web/src/components/events/UpcomingEvents.tsx @@ -6,7 +6,12 @@ import Link from "next/link"; export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => { return (
-

Denne uka på Chateau Neuf

+

+ + + + Denne uka på Chateau Neuf +

    {events.slice(0, 5).map((event) => ( diff --git a/web/src/components/events/eventHeader.module.scss b/web/src/components/events/eventHeader.module.scss index 34897dc..fa0d3d3 100644 --- a/web/src/components/events/eventHeader.module.scss +++ b/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; - } } \ No newline at end of file diff --git a/web/src/components/events/upcomingEvents.module.scss b/web/src/components/events/upcomingEvents.module.scss index 01e4317..b19062c 100644 --- a/web/src/components/events/upcomingEvents.module.scss +++ b/web/src/components/events/upcomingEvents.module.scss @@ -7,7 +7,7 @@ overflow-x: hidden; h2 { - margin-bottom: 1rem; + margin-bottom: .5rem; } } diff --git a/web/src/components/general/BgPig.tsx b/web/src/components/general/BgPig.tsx index e59b1dc..47cc9ad 100644 --- a/web/src/components/general/BgPig.tsx +++ b/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 (
    -
    +
    {type === "logo" && } {type === "music" && } {type === "drink" && } diff --git a/web/src/components/general/pig.module.scss b/web/src/components/general/pig.module.scss index 76b871e..6137f22 100644 --- a/web/src/components/general/pig.module.scss +++ b/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; } \ No newline at end of file diff --git a/web/src/css/base.scss b/web/src/css/base.scss index cc8354c..24454c2 100644 --- a/web/src/css/base.scss +++ b/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;