Add filefill extension to composer.json

Reviewed-on: #14

.gitea/workflows/build.yaml

@@ -1,3 +1,4 @@
+
 name: Build
 
 on:
@@ -24,16 +25,9 @@ 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: | 
-          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: ~/

composer.json

@@ -42,8 +42,6 @@
     "typo3/cms-filemetadata": "^13.4",
     "typo3/cms-fluid": "^13.4",
     "typo3/cms-fluid-styled-content": "^13.4",
-    "typo3/cms-form": "^13.4",
-    "typo3/cms-frontend": "^13.4",
     "typo3/cms-indexed-search": "^13.4",
     "typo3/cms-info": "^13.4",
     "typo3/cms-install": "^13.4",
@@ -53,28 +51,18 @@
     "typo3/cms-recycler": "^13.4",
     "typo3/cms-redirects": "^13.4",
     "typo3/cms-reports": "^13.4",
-    "typo3/cms-rte-ckeditor": "^13.4",
-    "typo3/cms-scheduler": "^13.4",
     "typo3/cms-seo": "^13.4",
     "typo3/cms-setup": "^13.4",
     "typo3/cms-sys-note": "^13.4",
-    "typo3/cms-tstemplate": "^13.4",
-    "typo3/cms-viewpage": "^13.4",
+    "typo3/cms-viewport": "^13.4",
     "typo3/minimal": "^13.4",
-    "wapplersystems/ws-scss": "^13.0"
+    "wapplersystems/ws-scss": "^13.0",
+    "ichhabrecht/filefill": "^4.3.2"
   },
   "require-dev": {
-    "deployer/deployer": "^7.4",
-    "friendsoftypo3/phpstan-typo3": "^0.9",
-    "phpmd/phpmd": "^2.10",
-    "phpstan/phpstan": "^1.8",
-    "rector/rector": "0.13.4",
-    "squizlabs/php_codesniffer": "^3.6"
+
   },
   "scripts":{
-		"pre-autoload-dump": [
-			"@php -r \"file_exists('.env') || copy('.env.local', '.env');\""
-		],
 		"typo3-cms-scripts": [
 			"typo3 install:fixfolderstructure"
 		],
@@ -85,9 +73,6 @@
   "extra": {
     "typo3/cms": {
       "web-dir": "public"
-    },
-    "helhum/typo3-console": {
-      "install-extension-dummy": "0"
     }
   }
 }

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/RTE/Default.yaml

@@ -12,6 +12,8 @@ editor:
             - { name: "Small", element: "p", attributes: { 'class': 'small' } }
             - { name: "Big Number", element: "span", attributes: { 'class': 'big-number' } }
 
+            - { name: "Button", element: "a", attributes: { 'class': 'btn' } }
+
         toolbarGroups:
             - { name: styles, groups: [ format, styles ] }
             - { name: basicstyles, groups: [ basicstyles ] }
@@ -24,7 +26,7 @@ editor:
             - { name: tools, groups: [ table, specialchar ] }
             - { name: document, groups: [ mode ] }
 
-        format_tags: "p;h1;h2;h3;h4;h5;pre"
+        format_tags: "p;h3;h4;h5;pre"
 
         justifyClasses:
             - text-left

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

@@ -0,0 +1,4 @@
+# Define the footer menu PID as a constant to make it easily configurable
+page {
+    footerMenuPid = 7
+}

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

@@ -1,10 +1,12 @@
 # Include existing configuration
 <INCLUDE_TYPOSCRIPT: source="DIR:EXT:base/ContentBlocks" extensions="typoscript">
+# Include constants
+#<INCLUDE_TYPOSCRIPT: source="FILE:EXT:base/Configuration/Sets/SitePackage/TypoScript/constants.typoscript">
 
 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 {
@@ -23,6 +25,12 @@ page {
             as = mainnavigation
         }
         30 = page-content
+        40 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
+        40 {
+            special = directory
+            special.value = 7
+            as = metanavigation
+        }
     }
   }
 
