feat: integrate Tailwind CSS and remove legacy styles

.ddev/config.yaml

@@ -14,6 +14,7 @@ composer_version: "2"
 web_environment:
   - TYPO3_CONTEXT=Development/Ddev
 corepack_enable: false
+nodejs_version: "18"
 
 # Key features of DDEV's config.yaml:
 
@@ -278,6 +279,7 @@ corepack_enable: false
 # See https://ddev.readthedocs.io/en/stable/users/extend/custom-commands/ for more
 # information on the commands that can be extended and the tasks you can define
 # for them. Example:
-#hooks:
+hooks:
-#  post-start:
+  post-start:
-#    - exec: composer install -d /var/www/html
+    - exec: "npm install"
+    - exec: "npm run build:css"

package.json

@@ -5,10 +5,14 @@
     "build:css": "webpack --config webpack.config.js"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.21",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
+    "postcss": "^8.5.3",
+    "postcss-loader": "^8.1.1",
     "sass": "^1.63.4",
     "sass-loader": "^13.3.2",
+    "tailwindcss": "^3.4.17",
     "webpack": "^5.88.0",
     "webpack-cli": "^5.1.4"
   }

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

@@ -1,4 +1,6 @@
 <f:layout name="Default" />
 <f:section name="Main">
-    <h1><span class="tapered">{data.header}</span></h1>
+    <h1 class="font-hajime text-primary font-normal leading-none text-center text-5xl md:text-7xl">
+        <span>{data.header}</span>
+    </h1>
 </f:section>

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

