Cloonar/dialog-relations-website
2
0
Fork 0
Code Pull Requests Actions Activity

feat: integrate Tailwind CSS and remove legacy styles

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2025-04-19 20:49:35 +02:00
parent 700066b2b2
commit 6c9d8966b0
17 changed files with 1618 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.ddev/config.yaml
View File

@@ -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:
# post-start:
# - exec: composer install -d /var/www/html
hooks:
post-start:
- exec: "npm install"
- exec: "npm run build:css"

1732
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -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"
}

4
packages/base/ContentBlocks/ContentElements/header/templates/frontend.html
View File

@@ -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>

167
packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css
View File

@@ -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 {
}
}

23
packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
View File

@@ -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>

44
packages/base/ContentBlocks/ContentElements/stats/assets/frontend.css
View File

@@ -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);
}
}

9
packages/base/ContentBlocks/ContentElements/stats/templates/frontend.html
View File

@@ -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>

4
packages/base/ContentBlocks/ContentElements/text/assets/frontend.css
View File

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

7
packages/base/ContentBlocks/ContentElements/text/templates/frontend.html
View File

@@ -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>

75
packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css
View File

@@ -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;
}
}

44
packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
View File

@@ -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>

6
packages/base/Resources/Public/Scss/abstracts/_fonts.scss
View File

@@ -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;

5
packages/base/Resources/Public/Scss/main.scss
View File

@@ -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';

6
postcss.config.js Normal file
View File

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

30
tailwind.config.js Normal file
View File

@@ -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: [],
}

11
webpack.config.js
View File

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