.chatgpt_config.yaml

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

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

@@ -8,10 +8,14 @@ RTE {
 
 TCEFORM {
     pages {
+
     }
     tt_content {
+
     }
 }
 
 TCEMAIN {
+
 }
+

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

@@ -7,6 +7,7 @@
   <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>
@@ -14,30 +15,13 @@
         <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://instagram.com" class="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://tiktok.com" class="social-icon"><i class="ci ci-tiktok"></i></a>
       </div>
       <div class="hero-image-wrapper">
         <f:if condition="{data.image}">
           <f:then>
-            <picture>
+            <f:image image="{data.image.0}" alt="Hero Image" class="hero-image" />
-              <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')} 430w"
-                sizes="(max-width: 320px) 80vw,
-                       (max-width: 768px) 80vw,
-                       430px" />
-              <f:image
-                image="{data.image.0}"
-                treatIdAsReference="1"
-                cropVariant="default"
-                width="430c"
-                alt="Hero Image"
-                loading="lazy"
-                class="hero-image" />
-            </picture>
           </f:then>
           <f:else>
             <p>No image available</p>

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

@@ -2,6 +2,7 @@
   margin: 2rem 0;
 }
 
+/* Mobile-first: column layout by default */
 .textimage-container {
   display: flex;
   flex-direction: column;
@@ -12,48 +13,32 @@
   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
-.textimage-container.image-pos-25 {
+   On larger screens, adjust the layout */
-  flex-direction: column;
-}
-
-.textimage-container.image-pos-26 {
-  flex-direction: column;
-}
-
-/* Size classes apply at all viewports */
-.textimage-image-wrapper.size-25 .textimage-picture {
-  max-width: 300px;
-}
-
-.textimage-image-wrapper.size-50 .textimage-picture {
-  max-width: 600px;
-}
-
-/* On larger screens, arrange horizontally for image position settings */
 @media (min-width: 768px) {
   .textimage-container.image-pos-25 {
     flex-direction: row;
@@ -63,7 +48,8 @@
     flex-direction: row-reverse;
   }
 
-  .textimage-wrapper {
+  .textimage-wrapper,
-    flex: 1;
+  .textimage-image-wrapper {
+    flex: 1 1 50%;
   }
 }

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

@@ -1,12 +1,11 @@
 name: cloonar/textimage
 typeName: cloonar_textimage
 group: default
-prefixFields: false
+prefixFields: true
+prefixType: full
 fields:
   - identifier: header
     useExistingField: true
-  - identifier: subheader
-    useExistingField: true
   - identifier: bodytext
     type: Textarea
     enableRichtext: true
@@ -18,12 +17,3 @@ fields:
     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/frontend.html

@@ -1,39 +1,14 @@
 <f:layout name="Default" />
 
-<f:section name="Header"></f:section>
+<f:section name="Header" />
 <f:section name="Main">
   <f:asset.css identifier="CBTextImage" href="{cb:assetPath()}/frontend.css" />
 
-  <!-- Determine size class based on imagesize field -->
-  <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}">
-    <div class="textimage-image-wrapper {sizeClass}">
+    <div class="textimage-image-wrapper">
       <f:if condition="{data.image}">
         <f:then>
-          <picture class="textimage-picture">
+          <f:image image="{data.image.0}" alt="{data.header}" class="textimage-image" />
-            <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"
-              sizes="(max-width: 320px) 90vw,
-                     (max-width: 768px) 600px,
-                     600px" />
-            <f:image
-              image="{data.image.0}"
-              treatIdAsReference="1"
-              cropVariant="default"
-              alt="{data.header}"
-              class="textimage-image"
-            />
-          </picture>
         </f:then>
         <f:else>
           <p>No image available</p>
@@ -43,7 +18,6 @@
     <div class="textimage-wrapper">
       <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,25 +1,7 @@
 <div class="news-list-item {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>
+            <f:image image="{newsItem.media.0}" class="news-item-grid-image" alt="{newsItem.title}" />
-              <picture>
-                <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}">

packages/base/Resources/Private/PageView/Layouts/Default.html

@@ -9,26 +9,25 @@
 </main>
 
 <footer class="site-footer">
-    <div class="container">
+  <div class="site-footer__top">
-        <div class="site-footer__top">
+    <div class="container site-footer__grid">
-            <div class="site-footer__grid">
+      <div class="site-footer__left">
-                <div class="site-footer__left">
+        <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '90'}" />
-                    <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '90'}" />
+      </div>
-                </div>
+      <div class="site-footer__right">
-                <div class="site-footer__right">
+        <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '91'}" />
-                    <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '91'}" />
+      </div>
-                </div>
+    </div>
-            </div>
+  </div>
-        </div>
 
-        <hr class="site-footer__divider" />
+  <hr class="site-footer__divider" />
 
-        <div class="site-footer__bottom">
+  <div class="site-footer__bottom">
-            <div class="site-footer__bottom-grid">
+    <div class="container site-footer__bottom-grid">
-                <ul class="site-footer__legal">
+      <ul class="site-footer__legal">
-                    <f:cObject typoscriptObjectPath="lib.footerMenu" />
+        <f:cObject typoscriptObjectPath="lib.footerMenu" />
-                </ul>
+      </ul>
-                <p class="site-footer__copyright">© All Right Reserved</p>
+      <p class="site-footer__copyright">© All Right Reserved</p>
-            </div>
+    </div>
-        </div>
+  </div>
 </footer>

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

@@ -40,7 +40,6 @@ body {
 // Use Hajime Sans for headlines
 h1, h2, h3 {
   font-family: 'Hajime Sans', sans-serif;
-  color: var(--bs-primary);
   font-weight: 400;
 }
 

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

@@ -25,9 +25,7 @@ $xl: 1200px;
 
   --bs-primary: #233600;
   --bs-yellow: #F5AE07;
-  --bs-light-green: #F4F6EC;
   --cl-primary: #233600;
-
 }
 
 // Additional global variables can be added here

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

@@ -1,15 +1,3 @@
 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/_footer.scss

@@ -1,11 +1,8 @@
 .site-footer {
+  background: #f8f8ea;
+  color: #4b4b4b;
   font-size: 0.9rem;
-
+  padding: 2rem 0;
-  .container {
-    background: var(--bs-light-green);
-    border-top-left-radius: 2rem;
-    border-top-right-radius: 2rem;
-  }
 
   &__top {
     padding-bottom: 2rem;

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

@@ -6,17 +6,17 @@ $nav-height: 60px; // Adjust as needed
 // Ensure this path is correct for your TYPO3 installation.
 // Typically: /typo3conf/ext/<extension_key>/Resources/Public/Images/...
 
-body > header {
+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

@@ -99,32 +99,12 @@
       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);
-      }
     }
 
     h3 {
       font-family: 'Inter', sans-serif;
       font-size: 1.25rem;
       font-weight: 500;
-      color: #fff;
       margin: 0;
     }
   }
@@ -134,11 +114,6 @@
   a .news-item-content {
     @media (min-width: $breakpoint-md) {
       padding: 2.875rem;
-      padding-right: 5rem;
-
-      &:after {
-        right: 3.5rem;
-      }
     }
   }
 }