fix: design changes

.chatgpt_config.yaml

@@ -2,5 +2,3 @@ project_name: "lena-schilling-website"
 default_prompt_blocks:
   - "basic-prompt"
   - "typo3-development"
-directories:
-  - "packages"

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,30 @@
         <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>
-            <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/templates/frontend.html

@@ -8,7 +8,23 @@
     <div class="textimage-image-wrapper">
       <f:if condition="{data.image}">
         <f:then>
-          <f:image image="{data.image.0}" alt="{data.header}" class="textimage-image" />
+          <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" 
+              width="1024c" 
+              alt="{data.header}" 
+              class="textimage-image" />
+          </picture>
         </f:then>
         <f:else>
           <p>No image available</p>

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/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/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;
+      }
     }
   }
 }