play around with info box

This commit is contained in:
elise
2024-08-05 20:35:54 +02:00
parent 5f5c3e5064
commit 92b9c1b890
2 changed files with 6 additions and 9 deletions

View File

@ -9,6 +9,7 @@ import { UpcomingEvents } from "@/components/events/UpcomingEvents";
import { Pig } from "@/components/general/Pig"; import { Pig } from "@/components/general/Pig";
import Link from "next/link"; import Link from "next/link";
import Icon from "@/components/general/Icon"; import Icon from "@/components/general/Icon";
import { SectionHeader } from "@/components/general/SectionHeader";
const HomeFragmentDefinition = graphql(` const HomeFragmentDefinition = graphql(`
fragment Home on HomePage { fragment Home on HomePage {
@ -60,6 +61,7 @@ export default async function Home() {
<FeaturedEvents events={featuredEvents} /> <FeaturedEvents events={featuredEvents} />
<UpcomingEvents events={events} /> <UpcomingEvents events={events} />
<div className="infoBlock"> <div className="infoBlock">
<SectionHeader heading="Besøk oss"link="/aktuelt" linkText="Praktisk info" />
<div> <div>
<h2>Skal du besøke Chateau Neuf?</h2> <h2>Skal du besøke Chateau Neuf?</h2>
<p> <p>
@ -68,15 +70,15 @@ export default async function Home() {
</p> </p>
<Link href="/praktisk#adkomst" className="button"> <Link href="/praktisk#adkomst" className="button">
<span>Adresse og adkomst</span> <span>Adresse og adkomst</span>
<Icon /> <Icon type="arrowRight" />
</Link> </Link>
<Link href="/praktisk#adkomst" className="button"> <Link href="/praktisk#adkomst" className="button">
<span>Billetter</span> <span>Billetter</span>
<Icon /> <Icon type="arrowRight" />
</Link> </Link>
<Link href="/praktisk#adkomst" className="button"> <Link href="/praktisk#adkomst" className="button">
<span>Åpningstider</span> <span>Åpningstider</span>
<Icon /> <Icon type="arrowRight" />
</Link> </Link>
</div> </div>
<div className="pig"> <div className="pig">

View File

@ -286,17 +286,12 @@ select {
} }
.infoBlock { .infoBlock {
background: var(--color-goldenBeige); background: var(--color-background-secondary);
margin: 0 calc(var(--spacing-sitepadding-inline)*-1); margin: 0 calc(var(--spacing-sitepadding-inline)*-1);
padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline) var(--spacing-section-bottom); padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline) var(--spacing-section-bottom);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
display: grid;
grid-template-columns: 2fr 1fr;
align-items: center;
min-height: 16rem;
h2 { h2 {
margin-bottom: var(--spacing-s); margin-bottom: var(--spacing-s);
} }