@@ -39,10 +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 {
@@ -50,17 +61,15 @@ page {
   }
 
   # Use includeAssets to properly preload fonts with TYPO3 v13 asset handling.
-  # Make sure the font filenames do not have spaces. Convert them to use hyphens or underscores.
-  # After that, the AssetCollector will handle publishing to _assets folder.
   includeAssets {
     hajimeSansTtf {
-      path = EXT:base/Resources/Public/Fonts/Hajime-Sans.ttf
+      path = EXT:base/Resources/Public/Fonts/Hajime-Sans.woff2
       type = font
       resourceType = font
       preload = 1
       as = font
       attributes {
-        type = font/ttf
+        type = font/woff2
         crossorigin = anonymous
       }
     }
@@ -77,6 +86,8 @@ page {
       }
     }
   }
+
+  footerMenuPid = {$footerMenuPid}
 }
 
 lib.contentElement {
@@ -101,3 +112,17 @@ lib.parseFunc_RTE {
     }
   }
 }
+
+# Define the footer menu to show subpages of the configured footerMenuPid
+# special = directory will list all direct subpages of the given pid, not the page itself
+lib.footerMenu = HMENU
+lib.footerMenu {
+  special = directory
+  special.value = {$footerMenuPid}
+  1 = TMENU
+  1 {
+    wrap = <ul>|</ul>
+    NO = 1
+    NO.wrapItemAndSub = <li>|</li>
+  }
+}

packages/base/Configuration/Sets/SitePackage/page.tsconfig

@@ -7,10 +7,11 @@ RTE {
 }
 
 TCEFORM {
-    pages {
-    }
-    tt_content {
+  tt_content {
+    CType {
+      keepItems = cloonar_header,cloonar_text,cloonar_textimage,news_newsliststicky,news_pi1,cloonar_hero,cloonar_stats
     }
+  }
 }
 
 TCEMAIN {

packages/base/Configuration/Sets/SitePackage/setup.typoscript

@@ -16,17 +16,3 @@ plugin.tx_news {
     }
   }
 }
-
-# Define footerMenu here
-lib.footerMenu = HMENU
-lib.footerMenu {
-  special = directory
-  special.value = {$page.footerMenuPid}
-  1 = TMENU
-  1 {
-    NO {
-      wrapItemAndSub = <li>|</li>
-      stdWrap.noTrimWrap = | | |
-    }
-  }
-}

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/Configuration/TCA/Overrides/tx_news_domain_model_news.php

@@ -0,0 +1,18 @@
+<?php
+defined('TYPO3') or die('Access denied.');
+
+// Restrict cropping aspect ratio for images in news entries to 16:9
+$GLOBALS['TCA']['tx_news_domain_model_news']['columns']['fal_media']['config']['overrideChildTca']['columns']['crop']['config'] = [
+    'cropVariants' => [
+        'default' => [
+            'title' => 'Default',
+            'allowedAspectRatios' => [
+                '16-9' => [
+                    'title' => '16:9',
+                    'value' => 16 / 9
+                ],
+            ],
+            'selectedRatio' => '16-9',
+        ],
+    ],
+];

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

@@ -0,0 +1 @@
+/* CSS for header content element */

packages/base/ContentBlocks/ContentElements/header/config.yaml

@@ -0,0 +1,10 @@
+name: cloonar/header
+typeName: cloonar_header
+group: default
+prefixFields: true
+prefixType: full
+label: LLL:EXT:base/ContentBlocks/ContentElements/header/language/labels.xlf:header.title
+description: LLL:EXT:base/ContentBlocks/ContentElements/header/language/labels.xlf:header.description
+fields:
+  - identifier: header
+    useExistingField: true

packages/base/ContentBlocks/ContentElements/header/language/labels.xlf

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xliff version="1.0">
+  <file source-language="en" datatype="plaintext" original="messages">
+    <body>
+      <trans-unit id="title">
+        <source>Header</source>
+      </trans-unit>
+      <trans-unit id="description">
+        <source>A simple content element that displays a header as an H1.</source>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>

packages/base/ContentBlocks/ContentElements/header/templates/backend-preview.html

@@ -0,0 +1,15 @@
+<html
+    xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
+    data-namespace-typo3-fluid="true"
+>
+<f:layout name="Preview"/>
+<f:section name="Header">
+    <be:link.editRecord uid="{data.uid}" table="{data.mainType}">
+        <f:if condition="{data.header}">
+            <f:then><strong>{data.header}</strong></f:then>
+        </f:if>
+    </be:link.editRecord>
+</f:section>
+<f:section name="Content">
+</f:section>
+</html>

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

