fix: deploy pipeline

Reviewed-on: #14

.chatgpt_config.yaml

@@ -2,5 +2,6 @@ project_name: "lena-schilling-website"
 default_prompt_blocks:
   - "basic-prompt"
   - "typo3-development"
-directories:
+initial_files:
-  - "packages"
+  - composer.json
+  - package.json

.ddev/config.yaml

@@ -15,6 +15,12 @@ web_environment:
   - TYPO3_CONTEXT=Development/Ddev
 corepack_enable: false
 
+hooks:
+  post-start:
+    - exec-host: |
+        ddev npm install
+        ddev npm run build:css -- --watch &
+
 # Key features of DDEV's config.yaml:
 
 # name: <projectname> # Name of the project, automatically provides

.ddev/docker-compose.override.yaml

@@ -1,9 +0,0 @@
-version: '3.6'
-services:
-  web:
-    # Install needed dependencies and run webpack in watch mode
-    command: /bin/sh -c "npm install && npm run build:css -- --watch"
-    volumes:
-      - ../packages/base:/var/www/html/packages/base
-    environment:
-      - NODE_ENV=development

.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:
+  deploy-production:
-  #   needs: build
+    needs: build
-  #   runs-on: ubuntu-latest
+    runs-on: ubuntu-latest
-  #   steps:
+    steps:
-  #     - name: Setup PHP
+      - name: Setup PHP
-  #       uses: shivammathur/setup-php@7c0b4c8c8ebed23eca9ec2802474895d105b11bc
+        uses: shivammathur/setup-php@7c0b4c8c8ebed23eca9ec2802474895d105b11bc
-  #       with:
+        with:
-  #         php-version: ${{ env.PHP_VERSION }}
+          php-version: ${{ env.PHP_VERSION }}
-  #     - uses: actions/download-artifact@v3
+      - uses: actions/download-artifact@v3
-  #       with:
+        with:
-  #         name: typo3
+          name: typo3
-  #     - name: Extract artifact
+      - name: Extract artifact
-  #       run: |
+        run: |
-  #         tar xf typo3.tar.gz
+          tar xf typo3.tar.gz
-  #         rm typo3.tar.gz
+          rm typo3.tar.gz
-  #     - name: Install ssh agent and rsync
+      - name: Install ssh agent and rsync
-  #       run: |
+        run: |
-  #         apt update
+          apt update
-  #         apt install -y openssh-client rsync
+          apt install -y openssh-client rsync
-  #     - name: Deploy
+      - name: Deploy
-  #       uses: deployphp/action@v1
+        uses: deployphp/action@v1
-  #       with:
+        with:
-  #         deployer-binary: "./bin/dep"
+          deployer-binary: "./bin/dep"
-  #         dep: --file=./build/deploy.php release:create production
+          dep: --file=./build/deploy.php release:create production
-  #         private-key: ${{secrets.PROD_KEY}}
+          private-key: ${{secrets.PROD_KEY}}

.gitea/workflows/release.yaml

@@ -1,8 +1,9 @@
 name: Release
 
 on:
-  release:
+  push:
-    types: [published]
+    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
+      - name: Run composer install
-        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
       - name: Install ssh agent, rsync

.gitignore

@@ -2,7 +2,7 @@
 .idea
 mbox
 nbproject
