refactor: Replace boostrap with custom CSS

assets/js/highlightHeadline.js

@@ -13,10 +13,10 @@ function initHighlightHeadline() {
         return; // No headings? No business here
     }
 
-    // A few helper functions (.toc is the top-level ordered list)
+    // A few helper functions (.o-aside__toc is the top-level ordered list)
     const markTocItemActive = (a) => {return a.setAttribute('data-current', '');}
     const markTocItemInactive = (a) => {return a.removeAttribute('data-current');};
-    const getTocLinkFromHeading = (h) => {return document.querySelector(`.toc a[href="${windowPath}#${encodeURIComponent(h.id).replace(/%\w\w/g, match => match.toLowerCase())}"]`);}
+    const getTocLinkFromHeading = (h) => {return document.querySelector(`.o-aside__toc a[href="${windowPath}#${encodeURIComponent(h.id).replace(/%\w\w/g, match => match.toLowerCase())}"]`);}
 
     const getDocHeight = () => Math.floor(document.body.clientHeight);
 

assets/sass/_variables.scss

@@ -2,6 +2,7 @@ $breakpoint-sm: 576px;
 $breakpoint-md: 768px;
 $breakpoint-lg: 992px;
 $breakpoint-xl: 1200px;
+$breakpoint-xxl: 1400px;
 
 $link-hovered: #8F2501;
 $link-default: #BA3D12;
@@ -16,7 +17,6 @@ $color-onLight: #000000;
 $color-table-border: #5B5B5B;
 
 body {
-  --bs-light-rgb: 219, 224, 229;
   --pagefind-ui-scale: 1;
   --pagefind-ui-text: #000;
   --link-default: #{$link-default};
@@ -30,11 +30,12 @@ body {
   --color-onDark: #{$color-onDark};
   --color-onLight: #{$color-onLight};
   --color-table-border: #{$color-table-border};
+  --color-body: rgb(33, 37, 41);
   --border-radius-s: .4rem;
   --border-radius-m: .8rem;
   --border-radius-l: 1.6rem;
   --pagefind-ui-border-radius: var(--border-radius-l);
   --pagefind-ui-border: #000;
-  --bs-highlight-bg: var(--bg-accent);
   --box-shadow: 0 .4rem 1rem rgba(0,0,0,.25);
+  --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0,0,0,.1);
 }

assets/sass/anchorlink.scss

@@ -23,7 +23,7 @@
   background-repeat: no-repeat;
   height: 2.4rem;
   opacity: 50%;