@@ -0,0 +1,4 @@
+<f:layout name="Default" />
+<f:section name="Main">
+    <h1><span class="tapered">{data.header}</span></h1>
+</f:section>

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: #1e3810;
-}
-
 .frame-type-cloonar_hero .hero-image-wrapper {
   margin-top: 1rem;
   align-self: flex-end;

packages/base/ContentBlocks/ContentElements/hero/language/labels.xlf

@@ -7,7 +7,7 @@
 				<source>Hero</source>
 			</trans-unit>
 			<trans-unit id="description">
-				<source>Description for Content Element cloonar/hero</source>
+				<source>Hero Element should always be the first Element of the page</source>
 			</trans-unit>
 		</body>
 	</file>

packages/base/ContentBlocks/ContentElements/hero/templates/backend-preview.html

@@ -2,20 +2,27 @@
     xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
     data-namespace-typo3-fluid="true"
 >
-
 <f:layout name="Preview"/>
 
 <f:section name="Header">
-    <be:link.editRecord uid="{data.uid}" table="{data.mainType}">{data.header}</be:link.editRecord>
+    <be:link.editRecord uid="{data.uid}" table="{data.mainType}">
+        <f:if condition="{data.header}">
+            <f:then><strong>{data.header}</strong></f:then>
+        </f:if>
+    </be:link.editRecord>
 </f:section>
 
 <f:section name="Content">
-    Preview for Content Block: cloonar/hero
-</f:section>
+    <f:if condition="{data.image}">
+        <f:image image="{data.image.0}" width="100" height="auto" treatIdAsReference="1" alt="Preview image" />
+    </f:if>
 
-<f:comment>
-<!-- Uncomment to override preview footer -->
-<f:section name="Footer">
-    My custom Footer
+    <f:if condition="{data.bodytext}">
+        <p>
+            <f:format.crop maxCharacters="80">
+              <f:format.stripTags>{data.bodytext}</f:format.stripTags>
+            </f:format.crop>
+        </p>
+    </f:if>
 </f:section>
-</f:comment>
+</html>

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://instagram.com" aria-label="Lena Schillings Instagram" class="social-icon"><i class="ci ci-instagram"></i></a>
-        <a href="https://tiktok.com" 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"
@@ -44,12 +44,13 @@
               <f:image
                 image="{data.image.0}"
                 treatIdAsReference="1"
+                fetchpriority="high"
                 cropVariant="default"
                 width="430c"
                 alt="Hero Image"
                 loading="lazy"
                 class="hero-image" />
-            </picture>
+            </figure>
           </f:then>
           <f:else>
             <p>No image available</p>

packages/base/ContentBlocks/ContentElements/stats/templates/backend-preview.html

@@ -5,9 +5,6 @@
 <f:layout name="Preview"/>
 
 <f:section name="Header">
-    <be:link.editRecord uid="{data.uid}" table="{data.mainType}">
-        Statistics Preview
-    </be:link.editRecord>
 </f:section>
 
 <f:section name="Content">

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

@@ -0,0 +1,4 @@
+/* CSS for text content element */
+.frame-type-cloonar_text .text-bodytext {
+    max-width: 750px;
+}

packages/base/ContentBlocks/ContentElements/text/config.yaml

@@ -0,0 +1,14 @@
+name: cloonar/text
+typeName: cloonar_text
+group: default
+prefixFields: true
+prefixType: full
+label: LLL:EXT:base/ContentBlocks/ContentElements/text/language/labels.xlf:text.title
+description: LLL:EXT:base/ContentBlocks/ContentElements/text/language/labels.xlf:text.description
+fields:
+  - identifier: header
+    useExistingField: true
+  - identifier: bodytext
+    type: Textarea
+    enableRichtext: true
+    useExistingField: true

packages/base/ContentBlocks/ContentElements/text/language/labels.xlf

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xliff version="1.0">
+  <file source-language="en" datatype="plaintext" original="messages">
+    <body>
+      <trans-unit id="title">
+        <source>Text</source>
+      </trans-unit>
+      <trans-unit id="description">
+        <source>A text element featuring a headline (H2) and a rich-text body field.</source>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>

packages/base/ContentBlocks/ContentElements/text/templates/backend-preview.html

@@ -0,0 +1,22 @@
+<html
+    xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
+    data-namespace-typo3-fluid="true"
+>
+<f:layout name="Preview"/>
+<f:section name="Header">
+    <be:link.editRecord uid="{data.uid}" table="{data.mainType}">
+        <f:if condition="{data.header}">
+            <f:then><strong>{data.header}</strong></f:then>
+        </f:if>
+    </be:link.editRecord>
+</f:section>
+<f:section name="Content">
+    <f:if condition="{data.bodytext}">
+        <p>
+            <f:format.crop maxCharacters="80">
+              <f:format.stripTags>{data.bodytext}</f:format.stripTags>
+            </f:format.crop>
+        </p>
+    </f:if>
+</f:section>
+</html>

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

@@ -0,0 +1,14 @@
+<f:layout name="Default" />
+<f:section name="Main">
+    <f:asset.css identifier="CBText" href="{cb:assetPath()}/frontend.css" />
+    <div class="fade-in-on-scroll">
+        <f:if condition="{data.header}">
+            <f:then><h2>{data.header}</h2></f:then>
+        </f:if>
+        <f:if condition="{data.bodytext}">
+            <f:then>
+                <div class="text-bodytext"><f:format.html>{data.bodytext}</f:format.html></div>
+            </f:then>
+        </f:if>
+    </div>
+</f:section>

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

@@ -1,11 +1,8 @@
-.frame-type-cloonar_textimage {
-  margin: 2rem 0;
-}
-
 .textimage-container {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
+    --gap: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
 }
 
 .textimage-wrapper {
@@ -44,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;
   }
@@ -62,11 +56,17 @@
   }
 
     .textimage-image-wrapper.size-25 {
-        flex: 0 0 25%;
+        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 50%;
+        flex: 0 0 calc(50% - (var(--gap) / 2));
+        max-width: calc(50% - (var(--gap) / 2));
     }
 
     .textimage-wrapper {

packages/base/ContentBlocks/ContentElements/textimage/templates/backend-preview.html

@@ -7,20 +7,22 @@
 <f:section name="Header">
     <be:link.editRecord uid="{data.uid}" table="{data.mainType}">
         <f:if condition="{data.header}">
-          <f:then>{data.header}</f:then>
-          <f:else>Text/Image Element</f:else>
+            <f:then><strong>{data.header}</strong></f:then>
         </f:if>
     </be:link.editRecord>
 </f:section>
 
 <f:section name="Content">
-  <f:if condition="{data.bodytext}">
-    <f:then>
-      <p>Preview: <f:format.crop maxCharacters="50">{data.bodytext}</f:format.crop></p>
-    </f:then>
-    <f:else>
-      <p>No text available</p>
-    </f:else>
-  </f:if>
+    <f:if condition="{data.image}">
+        <f:image image="{data.image.0}" width="100" height="auto" treatIdAsReference="1" alt="Preview image" />
+    </f:if>
+
+    <f:if condition="{data.bodytext}">
+        <p>
+            <f:format.crop maxCharacters="80">
+              <f:format.stripTags>{data.bodytext}</f:format.stripTags>
+            </f:format.crop>
+        </p>
+    </f:if>
 </f:section>
 </html>

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}">
+  <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/Item.html