-/var/*
+/var
 !/var/labels
 /vendor
 /public/_assets
@@ -17,4 +17,3 @@ nbproject
 /public
 /packages/base/Resources/Public/Css
 /node_modules
-composer.lock

build/deploy.php

@@ -56,7 +56,7 @@ set('rsync', [
 ]);
 
 task('typo3:extension:setup', function () {
-    cd('{{release_path}}');
+    cd('current');
     run('{{bin/php}} bin/typo3 extension:setup');
 });
 
@@ -94,7 +94,6 @@ task('release:create', [
     'deploy:vendors',
     'deploy:shared',
     'deploy:writable',
-    'typo3:extension:setup',
     'deploy:unlock',
     'deploy:success'
 ]);
@@ -104,6 +103,7 @@ task('release:switch', [
     'php:reload',
     'php:reload-prod',
     'typo3:cache:flush',
+    'typo3:extension:setup',
     'typo3:language:update',
     'typo3:cache:warmup',
     'deploy:unlock',
@@ -117,11 +117,11 @@ task('deploy', [
     'deploy:vendors',
     'deploy:shared',
     'deploy:writable',
+    'typo3:cache:flush',
     'typo3:extension:setup',
     'deploy:symlink',
     'php:reload',
     'php:reload-prod',
-    'typo3:cache:flush',
     'typo3:language:update',
     'typo3:cache:warmup',
     'deploy:unlock',
@@ -130,10 +130,10 @@ task('deploy', [
 ]);
 
 host('stage')
-    ->set('cachetool', '/var/run/phpfpm/gbv-aktuell.cloonar.dev.sock');
+    ->set('cachetool', '/var/run/phpfpm/lena-schilling.cloonar.dev.sock');
 
 host('production')
-    ->set('cachetool', '/var/run/phpfpm/gbv-aktuell.at.sock');
+    ->set('cachetool', '/var/run/phpfpm/lena-schilling.at.sock');
 
 after('deploy:symlink', 'cachetool:clear:opcache');
 // unlock after failure

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

@@ -1,4 +1,9 @@
-base: /
+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:
   - georgringer/news
   - typo3/redirects
@@ -19,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

config/system/settings.php

@@ -109,6 +109,7 @@ return [
     ],
     'GFX' => [
         'jpg_quality' => '80',
+        'processor_path' => '/run/current-system/sw/bin/',
     ],
     'MAIL' => [
         'defaultMailFromAddress' => 'no-reply@example.com',

env.example

@@ -0,0 +1,25 @@
+TYPO3_BE_INSTALL_TOOL_PASSWORD='$2y$12$yq4Jthe0jUyf69KuOY3Udeb4yKPdE2QZ42obVCPTzhLXEcNShXXk2'
+
+# DB
+TYPO3_DB_HOST='db'
+TYPO3_DB_NAME='db'
+TYPO3_DB_USER='db'
+TYPO3_DB_PASSWORD='db'
+TYPO3_DB_UNIX_SOCKET=''
+TYPO3_DB_PORT=3306
+
+# MAIL
+TYPO3_MAIL_TRANSPORT='smtp'
+TYPO3_MAIL_SMTP_SERVER='localhost:1025'
+TYPO3_MAIL_SMTP_ENCRYPT=''
+TYPO3_MAIL_SMTP_USER=''
+TYPO3_MAIL_SMTP_PASSWORD=''
+
+# Solr
+SOLR_ENABLED_READ=true
+SOLR_HOST=solr
+SOLR_PATH=/
+SOLR_PORT=8983
+SOLR_SCHEME=http
+SOLR_CORE_NAME_DE=core_de
+SOLR_CORE_NAME_EN=core_en

meeting.md

@@ -0,0 +1,56 @@
+## Einleitung
+
+## Hosting
+bei mir
+
+## Wartungsvertrag
+bei mir
+
+
+## Webseite
+https://actionnetwork.org/ einbinden in webseite einbinden
+2 dinge anbieten, mit design und gut integriert.
+oder custom html element
+
+### content element html
+anbieten, als inhaltselement
+
+rechnung für hosting schicken 2025
+wartungsvertrag ende des jahres verrechnen
+
+
+visuell attraktive möglichkeit um zu visualisieren wie das budget ausgegeben
+wird in verschiedenen kategorien, je quartal
+https://thomaswaitz.eu/language/de/transparenz/
+flexible variante:
+3 Content Elemente:
+- Tab Element
+- Accordion Element
+- Pie Chart Element
+6 Tage / 6720€
+
+nicht flexible variante:
+transparenz element
+man kann jahre hinzufügen, je jahr kann man quartale hinzufügen und deren pie chart bearbeiten
+3,5 Tage / 3920€
+
+nur pie chart element:
+es müsste mit unterseiten gearbeitet werden je jahr und dort ein pie chart je quartal
+2 Tage / 2240€
+
+
+action network
+komm einfach ins netzwerk variante: https://fyeg.org/
+einzelne aktionen https://fyeg.org/news/paul-watson
+design anpassen optional
+schätzung machen
+einbindung einer kampagne wie:
+<link href='https://actionnetwork.org/css/style-embed-v3.css' rel='stylesheet' type='text/css' /><script src='https://actionnetwork.org/widgets/v5/form/mach-mit-beim-kampf-furs-klima-und-gegen-rechts?format=js&source=widget'></script><div id='can-form-area-mach-mit-beim-kampf-furs-klima-und-gegen-rechts' style='width: 100%'><!-- this div is the target for our HTML insertion --></div>
+2 Tage / 2240€
+
+optional css styling anpassen:
+1 Tag / 1120€
+
+
+email hosting angebot
+für hello@lena-schilling.at

packages/base/Configuration/ContentSecurityPolicies.php

@@ -13,10 +13,40 @@ use TYPO3\CMS\Core\Security\ContentSecurityPolicy\UriValue;
 use TYPO3\CMS\Core\Type\Map;
 
 return Map::fromEntries([
-    // Provide declarations for the backend
+    // Frontend CSP configuration for Action Network widget
-    Scope::backend(),
+    Scope::frontend(),
-    // NOTICE: When using `MutationMode::Set` existing declarations will be overridden
+    new MutationCollection(
+        // Base security settings
+        new Mutation(
+            MutationMode::Set,
+            Directive::DefaultSrc,
+            SourceKeyword::self,
+        ),
+        // Allow scripts from Action Network
+        new Mutation(
+            MutationMode::Extend,
+            Directive::ScriptSrc,
+            SourceKeyword::self,
+            new UriValue('https://actionnetwork.org'),
+        ),
+        // Allow styles from Action Network
+        new Mutation(
+            MutationMode::Extend,
+            Directive::StyleSrc,
+            SourceKeyword::self,
+            new UriValue('https://actionnetwork.org'),
+        ),
+        // Allow images from Action Network
+        new Mutation(
+            MutationMode::Extend,
+            Directive::ImgSrc,
+            SourceKeyword::self,
+            new UriValue('https://actionnetwork.org'),
+        ),
+    ),
 
+    // Backend configuration
+    Scope::backend(),
     new MutationCollection(
         // Results in `default-src 'self'`
         new Mutation(
@@ -34,15 +64,10 @@ return Map::fromEntries([
             SourceScheme::data,
             new UriValue('https://*.typo3.org'),
         ),
-        // NOTICE: the following two instructions for `Directive::ImgSrc` are identical to the previous instruction,
-        // `MutationMode::Extend` is a shortcut for `MutationMode::InheritOnce` and `MutationMode::Append`
-        // new Mutation(MutationMode::InheritOnce, Directive::ImgSrc, SourceScheme::data),
-        // new Mutation(MutationMode::Append, Directive::ImgSrc, SourceScheme::data, new UriValue('https://*.typo3.org')),
 
         // Extends the ancestor directive ('default-src'),
         // thus reuses 'self' and adds additional sources
         // Results in `script-src 'self' 'nonce-[random]'`
-        // ('nonce-proxy' is substituted when compiling the policy)
         new Mutation(
             MutationMode::Extend,
             Directive::ScriptSrc,

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,15 +47,47 @@ 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 {
     test_scripts = EXT:base/Resources/Public/JavaScript/main.js
   }
+
+  # Use includeAssets to properly preload fonts with TYPO3 v13 asset handling.
+  includeAssets {
+    hajimeSansTtf {
+      path = EXT:base/Resources/Public/Fonts/Hajime-Sans.woff2
+      type = font
+      resourceType = font
+      preload = 1
+      as = font
+      attributes {
+        type = font/woff2
+        crossorigin = anonymous
+      }
+    }
+
+    interVariable {
+      path = EXT:base/Resources/Public/Fonts/Inter.woff2
+      type = font
+      resourceType = font
+      preload = 1
+      as = font
+      attributes {
+        type = font/woff2
+        crossorigin = anonymous
+      }
+    }
+  }
+
+  footerMenuPid = {$footerMenuPid}
 }
 
 lib.contentElement {
@@ -73,3 +113,16 @@ 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,15 +7,12 @@ RTE {
 }
 
 TCEFORM {
-    pages {
-
-    }
   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

@@ -8,7 +8,7 @@
 }
 
 .frame-type-cloonar_hero + .frame {
-    margin-top: -10rem;
+    margin-top: -10.4rem;
 }
 .frame-type-cloonar_hero .container {
     padding-bottom: 3rem;
@@ -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,13 +72,10 @@
   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;
+  width: 100%;
 }
 
 .frame-type-cloonar_hero .hero-image {

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:if condition="{data.image}">
-</f:section>
+        <f:image image="{data.image.0}" width="100" height="auto" treatIdAsReference="1" alt="Preview image" />
+    </f:if>
 
-<f:comment>
+    <f:if condition="{data.bodytext}">
-<!-- Uncomment to override preview footer -->
+        <p>
-<f:section name="Footer">
+            <f:format.crop maxCharacters="80">
-    My custom Footer
+              <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

@@ -7,7 +7,6 @@
   <f:asset.css identifier="CBHero" href="{cb:assetPath()}/frontend.css" />
 
   <div class="hero-inner">
-    <!-- Inline style with f:uri.resource to ensure correct path -->
     <div class="hero">
       <h2 class="hero-subheader">{data.subheader}</h2>
       <h1 class="hero-title">{data.header}</h1>
@@ -15,13 +14,43 @@
         <f:format.html>{data.bodytext}</f:format.html>
       </div>
       <div class="hero-social-icons">
-            <a href="https://instagram.com" class="social-icon"><i class="ci ci-instagram"></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://tiktok.com" class="social-icon"><i class="ci ci-tiktok"></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>
-            <f:image image="{data.image.0}" alt="Hero Image" class="hero-image" />
+            <figure>
+                <!-- WEBP source -->
+                <source
+                  type="image/webp"
+                  srcset="
+                    {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
+                    {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
+                    {f:uri.image(image:data.image.0, width:'430c', cropVariant:'default', fileExtension:'webp')} 1024w"
+                  sizes="(max-width: 320px) 80vw,
+                         (max-width: 768px) 80px,
+                         430px" />
+
+                <!-- Fallback source -->
+              <source
+                srcset="
+                  {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
+                  {f:uri.image(image:data.image.0, width:'600c', cropVariant:'default')} 600w,
+                  {f:uri.image(image:data.image.0, width:'430c', cropVariant:'default')} 1024w"
+                sizes="(max-width: 320px) 80vw,
+                       (max-width: 768px) 80vw,
+                       430px" />
+              <f:image
+                image="{data.image.0}"
+                treatIdAsReference="1"
+                fetchpriority="high"
+                cropVariant="default"
+                width="430c"
+                alt="Hero Image"
+                loading="lazy"
+                class="hero-image" />
+            </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,45 +1,52 @@
-.frame-type-cloonar_textimage {
-  margin: 2rem 0;
-}
-
-/* Mobile-first: column layout by default */
 .textimage-container {
+    --gap: 2rem;
     display: flex;
     flex-direction: column;
-  gap: 2rem;
+    gap: var(--gap);
 }
 
 .textimage-wrapper {
   width: 100%;
 }
 
