feat: Show image and other news on news pages (#166)

On news pages, show the image and other news pages. On mobile devices,
only the image is displayed.
While changing some parts, I refactored some code to use pure SCSS
instead of bootstrap.

Resolves #144

---------

Co-authored-by: Lennart Rommeiss <[email protected]>
Co-authored-by: Robert Schuster <[email protected]>

Author: 3 people

CONTRIBUTING.md

@@ -20,7 +20,7 @@ You can find the instructions in the official [Hugo documentation](https://gohug
 
 Validate the installation by running `hugo version` in the command line.
 
-In addition, we use some node packages, for example bootstrap as UI toolkit. To install the packages,
+In addition, we use some node packages, for example pagefind for the search. To install the packages,
 install the node package manager `npm` on your machine. Instructions are available in the [official documentation](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
 
 Validate the installation by running `npm --version` in the command line.

assets/sass/_variables.scss

@@ -1,3 +1,8 @@
+$breakpoint-sm: 576px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
+
 body {
   --bs-light-rgb: 219, 224, 229;
   --pagefind-ui-scale: 1;

assets/sass/footer.scss

@@ -8,7 +8,7 @@
     justify-content: normal;
     flex-wrap: wrap;
 
-    @include media-breakpoint-up(lg) {
+    @media (min-width: #{$breakpoint-lg}) {
         justify-content: flex-end;
     }
 }
@@ -25,7 +25,7 @@
         color: var(--link-hovered);
     }
 
-    @include media-breakpoint-up(lg) {
+    @media (min-width: #{$breakpoint-lg}) {
         margin-left: 1.6rem;
         margin-right: 0;
     }

assets/sass/form.scss

@@ -3,7 +3,7 @@
   margin-left: 0;
   margin-right: 0;
 
-  @include media-breakpoint-down(md) {
+  @media (max-width: #{$breakpoint-md}) {
     max-width: fit-content;
   }
 
@@ -19,7 +19,7 @@
     border-color: var(--color-onLight);
     padding: 1.2rem;
 
-    @include media-breakpoint-up(md) {
+    @media (min-width: #{$breakpoint-md}) {
       width: 50%;
     }
   }

assets/sass/navigation.scss

@@ -13,7 +13,7 @@
   display: flex;
   justify-content: space-between;
 
-  @include media-breakpoint-up(md) {
+  @media (min-width: #{$breakpoint-md}) {
     justify-content: unset;
   }
 }
@@ -30,7 +30,7 @@
   display: flex;
   justify-content: flex-end;
 
-  @include media-breakpoint-up(md) {
+  @media (min-width: #{$breakpoint-md}) {
     display: block;
   }
 }
@@ -39,15 +39,15 @@
   width: 100%;
   display: none;
 
-  @include media-breakpoint-up(md) {
+  @media (min-width: #{$breakpoint-md}) {
     display: block;
   }
 }
 
 .o-header__nav nav h2 {
   display: block;
 
-  @include media-breakpoint-up(md) {
+  @media (min-width: #{$breakpoint-md}) {
     display: none;
   }
 }
@@ -152,7 +152,7 @@
 .o-header__item .o-header__item-countries {
   display: flex;
 
-  @include media-breakpoint-up(md) {
+  @media (min-width: #{$breakpoint-md}) {
     display: none;
     z-index: 2;
     position: absolute;
@@ -172,21 +172,21 @@
 .o-nav__menu-button {
   display: flex;
 
-  @include media-breakpoint-up(md) {
+  @media (min-width: #{$breakpoint-md}) {
     display: none;
   }
 }
 
 .o-header__expand-button {
   display: none;
 
-  @include media-breakpoint-up(md) {
+  @media (min-width: #{$breakpoint-md}) {
     display: flex;
   }
 }
 
 .o-header__nav--open nav {
-  @include media-breakpoint-down(md) {
+  @media (max-width: #{$breakpoint-md}) {
     display: flex;
     flex-direction: column;
     align-items: flex-end;

assets/sass/print.scss

@@ -32,7 +32,7 @@
     .a-anchorlink__link,
     picture,
     .icon-arrow_outward,
-    .sidemenu,
+    .o-aside,
     .o-list__picture,
     .o-header__wrapper,
     .o-footer__links,

assets/sass/sidemenu.scss

@@ -10,21 +10,22 @@
 
     z-index: 3;
 
-    @include media-breakpoint-up(lg) {
-        margin-right: 1.2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+    height: fit-content;
+
+    @media (min-width: #{$breakpoint-lg}) {
         margin-bottom: 0;
     }
 
-    @include media-breakpoint-down(lg) {
+    @media (max-width: #{$breakpoint-lg}) {
         display: none;
     }
 
-    .o-single__container {
-        margin-bottom: 1.6rem;
-    }
-
     .o-aside__mobile-container--open {
-        @include media-breakpoint-down(lg) {
+        @media (max-width: #{$breakpoint-lg}) {
             display: block;
         }
     }
@@ -36,10 +37,10 @@
     padding-left: 0;
 }
 
-.tableOfContents a {
+.o-aside a {
     text-decoration-line: none;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: .5rem;
 }
 
@@ -76,3 +77,13 @@
         background-color: var(--link-default);
     }
 }
+
+.o-news__list {
+    list-style-type: none;
+    list-style-position: outside;
+    padding-left: 0;
+
+    &-date {
+        padding-left: 2.5rem;
+    }
+}

assets/sass/stage.scss

@@ -32,7 +32,7 @@
     display: flex;
     z-index: 2;
 
-    @include media-breakpoint-up(md) {
+    @media (min-width: #{$breakpoint-md}) {
         width: 60%;
         max-width: 792px; // 1320*0.6
     }

assets/sass/styles.scss

@@ -76,14 +76,23 @@ main > .container {
   border-radius: var(--border-radius-l);
   padding: 2rem;
 
-  @include media-breakpoint-down(sm) {
+  @media (max-width: #{$breakpoint-sm}) {
     margin-top: 1.6rem;
   }
 }
 
 main > .container:is(.o-single--with-sidemenu) {
   background-color: unset;
   padding: 0;
+
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 1.5rem;
+
+  @media (max-width: #{$breakpoint-lg}) {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 img {
@@ -103,7 +112,9 @@ img {
 
 .o-list__link-wrapper {
   display: flex;
+  gap: 2rem;
   margin-bottom: 0;
+  padding-left: 0;
 
   li {
     list-style-type: none;
@@ -117,7 +128,7 @@ img {
 }
 
 .container {
-  @include media-breakpoint-down(sm) {
+  @media (max-width: #{$breakpoint-sm}) {
     max-width: calc(100% - 3.6rem);
   }
 }
@@ -131,9 +142,23 @@ img {
     padding: 0;
     background-color: inherit;
   }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  &__news-image {
+    margin-bottom: 1.6rem;
+
+    @media (min-width: #{$breakpoint-lg}) {
+      display: none;
+    }
+  }
 }
 
-.o-single__header {
+.o-single__content-header {
   display: flex;
   justify-content: space-between;
   flex-flow: wrap;
@@ -146,17 +171,17 @@ img {
   }
 }
 
-.o-single__header__title {
+.o-single__content-header-title {
   display: flex;
   align-items: center;
-  gap: 1rem; // Adjust spacing between the image and the heading
+  gap: 1.5rem;
 }
 
-.o-single__header__title h1 {
+.o-single__content-header-title h1 {
   margin-bottom: 0;
 }
 
-.o-single__header__title img {
+.o-single__content-header-title img {
   max-height: 3.6rem;
   width: auto;
 }
@@ -165,7 +190,6 @@ img {
   background-color: var(--bg-default);
   padding: 2rem;
   border-radius: var(--border-radius-l);
-  margin-bottom: 2.4rem;
 }
 
 .pagefind-highlight {

assets/sass/teaser.scss

@@ -3,7 +3,7 @@
     color: var(--link-special);
 
     &:nth-child(-n+3) {
-        @include media-breakpoint-down(lg) {
+        @media (max-width: #{$breakpoint-lg}) {
             margin-bottom: 2rem;
         }
     }
@@ -13,7 +13,7 @@
     margin-bottom: 2.4rem;
     display: flex;
 
-    @include media-breakpoint-down(md) {
+    @media (max-width: #{$breakpoint-md}) {
         flex-flow: wrap;
     }
 

i18n/de.yaml

@@ -16,6 +16,7 @@ highlight:
   inofficial: Inoffizielle Information
   tip: Persönlicher Tipp
 news-headline: Was gibt's Neues?
+news-other: Weitere News
 _operator__list_title: Betreiber mit FIP
 updateDate: Zuletzt aktualisiert
 related: Verwandte Seiten

i18n/en.yaml

@@ -16,6 +16,7 @@ highlight:
   inofficial: Unofficial Information
   tip: Personal Tip
 news-headline: What's new?
+news-other: Other News
 _operator__list_title: Operators supporting FIP
 updateDate: Last updated
 related: Related Pages

layouts/404.html

@@ -3,7 +3,7 @@
   <div class="o-single__header">
       <h2 data-pagefind-meta="title">404 - Page Not Found</h2>
   </div>
-  <div class="content" data-pagefind-body="">
+  <div class="o-single__content" data-pagefind-body="">
     <p>Oops! The page you’re looking for is unavailable or has been moved.</p>
     <p>Here's what you can do next:</p>
     <ul>

layouts/_default/single.html

@@ -5,10 +5,8 @@ <h2 data-pagefind-meta="title">{{ .Title }}</h2>
             {{ partial "updateDate.html" . }}
         </div>
 
-        <div class="content" data-pagefind-body>
+        <div class="o-single__content" data-pagefind-body>
             {{ .Content }}
         </div>
-
-        {{ partial "related.html" . }}
     </article>
 {{ end }}