forgot some css vars in camel to snake case conversion

src/app.css

@@ -36,8 +36,8 @@ body {
   /* https://modern-fluid-typography.vercel.app */
   font-size: clamp(1rem, 0.5vw + 1rem, 1.4rem);
   transition: 0.3s;
-  background: var(--bodyBg);
-  color: var(--textColor);
+  background: var(--body-bg);
+  color: var(--text-color);
 }
 /* outer div = hydration target */
 body > div {
@@ -51,20 +51,20 @@ main {
 }
 main h1 {
   text-align: center;
-  color: var(--headingColor);
+  color: var(--heading-color);
 }
 main img {
   width: 100%;
 }
 a {
-  color: var(--linkColor);
+  color: var(--link-color);
   text-decoration: none;
 }
 a:hover {
-  color: var(--hoverColor);
+  color: var(--hover-color);
 }
 button {
-  color: var(--textColor);
+  color: var(--text-color);
   background: transparent;
   font-size: 1em;
   border: none;
@@ -76,28 +76,28 @@ input,
 select {
   font-size: 1em;
   border-radius: 5pt;
-  border: 1px solid var(--lightBg);
-  color: var(--textColor);
+  border: 1px solid var(--light-bg);
+  color: var(--text-color);
   padding: 3pt 1ex;
   max-width: 100%;
   box-sizing: border-box;
 }
 blockquote {
-  border-left: 3pt solid var(--linkColor);
+  border-left: 3pt solid var(--link-color);
   padding: 3pt 8pt;
-  background: var(--lightBg);
+  background: var(--light-bg);
   margin: 1em 0;
 }
 table {
   border-collapse: collapse;
   width: 100%;
 }
 table :is(td, th) {
-  border: 1px solid var(--textColor);
+  border: 1px solid var(--text-color);
   padding: 0.4em 0.8em;
 }
 tbody tr:nth-child(odd) {
-  background: var(--accentBg);
+  background: var(--accent-bg);
 }
 .grid {
   display: grid;
@@ -167,7 +167,7 @@ tbody tr:nth-child(odd) {
   background: var(--dark-orange);
 }
 .btn.stroke {
-  color: var(--textColor) !important;
+  color: var(--text-color) !important;
   background: none;
 }
 .btn.stroke.blue {

src/lib/BasePage.svelte

@@ -34,7 +34,7 @@
       title=""
       openButtonLabel="Inhaltsverzeichnis öffnen"
       headingSelector="article :is(h2, h3, h4)"
-      --toc-mobile-bg="var(--bodyBg)"
+      --toc-mobile-bg="var(--body-bg)"
       --toc-width="20em"
     />
   {/if}

src/lib/ChapterMap.svelte

@@ -61,6 +61,7 @@
     display: inline-block;
     border-radius: 50%;
     border: 1px dashed white;
+    box-sizing: border-box;
     vertical-align: text-bottom;
   }
   :global(a.chapter) {

src/lib/CircleSpinner.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let color = `var(--textColor)`
+  export let color = `var(--text-color)`
   export let duration = `1.5s`
   export let size = `1em`
 </script>

src/lib/Collapsible.svelte

@@ -35,7 +35,7 @@
 <style>
   h3 {
     cursor: pointer;
-    background: var(--lightBg);
+    background: var(--light-bg);
     border-radius: 4pt;
     padding: 4pt 1ex;
     margin: 1em auto;

src/lib/Footer.svelte

@@ -48,7 +48,7 @@
     display: grid;
     gap: 3em;
     place-items: center;
-    background: var(--footerBg);
+    background: var(--footer-bg);
     color: white;
   }
   footer :global(a) {

src/lib/FormField.svelte

@@ -62,10 +62,10 @@
     noOptionsMsg="Keine passenden Optionen"
     bind:selected={value}
     {required}
-    --sms-options-bg="var(--accentBg)"
-    --sms-bg="var(--accentBg)"
+    --sms-options-bg="var(--accent-bg)"
+    --sms-bg="var(--accent-bg)"
     --sms-height="3ex"
-    --sms-border="1px solid var(--lightBg)"
+    --sms-border="1px solid var(--light-bg)"
     --sms-selected-bg="var(--green)"
     --sms-selected-text-color="white"
     --sms-min-height="32px"
@@ -108,9 +108,9 @@
 
 <style>
   /* TODO: remove this once svelte-multiselect@5.0.5 is out, for which
-    --sms-text-color="var(--textColor)" will be a simpler fix */
+    --sms-text-color="var(--text-color)" will be a simpler fix */
   :global(div.multiselect ul.selected input) {
-    color: var(--textColor);
+    color: var(--text-color);
   }
   label {
     display: block;
@@ -126,12 +126,12 @@
   input {
     display: block;
     margin: 1em 0;
-    background: var(--accentBg);
+    background: var(--accent-bg);
     width: 100%;
     height: 32px;
   }
   input:focus {
-    border: 1px solid var(--linkColor);
+    border: 1px solid var(--link-color);
   }
   ::-webkit-calendar-picker-indicator {
     filter: invert(var(--invert));

src/lib/Geocoder.svelte

@@ -51,10 +51,10 @@
   :global(.mapboxgl-ctrl-geocoder.mapboxgl-ctrl) {
     width: 100%;
     max-width: none;
-    background: var(--accentBg);
+    background: var(--accent-bg);
     margin: 1em 0;
   }
   :global(.mapboxgl-ctrl-geocoder.mapboxgl-ctrl input) {
-    color: var(--textColor) !important;
+    color: var(--text-color) !important;
   }
 </style>

src/lib/Header.svelte

@@ -33,8 +33,8 @@
   <ThemeSwitcher />
   <Search
     {...searchProps}
-    --search-hits-bg-color="var(--bodyBg)"
-    --search-icon-color="var(--headerColor)"
+    --search-hits-bg-color="var(--body-bg)"
+    --search-icon-color="var(--header-color)"
     --search-input-color="white"
   />
 </header>
@@ -49,7 +49,7 @@
     position: sticky;
     top: 0;
     font-weight: 300;
-    background: var(--headerBg);
+    background: var(--header-bg);
     box-shadow: 0 0 1ex black;
     z-index: 6; /* needed to stay above multiselect and range slider on signup page */
     padding: 3pt 1ex;

src/lib/Map.svelte

@@ -2,7 +2,6 @@
   import mapboxgl from 'mapbox-gl'
   import 'mapbox-gl/dist/mapbox-gl.css'
   import { onMount } from 'svelte'
-  import type { MapMarker } from './types'
 
   mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_PUBLIC_KEY
 
@@ -15,15 +14,22 @@
   export let maxZoom = 10
   export let css = ``
 
-  let mapDiv: HTMLDivElement
+  let map_div: HTMLDivElement
+  type MapMarker = {
+    lng: number
+    lat: number
+    title: string
+    url?: string
+    classes?: string[]
+  }
 
   // sort markers from north to south so southern makers have higher z-index
   $: markers = markers.sort((m1, m2) => m2.lat - m1.lat)
 
   onMount(() => {
     map = new mapboxgl.Map({
       cooperativeGestures: true,
-      container: mapDiv,
+      container: map_div,
       style: `mapbox://styles/mapbox/outdoors-v11?optimize=true`,
       center: [lng, lat],
       zoom,
@@ -34,18 +40,18 @@
     map.on(`load`, map.resize) // ensure map takes up full available width
 
     for (const { lng, lat, title, url, classes } of markers) {
-      const anchor = document.createElement(`a`)
-      anchor.innerHTML = title.slice(0, 4)
-      anchor.href = url
-      anchor.classList.add(...classes)
+      const node = document.createElement(url ? `a` : `span`)
+      node.innerHTML = title
+      if (url) node.href = url
+      if (classes?.length) node.classList.add(...classes)
 
-      const marker = new mapboxgl.Marker(anchor, { anchor: `bottom`, offset: [0, -11] })
+      const marker = new mapboxgl.Marker(node, { anchor: `bottom`, offset: [0, -11] })
       marker.setLngLat([lng, lat]).addTo(map)
     }
   })
 </script>
 
-<div bind:this={mapDiv} style={css} />
+<div bind:this={map_div} style={css} />
 
 <style>
   div {
@@ -56,4 +62,37 @@
   :global(.mapboxgl-ctrl-attrib-inner) {
     display: none;
   }
+  :global(a.chapter) {
+    color: white;
+    font-size: 12pt;
+    opacity: 0.9;
+    border-radius: 4pt;
+    padding: 0 3pt;
+    line-height: 14pt;
+  }
+  :global(a.chapter.active) {
+    background-color: var(--light-blue);
+  }
+  :global(a.chapter.starting) {
+    background-color: var(--dark-green);
+  }
+  :global(a.chapter:hover) {
+    background-color: var(--blue);
+  }
+  :global(a.chapter::after) {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 100%;
+    transform: translate(-50%);
+    border: solid;
+    border-width: 8pt 4pt;
+    box-sizing: border-box;
+  }
+  :global(a.chapter.active::after) {
+    border-color: var(--light-blue) transparent transparent transparent;
+  }
+  :global(a.chapter.starting::after) {
+    border-color: var(--dark-green) transparent transparent transparent;
+  }
 </style>

src/lib/Nav.svelte

@@ -127,12 +127,12 @@
   }
   a,
   button {
-    color: var(--headerColor);
+    color: var(--header-color);
     border-radius: 5pt;
     padding: 0 3pt;
   }
   a:hover {
-    color: var(--hoverColor);
+    color: var(--hover-color);
   }
   a[aria-current] {
     color: var(--orange);
@@ -147,7 +147,7 @@
     list-style: none;
   }
   li::marker {
-    color: var(--headerColor);
+    color: var(--header-color);
   }
   nav {
     overflow: auto;
@@ -179,7 +179,7 @@
     padding: 1em;
     transition: 0.4s;
     max-height: calc(100vh - 2em);
-    background: var(--headerBg);
+    background: var(--header-bg);
     transform: translate(-120%);
     box-sizing: border-box;
     overscroll-behavior: none;
@@ -209,7 +209,7 @@
   }
   nav.desktop > ul > li > ul {
     position: absolute;
-    background: var(--headerBg);
+    background: var(--header-bg);
     padding: 1ex 1em;
     border-radius: 1ex;
     box-shadow: 0 0 1em black;
@@ -222,7 +222,7 @@
   }
   nav.desktop > ul > li > ul > li.spanCols {
     grid-column: 1/-1;
-    border-top: 1px solid var(--headerColor);
+    border-top: 1px solid var(--header-color);
     padding-top: 6pt;
     margin-top: 6pt;
   }

src/lib/PlaceSelect.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import Icon from '@iconify/svelte'
   import type { Result } from '@mapbox/mapbox-gl-geocoder'
-  import type { Map, Marker } from 'mapbox-gl'
-  import mapbox from 'mapbox-gl'
+  import type { Map } from 'mapbox-gl'
+  import { LngLatBounds, Marker } from 'mapbox-gl'
   import Geocoder from './Geocoder.svelte'
   import MapComp from './Map.svelte'
   import type { Place } from './types'
@@ -29,12 +29,12 @@
 
     value = [...(value ?? []), { address: place.place_name, lng, lat }]
 
-    const marker = new mapbox.Marker()
+    const marker = new Marker()
     marker.setLngLat([lng, lat]).addTo(map)
 
     markers = [...markers, marker]
 
-    const bounds = new mapbox.LngLatBounds([lng, lat], [lng, lat])
+    const bounds = new LngLatBounds([lng, lat], [lng, lat])
     for (const marker of markers) {
       bounds.extend(marker.getLngLat())
     }
@@ -93,7 +93,7 @@
     color: var(--gray);
   }
   input {
-    background: var(--accentBg);
+    background: var(--accent-bg);
     width: 100%;
     text-overflow: ellipsis;
     height: 2em;

src/lib/PostPreview.svelte

@@ -64,7 +64,7 @@
 
 <style>
   section {
-    background: var(--accentBg);
+    background: var(--accent-bg);
     border-radius: 1ex;
     display: grid;
     font-size: 0.9em;

src/lib/SearchHit.svelte

@@ -31,7 +31,7 @@
 
 <style>
   div {
-    background: var(--accentBg);
+    background: var(--accent-bg);
     padding: 1ex 1em;
     border-radius: 5pt;
     margin: 1em 0;