feat: integrate Tailwind CSS and remove legacy styles

2025-04-19 20:49:35 +02:00
parent 700066b2b2
commit 6c9d8966b0
17 changed files with 1618 additions and 563 deletions
--- a/packages/base/ContentBlocks/ContentElements/header/templates/frontend.html
+++ b/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>
--- a/packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css
+++ b/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 {
-  }
-}
--- a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
+++ b/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="hero-inner">
-    <div class="hero">
-      <h2 class="hero-subheader">{data.subheader}</h2>
-      <h1 class="hero-title">{data.header}</h1>
-      <div class="hero-text">
+  <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">
+      <h2 class="text-3xl text-primary mb-0 leading-none lg:text-5xl lg:col-start-1 lg:row-start-1">{data.subheader}</h2>
+      <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>
+      <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">
        <f:format.html>{data.bodytext}</f:format.html>
      </div>
-      <div class="hero-social-icons">
-        <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.tiktok.com/@dieschilling" target="_blank" aria-label="Lena Schillings TikTok" class="btn social-icon"><i class="ci ci-tiktok"></i></a>
+      <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 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 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>
--- a/packages/base/ContentBlocks/ContentElements/stats/assets/frontend.css
+++ b/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);
-  }
-}
--- a/packages/base/ContentBlocks/ContentElements/stats/templates/frontend.html
+++ b/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="stats-wrapper">
+  <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">
    <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>
--- a/packages/base/ContentBlocks/ContentElements/text/assets/frontend.css
+++ b/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;
-}
--- a/packages/base/ContentBlocks/ContentElements/text/templates/frontend.html
+++ b/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>
--- a/packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css
+++ b/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;
-    }
-}
--- a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
+++ b/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: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 condition="{data.imagesize} == 1"> <!-- Size 25% -> map to 40% for layout -->
+    <f:variable name="imageSizeClass" value="md:w-2/5" />
+    <f:variable name="textSizeClass" value="md:w-3/5" />
+    <f:variable name="gapClass" value="gap-8 md:gap-16 lg:gap-32" />
  </f:if>

-  <div class="textimage-container image-pos-{data.imageorient} {sizeClass} fade-in-on-scroll">
-    <div class="textimage-image-wrapper {sizeClass}">
+  <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="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,
-                     (max-width: 768px) 600px,
-                     600px" />
-
+              sizes="(max-width: 767px) 90vw,
+                     {f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
            <!-- 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,
-                     (max-width: 768px) 600px,
-                     600px" />
-
+              sizes="(max-width: 767px) 90vw,
+                     {f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
            <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>
-        <h3 class="textimage-subheader">{data.subheader}</h3>
+        <h2 class="font-hajime text-primary font-normal leading-none text-3xl md:text-5xl mb-2">{data.header}</h2>
+        <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>