EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Add styles for site ser

Browse Source
This commit is contained in:
Björn Fromme
2022-05-28 16:28:06 +02:00
parent ccd3a9cb90
commit 0732e5b5a7
6 changed files with 52 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/logo_ser.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+4
View File
@@ -6,6 +6,7 @@
@apply sbw:bg-sbw-secondary;
@apply snz:bg-snz-secondary;
@apply uch:bg-uch-secondary;
@apply ser:bg-ser-secondary;
@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;
@@ -17,6 +18,7 @@
@apply sbw:bg-sbw-primary;
@apply snz:bg-snz-primary;
@apply uch:bg-uch-primary;
@apply ser:bg-ser-primary;
}
&--muted {
@@ -30,6 +32,7 @@
@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;
@apply ser:bg-white ser:border-ser-primary ser:text-uch-primary;
&:hover,
&.button--active {
@@ -38,6 +41,7 @@
@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;
@apply ser:bg-white ser:border-ser-secondary ser:text-ser-secondary;
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
+23 -21
View File
@@ -9,28 +9,30 @@
</f:if>
<div class="py-4 relative">
<div class="container grid grid-cols-2 lg:grid-cols-4 gap-8 pb-4">
<f:for each="{footernav}" as="menuheader">
<div>
<span class="headline--4 text-white">
{menuheader.title}
</span>
<f:if condition="{menuheader.children}">
<ul class="list-disc text-white mb-0 pl-4">
<f:for each="{menuheader.children}" as="submenuitem">
<li>
<f:link.typolink parameter="{submenuitem.link}"
title="{submenuitem.linktext}"
class="text-white">
{submenuitem.title}
</f:link.typolink>
</li>
</f:for>
</ul>
</f:if>
</div>
</f:for>
<f:if condition="{settings.footerNavPid}">
<f:for each="{footernav}" as="menuheader">
<div>
<span class="headline--4 text-white">
{menuheader.title}
</span>
<f:if condition="{menuheader.children}">
<ul class="list-disc text-white mb-0 pl-4">
<f:for each="{menuheader.children}" as="submenuitem">
<li>
<f:link.typolink parameter="{submenuitem.link}"
title="{submenuitem.linktext}"
class="text-white">
{submenuitem.title}
</f:link.typolink>
</li>
</f:for>
</ul>
</f:if>
</div>
</f:for>
</f:if>
</div>
<div class="hidden md:block container border-t border-white pt-4">
<div class="hidden md:block container{f:if(condition: settings.footerNavPid, then: ' border-t border-white pt-4')}">
<div class="grid grid-cols-2 gap-16">
<div class="flex">
<div class="flex items-start space-x-2 pr-4">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+1 -1
View File
@@ -10,7 +10,7 @@
class="block lg:pb-4"
title="{settings.defaultTitle}">
<f:image src="{settings.logoImage}"
class="block w-auto {ep:themeClasses(classes: '{ep: \'h-10 lg:h-12\', sbw: \'h-14 lg:h-24\', snz: \'h-14 lg:h-24\', uch: \'h-12 lg:h-20\'}', key: settings.themekey)}"
class="block w-auto {ep:themeClasses(classes: '{ep: \'h-10 lg:h-12\', sbw: \'h-14 lg:h-24\', snz: \'h-14 lg:h-24\', uch: \'h-12 lg:h-20\', ser: \'h-10 lg:h-12\'}', key: settings.themekey)}"
alt="{settings.defaultTitle}"/>
</a>
<div class="hidden lg:block">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
+15 -11
View File
@@ -4,23 +4,27 @@
<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 shadow">
<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="container">
<nav role="navigation" class="flex justify-between m-0 p-0 w-full divide-x divide-overlay-white-50 border-r border-l border-overlay-white-50">
<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" title="E&amp;P">
<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">
<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>
</f:link.typolink>
<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')}"
href="{menuitem.link}"{f:if(condition: '{menuitem.data.doktype} == 3', then: ' target="_blank"')}
title="{menuitem.title}">
{menuitem.title}
</a>
</f:for>
<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')}"
href="{menuitem.link}"{f:if(condition: '{menuitem.data.doktype} == 3', then: ' target="_blank"')}
title="{menuitem.title}">
{menuitem.title}
</a>
</f:for>
</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" title="My E&P">
<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">
<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>
tailwind.config.js
+9 -4
View File
@@ -123,6 +123,11 @@ module.exports = {
'primary-80': tinycolor('#a6c62c').setAlpha(0.8).toRgbString(),
'overlay-secondary': tinycolor('#a6c62c').setAlpha(0.55).toRgbString(),
},
ser: {
primary: '#006fb6',
secondary: '#e85243',
'primary-light': '#04A4CC',
},
},
backgroundImage: {
'badge-gradient': 'linear-gradient(120deg, rgba(150,1,103,1) 0%, rgba(158,3,106,1) 40%, rgba(250,26,140,1) 100%)',
@@ -143,10 +148,10 @@ module.exports = {
},
variants: {
extend: {
backgroundColor: [ 'sbw', 'sbw-hover', 'sbw-group-hover', 'snz', 'snz-hover', 'snz-group-hover', 'uch', 'uch-hover', 'uch-group-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', 'even', 'odd' ],
borderWidth: [ 'even', 'odd', 'first', 'last' ],
textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover' ],
borderColor: [ 'sbw','snz', 'uch' ],
textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'ser', 'ser-hover' ],
borderColor: [ 'sbw','snz', 'uch', 'ser' ],
display: ['group-hover', 'reduced'],
visibility: [ 'group-hover' ],
opacity: [ 'group-hover' ],
@@ -163,7 +168,7 @@ module.exports = {
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/forms'),
require('tailwindcss-alt')({
variants: ['sbw', 'snz', 'uch'],
variants: ['sbw', 'snz', 'uch', 'ser'],
}),
plugin(function ({addVariant, e}) {
addVariant('first-type', ({modifySelectors, separator}) => {