style some anchor links and filter buttons
This commit is contained in:
@ -59,10 +59,6 @@ export default async function Home() {
|
||||
<FeaturedEvents events={featuredEvents} />
|
||||
<UpcomingEvents events={events} />
|
||||
<NewsList heading="Siste nytt" limit={3} featured news={news} />
|
||||
<blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
|
||||
<IconListBlock />
|
||||
<FeaturedBlock />
|
||||
<FeaturedBlock />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
@ -9,18 +9,54 @@ export default async function Page() {
|
||||
return (
|
||||
<main className="site-main" id="main">
|
||||
<PageHeader heading="Praktisk info" />
|
||||
<p>Velkommen til oss!</p>
|
||||
<p className="lead">
|
||||
Velkommen til oss! Enten du skal på teater, konsert, foredrag, eller er
|
||||
student eller pensjonist, gleder vi oss til å se deg på Chateau Neuf.
|
||||
Her finner du informasjon om hvordan du kommer deg til oss, og hva vi
|
||||
kan by på av tjenester.
|
||||
</p>
|
||||
<div className="anchorLinks">
|
||||
Hopp til:
|
||||
<span className="circlehead">Hopp til:</span>
|
||||
<ul>
|
||||
<li>
|
||||
<button>Åpningstider</button>
|
||||
<a href="#" className="button">
|
||||
Adkomst
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button>Adresse</button>
|
||||
<a href="#" className="button">
|
||||
Åpningstider
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button>Billetter</button>
|
||||
<a href="#" className="button">
|
||||
Billetter
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="button">
|
||||
Booking og utleie
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="button">
|
||||
Hittegods
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="button">
|
||||
Tilgjengelighet
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="button">
|
||||
Vergeordning
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="button">
|
||||
Servering
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
@ -13,7 +13,7 @@ export const EventFilter = ({
|
||||
}) => {
|
||||
return (
|
||||
<div className={styles.eventFilter}>
|
||||
<span>Filter</span>
|
||||
<span className="suphead">Filter</span>
|
||||
<ul>
|
||||
{eventCategories
|
||||
.filter((x) => x.showInFilters)
|
||||
@ -22,7 +22,13 @@ export const EventFilter = ({
|
||||
key={category.slug}
|
||||
className={activeCategory === category.slug ? styles.active : ""}
|
||||
>
|
||||
<button onClick={() => setCategory(activeCategory === category.slug ? null : category.slug)}>
|
||||
<button
|
||||
onClick={() =>
|
||||
setCategory(
|
||||
activeCategory === category.slug ? null : category.slug
|
||||
)
|
||||
}
|
||||
>
|
||||
{category.name}
|
||||
</button>
|
||||
</li>
|
||||
|
@ -9,13 +9,20 @@
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-bottom: 0;
|
||||
background: var(--color-goldenBeige);
|
||||
color: var(--color-deepBrick);
|
||||
}
|
||||
|
||||
.active {
|
||||
button {
|
||||
background: var(--color-deepBrick);
|
||||
color: var(--color-white)
|
||||
color: var(--color-goldenBeige);
|
||||
}
|
||||
}
|
||||
}
|
@ -13,7 +13,6 @@ html {
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -192,3 +191,26 @@ input[type="text"] {
|
||||
box-shadow: 0 0 0 1px var(--color-background), 0 0 0 3px var(--color-green-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.anchorLinks {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
>span {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-bottom: 0;
|
||||
background: var(--color-goldenBeige);
|
||||
color: var(--color-deepBrick);
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user