change initial files for chatgpt

feat: add icons to tel and mailto links
feat: change footer design
2024-12-14 23:52:27 +01:00 · 2024-12-14 23:52:16 +01:00 · 2024-12-14 23:50:55 +01:00 · 2024-12-14 23:50:42 +01:00 · 2024-12-14 17:13:33 +01:00
14 changed files with 178 additions and 53 deletions
--- a/.chatgpt_config.yaml
+++ b/.chatgpt_config.yaml
@@ -2,5 +2,6 @@ project_name: "lena-schilling-website"
 default_prompt_blocks:
  - "basic-prompt"
  - "typo3-development"
-directories:
-  - "packages"
+initial_files:
+  - composer.json
+  - package.json
--- a/packages/base/Configuration/Sets/SitePackage/page.tsconfig
+++ b/packages/base/Configuration/Sets/SitePackage/page.tsconfig
@@ -8,14 +8,10 @@ RTE {

 TCEFORM {
    pages {
-
    }
    tt_content {
-
    }
 }

 TCEMAIN {
-
 }
-
--- a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
+++ b/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>
--- a/packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css
+++ b/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
-   On larger screens, adjust the layout */
+/* Image positions: 25 = left, 26 = right */
+.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-image-wrapper {
-    flex: 1 1 50%;
+  .textimage-wrapper {
+    flex: 1;
  }
 }
--- a/packages/base/ContentBlocks/ContentElements/textimage/config.yaml
+++ b/packages/base/ContentBlocks/ContentElements/textimage/config.yaml
@@ -1,11 +1,12 @@
 name: cloonar/textimage
 typeName: cloonar_textimage
 group: default
-prefixFields: true
-prefixType: full
+prefixFields: false
 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
--- a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
+++ b/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">
--- a/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html
+++ b/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}">
--- a/packages/base/Resources/Private/PageView/Layouts/Default.html
+++ b/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>
--- a/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
+++ b/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;
 }

--- a/packages/base/Resources/Public/Scss/abstracts/_variables.scss
+++ b/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
--- a/packages/base/Resources/Public/Scss/base/_global.scss
+++ b/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;
+}
--- a/packages/base/Resources/Public/Scss/components/_footer.scss
+++ b/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;
--- a/packages/base/Resources/Public/Scss/components/_navigation.scss
+++ b/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;
--- a/packages/base/Resources/Public/Scss/components/_news.scss
+++ b/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;
+      }
    }
  }
 }
Author	SHA1	Message	Date
Dominik Polakovics	f77e921b81	change initial files for chatgpt All checks were successful Build / build (push) Successful in 4m17s Details Build / deploy-stage (push) Successful in 2m44s Details Build / switch-stage (push) Successful in 2m16s Details	2024-12-14 23:52:27 +01:00
Dominik Polakovics	147f53775f	feat: add icons to tel and mailto links	2024-12-14 23:52:16 +01:00
Dominik Polakovics	1da5ce2a77	feat: change footer design	2024-12-14 23:50:55 +01:00
Dominik Polakovics	bed54e120b	feat: add possibility to change image size at text image element	2024-12-14 23:50:42 +01:00
Dominik Polakovics	ee73d44aaf	fix: design changes	2024-12-14 17:13:33 +01:00