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

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>