@@ -1,4 +1,4 @@
-<div class="news-list-item {f:if(condition: '{big}', then: ' news-list-item-big')}">
+<div class="news-list-item fade-in-on-scroll{f:if(condition: '{big}', then: ' news-list-item-big')}">
     <f:link.page pageUid="{settings.detailPid}" class="news-item-link" additionalParams="{tx_news_pi1: {news: newsItem.uid, action: 'detail', controller: 'News'}}">
         <f:if condition="{newsItem.media}">
             <f:then>
@@ -34,9 +34,9 @@
             </f:then>
         </f:if>
         <div class="news-item-content">
-            <f:if condition="{newsItem.firstCategory}">
-                <div class="news-item-category">{newsItem.firstCategory.title}</div>
-            </f:if>
+            <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>
             <h3 class="news-item-title">{newsItem.title}</h3>
         </div>
     </f:link.page>

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">
@@ -19,7 +20,7 @@
         </li>
     </f:if>
     <f:for each="{pagination.allPageNumbers}" as="page">
-        <li class="{f:if(condition: page == paginator.currentPageNumber, then:'current')}">
+        <li class="{f:if(condition: '{page} == {paginator.currentPageNumber}', then:'current')}">
             <a href="{f:uri.action(action:actionName, arguments:{currentPage: page},addQueryString:'untrusted')}">{page}</a>
         </li>
     </f:for>
