Extend theme for site ser

This commit is contained in:
Björn Fromme
2022-05-29 12:09:15 +02:00
parent 9e6fa1b16d
commit c57a073233
11 changed files with 29 additions and 12 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

@@ -19,7 +19,8 @@ h4,
}
.headline--underlined:after {
@apply block border-b-4 border-ep-primary-light sbw:border-sbw-primary pb-4 mb-4 -mt-2 w-20;
@apply block border-b-4 border-ep-primary-light pb-4 mb-4 -mt-2 w-20;
@apply sbw:border-sbw-primary ser:border-ser-secondary;
content: '';
}
@@ -11,6 +11,7 @@
@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;
@apply ser:hover:bg-ser-primary ser:group-hover:bg-ser-primary;
&--active,
&--secondary {
@@ -9,6 +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;
@screen md {
@apply flex flex-none items-start transition-transform duration-300 ease-in-out p-1 shadow-md focus:text-white border-0;
@@ -0,0 +1,12 @@
.topnav {
@apply hidden lg:block w-full fixed top-0 inset-x-0 z-50 bg-ep-primary-medium ser:bg-ser-primary shadow;
}
.topnav__nav {
@apply flex justify-between m-0 p-0 w-full;
}
.topnav__item {
@apply flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary border-l border-r border-overlay-white-50;
@apply ser:hover:bg-ser-secondary;
}
@@ -15,6 +15,7 @@
}
@layer components {
@import "components/topnav";
@import "components/background";
@import "components/badges";
@import "components/buttons";
@@ -3,7 +3,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="bg-ep-primary-dark sbw:bg-sbw-primary-80 uch:bg-uch-primary-80 mt-8">
<div class="bg-ep-primary-dark sbw:bg-sbw-primary-80 uch:bg-uch-primary-80 ser:bg-ser-primary mt-8">
<f:if condition="{settings.themekey} == 'ep'">
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'transform -translate-y-2 text-white'}"/>
</f:if>
@@ -87,7 +87,7 @@
</div>
</div>
<div class="bg-ep-primary-dark sbw:bg-sbw-primary-dark pt-4 pb-16 md:py-4 text-sm lg:text-base text-white">
<div class="bg-ep-primary-dark sbw:bg-sbw-primary-dark ser:bg-ser-primary pt-4 pb-16 md:py-4 text-sm lg:text-base text-white">
<div class="container">
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
<div class="md:col-span-4 text-center md:text-left">
@@ -174,7 +174,7 @@
<button type="button"
data-controller="scroll-top"
data-action="scroll-top#scroll"
class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary-80">
class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary-80 ser:bg-ser-secondary">
<svg class="w-8 h-8 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-up"></use>
</svg>
@@ -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:transform 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 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 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:transform 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 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 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>
@@ -4,10 +4,10 @@
<f:if condition="{settings.hideAreaNavigation}">
<f:else>
<div class="hidden lg:block w-full fixed top-0 inset-x-0 z-50 bg-ep-primary-medium ser:bg-ser-primary shadow">
<div class="topnav">
<div class="container">
<nav role="navigation" class="flex justify-between m-0 p-0 w-full">
<f:link.typolink parameter="9" class="flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary border-l border-r border-overlay-white-50" title="E&amp;P">
<nav role="navigation" class="topnav__nav">
<f:link.typolink parameter="9" class="topnav__item" title="E&amp;P">
<svg class="w-5 h-5">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-home"></use>
</svg>
@@ -15,7 +15,7 @@
<f:if condition="{settings.topNavPid}">
<div class="flex-1 flex items-center divide-x divide-overlay-white-50">
<f:for each="{topnav}" as="menuitem">
<a class="block flex flex-grow h-8 justify-center items-center uppercase text-sm leading-none text-white hover:text-white focus:text-white hover:bg-ep-secondary{f:if(condition: menuitem.data.tx_eptheme_navitemclass, then: ' {menuitem.data.tx_eptheme_navitemclass}')}{f:if(condition: '{menuitem.active} or {menuitem.data.uid} == {settings.forceActiveTopnavUid}', then: ' bg-ep-secondary')}"
<a class="topnav__item flex-grow{f:if(condition: menuitem.data.tx_eptheme_navitemclass, then: ' {menuitem.data.tx_eptheme_navitemclass}')}{f:if(condition: '{menuitem.active} or {menuitem.data.uid} == {settings.forceActiveTopnavUid}', then: ' bg-ep-secondary')}"
href="{menuitem.link}"{f:if(condition: '{menuitem.data.doktype} == 3', then: ' target="_blank"')}
title="{menuitem.title}">
{menuitem.title}
@@ -24,7 +24,7 @@
</div>
</f:if>
<f:if condition="{settings.myEpPageUid}">
<f:link.typolink parameter="{settings.myEpPageUid}" class="flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary border-l border-r border-overlay-white-50" title="My E&P">
<f:link.typolink parameter="{settings.myEpPageUid}" class="topnav__item" title="My E&P">
<svg class="w-5 h-5">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-user"></use>
</svg>
+2 -1
View File
@@ -127,6 +127,7 @@ module.exports = {
primary: '#006fb6',
secondary: '#e85243',
'primary-light': '#04A4CC',
'primary-80': tinycolor('#006fb6').setAlpha(0.8).toRgbString(),
},
},
backgroundImage: {
@@ -148,7 +149,7 @@ 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', 'even', 'odd' ],
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', 'even', 'odd' ],
borderWidth: [ 'even', 'odd', 'first', 'last' ],
textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'ser', 'ser-hover' ],
borderColor: [ 'sbw','snz', 'uch', 'ser' ],