feat: SurfZone theme

This commit is contained in:
Björn Fromme
2024-04-09 15:03:03 +02:00
parent 606a4ff355
commit 4b294bf827
16 changed files with 2844 additions and 1918 deletions
+2805 -1891
View File
File diff suppressed because it is too large Load Diff
@@ -18,7 +18,7 @@
&:after {
content: "";
@apply absolute top-100 left-0 mt-2 mb-2 border-b-4 w-48;
@apply border-ep-primary-dark sbw:border-sbw-primary-dark snz:border-snz-primary-dark uch:border-uch-primary-dark;
@apply border-ep-primary-dark sbw:border-sbw-primary-dark snz:border-snz-primary-dark suz:border-suz-primary-dark uch:border-uch-primary-dark;
}
}
.-translate-xy-1\/2 {
@@ -32,11 +32,13 @@ a.rte-button {
@apply bg-ep-primary-light text-white;
@apply sbw:bg-sbw-secondary;
@apply snz:bg-snz-secondary;
@apply suz:bg-suz-secondary;
@apply uch:bg-uch-secondary;
@apply ser:bg-ser-secondary;
@apply hover:bg-ep-secondary group-hover:bg-ep-secondary;
@apply sbw:hover:bg-sbw-primary-dark sbw:group-hover:bg-sbw-primary-dark;
@apply snz:hover:bg-snz-primary-dark snz:group-hover:bg-snz-primary-dark;
@apply suz:hover:bg-suz-primary-dark suz:group-hover:bg-suz-primary-dark;
@apply uch:hover:bg-uch-primary-dark uch:group-hover:bg-uch-primary-dark;
@apply ser:hover:bg-ser-primary ser:group-hover:bg-ser-primary;
}
@@ -20,7 +20,7 @@ h4,
.headline--underlined:after {
@apply block border-b-4 border-ep-primary-light pb-4 mb-4 -mt-2 w-20;
@apply sbw:border-sbw-primary snz:border-snz-primary uch:border-uch-primary ser:border-ser-secondary;
@apply sbw:border-sbw-primary snz:border-snz-primary suz:border-suz-primary uch:border-uch-primary ser:border-ser-secondary;
content: '';
}
@@ -16,11 +16,13 @@
@apply bg-ep-primary-light text-white;
@apply sbw:bg-sbw-secondary;
@apply snz:bg-snz-secondary;
@apply suz:bg-suz-secondary;
@apply uch:bg-uch-secondary;
@apply ser:bg-ser-secondary;
@apply hover:bg-ep-secondary;
@apply sbw:hover:bg-sbw-primary-dark;
@apply snz:hover:bg-snz-primary-dark;
@apply suz:hover:bg-suz-primary-dark;
@apply uch:hover:bg-uch-primary-dark;
@apply ser:hover:bg-ser-primary;
@@ -29,6 +31,7 @@
@apply bg-ep-secondary;
@apply sbw:bg-sbw-primary;
@apply snz:bg-snz-primary;
@apply suz:bg-suz-primary;
@apply uch:bg-uch-primary;
@apply ser:bg-ser-secondary;
}
@@ -49,6 +52,7 @@
@apply border-ep-primary-light text-ep-primary;
@apply sbw:bg-white sbw:border-sbw-primary sbw:text-sbw-primary;
@apply snz:bg-white snz:border-snz-primary snz:text-snz-primary;
@apply suz:bg-white suz:border-suz-primary suz:text-suz-primary;
@apply uch:bg-white uch:border-uch-primary uch:text-uch-primary;
@apply ser:bg-white ser:border-ser-primary ser:text-uch-primary;
@@ -58,6 +62,7 @@
@apply border-ep-secondary text-ep-secondary;
@apply sbw:bg-white sbw:border-sbw-secondary sbw:text-sbw-secondary;
@apply snz:bg-white snz:border-snz-secondary snz:text-snz-secondary;
@apply suz:bg-white suz:border-suz-secondary suz:text-suz-secondary;
@apply uch:bg-white uch:border-uch-secondary uch:text-uch-secondary;
@apply ser:bg-white ser:border-ser-secondary ser:text-ser-secondary;
}
@@ -9,7 +9,7 @@
.contact-bar__item {
@apply flex-1 text-white py-2 bg-ep-primary-dark border-r border-white last:border-0;
@apply ser:bg-ser-primary sbw:bg-sbw-primary snz:bg-snz-primary uch:bg-uch-primary;
@apply ser:bg-ser-primary sbw:bg-sbw-primary snz:bg-snz-primary suz:bg-suz-primary uch:bg-uch-primary;
@screen md {
@apply flex flex-none items-start transition-transform duration-300 ease-in-out p-1 shadow-md focus:text-white border-0;
@@ -3,7 +3,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', suz: \'bg-suz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines"
section="Top1"
@@ -23,7 +23,7 @@
</f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
class="absolute bottom-0 left-1/2 -translate-x-1/2 -mb-8 rounded-full py-4 px-6 flex items-center space-x-2 {ep:themeClasses(classes: '{ep: \'bg-ep-secondary\', sbw: \'bg-sbw-secondary\', snz: \'bg-snz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
class="absolute bottom-0 left-1/2 -translate-x-1/2 -mb-8 rounded-full py-4 px-6 flex items-center space-x-2 {ep:themeClasses(classes: '{ep: \'bg-ep-secondary\', sbw: \'bg-sbw-secondary\', snz: \'bg-snz-secondary\', suz: \'bg-suz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
{ep:icon(icon: 'phone', class: 'w-10 h-10 text-white')}
<div class="text-center text-white">
<span class="block whitespace-nowrap">
@@ -3,7 +3,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', suz: \'bg-suz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
<f:render partial="Disrupter/Outlines"
section="Top1"
arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{background} == 1 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
@@ -4,7 +4,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', suz: \'bg-suz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines"
section="Top1"
@@ -24,7 +24,7 @@
</f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
class="absolute bottom-0 left-1/2 -translate-x-1/2 -mb-8 rounded-full py-4 px-6 flex items-center space-x-2 {ep:themeClasses(classes: '{ep: \'bg-ep-secondary\', sbw: \'bg-sbw-secondary\', snz: \'bg-snz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
class="absolute bottom-0 left-1/2 -translate-x-1/2 -mb-8 rounded-full py-4 px-6 flex items-center space-x-2 {ep:themeClasses(classes: '{ep: \'bg-ep-secondary\', sbw: \'bg-sbw-secondary\', snz: \'bg-snz-secondary\', suz: \'bg-suz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
{ep:icon(icon: 'phone', class: 'w-10 h-10 text-white')}
<div class="text-center text-white">
<span class="block whitespace-nowrap">
@@ -3,7 +3,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', suz: \'bg-suz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
<f:render partial="Disrupter/Outlines"
section="Top1"
arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
@@ -5,7 +5,7 @@
<div class="container lg:max-w-screen-2xl my-8">
<div class="bg-pattern">
<div class="pt-8 lg:py-8 {ep:themeClasses(classes: '{sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)}">
<div class="pt-8 lg:py-8 {ep:themeClasses(classes: '{sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', suz: \'bg-suz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)}">
<div class="flex flex-col space-y-4 lg:space-y-0 lg:flex-row items-center">
<div class="w-full lg:w-1/3 font-black uppercase text-white text-4xl lg:text-3xl text-center">
{headline -> f:format.raw()}
@@ -4,15 +4,15 @@
<div class="relative max-w-screen-2xl mx-auto">
<div class="absolute bottom-0 left-0 inset-x-0">
<div class="py-8 {ep:themeClasses(classes: '{sbw: \'bg-sbw-overlay/55\', snz: \'bg-snz-primary/50\', uch: \'bg-uch-primary/50\'}', key: settings.themekey)}">
<div class="py-8 {ep:themeClasses(classes: '{sbw: \'bg-sbw-overlay/55\', snz: \'bg-snz-primary/50\', suz: \'bg-suz-primary/50\', uch: \'bg-uch-primary/50\'}', key: settings.themekey)}">
<div class="max-w-screen-md mx-auto px-4 md:px-0 flex">
<div class="hidden sm:flex flex-col justify-center {ep:themeClasses(classes: '{sbw: \'bg-sbw-primary\', snz: \'bg-snz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
<div class="hidden sm:flex flex-col justify-center {ep:themeClasses(classes: '{sbw: \'bg-sbw-primary\', snz: \'bg-snz-secondary\', suz: \'bg-suz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
<div class="text-white font-extrabold text-3xl lg:text-5xl flex-1 flex flex-col justify-around items-center text-center leading-none py-2 px-8 md:px-16">
<span>{settings.eventDateDayFrom -> f:format.raw()}</span>
<span>-</span>
<span>{settings.eventDateDayTo -> f:format.raw()}</span>
</div>
<div class="w-full px-4 bg-white text-center sbw:text-sbw-primary snz:text-snz-primary-dark uch:text-uch-secondary p-2 whitespace-nowrap text-xl md:text-2xl uppercase font-bold leading-tight">
<div class="w-full px-4 bg-white text-center sbw:text-sbw-primary snz:text-snz-primary-dark suz:text-suz-primary-dark uch:text-uch-secondary p-2 whitespace-nowrap text-xl md:text-2xl uppercase font-bold leading-tight">
{settings.eventDateMonth -> f:format.raw()}
</div>
</div>
@@ -24,7 +24,7 @@
</div>
</div>
</div>
<div class="sm:hidden text-white text-2xl uppercase text-center leading-none py-4 {ep:themeClasses(classes: '{sbw: \'bg-sbw-secondary\', snz: \'bg-snz-primary\', uch: \'bg-uch-primary\'}', key: settings.themekey)}">
<div class="sm:hidden text-white text-2xl uppercase text-center leading-none py-4 {ep:themeClasses(classes: '{sbw: \'bg-sbw-secondary\', snz: \'bg-snz-primary\', suz: \'bg-suz-primary\', uch: \'bg-uch-primary\'}', key: settings.themekey)}">
{settings.eventDateDayFrom -> f:format.raw()} - {settings.eventDateDayTo -> f:format.raw()} {settings.eventDateMonth -> f:format.raw()}
</div>
@@ -49,8 +49,8 @@
<div class="absolute top-0 right-0 mt-8 mr-4">
<svg viewBox="0 0 200 200"
class="w-40 h-40">
<circle id="bgouter" cx="100" cy="100" r="100" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary/50\', snz: \'text-snz-primary/50\', uch: \'text-uch-primary/50\'}', key: settings.themekey)}"/>
<circle id="bginner" cx="100" cy="100" r="70" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}"/>
<circle id="bgouter" cx="100" cy="100" r="100" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary/50\', snz: \'text-snz-primary/50\', suz: \'text-suz-primary/50\', uch: \'text-uch-primary/50\'}', key: settings.themekey)}"/>
<circle id="bginner" cx="100" cy="100" r="70" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', suz: \'text-suz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}"/>
</svg>
<div class="absolute top-1/2 left-1/2 -translate-xy-1/2 flex flex-col items-center justify-around">
<span class="text-white uppercase font-extrabold text-center leading-tight">{badgeData.title -> f:format.raw()}</span>
@@ -23,7 +23,7 @@
</f:alias>
<div class="absolute left-0 bottom-0 inset-x-0 px-4 py-8 w-full md:bottom-1/2 md:translate-y-1/2">
<div class="lg:container px-0">
<div class="p-4 bg-ep-primary-dark/80 sbw:bg-sbw-primary/80 snz:bg-snz-primary/80 uch:bg-uch-primary/80 ser:bg-ser-primary/80 mb-4 md:p-8 md:max-w-2xl">
<div class="p-4 bg-ep-primary-dark/80 sbw:bg-sbw-primary/80 snz:bg-snz-primary/80 suz:bg-suz-primary/80 uch:bg-uch-primary/80 ser:bg-ser-primary/80 mb-4 md:p-8 md:max-w-2xl">
<span class="block text-2xl md:text-4xl lg:text-5xl max-w-sm md:max-w-none font-black text-white uppercase mb-4 md:mb-8">
{slide.headline}
</span>
@@ -19,7 +19,7 @@
</f:alias>
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:translate-y-1/2">
<div class="lg:container">
<div class="p-4 bg-ep-primary-dark/80 sbw:bg-sbw-primary/80 snz:bg-snz-primary/80 uch:bg-uch-primary/80 ser:bg-ser-primary/80 mb-4 md:p-8 md:max-w-2xl">
<div class="p-4 bg-ep-primary-dark/80 sbw:bg-sbw-primary/80 snz:bg-snz-primary/80 suz:bg-suz-primary/80 uch:bg-uch-primary/80 ser:bg-ser-primary/80 mb-4 md:p-8 md:max-w-2xl">
<span class="block text-xl md:text-2xl text-white uppercase">
{slide.headline}
</span>
@@ -28,35 +28,35 @@
<div class="flex items-center space-x-6">
<f:if condition="{item.data.facebook_url}">
<a href="{item.data.facebook_url}" target="_blank" title="{item.data.name} bei Facebook">
<svg class="w-8 h-8 {ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}">
<svg class="w-8 h-8 {ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', suz: \'text-suz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-facebook"></use>
</svg>
</a>
</f:if>
<f:if condition="{item.data.twitter_url}">
<a href="{item.data.twitter_url}" target="_blank" title="{item.data.name} bei Twitter">
<svg class="w-8 h-8 {ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}">
<svg class="w-8 h-8 {ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', suz: \'text-suz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-twitter"></use>
</svg>
</a>
</f:if>
<f:if condition="{item.data.instagram_url}">
<a href="{item.data.instagram_url}" target="_blank" title="{item.data.name} bei Instagram">
<svg class="w-8 h-8 {ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}">
<svg class="w-8 h-8 {ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', suz: \'text-suz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-instagram"></use>
</svg>
</a>
</f:if>
<f:if condition="{item.data.youtube_url}">
<a href="{item.data.youtube_url}" target="_blank" title="{item.data.name} bei YouTube">
<svg class="w-8 h-8 {ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}">
<svg class="w-8 h-8 {ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', suz: \'text-suz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-youtube"></use>
</svg>
</a>
</f:if>
<f:if condition="{item.data.soundcloud_url}">
<a href="{item.data.soundcloud_url}" target="_blank" title="{item.data.name} bei Soundcloud">
<svg class="w-8 h-8 {ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}">
<svg class="w-8 h-8 {ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', suz: \'text-suz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-soundcloud"></use>
</svg>
</a>
+9 -4
View File
@@ -96,6 +96,11 @@ module.exports = {
secondary: '#e85243',
'primary-light': '#04A4CC',
},
suz: {
primary: '#f9c33d',
secondary: '#82c3c6',
'primary-dark': '#c7a20c',
},
},
opacity: {
'55': 0.55,
@@ -120,10 +125,10 @@ module.exports = {
},
variants: {
extend: {
backgroundColor: [ 'sbw', 'sbw-hover', 'sbw-group-hover', 'snz', 'snz-hover', 'snz-group-hover', 'uch', 'uch-hover', 'uch-group-hover', 'ser', 'ser-hover', 'ser-group-hover' ],
backgroundColor: [ 'sbw', 'sbw-hover', 'sbw-group-hover', 'snz', 'snz-hover', 'snz-group-hover', 'uch', 'uch-hover', 'uch-group-hover', 'ser', 'ser-hover', 'ser-group-hover', 'suz', 'suz-hover', 'suz-group-hover' ],
backgroundImage: [ 'ser' ],
textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'ser', 'ser-hover' ],
borderColor: [ 'sbw','snz', 'uch', 'ser' ],
textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'ser', 'ser-hover', 'suz', 'suz-hover', 'suz-group-hover' ],
borderColor: [ 'sbw','snz', 'uch', 'ser', 'suz' ],
display: [ 'reduced' ],
flex: [ 'reduced' ],
flexDirection: [ 'reduced' ],
@@ -137,7 +142,7 @@ module.exports = {
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/forms'),
require('tailwindcss-alt')({
variants: ['sbw', 'snz', 'uch', 'ser'],
variants: ['sbw', 'snz', 'uch', 'ser', 'suz'],
}),
plugin(function ({addVariant, e}) {
addVariant('hover-hover', ({ container, separator }) => {