diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx index e89e840..ed965aa 100644 --- a/web/src/app/page.tsx +++ b/web/src/app/page.tsx @@ -10,6 +10,7 @@ import { Pig } from "@/components/general/Pig"; import Link from "next/link"; import { Icon } from "@/components/general/Icon"; import { SectionHeader } from "@/components/general/SectionHeader"; +import { SectionFooter } from "@/components/general/SectionFooter"; const HomeFragmentDefinition = graphql(` fragment Home on HomePage { @@ -61,7 +62,7 @@ export default async function Home() {
- +

Skal du besøke Chateau Neuf?

@@ -84,6 +85,7 @@ export default async function Home() {

+
diff --git a/web/src/components/events/FeaturedEvents.tsx b/web/src/components/events/FeaturedEvents.tsx index aa16500..3524a4b 100644 --- a/web/src/components/events/FeaturedEvents.tsx +++ b/web/src/components/events/FeaturedEvents.tsx @@ -2,16 +2,18 @@ import { EventFragment } from "@/gql/graphql"; import { EventItem } from "./EventItem"; import styles from "./featuredEvents.module.scss"; import { SectionHeader } from "../general/SectionHeader"; +import { SectionFooter } from "../general/SectionFooter"; export const FeaturedEvents = ({ events }: { events: EventFragment[] }) => { return ( -
+
    {events.slice(0, 3).map((event) => ( ))}
+
); }; diff --git a/web/src/components/events/UpcomingEvents.tsx b/web/src/components/events/UpcomingEvents.tsx index c1c26c0..7cda288 100644 --- a/web/src/components/events/UpcomingEvents.tsx +++ b/web/src/components/events/UpcomingEvents.tsx @@ -10,6 +10,7 @@ import Link from "next/link"; import { EventItem } from "./EventItem"; import styles from "./upcomingEvents.module.scss"; import { SectionHeader } from "../general/SectionHeader"; +import { SectionFooter } from "../general/SectionFooter"; export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => { const upcomingSingularEvents = sortSingularEvents( @@ -50,6 +51,7 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => { })}
+ ); }; diff --git a/web/src/components/events/featuredEvents.module.scss b/web/src/components/events/featuredEvents.module.scss index f779d08..6f2bdd2 100644 --- a/web/src/components/events/featuredEvents.module.scss +++ b/web/src/components/events/featuredEvents.module.scss @@ -1,9 +1,12 @@ +.featuredEvents { + padding-bottom: var(--spacing-section-bottom); +} + .eventList { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--spacing-gap-column); row-gap: var(--spacing-gap-row); - padding-bottom: var(--spacing-section-bottom); } @media (max-width: 900px) { diff --git a/web/src/components/events/upcomingEvents.module.scss b/web/src/components/events/upcomingEvents.module.scss index 8d09e97..3d21409 100644 --- a/web/src/components/events/upcomingEvents.module.scss +++ b/web/src/components/events/upcomingEvents.module.scss @@ -6,11 +6,15 @@ position: relative; overflow-x: hidden; - header { + header, footer { position: relative; z-index: 10; } + footer, footer a { + margin-top: 0; + } + h2 { margin-bottom: var(--spacing-xs); } @@ -52,4 +56,10 @@ ul { display: flex; } +} + +@media (max-width: 800px) { + .upcomingContent { + margin-top: var(--spacing-s); + } } \ No newline at end of file diff --git a/web/src/components/general/SectionFooter.tsx b/web/src/components/general/SectionFooter.tsx new file mode 100644 index 0000000..cadcd10 --- /dev/null +++ b/web/src/components/general/SectionFooter.tsx @@ -0,0 +1,10 @@ +import Link from "next/link"; +import styles from "./sectionFooter.module.scss"; + +export const SectionFooter = ({ link, linkText }: { link: string, linkText: string }) => { + return ( +
+ {link && linkText && {linkText}} +
+ ); +}; diff --git a/web/src/components/general/sectionFooter.module.scss b/web/src/components/general/sectionFooter.module.scss new file mode 100644 index 0000000..bb3044c --- /dev/null +++ b/web/src/components/general/sectionFooter.module.scss @@ -0,0 +1,25 @@ +.sectionFooter { + margin-top: var(--spacing-s); + display: flex; + justify-content: flex-end; + align-items: center; + flex-wrap: wrap; + + a { + display: block; + font-family: var(--font-serif); + position: relative; + padding-right: 1.4rem; + + &:after { + content: "→"; + position: absolute; + right: 0; + } + } + + display: none; + @media (max-width: 800px) { + display: flex; + } +} diff --git a/web/src/components/general/sectionHeader.module.scss b/web/src/components/general/sectionHeader.module.scss index c20193c..d46d578 100644 --- a/web/src/components/general/sectionHeader.module.scss +++ b/web/src/components/general/sectionHeader.module.scss @@ -17,4 +17,10 @@ right: 0; } } + + @media (max-width: 800px) { + a { + display: none; + } + } } diff --git a/web/src/components/news/NewsList.tsx b/web/src/components/news/NewsList.tsx index cd016f4..fd119e2 100644 --- a/web/src/components/news/NewsList.tsx +++ b/web/src/components/news/NewsList.tsx @@ -4,6 +4,7 @@ import { SectionHeader } from "../general/SectionHeader"; import { NewsItem } from "./NewsItem"; import styles from "./newsList.module.scss"; import { NewsFragment } from "@/lib/news"; +import { SectionFooter } from "../general/SectionFooter"; export const NewsList = ({ news, @@ -36,6 +37,9 @@ export const NewsList = ({ )} + {heading && ( + + )} ); };