style some anchor links and filter buttons

web/src/app/page.tsx

@@ -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>
   );
 }

web/src/app/praktisk/page.tsx

@@ -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>

web/src/components/events/EventFilter.tsx

@@ -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>

web/src/components/events/eventFilter.module.scss

@@ -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);
     }
   }
 }

web/src/css/base.scss

@@ -13,7 +13,6 @@ html {
 html,
 body {
   max-width: 100vw;
-  overflow-x: hidden;
 }
 
 body {
@@ -191,4 +190,27 @@ input[type="text"] {
   &:has(:focus-visible) {
     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);
+  }
 }