change initial files for chatgpt

.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

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

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

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>
@@ -21,7 +20,24 @@
       <div class="hero-image-wrapper">
         <f:if condition="{data.image}">
           <f:then>
-            <f:image image="{data.image.0}" alt="Hero Image" class="hero-image" />
+            <picture>
+              <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,7 +2,6 @@
   margin: 2rem 0;
 }
 
-/* Mobile-first: column layout by default */
 .textimage-container {
   display: flex;
   flex-direction: column;
@@ -13,32 +12,48 @@
   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;
+}
+
+/* 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;
@@ -48,8 +63,7 @@
     flex-direction: row-reverse;
   }
 
-  .textimage-wrapper,
+  .textimage-wrapper {
-  .textimage-image-wrapper {
+    flex: 1;
-    flex: 1 1 50%;
   }
 }

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
@@ -17,3 +18,12 @@ 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,14 +1,39 @@
 <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" />
 
+  <!-- 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">
+    <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" />
+          <picture class="textimage-picture">
+            <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>
@@ -18,6 +43,7 @@
     <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,7 +1,25 @@
 <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:image image="{newsItem.media.0}" class="news-item-grid-image" alt="{newsItem.title}" />
+            <f:then>
+              <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,8 +9,9 @@
 </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">
                     <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '90'}" />
                 </div>
@@ -23,7 +24,7 @@
         <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" />
                 </ul>

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

@@ -40,6 +40,7 @@ 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,7 +25,9 @@ $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,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/_footer.scss

@@ -1,8 +1,11 @@
 .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/...
 
-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

@@ -99,12 +99,32 @@
       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;
     }
   }
@@ -114,6 +134,11 @@
   a .news-item-content {
     @media (min-width: $breakpoint-md) {
       padding: 2.875rem;
+      padding-right: 5rem;
+
+      &:after {
+        right: 3.5rem;
+      }
     }
   }
 }