@@ -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">
-  <div class="header">
-    <div class="title">
-      <h2>{contentObjectData.header}</h2>
-    </div>
-    <f:if condition="{settings.listPid}">
-      <f:then>
+  <f:if condition="{settings.listPid}">
+    <f:then>
+      <div class="header">
+        <div class="title">
+          <h2>{contentObjectData.header}</h2>
+        </div>
         <!-- 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>
+      </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/Private/PageView/Layouts/Default.html

@@ -13,10 +13,26 @@
         <div class="site-footer__top">
             <div class="site-footer__grid">
                 <div class="site-footer__left">
+                    <div class="frame site-footer__logo">
+                        <div class="container">
+                            <f:image src="EXT:base/Resources/Public/Images/greens-efa-logo.png" alt="Greens EFA Logo" />
+                            <f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Lena Schilling Logo" />
+                        </div>
+                    </div>
                     <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '90'}" />
                 </div>
                 <div class="site-footer__right">
                     <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '91'}" />
+                    <div class="frame site-footer__social">
+                        <div class="container">
+                            <a href="https://www.instagram.com/lena.ats/" target="_blank" rel="noopener noreferrer" title="Instagram">
+                                <i class="ci ci-instagram"></i>
+                            </a>
+                            <a href="https://www.tiktok.com/@dieschilling" target="_blank" rel="noopener noreferrer" title="TikTok">
+                                <i class="ci ci-tiktok"></i>
+                            </a>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -26,7 +42,13 @@
         <div class="site-footer__bottom">
             <div class="site-footer__bottom-grid">
                 <ul class="site-footer__legal">
-                    <f:cObject typoscriptObjectPath="lib.footerMenu" />
+                    <f:for each="{metanavigation}" as="item">
+                        <li{f:if(condition: item.active, then:' class="active"')}>
+                            <a href="{item.link}"{f:if(condition: '{item.target}', then: ' target="{item.target}"')}{f:if(condition: '{item.target} == "_blank"', then: ' rel="noopener noreferrer"')} title="{item.title}">
+                                <span>{item.title}</span>
+                            </a>
+                        </li>
+                    </f:for>
                 </ul>
                 <p class="site-footer__copyright">© All Right Reserved</p>
             </div>

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

@@ -0,0 +1,44 @@
+(function() {
+  document.addEventListener('DOMContentLoaded', function() {
+    // Elements that should fade in when in view
+    var fadeInElements = document.querySelectorAll('.fade-in-on-scroll');
+
+    // 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) {
+            entry.target.classList.add('fade-in-visible');
+            observer.unobserve(entry.target);
+          }
+        });
+      }, {
+        threshold: 0.0,
+        rootMargin: '0px 0px -10% 0px'
+      });
+
+      fadeInElements.forEach(function(el) {
+        el.classList.add('fade-in-hidden');
+        observer.observe(el);
+      });
+    } else {
+      // Fallback if IntersectionObserver is not supported
+      fadeInElements.forEach(function(el) {
+        el.classList.add('fade-in-hidden');
+      });
+
+      var checkVisibility = function() {
+        var windowBottom = window.innerHeight + window.scrollY;
+        fadeInElements.forEach(function(el) {
+          if ((el.getBoundingClientRect().top + window.scrollY) < windowBottom - (el.offsetHeight * 0.1)) {
+            el.classList.add('fade-in-visible');
+          }
+        });
+      };
+
+      window.addEventListener('scroll', checkVisibility);
+      checkVisibility();
+    }
+  });
+})();

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

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

packages/base/Resources/Public/Scss/abstracts/_fade-in.scss