-  border-top: 0;
+  border: 0;
 
   @media print {
     margin: 0;

assets/sass/content.scss

@@ -1,8 +1,8 @@
-.updateDate {
+.o-last-updated {
     font-size: 1.3rem;
 }
 
-.updateDate > .material-symbols-rounded {
+.o-last-updated > .material-symbols-rounded {
     font-size: 1.5rem
 }
 
@@ -16,30 +16,59 @@ code {
 }
 
 table {
-    margin-bottom: .6rem;
+    border-collapse: collapse;
+    margin-bottom: 1rem;
+    margin-left: 0.2rem;
+    box-shadow: 0 0.4rem 0.4rem rgba(0,0,0,.1);
 }
 
-tr {
-    border-bottom: .1rem solid var(--color-table-border);
+thead {
+    th:first-child {
+        border-top-left-radius: var(--border-radius-s);
+    }
+    th:last-child {
+        border-top-right-radius: var(--border-radius-s);
+    }
+
+    th {
+        background: $link-hovered;
+        color: white;
+        text-align: left;
+    }
 }
 
-th, td {
-    padding: .6rem 2rem .6rem 0;
+tbody {
+    tr {
+        border-bottom: .1rem solid $color-table-border;
+    }
+
+    tr:nth-of-type(even) {
+        background-color: $bg-default;
+    }
+
+    tr:last-of-type {
+        border-bottom: 2px solid $link-hovered;
+    }
 }
 
-.footnote-backref {
+th,
+td {
     padding: 1rem;
 }
 
 .footnotes {
-
     p {
         text-align: left;
     }
 
     hr {
         display: none;
     }
+
+    ol {
+        padding-left: 2rem;
+        list-style-position: outside;
+    }
 }
 
 p:has( + span) {

assets/sass/fonts.scss

@@ -79,7 +79,7 @@
   font-display: block; // Do not display icons until font is fully loaded
 }
 
-body {
+body, button {
   font-family: "Roboto",Arial,Helvetica,sans-serif;
   word-wrap: break-word;
   hyphens: auto;

assets/sass/footer.scss

@@ -30,3 +30,9 @@
         margin-right: 0;
     }
 }
+
+.o-footer__firstline {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}

assets/sass/form.scss

@@ -7,12 +7,13 @@
     max-width: fit-content;
   }
 
-  .row > label {
+  label {
     padding: 0;
+    display: flex;
+    flex-flow: column;
   }
 
   input[type=text], input[type=email], select, textarea {
-    width: 100%;
     margin-bottom: 1.6rem;
     border-radius: var(--border-radius-l);
     border-width: .2rem;

assets/sass/headings.scss

@@ -2,6 +2,7 @@ h1 {
   font-size: 3rem;
   line-height: 1.25;
   margin-bottom: 2rem;
+  margin-top: 0;
   font-weight: 700;
   text-wrap: balance;
 }
@@ -10,6 +11,7 @@ h2 {
   font-size: 2.2rem;
   line-height: 1.25;
   margin-bottom: 1rem;
+  margin-top: 0;
   font-weight: 700;
   text-wrap: balance;
 }
@@ -18,6 +20,7 @@ h3 {
   font-size: 2rem;
   line-height: 1.25;
   margin-bottom: 1rem;
+  margin-top: 0;
   font-weight: 700;
   text-wrap: balance;
 }
@@ -26,6 +29,7 @@ h4 {
   font-size: 1.8rem;
   line-height: 1.25;
   margin-bottom: 1rem;
+  margin-top: 0;
   font-weight: 700;
   text-wrap: balance;
 }

assets/sass/main.scss

@@ -1,5 +1,4 @@
 @import "_variables.scss";
-@import "node_modules/bootstrap/scss/bootstrap.scss";
 @import "styles.scss";
 @import "fonts.scss";
 @import "navigation.scss";
@@ -16,3 +15,4 @@
 @import "print.scss";
 @import "booking.scss";
 @import "button.scss";
+@import "startpage.scss";

assets/sass/navigation.scss

@@ -15,6 +15,7 @@
 .o-header__wrapper {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   padding: 0;
 
   @media (min-width: #{$breakpoint-md}) {
@@ -70,7 +71,7 @@
 
   img {
     width: auto;
-    height: 4.7rem;
+    height: 4.4rem;
     padding: .2rem .4rem;
     align-self: center;
   }
@@ -88,7 +89,7 @@
   left: 50%;
   transform: translateX(-50%);
   padding: 1rem;
-  margin: .6rem;
+  margin: .9rem;
   pointer-events: none;
   background-color: var(--bg-neutral);
   border-radius: var(--border-radius-s);
@@ -102,6 +103,7 @@
 
 .o-header__item {
   list-style: none;
+  height: 6rem;
 
   //normales Menü
   ul {
@@ -134,6 +136,10 @@
   }
 }
 
+.o-header__expand-button {
+  margin: 0.9rem;
+}
+
 .o-header__expand-button > .material-symbols-rounded,
 .o-nav__menu-button > .material-symbols-rounded,
 .o-nav__close-button > .material-symbols-rounded {
@@ -216,6 +222,10 @@
       margin-bottom: 5rem;
     }
 
+    .o-header__item {
+      height: fit-content;
+    }
+
     h2 {
       padding-right: 1rem;
       text-align: right;

assets/sass/print.scss

@@ -14,14 +14,14 @@
         margin-bottom: 1rem;
     }
 
-    main > .container.o-single,
-    main > .container.o-list {
+    main > .o-container.o-single,
+    main > .o-container.o-list {
         margin-top: 0;
     }
 
     .o-single__container,
-    .container,
-    main > .container {
+    .o-container,
+    main > .o-container {
         padding: 0;
     }
 
@@ -32,15 +32,14 @@
     .o-list__picture,
     .o-header__wrapper,
     .o-footer__links,
-    .footnote-backref,
     summary::before,
     #search {
         display: none;
     }
 
     details[open]::details-content { display: contents; }
 
-    a:not(.footnote-ref):not(.updateDate)::after {
+    a:not(.footnote-ref):not(.o-last-updated)::after {
         content: " (" attr(href) ") ";
     }
 }

assets/sass/sidemenu.scss

@@ -29,12 +29,16 @@
             display: block;
         }
     }
-}
 
-.tableOfContents ul {
-    list-style-type: none;
-    list-style-position: outside;
-    padding-left: 0;
+    ul, ol {
+        list-style-type: none;
+        list-style-position: outside;
+        padding-left: 0;
+
+        ul, ol {
+            margin-bottom: 0;
+        }
+    }
 }
 
 .o-aside a {
@@ -50,27 +54,25 @@
     gap: .4rem;
 }
 
-.toc li {
-    list-style-type: none;
-}
-
-.toc ol {
-    padding: 0 0 0 1em;
-}
+.o-aside__toc {
+    li {
+        list-style-type: none;
+    }
 
-.toc > ol {
-    padding-left: 0;
-}
+    ol {
+        padding: 0 0 0 1em;
+    }
 
-.toc-title {
-    font-weight: bold;
+    > ol {
+        padding-left: 0;
+    }
 }
 
-.toc-link {
+.o-aside__toc-link {
     display: flex;
 }
 
-.toc a[data-current] {
+.o-aside__toc a[data-current] {
     font-weight: bold;
 
     &:before {