From a2e4076c47ac2359e32b7d6d3daf5b80f3ceba58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 27 Oct 2021 11:46:54 +0200
Subject: [PATCH] WIP Migrate event subsite styles

---
 .../Assets/scss/components/_buttons.scss      | 30 +++++++-----
 .../Resources/Private/Assets/scss/main.scss   |  2 +-
 .../Private/Partials/Disrupter/Large.html     |  2 +-
 .../Private/Partials/Disrupter/Small.html     |  2 +-
 .../Private/Partials/Disturber/Large.html     |  3 +-
 .../Private/Partials/Disturber/Small.html     |  2 +-
 .../Private/Partials/EventDisturber.html      | 48 ++++++++++---------
 .../Resources/Private/Partials/Mainnav.html   |  2 +-
 .../Private/Partials/Teaser/OneColumn.html    |  2 +-
 .../Private/Partials/Teaser/TwoColumn.html    |  2 +-
 tailwind.config.js                            |  5 +-
 11 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
index f693dd72..7755f384 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
@@ -4,36 +4,40 @@
     @apply transition-colors outline-none focus:outline-none;
     @apply bg-ep-secondary text-white;
     @apply sbw:bg-sbw-secondary;
+    @apply snz:bg-snz-secondary;
     @apply uch:bg-uch-secondary;
-
-    &:hover {
-        @apply bg-ep-primary-dark;
-        @apply sbw:bg-sbw-primary-dark;
-        @apply uch:bg-uch-primary-dark;
-    }
+    @apply hover:bg-ep-primary-dark group-hover:bg-ep-primary-dark;
+    @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 uch:hover:bg-uch-primary-dark uch:group-hover:bg-uch-primary-dark;
 
     &--active,
     &--secondary {
         @apply bg-ep-primary;
         @apply sbw:bg-sbw-primary;
+        @apply snz:bg-snz-primary;
         @apply uch:bg-uch-primary;
     }
 
     &--muted {
-        @apply bg-gray-300;
-
-        &:hover {
-            @apply bg-gray-300;
-        }
+        @apply bg-gray-300 hover:bg-gray-300;
     }
 
     &--light {
-        @apply bg-white text-ep-primary border-2 border-ep-primary;
+        @apply bg-white border-2;
         @apply font-bold;
+        @apply border-ep-primary 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 uch:bg-white uch:border-uch-primary uch:text-uch-primary;
 
         &:hover,
         &.button--active {
-            @apply bg-white border-ep-secondary text-ep-secondary;
+            @apply bg-white;
+            @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 uch:bg-white uch:border-uch-secondary uch:text-uch-secondary;
         }
     }
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
index eab1c4a3..0be0b7e9 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
@@ -54,7 +54,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;
+            @apply border-ep-primary-dark sbw:border-sbw-primary-dark snz:border-snz-primary-dark uch:border-uch-primary-dark;
         }
     }
     .-translate-xy-1\/2 {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
index 516f2f92..967e74ac 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
@@ -4,7 +4,7 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <div class="bg-winter my-2">
-        <div class="bg-ep-primary-80">
+        <div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80">
             <f:if condition="{settings.themeKey} == 'ep'">
                 <f:render partial="Disrupter/Outlines"
                           section="Top1"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
index b6caa2c2..1fe7c9aa 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
@@ -3,7 +3,7 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <div class="bg-winter my-2">
-        <div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 uch:bg-uch-primary-80">
+        <div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80">
             <f:render partial="Disrupter/Outlines"
                       section="Top1"
                       arguments="{classes: 'hidden md:block transform -translate-y-2 {f:if(condition: \'{background} == 1 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
index 43e841b0..7187abad 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
@@ -3,9 +3,8 @@
       xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-
     <div class="bg-winter my-2">
-        <div class="bg-ep-primary-80">
+        <div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80">
             <f:if condition="{settings.themeKey} == 'ep'">
                 <f:render partial="Disrupter/Outlines"
                           section="Top1"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
index 52cfeed9..58918563 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
@@ -3,7 +3,7 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
 <div class="bg-winter my-2">
-    <div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 uch:bg-uch-primary-80">
+    <div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80">
         <f:render partial="Disrupter/Outlines"
                   section="Top1"
                   arguments="{classes: 'hidden md:block transform -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventDisturber.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventDisturber.html
index 2ac58540..76fc0689 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventDisturber.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventDisturber.html
@@ -3,29 +3,31 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <div class="container lg:max-w-screen-2xl my-8">
-        <div class="bg-pattern pt-8 lg:py-8">
-            <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()}
-                </div>
-                <div class="w-full lg:w-1/3 lg:px-4 text-center">
-                    <ul class="list-none inline-flex lg:flex flex-col space-y-1 lg:space-y-2">
-                        <f:for each="{listItems -> v:iterator.explode(glue: ';')}" as="listItem">
-                            <li class="flex items-center space-x-2 text-white">
-                                <svg class="w-6 h-6">
-                                    <use href="#icon-check"></use>
-                                </svg>
-                                <span>{listItem -> f:format.raw()}</span>
-                            </li>
-                        </f:for>
-                    </ul>
-                </div>
-                <div class="w-full lg:w-1/3 lg:px-4">
-                    <a class="button w-full"
-                       href="{f:uri.typolink(parameter: buttonLink)}"
-                       title="{buttonLabel -> f:format.raw()}">
-                        {buttonLabel -> f:format.raw()}
-                    </a>
+        <div class="bg-pattern">
+            <div class="pt-8 lg:py-8 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80">
+                <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()}
+                    </div>
+                    <div class="w-full lg:w-1/3 lg:px-4 text-center">
+                        <ul class="list-none inline-flex lg:flex flex-col space-y-1 lg:space-y-2">
+                            <f:for each="{listItems -> v:iterator.explode(glue: ';')}" as="listItem">
+                                <li class="flex items-center space-x-2 text-white">
+                                    <svg class="w-6 h-6">
+                                        <use href="#icon-check"></use>
+                                    </svg>
+                                    <span>{listItem -> f:format.raw()}</span>
+                                </li>
+                            </f:for>
+                        </ul>
+                    </div>
+                    <div class="w-full lg:w-1/3 lg:px-4">
+                        <a class="button w-full"
+                           href="{f:uri.typolink(parameter: buttonLink)}"
+                           title="{buttonLabel -> f:format.raw()}">
+                            {buttonLabel -> f:format.raw()}
+                        </a>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
index e3bdd491..04209b0a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
@@ -58,7 +58,7 @@
                             </f:then>
                             <f:else>
                                 <a href="{topitem.link}"{f:if(condition: '{topitem.doktype} == 3', then: ' target="_blank"')}