@@ -0,0 +1,19 @@
+.fade-in-hidden {
+  opacity: 0;
+  transform: translateY(1.5rem);
+  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+}
+.fade-in-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Respect prefers-reduced-motion: reduce (for accessibility).
+   If user prefers reduced motion, override transitions. */
+@media (prefers-reduced-motion: reduce) {
+  .fade-in-hidden {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}

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

@@ -1,8 +1,7 @@
 // Update font file names and ensure no spaces for better compatibility.
 @font-face {
   font-family: 'Hajime Sans';
-  src: url('../Fonts/Hajime-Sans.ttf') format('truetype'),
-       url('../Fonts/Hajime-Sans.otf') format('opentype');
+  src: url('../Fonts/Hajime-Sans.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -21,24 +20,66 @@ body {
   font-weight: 500;
 }
 
-h1, h2, h3 {
+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%;
+  background-repeat: repeat-x;
+  background-position: left 0% bottom 15%;
+  background-image: linear-gradient(179deg,var(--bs-yellow) 0%, var(--bs-yellow) 50%,transparent 54%, transparent 100%);
 }
 
 h2 {
-  font-size: 4rem;
+  font-size: 2rem;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 3rem;
+  }
+}
+
+h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 1.5rem;
+  }
 }
 
 h4 {
-  font-size: 1.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 1.5rem;
+  }
+}
+
+p {
+  margin-bottom: 1rem;
 }
 
 a {
-    color: var(--cl-primary);
+    color: var(--bs-primary);
     text-decoration: none;
     font-weight: 700;
+
+    &:hover {
+      color: var(--bs-primary-light)
+    }
 }
 
 button, .btn {

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

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

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

@@ -2,8 +2,15 @@
   background-color: var(--bs-primary);
   color: var(--bs-yellow);
   font-family: 'Inter', sans-serif;
+  font-weight: 700;
   border-radius: .5rem;
   padding: 0.75rem 1.5rem;
   border: none;
   cursor: pointer;
+  transition: background 0.3s;
+
+  &:hover {
+    background-color: var(--bs-primary-dark);
+    color: var(--bs-yellow);
+  }
 }

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

@@ -1,16 +1,12 @@
 .site-footer {
   font-size: 0.9rem;
 
-  .container {
+  > .container {
     background: var(--bs-light-green);
     border-top-left-radius: 2rem;
     border-top-right-radius: 2rem;
   }
 
-  &__top {
-    padding-bottom: 2rem;
-  }
-
   &__grid {
     display: flex;
     flex-direction: column;
@@ -19,6 +15,26 @@
 
   &__left, &__right {
     flex: 1 1 100%;
+    display: flex;
+    flex-direction: column;
+
+    > div:first-child {
+      margin-top: auto;
+    }
+
+    .container {
+      padding: .5rem 0;
+    }
+  }
+
+  &__logo img {
+    margin-right: 1rem;
+  }
+
+  &__social {
+    a {
+      margin-right: .5rem;
+    }
   }
 
   @media (min-width: 768px) {

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/_navigation.scss

@@ -8,7 +8,6 @@ $nav-height: 60px; // Adjust as needed
 
 body > header {
   width: 100%;
-  height: $nav-height;
   line-height: $nav-height;
   position: sticky;
   top: 0;

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);
@@ -46,9 +49,10 @@
         color: $primary-color;
       }
 
-      &.current a {
-        background: lighten($primary-color, 20%);
-        color: $secondary-color;
+      &.current a, a:hover {
+        background: var(--bs-primary);
+        color: var(--bs-yellow);
+        font-weight: bold;
       }
 
       a {
@@ -57,16 +61,10 @@
         height: 2.5rem;
         line-height: 2.5rem;
         text-align: center;
-        border-radius: 50%;
-        background: $primary-color;
-        color: $secondary-color;
-        font-weight: bold;
+        border-radius: 0.5rem;
+        background: transparent;
         text-decoration: none;
         transition: background 0.3s ease-in-out;
-
-        &:hover {
-          background: lighten($primary-color, 10%);
-        }
       }
     }
   }
@@ -115,11 +113,20 @@
         mask-repeat: no-repeat;
         mask-position: center;
         background-color: currentColor;
-        vertical-align: middle;
+        /* vertical-align: middle; */
         mask-image: url(../Icons/angle-right.svg);
       }
     }
 
+    time {
+      font-size: 0.75rem;
+      font-weight: 400;
+
+      @media (min-width: $breakpoint-md) {
+        font-size: 1rem;
+      }
+    }
+
     h3 {
       font-family: 'Inter', sans-serif;
       font-size: 1.25rem;
@@ -131,6 +138,11 @@
 }
 
 .news-list-item-big {
+  picture {
+    @media (min-width: $breakpoint-md) {
+      padding-bottom: .8rem;
+    }
+  }
   a .news-item-content {
     @media (min-width: $breakpoint-md) {
       padding: 2.875rem;
@@ -147,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

@@ -2,9 +2,11 @@
 @import 'abstracts/mixins';
 @import 'abstracts/fonts';
 @import 'abstracts/icons';
+@import 'abstracts/fade-in';
 @import 'base/base';
 @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"
+}