Merge pull request 'Fix: Remove unwanted console log' (#14) from fix/unwanted-console-log into main

Reviewed-on: #14

.gitea/workflows/build.yaml

@@ -1,3 +1,4 @@
+
 name: Build
 
 on:
@@ -26,7 +27,7 @@ jobs:
 
       - name: Run composer install if composer.json exists
         run: | 
-          rm composer.lock
+          [ -f composer.lock ] && rm composer.lock
           composer validate --no-check-publish
 
       - name: Set up Node.js

.gitea/workflows/deploy.yaml

@@ -28,14 +28,7 @@ jobs:
         with:
           php-version: ${{ env.PHP_VERSION }}
 
-      - name: Check if composer.json exists
-        id: check_files
-        uses: andstor/file-existence-action@87d74d4732ddb824259d80c8a508c0124bf1c673
-        with:
-          files: 'composer.json'
-
       - name: Run composer install if composer.json exists
-        if: steps.check_files.outputs.files_exists == 'true'
         run: | 
           composer validate --no-check-publish && composer install --prefer-dist --no-progress --ignore-platform-reqs
 
@@ -109,28 +102,28 @@ jobs:
           dep: --file=./build/deploy.php release:switch stage
           private-key: ${{secrets.STAGE_KEY}}
 
-  # deploy-production:
-  #   needs: build
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - name: Setup PHP
-  #       uses: shivammathur/setup-php@7c0b4c8c8ebed23eca9ec2802474895d105b11bc
-  #       with:
-  #         php-version: ${{ env.PHP_VERSION }}
-  #     - uses: actions/download-artifact@v3
-  #       with:
-  #         name: typo3
-  #     - name: Extract artifact
-  #       run: |
-  #         tar xf typo3.tar.gz
-  #         rm typo3.tar.gz
-  #     - name: Install ssh agent and rsync
-  #       run: |
-  #         apt update
-  #         apt install -y openssh-client rsync
-  #     - name: Deploy
-  #       uses: deployphp/action@v1
-  #       with:
-  #         deployer-binary: "./bin/dep"
-  #         dep: --file=./build/deploy.php release:create production
-  #         private-key: ${{secrets.PROD_KEY}}
+  deploy-production:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Setup PHP
+        uses: shivammathur/setup-php@7c0b4c8c8ebed23eca9ec2802474895d105b11bc
+        with:
+          php-version: ${{ env.PHP_VERSION }}
+      - uses: actions/download-artifact@v3
+        with:
+          name: typo3
+      - name: Extract artifact
+        run: |
+          tar xf typo3.tar.gz
+          rm typo3.tar.gz
+      - name: Install ssh agent and rsync
+        run: |
+          apt update
+          apt install -y openssh-client rsync
+      - name: Deploy
+        uses: deployphp/action@v1
+        with:
+          deployer-binary: "./bin/dep"
+          dep: --file=./build/deploy.php release:create production
+          private-key: ${{secrets.PROD_KEY}}

.gitea/workflows/release.yaml

@@ -1,8 +1,9 @@
 name: Release
 
 on:
-  release:
-    types: [published]
+  push:
+    tags:
+      - 'v*.*'  # Adjust this pattern based on your tagging
 
 env:
   PHP_VERSION: '8.3'                  # set this to the PHP version to use
@@ -20,13 +21,7 @@ jobs:
         uses: shivammathur/setup-php@7c0b4c8c8ebed23eca9ec2802474895d105b11bc
         with:
           php-version: ${{ env.PHP_VERSION }}
-      - name: Check if composer.json exists
-        id: check_files
-        uses: andstor/file-existence-action@87d74d4732ddb824259d80c8a508c0124bf1c673
-        with:
-          files: 'composer.json'
-      - name: Run composer install if composer.json exists
-        if: steps.check_files.outputs.files_exists == 'true'
+      - name: Run composer install
         run: | 
           composer validate --no-check-publish && composer install --prefer-dist --no-progress --ignore-platform-reqs
       - name: Install ssh agent, rsync

build/servers.yaml

@@ -2,7 +2,7 @@ hosts:
   production:
       stage: production
       hostname: web-arm.cloonar.com
-      remote_user: gbv_aktuell_at
+      remote_user: lena_schilling_at
       writable_mode: chmod
       forward_agent: true
       deploy_path: ~/

config/sites/default/config.yaml

@@ -2,7 +2,6 @@ base: https://lena-schilling.at
 baseVariants:
   - base: https://lena-schilling.ddev.site
     condition: 'applicationContext == "Development/Ddev"'
-
   - base: https://lena-schilling.cloonar.dev
     condition: 'applicationContext == "Production/Staging"'
 dependencies:
@@ -25,3 +24,13 @@ languages:
     websiteTitle: ''
 rootPageId: 1
 websiteTitle: ''
+favicons:
+  full_name: 'Lena Schilling'
+  short_name: 'Lena Schilling'
+  theme_color: '#233600'
+  favicon_path: 'EXT:base/Resources/Public/Images/Favicons/'
+  favicon_svg: favicon.svg
+  favicon_png: favicon-96x96.png
+  apple_touch_icon: apple-touch-icon.png
+  android_192: web-app-manifest-192x192.png
+  android_512: web-app-manifest-512x512.png

packages/base/Configuration/Sets/SitePackage/TypoScript/page.typoscript

@@ -6,7 +6,7 @@
 page = PAGE
 page {
   typeNum = 0
-  shortcutIcon = EXT:base/Resources/Public/Icons/favicon.ico
+  shortcutIcon = EXT:base/Resources/Public/Favicons/favicon-96x96.png
   10 = PAGEVIEW
   10 {
     paths {
@@ -47,11 +47,13 @@ page {
 
   includeCSS {
     main = EXT:base/Resources/Public/Css/main.css
+    fancybox = EXT:base/Resources/Public/Vendor/fancybox/fancybox.css
   }
 
   includeJSLibs {
     navigation = EXT:base/Resources/Public/JavaScript/navigation.js
     fadein = EXT:base/Resources/Public/JavaScript/fade-in.js
+    fancybox = EXT:base/Resources/Public/Vendor/fancybox/fancybox.umd.js
   }
 
   includeJSFooter {

packages/base/Configuration/TCA/Overrides/tt_content.php

@@ -9,4 +9,5 @@ $GLOBALS['TCA']['tt_content']['columns']['imageorient']['config'] = [
         ['LLL:EXT:base/Resources/Private/Language/locallang_db.xlf:imageorient.25', 25],
         ['LLL:EXT:base/Resources/Private/Language/locallang_db.xlf:imageorient.26', 26],
     ],
+    'default' => 25,
 ];

packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css

@@ -65,8 +65,6 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--bs-primary);
-  color: var(--bs-yellow);
   font-size: 1rem;
   padding: 1rem;
   text-decoration: none;
@@ -74,10 +72,6 @@
   transition: background 0.3s;
 }
 
-.frame-type-cloonar_hero .social-icon:hover {
-  background: var(--bs-primary-light);
-}
-
 .frame-type-cloonar_hero .hero-image-wrapper {
   margin-top: 1rem;
   align-self: flex-end;

packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html

@@ -14,13 +14,13 @@
         <f:format.html>{data.bodytext}</f:format.html>
       </div>
       <div class="hero-social-icons">
-        <a href="https://www.instagram.com/lena.ats/" target="_blank" aria-label="Lena Schillings Instagram" class="social-icon"><i class="ci ci-instagram"></i></a>
-        <a href="https://www.tiktok.com/@dieschilling" target="_blank" aria-label="Lena Schillings TikTok" class="social-icon"><i class="ci ci-tiktok"></i></a>
+        <a href="https://www.instagram.com/lena.ats/" target="_blank" aria-label="Lena Schillings Instagram" class="btn social-icon"><i class="ci ci-instagram"></i></a>
+        <a href="https://www.tiktok.com/@dieschilling" target="_blank" aria-label="Lena Schillings TikTok" class="btn social-icon"><i class="ci ci-tiktok"></i></a>
       </div>
       <div class="hero-image-wrapper">
         <f:if condition="{data.image}">
           <f:then>
-            <picture>
+            <figure>
                 <!-- WEBP source -->
                 <source
                   type="image/webp"
@@ -50,7 +50,7 @@
                 alt="Hero Image"
                 loading="lazy"
                 class="hero-image" />
-            </picture>
+            </figure>
           </f:then>
           <f:else>
             <p>No image available</p>

packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css

@@ -1,7 +1,3 @@
-.frame-type-cloonar_textimage {
-  margin: 2rem 0;
-}
-
 .textimage-container {
     --gap: 2rem;
     display: flex;
@@ -45,15 +41,12 @@
   flex-direction: column;
 }
 
-/* Size classes apply at all viewports */
-.textimage-image-wrapper.size-25 .textimage-picture {
-}
-
-.textimage-image-wrapper.size-50 .textimage-picture {
-}
-
 /* On larger screens, arrange horizontally for image position settings */
 @media (min-width: 768px) {
+    .textimage-container.size-25 {
+        --gap: 8rem;
+    }
+
   .textimage-container.image-pos-25 {
     flex-direction: row;
   }
@@ -63,11 +56,17 @@
   }
 
     .textimage-image-wrapper.size-25 {
-        flex: 0 0 calc(25% - (var(--gap) / 2));
+        flex: 0 0 calc(40% - (var(--gap) / 2));
+        max-width: calc(40% - (var(--gap) / 2));
+    }
+    .textimage-wrapper.size-25 {
+        flex: 0 0 calc(40% - (var(--gap) / 2));
+        max-width: calc(40% - (var(--gap) / 2));
     }
 
     .textimage-image-wrapper.size-50 {
         flex: 0 0 calc(50% - (var(--gap) / 2));
+        max-width: calc(50% - (var(--gap) / 2));
     }
 
     .textimage-wrapper {

packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html

@@ -13,11 +13,11 @@
     <f:then><f:variable name="sizeClass" value="size-50" /></f:then>
   </f:if>
 
-  <div class="textimage-container image-pos-{data.imageorient} fade-in-on-scroll">
+  <div class="textimage-container image-pos-{data.imageorient} {sizeClass} fade-in-on-scroll">
     <div class="textimage-image-wrapper {sizeClass}">
       <f:if condition="{data.image}">
         <f:then>
-          <picture class="textimage-picture">
+          <figure class="textimage-picture">
             <!-- WEBP source -->
             <source
               type="image/webp"
@@ -33,8 +33,8 @@
             <source
               srcset="
                 {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
-                {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default')} 768w,
-                {f:uri.image(image:data.image.0, width:'1024c', cropVariant:'default')} 1024w"
+                {f:uri.image(image:data.image.0, width:'400c', cropVariant:'default')} 768w,
+                {f:uri.image(image:data.image.0, width:'538c', cropVariant:'default')} 1024w"
               sizes="(max-width: 320px) 90vw,
                      (max-width: 768px) 600px,
                      600px" />
@@ -43,17 +43,18 @@
               image="{data.image.0}"
               treatIdAsReference="1"
               cropVariant="default"
+              width="538c"
               alt="{data.image.0.alternative}"
               class="textimage-image"
             />
-          </picture>
+          </figure>
         </f:then>
         <f:else>
           <p>No image available</p>
         </f:else>
       </f:if>
     </div>
-    <div class="textimage-wrapper">
+    <div class="textimage-wrapper {sizeClass}">
       <f:if condition="{data.header}">
         <h2 class="textimage-header">{data.header}</h2>
         <h3 class="textimage-subheader">{data.subheader}</h3>

packages/base/Resources/Private/Extensions/News/Partials/List/Pagination.html

@@ -1,3 +1,4 @@
+<f:if condition="{pagination.allPageNumbers -> f:count()} > 1">
 <ul class="f3-widget-paginator">
     <f:if condition="{pagination.previousPageNumber} && {pagination.previousPageNumber} >= {pagination.firstPageNumber}">
         <li class="previous">
@@ -43,3 +44,4 @@
         </li>
     </f:if>
 </ul>
+</f:if>

packages/base/Resources/Private/Extensions/News/Templates/News/Detail.html

@@ -0,0 +1,105 @@
+<f:layout name="General" />
+
+<f:section name="content">
+    <script>
+        // Initialize Fancybox for elements with data-fancybox="gallery"
+        document.addEventListener("DOMContentLoaded", function() {
+            Fancybox.bind("[data-fancybox='gallery']", {});
+        });
+    </script>
+
+    <!-- First image if present -->
+    <f:if condition="{newsItem.media}">
+        <div class="news-detail__main-image">
+            <figure>
+                <picture>
+                    <source
+                        type="image/webp"
+                        srcset="{f:uri.image(image: newsItem.media.0.originalResource, width:'320', fileExtension:'webp')} 320w,
+                                {f:uri.image(image: newsItem.media.0.originalResource, width:'640', fileExtension:'webp')} 640w,
+                                {f:uri.image(image: newsItem.media.0.originalResource, width:'1024', fileExtension:'webp')} 1024w"
+                        sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
+                    />
+                    <source
+                        type="image/jpeg"
+                        srcset="{f:uri.image(image: newsItem.media.0.originalResource, width:'320')} 320w,
+                                {f:uri.image(image: newsItem.media.0.originalResource, width:'640')} 640w,
+                                {f:uri.image(image: newsItem.media.0.originalResource, width:'1024')} 1024w"
+                        sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
+                    />
+                    <img
+                        src="{f:uri.image(image: newsItem.media.0.originalResource, width:'1024')}"
+                        alt="{newsItem.media.0.originalResource.alternative}"
+                        title="{newsItem.media.0.originalResource.title}"
+                        loading="lazy"
+                    />
+                </picture>
+            </figure>
+        </div>
+    </f:if>
+
+    <!-- News title -->
+    <h1 class="news-detail__title">{newsItem.title}</h1>
+    <time class="news-detail__time" itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
+        <f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
+    </time>
+
+
+    <!-- Teaser text -->
+    <f:if condition="{newsItem.teaser}">
+        <div class="news-detail__teaser">
+            {newsItem.teaser}
+        </div>
+    </f:if>
+
+    <!-- Bodytext -->
+    <div class="news-detail__bodytext">
+        <f:format.html>
+            {newsItem.bodytext}
+        </f:format.html>
+    </div>
+
+    <!-- Content elements if present -->
+    <f:if condition="{newsItem.contentElements}">
+        <div class="news-detail__content-elements">
+            <f:cObject typoscriptObjectPath="lib.tx_news.contentElementRendering">{newsItem.contentElementIdList}</f:cObject>
+        </div>
+    </f:if>
+
+    <!-- Gallery if more than one picture -->
+    <f:if condition="{f:count(subject: newsItem.media)} > 1">
+        <div class="news-detail__gallery news-detail__gallery--grid">
+            <f:for each="{newsItem.media}" as="mediaItem">
+                <a href="{f:uri.image(image: mediaItem.originalResource)}"
+                   data-fancybox="gallery"
+                   data-caption="{mediaItem.originalResource.title}"
+                   class="news-detail__gallery-link">
+                    <figure class="news-detail__gallery-item">
+                        <picture>
+                            <source
+                                type="image/webp"
+                                srcset="{f:uri.image(image: mediaItem.originalResource, width:'320', fileExtension:'webp')} 320w,
+                                        {f:uri.image(image: mediaItem.originalResource, width:'640', fileExtension:'webp')} 640w,
+                                        {f:uri.image(image: mediaItem.originalResource, width:'1024', fileExtension:'webp')} 1024w"
+                                sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
+                            />
+                            <source
+                                type="image/jpeg"
+                                srcset="{f:uri.image(image: mediaItem.originalResource, width:'320')} 320w,
+                                        {f:uri.image(image: mediaItem.originalResource, width:'640')} 640w,
+                                        {f:uri.image(image: mediaItem.originalResource, width:'1024')} 1024w"
+                                sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
+                            />
+                            <img
+                                src="{f:uri.image(image: mediaItem.originalResource, width:'1024')}"
+                                alt="{mediaItem.originalResource.alternative}"
+                                title="{mediaItem.originalResource.title}"
+                                loading="lazy"
+                            />
+                        </picture>
+                    </figure>
+                </a>
+            </f:for>
+        </div>
+    </f:if>
+</f:section>

packages/base/Resources/Private/Extensions/News/Templates/News/List.html

@@ -25,17 +25,20 @@
 </f:section>
 
 <f:section name="content">
+  <f:if condition="{settings.listPid}">
+    <f:then>
       <div class="header">
         <div class="title">
           <h2>{contentObjectData.header}</h2>
         </div>
-    <f:if condition="{settings.listPid}">
-      <f:then>
         <!-- Desktop button -->
         <f:link.page title="Alle Artikel" pageUid="{settings.listPid}" class="btn header-btn">Alle Artikel</f:link.page>
-      </f:then>
-    </f:if>
       </div>
+    </f:then>
+    <f:else>
+        <h1><span class="tapered">{contentObjectData.header}</span></h1>
+    </f:else>
+  </f:if>
 	<!--TYPO3SEARCH_end-->
 	<f:if condition="{news}">
 		<f:then>

packages/base/Resources/Public/Favicons/favicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="137" height="133"><svg id="SvgjsSvg1005" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137 133"><defs><style>.cls-1{fill:#f4ad07;}.cls-1,.cls-2{stroke-width:0px;}.cls-2{fill:#233600;}</style></defs><circle class="cls-1" cx="68" cy="66" r="60"></circle><path class="cls-2" d="m98.01,102.96c-.33.17-.65.38-.99.52-.33.13-.68.24-1.03.29-.44.06-2,.22-2.35.3-.17.04-.34.1-.52.12-.96.15-1.92.28-2.88.42-.14.02-2.98.14-3.3.17-.96.08-1.92.18-2.88.22-1.48.06-2.97.08-4.46.1-.44,0-3.01.04-3.84.21-.66.14-1.34.09-2.01.1-1.51.02-10,.11-10.29.08-.73-.06-1.46-.08-2.18-.2,0,0-7.46-.25-7.76-.27-.29-.02-.58-.03-.88-.02h-.01s-.07,0-.11,0c-1.02.04-4.35.03-4.39-.03-.59-.04-1.18-.12-1.76-.26-.55-.13-1.12-.21-1.67-.32-.05-.27-.13-.54-.14-.82-.06-1.75-.19-3.49-.14-5.24.1-3.73-.1-7.47.18-11.2.23-3.05.19-6.11.28-9.17.04-1.41.12-2.81.13-4.22.05-4.66-.24-9.31-.3-13.97-.04-2.77.04-5.54.06-8.3,0-.19.03-.39.02-.58-.1-2.67.24-5.32.24-7.99,0-2.66.07-5.33.11-7.99.01-.87.04-1.74.03-2.61-.04-2.37-.2-4.73-.43-7.08-.05-.48-.05-.97-.09-1.45-.05-.73.02-1.41.33-2.02.19-.37.4-.59.47-.66.31-.31.62-.45.77-.52,1.86-.84,4.8-.72,4.8-.72.4.02,1.08.08,2.44.21.72.07,1.45.18,2.17.22,1.09.06,7.85.87,8.23.94.3.18.75.51,1.08,1.06.23.38.31.82.51,1.65.14.56.25,1.14.3,1.71.07.73.22,3.33.3,3.9.04.29.09.57.12.86.14,1.59.28,3.19.42,4.79.02.24.14,4.96.17,5.49.08,1.6.18,3.2.22,4.8.06,2.47.05,8.87.06,9.6,0,1.41.35,6.44.36,7.55.02,2.51.11,16.64.08,17.12-.06,1.09-.08,2.19-.17,3.28,2.72.03,16.7.02,18.3.01,1.6,0,3.2.07,4.8.11.52.01,1.05.04,1.57.03,1.43-.04,7.11.45,7.3.51.39.13.41.43.46.8.11.72.07,1.41-.07,2.12-.15.79-.16,1.61-.21,2.41-.05.81-.08,1.63-.12,2.44-.04.72-.11,1.45-.13,2.17-.04,1.08-.04,2.17-.07,3.26-.02.98-.78,5.87-1.13,6.05Z"></path></svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>

packages/base/Resources/Public/JavaScript/fade-in.js

@@ -5,6 +5,7 @@
 
     // If IntersectionObserver is supported, use it for better performance
     if ('IntersectionObserver' in window) {
+      // Adjusted options to help large elements fade in
       var observer = new IntersectionObserver(function(entries, observer) {
         entries.forEach(function(entry) {
           if (entry.isIntersecting) {
@@ -12,7 +13,10 @@
             observer.unobserve(entry.target);
           }
         });
-      }, { threshold: 0.1 });
+      }, {
+        threshold: 0.0,
+        rootMargin: '0px 0px -10% 0px'
+      });
 
       fadeInElements.forEach(function(el) {
         el.classList.add('fade-in-hidden');
@@ -27,7 +31,7 @@
       var checkVisibility = function() {
         var windowBottom = window.innerHeight + window.scrollY;
         fadeInElements.forEach(function(el) {
-          if (el.getBoundingClientRect().top + window.scrollY < windowBottom - (el.offsetHeight * 0.1)) {
+          if ((el.getBoundingClientRect().top + window.scrollY) < windowBottom - (el.offsetHeight * 0.1)) {
             el.classList.add('fade-in-visible');
           }
         });

packages/base/Resources/Public/JavaScript/main.js

@@ -1 +0,0 @@
-console.log('WE LOVE TYPO3');

packages/base/Resources/Public/Scss/abstracts/_fonts.scss

@@ -24,11 +24,16 @@ h1, h2 {
   font-family: 'Hajime Sans', sans-serif;
   color: var(--bs-primary);
   font-weight: 400;
+  line-height: 1;
 }
 
 h1 {
   text-align: center;
+  font-size: 3rem;
+
+  @media (min-width: $breakpoint-md) {
     font-size: 4.5rem;
+  }
 }
 h1 span.tapered {
   background-size: 100% 15%;

packages/base/Resources/Public/Scss/abstracts/_variables.scss

@@ -24,6 +24,7 @@ $xl: 1200px;
   --breakpoint-xl: 1200px;
 
   --bs-primary: #233600;
+  --bs-primary-dark: #1C2B00;
   --bs-yellow: #F5AE07;
   --bs-primary-light: #4E5E32;
   --bs-light-green: #F4F6EC;

packages/base/Resources/Public/Scss/components/_buttons.scss

@@ -10,7 +10,7 @@
   transition: background 0.3s;
 
   &:hover {
-    background-color: var(--bs-primary-light);
+    background-color: var(--bs-primary-dark);
     color: var(--bs-yellow);
   }
 }

packages/base/Resources/Public/Scss/components/_footer.scss

@@ -23,7 +23,7 @@
     }
 
     .container {
-      padding: .5rem 1rem;
+      padding: .5rem 0;
     }
   }
 

packages/base/Resources/Public/Scss/components/_images.scss

@@ -7,3 +7,14 @@ a {
     transform: scale(1.05);
   }
 }
+
+figure {
+  border-radius: 1rem;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+}

packages/base/Resources/Public/Scss/components/_news.scss

@@ -1,3 +1,6 @@
+.frame-type-news_pi1 h1 {
+  margin-bottom: 3rem;
+}
 .news-list-view {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
@@ -156,6 +159,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 1rem;
 }
 
 /* Show header button only on desktop */

packages/base/Resources/Public/Scss/components/_news_detail.scss

@@ -0,0 +1,88 @@
+.news-detail__title {
+  max-width: 900px;
+  margin: auto;
+  margin-bottom: 0rem !important;
+  font-size: 3rem;
+  text-align: left;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 4rem;
+  }
+}
+
+.news-detail__time {
+  display: block;
+  max-width: 900px;
+  margin: auto;
+  margin-bottom: 2rem;
+}
+
+.news-detail__main-image {
+  max-width: 900px;
+  margin: auto;
+  margin-bottom: 2rem;
+
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+  }
+}
+
+.news-detail__teaser {
+  max-width: 900px;
+  margin: auto;
+  margin-bottom: 2rem;
+  font-weight: 600;
+}
+
+.news-detail__bodytext {
+  max-width: 900px;
+  margin: auto;
+  margin-bottom: 2rem;
+}
+
+.news-detail__content-elements {
+  max-width: 900px;
+  margin: auto;
+
+  margin-bottom: 2rem;
+
+  .container {
+    padding: 0;
+  }
+  > * {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.news-detail__gallery {
+  margin-top: 2rem;
+
+  &--grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+
+    .news-detail__gallery-item {
+      img {
+        max-width: 100%;
+        height: auto;
+        display: block;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .news-detail__gallery--grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .news-detail__gallery--grid {
+    grid-template-columns: 1fr;
+  }
+}

packages/base/Resources/Public/Scss/main.scss

@@ -7,5 +7,6 @@
 @import 'components/navigation';
 @import 'components/images';
 @import 'components/news';
+@import "components/news_detail";
 @import 'components/footer';
 @import 'components/buttons';

packages/base/Resources/Public/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}