-                                   class="block text-gray-800 uppercase lg:text-lg"
+                                   class="block text-gray-800 uppercase lg:text-lg font-bold"
                                    title="{topitem.title}">
                                     {topitem.title}
                                 </a>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html
index f5d40786..e83acb32 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html
@@ -4,7 +4,7 @@
 
     <f:section name="Teaser">
         <f:link.typolink parameter="{data.header_link}"
-                         class="flex flex-col">
+                         class="flex flex-col group">
             <div class="relative">
                 <f:if condition="{context.country}">
                     <svg class="w-8 h-6 absolute top-0 left-0">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/TwoColumn.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/TwoColumn.html
index 7a17e293..6ab4e1ec 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/TwoColumn.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/TwoColumn.html
@@ -5,7 +5,7 @@
 
     <f:section name="Teaser">
         <f:link.typolink parameter="{data.header_link}"
-                         class="teaserbox teaserbox--default">
+                         class="teaserbox teaserbox--default group">
             <div class="teasebox__image">
                 <f:render partial="TeaserImage" arguments="{image: teaserImage}"/>
             </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index c1834995..b7dfce46 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -88,8 +88,9 @@ module.exports = {
                     'overlay-secondary': tinycolor('#c20000').setAlpha(0.55).toRgbString(),
                 },
                 snz: {
-                    primary: '#82C3C6',
+                    primary: '#82c3c6',
                     secondary: '#f9c33d',
+                    'primary-dark': '#82c3c6',
                     'primary-10': tinycolor('#82C3C6').setAlpha(0.1).toRgbString(),
                     'primary-50': tinycolor('#82C3C6').setAlpha(0.5).toRgbString(),
                     'primary-80': tinycolor('#82C3C6').setAlpha(0.8).toRgbString(),
@@ -119,7 +120,7 @@ module.exports = {
     },
     variants: {
         extend: {
-            backgroundColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'even', 'odd' ],
+            backgroundColor: [ 'sbw', 'sbw-hover', 'sbw-group-hover', 'snz', 'snz-hover', 'snz-group-hover', 'uch', 'uch-hover', 'uch-group-hover', 'even', 'odd' ],
             borderWidth: [ 'even', 'odd', 'first', 'last' ],
             textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover' ],
             borderColor: [ 'sbw','snz', 'uch' ],