-.textimage-header {
-  font-size: 1.5rem;
-  font-weight: bold;
-  margin-bottom: 1rem;
-}
-
 .textimage-text {
   font-size: 1rem;
   line-height: 1.5;
 }
 
 .textimage-image-wrapper {
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.textimage-picture {
+  display: block;
+  max-width: 100%;
+}
+
 .textimage-image {
   max-width: 100%;
   height: auto;
   border-radius: 0.5rem;
+  display: block;
 }
 
-/* Image positions: 25 = left, 26 = right
+/* Image positions: 25 = left, 26 = right */
-   On larger screens, adjust the layout */
+.textimage-container.image-pos-25 {
+  flex-direction: column;
+}
+
+.textimage-container.image-pos-26 {
+  flex-direction: column;
+}
+
+/* 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;
   }
@@ -48,8 +55,21 @@
     flex-direction: row-reverse;
   }
 
-  .textimage-wrapper,
+    .textimage-image-wrapper.size-25 {
-  .textimage-image-wrapper {
+        flex: 0 0 calc(40% - (var(--gap) / 2));
-    flex: 1 1 50%;
+        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 {
+    flex: 1;
     }
 }

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

@@ -1,11 +1,12 @@
 name: cloonar/textimage
 typeName: cloonar_textimage
 group: default
-prefixFields: true
+prefixFields: false
-prefixType: full
 fields:
   - identifier: header
     useExistingField: true
+  - identifier: subheader
+    useExistingField: true
   - identifier: bodytext
     type: Textarea
     enableRichtext: true
@@ -13,7 +14,16 @@ fields:
   - identifier: image
     type: File
     properties:
-      allowed: [jpg, jpeg, png, gif]
+      allowed: [jpg, jpeg, png, gif, webp]
     useExistingField: true
   - identifier: imageorient
     useExistingField: true
+  - identifier: imagesize
+    type: Select
+    renderType: selectSingle
+    default: 2
+    items:
+      - label: 25%
+        value: 1
+      - label: 50%
+        value: 2

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:then><strong>{data.header}</strong></f:then>
-          <f:else>Text/Image Element</f:else>
         </f:if>
     </be:link.editRecord>
 </f:section>
 
 <f:section name="Content">
+    <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}">
-    <f:then>
+        <p>
-      <p>Preview: <f:format.crop maxCharacters="50">{data.bodytext}</f:format.crop></p>
+            <f:format.crop maxCharacters="80">
-    </f:then>
+              <f:format.stripTags>{data.bodytext}</f:format.stripTags>
-    <f:else>
+            </f:format.crop>
-      <p>No text available</p>
+        </p>
-    </f:else>
     </f:if>
 </f:section>
 </html>

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

@@ -1,23 +1,63 @@
 <f:layout name="Default" />
 
-<f:section name="Header" />
+<f:section name="Header"></f:section>
 <f:section name="Main">
   <f:asset.css identifier="CBTextImage" href="{cb:assetPath()}/frontend.css" />
 
-  <div class="textimage-container image-pos-{data.imageorient}">
+  <!-- Determine size class based on imagesize field -->
-    <div class="textimage-image-wrapper">
+  <f:variable name="sizeClass" value="" />
+  <f:if condition="{data.imagesize} == 1">
+    <f:then><f:variable name="sizeClass" value="size-25" /></f:then>
+  </f:if>
+  <f:if condition="{data.imagesize} == 2">
+    <f:then><f:variable name="sizeClass" value="size-50" /></f:then>
+  </f:if>
+
+  <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>
-          <f:image image="{data.image.0}" alt="{data.header}" class="textimage-image" />
+          <figure class="textimage-picture">
+            <!-- WEBP source -->
+            <source
+              type="image/webp"
+              srcset="
+                {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
+                {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
+                {f:uri.image(image:data.image.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w"
+              sizes="(max-width: 320px) 90vw,
+                     (max-width: 768px) 600px,
+                     600px" />
+
+            <!-- Fallback source -->
+            <source
+              srcset="
+                {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
+                {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" />
+
+            <f:image
+              image="{data.image.0}"
+              treatIdAsReference="1"
+              cropVariant="default"
+              width="538c"
+              alt="{data.image.0.alternative}"
+              class="textimage-image"
+            />
+          </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>
       </f:if>
       <f:if condition="{data.bodytext}">
         <div class="textimage-text">

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

@@ -1,12 +1,42 @@
-<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:image image="{newsItem.media.0}" class="news-item-grid-image" alt="{newsItem.title}" />
+            <f:then>
+              <picture>
+                <!-- WEBP source -->
+                <source
+                  type="image/webp"
+                  srcset="
+                    {f:uri.image(image:newsItem.media.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
+                    {f:uri.image(image:newsItem.media.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
+                    {f:uri.image(image:newsItem.media.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w"
+                  sizes="(max-width: 320px) 100vw,
+                         (max-width: 768px) 50px,
+                         400px" />
+
+                <!-- Fallback source -->
+                <source
+                  srcset="
+                    {f:uri.image(image:newsItem.media.0, width:'320c', cropVariant:'default')} 320w,
+                    {f:uri.image(image:newsItem.media.0, width:'768c', cropVariant:'default')} 768w,
+                    {f:uri.image(image:newsItem.media.0, width:'1024c', cropVariant:'default')} 1024w"
+                  sizes="(max-width: 320px) 100vw,
+                         (max-width: 768px) 50vw,
+                         400px" />
+                <f:image
+                  image="{newsItem.media.0}"
+                  treatIdAsReference="1"
+                  cropVariant="default"
+                  width="1024c"
+                  alt="{newsItem.title}"
+                  class="news-item-grid-image" />
+              </picture>
+            </f:then>
         </f:if>
         <div class="news-item-content">
-            <f:if condition="{newsItem.firstCategory}">
+            <time itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
-                <div class="news-item-category">{newsItem.firstCategory.title}</div>
+              <f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
-            </f:if>
+            </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">
+  <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/Private/PageView/Layouts/Default.html

@@ -9,13 +9,30 @@
 </main>
 
 <footer class="site-footer">
+    <div class="container">
         <div class="site-footer__top">
-    <div class="container site-footer__grid">
+            <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>
@@ -23,9 +40,15 @@
         <hr class="site-footer__divider" />
 
         <div class="site-footer__bottom">
-    <div class="container site-footer__bottom-grid">
+            <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,64 +1,87 @@
-// The fonts available are OTF and TTF. Modern browsers prefer WOFF/WOFF2,
+// Update font file names and ensure no spaces for better compatibility.
-// but we'll use TTF/OTF here.
-// We assume main.css is compiled into Resources/Public/Css, so to reach Fonts: ../Fonts/
-// Make sure filenames match exactly (case-sensitive) and spaces are escaped or handled properly.
-
-// Hajime Sans (no weight variations provided other than normal)
 @font-face {
   font-family: 'Hajime Sans';
-  src: url('../Fonts/Hajime Sans.ttf') format('truetype'),
+  src: url('../Fonts/Hajime-Sans.woff2') format('woff2');
-       url('../Fonts/Hajime Sans.otf') format('opentype');
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }
 
-// Inter as a variable font:
-// The Inter variable fonts likely contain multiple weights.
-// We'll define one face for normal and one for italic using the variable font files.
-// Define the weight range if needed (e.g., font-weight: 100 900 for variable range).
-
 @font-face {
   font-family: 'Inter';
-  src: url('../Fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
+  src: url('../Fonts/Inter.woff2') format('woff2');
   font-weight: 100 900; // Adjust as needed for variable font range
   font-style: normal;
+  font-display: swap;
 }
 
-@font-face {
-  font-family: 'Inter';
-  src: url('../Fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
-  font-weight: 100 900;
-  font-style: italic;
-}
-
-// Use Inter for body text
 body {
   font-family: 'Inter', sans-serif;
   font-weight: 500;
 }
 
-// Use Hajime Sans for headlines
+h1, h2 {
-h1, h2, h3 {
   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.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)
+    }
 }
 
-
-// Use Hajime Sans for buttons as well
 button, .btn {
   font-family: 'Hajime Sans', sans-serif;
   font-weight: 400;

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

@@ -24,8 +24,12 @@ $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;
+
 }
 
 // Additional global variables can be added here

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

@@ -1,3 +1,15 @@
 body {
   line-height: 1.5;
 }
+
+a[href^="tel:"]::before {
+  @extend .ci;
+  @extend .ci-phone;
+  margin-right: 0.5em;
+}
+
+a[href^="mailto:"]::before {
+  @extend .ci;
+  @extend .ci-email;
+  margin-right: 0.5em;
+}

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

@@ -1,19 +0,0 @@
-.content-element {
-  margin: 2rem auto;
-  padding: 2rem;
-  background-color: #f5f5f5; // default background
-
-  // Apply responsive widths at breakpoints using the respond mixin
-
-  &--blue {
-    background-color: #cceeff;
-  }
-
-  &--gray {
-    background-color: #eeeeee;
-  }
-
-  &--image {
-    background: url('EXT:my_sitepackage/Resources/Public/Images/background-image.jpg') no-repeat center/cover;
-  }
-}

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

@@ -1,11 +1,10 @@
 .site-footer {
-  background: #f8f8ea;
-  color: #4b4b4b;
   font-size: 0.9rem;
-  padding: 2rem 0;
 
-  &__top {
+  > .container {
-    padding-bottom: 2rem;
+    background: var(--bs-light-green);
+    border-top-left-radius: 2rem;
+    border-top-right-radius: 2rem;
   }
 
   &__grid {
@@ -16,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

@@ -0,0 +1,20 @@
+a {
+  img {
+    transition: transform 0.3s ease;
+  }
+
+  &:hover img {
+    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

@@ -6,17 +6,16 @@ $nav-height: 60px; // Adjust as needed
 // Ensure this path is correct for your TYPO3 installation.
 // Typically: /typo3conf/ext/<extension_key>/Resources/Public/Images/...
 
-header {
+body > header {
   width: 100%;
-  height: $nav-height;
   line-height: $nav-height;
-  background: url('../Images/background.jpg') repeat;
   position: sticky;
   top: 0;
   z-index: 1000;
 }
 
 .main-nav {
+  background: url('../Images/background.jpg') repeat;
 
   .container {
     display: flex;

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 {
+      &.current a, a:hover {
-        background: lighten($primary-color, 20%);
+        background: var(--bs-primary);
-        color: $secondary-color;
+        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%;
+        border-radius: 0.5rem;
-        background: $primary-color;
+        background: transparent;
-        color: $secondary-color;
-        font-weight: bold;
         text-decoration: none;
         transition: background 0.3s ease-in-out;
-
-        &:hover {
-          background: lighten($primary-color, 10%);
-        }
       }
     }
   }
@@ -99,21 +97,60 @@
       color: #fff;
       border-top-right-radius: 1rem;
       padding: 1rem;
+      padding-right: 3rem;
+
+      &:after {
+        position: absolute;
+        right: 1.625rem;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 1.5rem;
+        display: block;
+        content: ' ';
+        width: 1em;
+        height: 1em;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        background-color: currentColor;
+        /* 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;
       font-weight: 500;
+      color: #fff;
       margin: 0;
     }
   }
 }
 
 .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;
+      padding-right: 5rem;
+
+      &:after {
+        right: 3.5rem;
+      }
     }
   }
 }
@@ -122,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/contentElements';
+@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"
+}