Update contact information and styles: change location in contact.yml, refactor SCSS for contact, footer, hero, and menu components to utilize Bootstrap utilities, and enhance layout consistency across various templates. Add a fixed call button for improved accessibility.

Author: JumpLink

src/content/contact.yml

@@ -10,7 +10,7 @@ label_directions: "Anfahrt"
 
 phone: "04741 9818661"
 address: "Feuerweg 1, 27639 Wurster Nordseeküste"
-location: "Wurster Nordseeküste"
+location: "Cuxhaven Nordseeküste"
 hours: "11 - 20 Uhr"
 order_hint: "Jetzt bestellen & kross abholen!"
 

src/scss/_contact.scss

@@ -1,36 +1,20 @@
 // Contact block styles (used on Kontakt page from Pug and in dfw-contact-map)
 .contact-label {
-  font-family: 'Palanquin Dark', sans-serif;
-  font-weight: 700;
-  color: #c4913b;
-  font-size: 1.1rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  margin-bottom: 0.25rem;
-}
-
-.contact-value {
-  color: #e8d5b5;
-  font-size: 1.05rem;
-  margin-bottom: 0;
+  // font-size, text-transform, margin-bottom now handled by utilities
+  // Bootstrap already applies $headings-font-family, $headings-font-weight, $headings-color
+  letter-spacing: 0.04em; // Custom, no Bootstrap utility
 }
 
 .contact-link {
-  color: #d4a84b;
-  text-decoration: none;
-  transition: color 0.2s ease;
-
-  &:hover {
-    color: #c4913b;
-    text-decoration: underline;
-  }
+  // Bootstrap already applies $link-color, $link-hover-color, $link-decoration, $link-hover-decoration
+  transition: color 0.2s ease; // Custom transition
 }
 
 .contact-map {
   width: 100%;
   height: 350px;
-  border: 2px solid #a07030;
-  border-radius: 0.25rem;
+  border: $navbar-border-width solid $navbar-border-color;
+  border-radius: $border-radius;
 
   @media (min-width: 768px) {
     height: 420px;

src/scss/_footer.scss

@@ -1,41 +1,35 @@
+$footer-font-size: 0.826;
+
 .site-footer {
-  border-top: 2px solid #a07030;
-  background-color: rgba(26, 15, 10, 0.8);
+  // border-top, border-width, and border-color now handled by utilities in Pug
+  background-color: $footer-bg;
 
+  // Colors only - spacing, font-size, font-weight now handled by utilities
   .footer-order {
-    color: #c4a882;
-    font-size: 0.95rem;
-    margin-bottom: 0.5rem;
+    color: $footer-order-color;
+    font-size: $font-size-base * $footer-font-size; // Custom size, not in Bootstrap scale
   }
 
   .footer-link {
-    color: #e8c882;
-    text-decoration: none;
-    font-weight: 600;
-  }
-
-  .footer-link:hover {
-    text-decoration: underline;
+    color: $footer-link-color;
+    font-size: $font-size-base * $footer-font-size;
   }
 
   .footer-hours,
   .footer-address,
   .footer-impressum,
   .footer-source-code {
-    color: #806040;
-    font-size: 0.85rem;
-    margin-bottom: 0.25rem;
+    color: $footer-text-color;
+    font-size: $font-size-base * $footer-font-size;
   }
 
   .footer-label {
-    color: #a07030;
-    font-weight: 600;
+    color: $footer-label-color;
+    font-size: $font-size-base * $footer-font-size;
   }
 
   .footer-copyright {
-    color: #806040;
-    font-size: 0.8rem;
-    margin-top: 0.75rem;
-    margin-bottom: 0;
+    color: $footer-copyright-color;
+    font-size: $font-size-base * $footer-font-size;
   }
 }

src/scss/_hero.scss

@@ -1,40 +1,31 @@
 .hero-section {
-  padding: 4rem 0 3rem;
-
+  // Spacing, font-size, font-weight now handled by utilities in Pug
   .hero-subtitle {
-    font-family: 'Palanquin Dark', sans-serif;
-    font-weight: 600;
-    font-size: 1.5rem;
-    color: #e8d5b5;
-    margin-top: 1.5rem;
-    letter-spacing: 0.04em;
+    letter-spacing: 0.04em; // Custom, no Bootstrap utility
   }
 
   .hero-location {
-    font-family: 'Palanquin', sans-serif;
-    color: #c4a882;
-    font-size: 1.1rem;
-    margin-bottom: 1.5rem;
+    color: $cream-dark; // Custom color
   }
 
   .btn-order {
-    display: inline-block;
-    background-color: #c4913b;
-    color: #1a0f0a;
-    font-family: 'Palanquin Dark', sans-serif;
-    font-weight: 700;
-    font-size: 1.1rem;
+    // Most styles handled by Bootstrap btn-primary, but we need custom hover transform
+    background-color: $btn-primary-bg;
+    color: $btn-primary-color;
+    font-family: $btn-font-family;
+    font-weight: $btn-font-weight;
+    font-size: $btn-font-size;
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    padding: 0.75rem 2rem;
-    border: 2px solid #a07030;
-    border-radius: 0.25rem;
+    padding: $btn-padding-y $btn-padding-x;
+    border: $btn-border-width solid $btn-primary-border-color;
+    border-radius: $btn-border-radius;
     text-decoration: none;
     transition: background-color 0.2s ease, transform 0.1s ease;
 
     &:hover {
-      background-color: #d4a84b;
-      transform: translateY(-1px);
+      background-color: $btn-primary-hover-bg;
+      transform: translateY(-1px); // Custom transform
     }
 
     &:active {

src/scss/_menu.scss

@@ -1,69 +1,40 @@
 // Speisekarte specific styles
 .menu-category {
-  margin-bottom: 2rem;
+  // margin-bottom now handled by mb-5 utility
   break-inside: avoid;
   page-break-inside: avoid;
 
   &__title {
-    font-family: $headings-font-family;
-    font-weight: 700;
-    color: $gold;
-    text-transform: uppercase;
-    font-size: 1.6rem;
-    letter-spacing: 0.05em;
-    margin-bottom: 1rem;
-    border-bottom: 2px solid $gold-dark;
-    padding-bottom: 0.5rem;
+    // Spacing, text-transform, border-bottom now handled by utilities
+    // Bootstrap already applies $headings-font-family, $headings-font-weight, $headings-color
+    font-size: $h2-font-size * 0.8; // Custom scaled size
+    letter-spacing: 0.05em; // Custom, no Bootstrap utility
   }
 }
 
 .menu-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.3rem 0;
-  gap: 0.5rem;
-
+  // display, justify-content, align-items, padding, gap now handled by utilities
   &__name {
-    font-family: $headings-font-family;
-    font-weight: 600;
-    color: $cream;
-    font-size: 1.05rem;
-    min-width: 0;
-    overflow-wrap: break-word;
-    word-break: break-word;
+    // font-weight, text-break now handled by utilities
+    // Bootstrap already applies $font-size-base and $body-color via body
+    font-family: $headings-font-family; // Custom font family
+    min-width: 0; // Needed for text-break to work
   }
 
   &__dots {
     flex: 1;
-    min-width: 1rem;
-    margin: auto 0.25rem;
-    border-bottom: 1px dotted $gold-dark;
-    padding-top: 0.3rem;
-  }
-
-  &__price {
-    font-family: $headings-font-family;
-    font-weight: 700;
-    color: $gold-light;
-    font-size: 1.05rem;
-    flex-shrink: 0;
+    min-width: $spacer;
+    margin: auto $spacer * 0.25;
+    border-bottom: $border-width dotted $border-color;
+    padding-top: $spacer * 0.3;
   }
 
   &__description {
-    font-size: 0.85rem;
-    color: $cream-dark;
-    margin-top: -0.2rem;
-    padding-bottom: 0.2rem;
-    overflow-wrap: break-word;
-    word-break: break-word;
+    // font-size, color, padding-bottom, text-break now handled by utilities
+    margin-top: -$spacer * 0.2; // Negative margin, no Bootstrap utility
   }
 }
 
-.menu-section {
-  padding: 2rem 0;
-}
-
 // Multi-column layout: categories flow into columns, no row alignment.
 // Shorter blocks don't leave gaps; columns fill independently like a masonry flow.
 .menu-grid {

src/scss/_navbar.scss

@@ -2,43 +2,43 @@
 // Applied to .app-content so both layout partial and component get the same look.
 .app-content {
   .navbar {
-    background-color: rgba(26, 15, 10, 0.72) !important;
+    background-color: $navbar-dark-bg !important;
     backdrop-filter: blur(10px);
-    border-bottom: 2px solid #a07030;
-    padding: 0.6rem 0;
-    z-index: 1030;
+    border-bottom: $navbar-border-width solid $navbar-border-color;
+    padding: $navbar-padding-y $navbar-padding-x;
+    // Bootstrap already applies $zindex-fixed via .fixed-top class
   }
 
   .navbar .brand-text {
-    font-family: 'Palanquin Dark', sans-serif;
-    font-weight: 700;
-    color: #c4913b;
-    font-size: 1.25rem;
+    font-family: $navbar-brand-font-family;
+    font-weight: $navbar-brand-font-weight;
+    color: $navbar-dark-hover-color;
+    font-size: $navbar-brand-font-size;
     letter-spacing: 0.05em;
     text-transform: uppercase;
   }
 
   .navbar .nav-link {
-    font-family: 'Palanquin Dark', sans-serif;
-    font-weight: 600;
-    color: #e8d5b5 !important;
+    font-family: $navbar-nav-link-font-family;
+    font-weight: $navbar-nav-link-font-weight;
+    color: $navbar-dark-color !important;
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    font-size: 0.9rem;
-    padding: 0.5rem 1rem !important;
+    font-size: $navbar-nav-link-font-size;
+    padding: $navbar-nav-link-padding-y $navbar-nav-link-padding-x !important;
     transition: color 0.2s ease;
 
     &:hover,
     &:focus {
-      color: #c4913b !important;
+      color: $navbar-dark-hover-color !important;
     }
   }
 
   .navbar .navbar-toggler {
-    border-color: transparent;
+    border-color: $navbar-dark-toggler-border-color;
 
     &:focus {
-      box-shadow: 0 0 0 0.2rem rgba(196, 145, 59, 0.3);
+      box-shadow: $navbar-toggler-focus-box-shadow;
     }
   }
 
@@ -49,9 +49,9 @@
   @media (max-width: 767.98px) {
     .navbar .navbar-collapse {
       display: none;
-      border-top: 1px solid #a07030;
-      margin-top: 0.5rem;
-      padding-top: 0.5rem;
+      border-top: $border-width solid $navbar-border-color;
+      margin-top: $spacer * 0.5;
+      padding-top: $spacer * 0.5;
 
       &.show {
         display: block;

src/scss/_page-content.scss

@@ -2,37 +2,29 @@
 .page-content {
   max-width: 800px;
   margin: 0 auto;
-  font-size: 1.05rem;
-  line-height: 1.7;
-  color: #e8d5b5;
+  // Bootstrap already applies $font-size-base, $line-height-base, and $body-color via body
+  line-height: $line-height-lg;
 
   h3 {
-    color: #c4913b;
-    font-family: 'Palanquin Dark', sans-serif;
-    margin-top: 1.5rem;
+    // Bootstrap already applies $headings-color and $headings-font-family
+    margin-top: $spacer * 1.5;
   }
 
   p {
-    margin-bottom: 1rem;
+    margin-bottom: $spacer;
   }
 
-  a {
-    color: #d4a84b;
-
-    &:hover {
-      color: #c4913b;
-    }
-  }
+  // Bootstrap already applies $link-color and $link-hover-color to links
 
   ul, ol {
-    padding-left: 1.5rem;
+    padding-left: $spacer * 1.5;
 
     li {
-      margin-bottom: 0.25rem;
+      margin-bottom: $spacer * 0.25;
     }
   }
 
   strong {
-    color: #d4a84b;
+    color: $info;
   }
 }