@@ -1,167 +0,0 @@
-.frame-type-cloonar_hero {
-  position: relative;
-  z-index: 1;
-  /* Use a relative path to correctly load the image */
-  background: #cecece;
-  background-repeat: repeat;
-  background: url('../../../Images/background.jpg') repeat;
-}
-
-.frame-type-cloonar_hero + .frame {
-    margin-top: -10.4rem;
-}
-.frame-type-cloonar_hero .container {
-    padding-bottom: 3rem;
-}
-
-/* Inner container with white background and padding */
-.frame-type-cloonar_hero .hero-inner {
-  padding: 3rem 1rem;
-  max-width: 1140px;
-  margin: 0 auto;
-}
-
-.frame-type-cloonar_hero .hero {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.frame-type-cloonar_hero .hero-subheader {
-  font-size: 2rem;
-  color: var(--bs-primary);
-  margin-bottom: 0rem;
-  line-height: 1;
-}
-
-.frame-type-cloonar_hero .hero-title {
-  text-transform: uppercase;
-  font-size: 4rem;
-  color: var(--bs-primary);
-  line-height: 1;
-  margin-bottom: 2rem;
-}
-
-.frame-type-cloonar_hero h4 {
-    text-transform: uppercase;
-}
-
-.frame-type-cloonar_hero .hero-text {
-  font-size: 1rem;
-  color: #333;
-  line-height: 1.4;
-  margin-bottom: 1rem;
-  max-width: 45ch;
-}
-
-.frame-type-cloonar_hero .hero-social-icons {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-/* Smaller icons on mobile */
-.frame-type-cloonar_hero .social-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1rem;
-  padding: 1rem;
-  text-decoration: none;
-  border-radius: 50%;
-  transition: background 0.3s;
-}
-
-.frame-type-cloonar_hero .hero-image-wrapper {
-  margin-top: 1rem;
-  align-self: flex-end;
-  width: 100%;
-}
-
-.frame-type-cloonar_hero .hero-image {
-  width: 100%;
-  height: auto;
-  border-radius: 0.5rem;
-}
-
-.frame-type-cloonar_hero img {
-    width: 100%;
-}
-
-@media (min-width: 768px) {
-    .frame-type-cloonar_hero .container {
-        padding-bottom: 4rem;
-    }
-
-  .frame-type-cloonar_hero .hero-subheader {
-    font-size: 3rem;
-  }
-
-  .frame-type-cloonar_hero .hero-title {
-    font-size: 5rem;
-  }
-
-  .frame-type-cloonar_hero .hero-text {
-    font-size: 1rem;
-  }
-
-  .frame-type-cloonar_hero .social-icon {
-    width: 2.5rem;
-    height: 2rem;
-    font-size: 2rem;
-    padding: 2.375rem;
-  }
-
-  .frame-type-cloonar_hero .hero-image {
-  }
-}
-
-@media (min-width: 992px) {
-  .frame-type-cloonar_hero .hero {
-    display: grid;
-    grid-template-columns: 1fr 40% 7.125rem;
-    grid-template-rows: auto auto 1fr;
-    grid-template-areas:
-      "subheader    image social"
-      "title        image social"
-      "text         image social";
-    align-items: start;
-    justify-items: start;
-    text-align: left;
-  }
-
-  .frame-type-cloonar_hero .hero-subheader {
-    grid-area: subheader;
-  }
-
-  .frame-type-cloonar_hero .hero-title {
-    grid-area: title;
-  }
-
-  .frame-type-cloonar_hero .hero-text {
-    grid-area: text;
-    font-size: 1rem;
-    max-width: 40ch;
-    margin-bottom: 1.5rem;
-  }
-
-  .frame-type-cloonar_hero .hero-social-icons {
-    grid-area: social;
-    flex-direction: column;
-    gap: 1rem;
-    margin-bottom: 0;
-    align-items: flex-start;
-    align-self: center;
-  }
-
-  .frame-type-cloonar_hero .hero-image-wrapper {
-    grid-area: image;
-    margin-top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .frame-type-cloonar_hero .hero-image {
-  }
-}

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

@@ -4,20 +4,18 @@
 <f:section name="Header" />
 
 <f:section name="Main">
-  <f:asset.css identifier="CBHero" href="{cb:assetPath()}/frontend.css" />
+  <div class="py-12 px-4 max-w-6xl mx-auto">
-
+    <div class="flex flex-col items-start lg:grid lg:grid-cols-[1fr_auto_auto] lg:grid-rows-[auto_auto_1fr] lg:gap-x-8 lg:items-start lg:justify-items-start lg:text-left">
-  <div class="hero-inner">
+      <h2 class="text-3xl text-primary mb-0 leading-none lg:text-5xl lg:col-start-1 lg:row-start-1">{data.subheader}</h2>
-    <div class="hero">
+      <h1 class="uppercase text-6xl text-primary leading-none mb-8 lg:text-7xl lg:col-start-1 lg:row-start-2">{data.header}</h1>
-      <h2 class="hero-subheader">{data.subheader}</h2>
+      <div class="text-base text-gray-700 leading-snug mb-4 max-w-[45ch] lg:text-base lg:max-w-[40ch] lg:mb-6 lg:col-start-1 lg:row-start-3">
-      <h1 class="hero-title">{data.header}</h1>
-      <div class="hero-text">
         <f:format.html>{data.bodytext}</f:format.html>
       </div>
-      <div class="hero-social-icons">
+      <div class="flex gap-2 mb-4 lg:flex-col lg:gap-4 lg:mb-0 lg:items-start lg:self-center lg:col-start-3 lg:row-start-1 lg:row-span-3">
-        <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://www.instagram.com/lena.ats/" target="_blank" aria-label="Lena Schillings Instagram" class="btn inline-flex items-center justify-center text-base p-4 rounded-full transition duration-300 bg-yellow text-primary hover:bg-primary-light hover:text-white md:p-6 md:text-3xl"><i class="ci ci-instagram"></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>
+        <a href="https://www.tiktok.com/@dieschilling" target="_blank" aria-label="Lena Schillings TikTok" class="btn inline-flex items-center justify-center text-base p-4 rounded-full transition duration-300 bg-yellow text-primary hover:bg-primary-light hover:text-white md:p-6 md:text-3xl"><i class="ci ci-tiktok"></i></a>
       </div>
-      <div class="hero-image-wrapper">
+      <div class="mt-4 self-end w-full lg:mt-0 lg:flex lg:items-center lg:justify-center lg:col-start-2 lg:row-start-1 lg:row-span-3">
         <f:if condition="{data.image}">
           <f:then>
             <figure>
@@ -31,7 +29,6 @@
                   sizes="(max-width: 320px) 80vw,
                          (max-width: 768px) 80px,
                          430px" />
-
                 <!-- Fallback source -->
               <source
                 srcset="
@@ -49,7 +46,7 @@
                 width="430c"
                 alt="Hero Image"
                 loading="lazy"
-                class="hero-image" />
+                class="w-full h-auto rounded-lg" />
             </figure>
           </f:then>
           <f:else>

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

@@ -1,44 +0,0 @@
-.frame-type-cloonar_stats .stats-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-    position: relative;
-    z-index: 10;
-    background: #fff;
-    padding: 1rem;
-    max-width: 1140px;
-    margin-left: auto;
-    margin-right: auto;
-    gap: 1rem; /* maintain gap on mobile */
-}
-
-/* Two columns on mobile */
-.frame-type-cloonar_stats .stats-wrapper p {
-    box-sizing: border-box;
-    flex: 0 0 calc((100% - 1rem) / 2);
-    max-width: calc((100% - 1rem) / 2);
-    text-align: center;
-    margin-bottom: 1rem;
-    text-transform: uppercase;
-    color: var(--bs-primary);
-}
-
-.frame-type-cloonar_stats .stats-wrapper span.big-number {
-    font-size: 4rem;
-    font-family: 'Hajime Sans', sans-serif;
-    text-transform: none;
-}
-
-@media (min-width: 768px) {
-  .frame-type-cloonar_stats .stats-wrapper {
-      padding: 3rem 1rem;
-      gap: 2rem; /* increase gap on desktop */
-  }
-
-  /* Four columns on desktop */
-  .frame-type-cloonar_stats .stats-wrapper p {
-      flex: 0 0 calc((100% - 6rem) / 4); /* 3 gaps * 2rem = 6rem total gap */
-      max-width: calc((100% - 6rem) / 4);
-  }
-}

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

@@ -3,11 +3,12 @@
 <f:section name="Header" />
 
 <f:section name="Main">
-  <f:asset.css identifier="CBStats" href="{cb:assetPath()}/frontend.css" />
+  <div class="relative z-10 bg-white p-4 md:py-12 md:px-4 max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8">
-
-  <div class="stats-wrapper">
     <f:format.html>
-      {data.bodytext}
+      {data.bodytext -> f:format.raw() -> cb:processRichText(styles: [
+          'p=text-center uppercase text-primary',
+          'span.big-number=block text-6xl font-hajime normal-case'
+      ])}
     </f:format.html>
   </div>
 </f:section>

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

@@ -1,4 +0,0 @@
-/* CSS for text content element */
-.frame-type-cloonar_text .text-bodytext {
-    max-width: 750px;
-}

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

@@ -1,13 +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:then><h2 class="font-hajime text-primary font-normal leading-none text-3xl md:text-5xl mb-4">{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>
+                <div class="max-w-3xl prose lg:prose-lg">
+                    <f:format.html>{data.bodytext}</f:format.html>
+                </div>
             </f:then>
         </f:if>
     </div>

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

@@ -1,75 +0,0 @@
-.textimage-container {
-    --gap: 2rem;
-    display: flex;
-    flex-direction: column;
-    gap: var(--gap);
-}
-
-.textimage-wrapper {
-  width: 100%;
-}
-
-.textimage-text {
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.textimage-image-wrapper {
-  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 */
-.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;
-  }
-
-  .textimage-container.image-pos-26 {
-    flex-direction: row-reverse;
-  }
-
-    .textimage-image-wrapper.size-25 {
-        flex: 0 0 calc(40% - (var(--gap) / 2));
-        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/templates/frontend.html

@@ -1,23 +1,21 @@
 <f:layout name="Default" />
-
 <f:section name="Header"></f:section>
 <f:section name="Main">
-  <f:asset.css identifier="CBTextImage" href="{cb:assetPath()}/frontend.css" />
+  <f:variable name="imageSizeClass" value="md:w-1/2" />
+  <f:variable name="textSizeClass" value="md:w-1/2" />
+  <f:variable name="gapClass" value="gap-8" />
 
-  <!-- Determine size class based on imagesize field -->
+  <f:if condition="{data.imagesize} == 1"> <!-- Size 25% -> map to 40% for layout -->
-  <f:variable name="sizeClass" value="" />
+    <f:variable name="imageSizeClass" value="md:w-2/5" />
-  <f:if condition="{data.imagesize} == 1">
+    <f:variable name="textSizeClass" value="md:w-3/5" />
-    <f:then><f:variable name="sizeClass" value="size-25" /></f:then>
+    <f:variable name="gapClass" value="gap-8 md:gap-16 lg:gap-32" />
-  </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="flex flex-col {gapClass} fade-in-on-scroll {f:if(condition: '{data.imageorient} == 26', then: 'md:flex-row-reverse', else: 'md:flex-row')}">
-    <div class="textimage-image-wrapper {sizeClass}">
+    <div class="flex items-center justify-center {imageSizeClass}">
       <f:if condition="{data.image}">
         <f:then>
-          <figure class="textimage-picture">
+          <figure class="block w-full">
             <!-- WEBP source -->
             <source
               type="image/webp"
@@ -25,27 +23,23 @@
                 {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,
+              sizes="(max-width: 767px) 90vw,
-                     (max-width: 768px) 600px,
+                     {f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
-                     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,
+              sizes="(max-width: 767px) 90vw,
-                     (max-width: 768px) 600px,
+                     {f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
-                     600px" />
-
             <f:image
               image="{data.image.0}"
               treatIdAsReference="1"
               cropVariant="default"
               width="538c"
               alt="{data.image.0.alternative}"
-              class="textimage-image"
+              class="max-w-full h-auto rounded-lg block"
             />
           </figure>
         </f:then>
@@ -54,13 +48,13 @@
         </f:else>
       </f:if>
     </div>
-    <div class="textimage-wrapper {sizeClass}">
+    <div class="{textSizeClass}">
       <f:if condition="{data.header}">
-        <h2 class="textimage-header">{data.header}</h2>
+        <h2 class="font-hajime text-primary font-normal leading-none text-3xl md:text-5xl mb-2">{data.header}</h2>
-        <h3 class="textimage-subheader">{data.subheader}</h3>
+        <h3 class="text-xl md:text-2xl font-semibold mb-4">{data.subheader}</h3>
       </f:if>
       <f:if condition="{data.bodytext}">
-        <div class="textimage-text">
+        <div class="prose lg:prose-lg">
           <f:format.html>{data.bodytext}</f:format.html>
         </div>
       </f:if>

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

@@ -35,12 +35,6 @@ h1 {
     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: 2rem;

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

@@ -1,3 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Keep existing imports for now, comment out or remove as needed during conversion */
 @import 'abstracts/variables';
 @import 'abstracts/mixins';
 @import 'abstracts/fonts';

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

tailwind.config.js

@@ -0,0 +1,30 @@
+/** @type {import('tailwindcss').Config} */
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  content: [
+    "./packages/base/Resources/Private/**/*.html",
+    "./packages/base/Resources/Private/**/*.js",
+    "./packages/base/ContentBlocks/ContentElements/**/*.html",
+    "./public/typo3conf/ext/*/Resources/Private/**/*.html",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', ...defaultTheme.fontFamily.sans],
+        hajime: ['"Hajime Sans"', ...defaultTheme.fontFamily.sans],
+      },
+      colors: {
+        primary: {
+          DEFAULT: '#233600',
+          dark: '#1C2B00',
+          light: '#4E5E32',
+        },
+        yellow: '#F5AE07',
+        'light-green': '#F4F6EC',
+      }
+    },
+  },
+  plugins: [],
+}
+

webpack.config.js

@@ -15,6 +15,17 @@ module.exports = {
         use: [
           MiniCssExtractPlugin.loader,
           'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: {
+                  tailwindcss: {},
+                  autoprefixer: {},
+                }
+              }
+            }
+          },
           'sass-loader'
         ]
       }