IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Update Template Files

Browse Source
This commit is contained in:
Robert Jagtiani
2024-04-16 00:05:35 +02:00
parent 0815957448
commit b5ed22589f
15 changed files with 533 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/client/lib/UMBE_card_navigation.js Normal file
View File

21
src/components/UMBE_Footer.astro
View File

@@ -2,9 +2,20 @@
const currentYear = new Date().getFullYear();
---
<footer class="max-w-[1920px] w-full">
<div class="flex flex-row justify-between px-4 items-center bg-primary py-2 mt-auto">
<a class="text-white font-medium text-lg" href="/impressum">Impressum und Datenschutz</a>
<a class="text-white font-medium text-lg" href="/">© {currentYear} IB Cornelsen Hamburg.</a>
</div>
<footer class="
grid grid-cols-1 bg-primary lg:px-9 lg:py-1
lg:grid-cols-4 lg:px-9 lg:py-1">
<div class="
justify-self-center
md:col-end-2 md:justify-self-start md:px-4">
<a class=" text-white font-normal text-lg no-underline" style="text-shadow:1px 1px 2px #222" href="/">Impressum und Datenschutz</a>
</div>
<div class="
justify-self-center
md:col-end-5 md:justify-self-end md:px-6">
<a class=" text-white font-normal text-lg no-underline whitespace-nowrap" style="text-shadow:1px 1px 2px #222" href="/">© {currentYear} <span class="">IB Cornelsen Hamburg</span></a>
</div>
</footer>

90
src/components/UMBE_Header.astro
View File

@@ -1,41 +1,61 @@
<header class="max-w-[1920px] w-full relative">
<a class="hidden md:block w-full h-48 bg-base-200" href="/">
<img
src="/images/header/header-bg.jpg"
class="w-full h-full object-cover"
alt="Hintergrund - Rollen Architektenpapier"
/>
<img
src="/images/header/logo-big.svg"
class="absolute top-4 right-0 w-[464px]"
alt="IBCornelsen - Logo"
/>
<h2
class="text-secondary font-semibold text-2xl absolute top-8 right-4"
<header class="max-w-[1920px] w-full relative bg-white
md:bg-[url('/images/header/header-bg.jpg')] md:bg-cover md:grid md:grid-cols-2
lg:grid lg:grid-cols-3">
<div class="
justify-self-center px-2 py-2
xs:px-6 xs:py-4
md:px-4 md:py-4
md:col-end-4 md:justify-self-end
xl:my-4 xl:mr-9 xl:p-0">
<a href="/">
<img class="
w-full
md:w-[350px]
lg:w-[420px]"
src="/images/header/UMBE_logo-big.svg" alt="IBCornelsen-Logo"/>
</a>
<h2 class="text-secondary font-normal absolute
top-1 right-2 text-[1.1rem]
xs:top-[1.7rem] xs:right-6 xs:text-[1.6rem]
md:top-[1.25rem] md:right-4 md:text-[1.1rem]
xl:top-[1.5rem] xl:right-9 xl:text-[1.4rem]">
Energieausweis online erstellen
</h2>
<h2 class="text-primary font-normal absolute
top-[1.6rem] right-2 text-[0.85rem]
xs:top-[3.5rem] xs:right-6 xs:text-[1.2rem]
md:top-[2.5rem] md:right-4 md:text-[0.9rem]
xl:top-[3.15rem] xl:right-9 xl:text-[1.1rem]">
Energieausweise nach aktuellem GEG
</h2>
</div>
<div class="col-start-1 col-span-3">
<div class="px-2 flex flex-row w-full justify-end items-center bg-primary
lg:h-[14px] xl:h-[36px]">
<!-- <a
class="header-button hidden md:block"
href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
>Energieausweis erstellen</a
>
Energieausweis online erstellen
</h2>
<h2
class="text-primary font-semibold text-xl absolute top-16 right-4"
>
Energieausweise nach aktueller GEG
</h2>
</a>
<div class="px-4 flex flex-row w-full md:justify-end items-center bg-primary">
<a
class="header-button hidden md:block"
href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
>Energieausweis erstellen</a
>
<a class="header-button hidden md:block" href="/kontakt"
>Kontakt</a
>
<a class="header-button hidden md:block" href="/agb">AGB</a>
<a class="hamburger_menu"
><img src="/images/hamburger.png" width="22" alt="hamburger" /></a
<a class="header-button hidden md:block" href="/kontakt"
>Kontakt</a
>
<a class="header-button hidden md:block" href="/agb">AGB</a>
-->
</div>
</div>
</header>
<style>

7
src/components/UMBE_SidebarLeft.astro
View File

@@ -1,9 +1,10 @@
---
import Navigation from "../components/UMBE_navcard.astro";
import Navigation from "./UMBE_card-navigation.svelte";
---
<div class="flex flex-col gap-6 bg-slate-200 grow">
<div class="flex flex-col grow">
<Navigation>
<Navigation client:load>
</div>

13
src/components/UMBE_SidebarRight.astro
View File

@@ -1,3 +1,14 @@
<div class="flex flex-col gap-4 bg-slate-200 grow">
---
import Contact from "./UMBE_card-contact.svelte";
---
<div class="hidden
xl:flex xl:flex-col xl:grow
">
<Contact client:load>
</div>
</div>

23
src/components/UMBE_card-contact.svelte Normal file
View File

@@ -0,0 +1,23 @@
<div id ="card-contact" class="box card bg-white px-6 py-4">
<div class="grid grid-cols-[max-content,1fr]">
<div class="">
<h2>Rufen Sie uns an<br>Wir sind gerne für Sie da</h2>
<hr class="w-11/12"/>
<p>Telefonische Beratung unter</p>
<a class="text-lg font-bold text-box-heading" href="tel:+4940209339850">040 / 209 339 850</a>
</div>
<img class="w-[100px] !min-w-[100px] mt-[0px] justify-self-end" src="/images/right-sidebar/UMBE_telefon-1.svg" alt="Telefon - Rufen sie uns an."/>
</div>
</div>
<style lang="scss">
h2{ @apply text-lg}
p{ @apply text-lg}
</style>

173
src/components/UMBE_card-navigation.svelte Normal file
View File

@@ -0,0 +1,173 @@
<script>
let innerWidth
function dropdown(){
const innerWidth = window.innerWidth;
console.log(innerWidth);
if(innerWidth<1024){
const check_element = this.lastChild;
const rotate_list = document.querySelectorAll(".dd-symbol");
const rotate_element = this.childNodes[0].lastChild;
var first_check = check_element.classList.contains("show-dropdown-content");
const nodeList = document.querySelectorAll(".dropdown-content");
if(first_check == true){
check_element.classList.remove("show-dropdown-content");
rotate_element.classList.toggle("rotate-symbol");
}else{
for (let i = 0; i < nodeList.length; i++) {
const element = nodeList[i];
element.classList.remove("show-dropdown-content");
}
for (let i = 0; i < rotate_list.length; i++) {
const element = rotate_list[i];
element.classList.remove("rotate-symbol");
}
check_element.classList.add("show-dropdown-content");
rotate_element.classList.add("rotate-symbol");
}
}
}
function hamburger(){
const nodeList = document.querySelectorAll(".dropdown-content");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].classList.remove("show-dropdown-content");}
var element = document.getElementById("card-navigation");
element.classList.toggle("hidden");
const spans = this.children;
console.log(spans);
var first_check = spans[0].classList.contains("hamburger-swing-0");
if(first_check == true){
for (let i = 0; i < spans.length; i++)
{spans[i].classList.remove("hamburger-swing-"+i);}
const rotate_list = document.querySelectorAll(".dd-symbol");
for (let i = 0; i < rotate_list.length; i++)
{rotate_list[i].classList.remove("rotate-symbol");}
}else{
for (let i = 0; i < spans.length; i++)
{spans[i].classList.add("hamburger-swing-"+i);} }
}
</script>
<svelte:window bind:innerWidth />
<div class="hamburger_menu py-1 px-2 bg-secondary
xs:px-6
lg:hidden">
<div id="hamburger" on:click={hamburger} on:keydown={hamburger} class="cursor-pointer">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav id="card-navigation" class="card-navigation hidden box lg:block">
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown}>
{#if innerWidth > 1023}
<a href="" class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol">❯</span></a>
{:else}
<a href="#" class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol">❯</span></a>
{/if}
<ul class="dropdown-content energieasusweis-erstellen">
{#if innerWidth < 1023}
<li><a href="">Energieausweis erstellen</a></li>
{/if}
<li><a href="">Verbrauchsausweis erstellen</a></li>
<li><a href="">Bedarfsausweis erstellen</a></li>
<li><a href="">Verbrauchsausweis Gewerbe erstellen</a></li>
<li><a href="">Bedarfsausweis Gewerbe erstellen</a></li>
</ul>
</div>
<div class="nav-element dropdown">
<div class="nav-element-child">Welcher Energieausweis?</div>
</div>
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown}>
<a href="#" class="nav-element-child">Verbrauchsausweis<span class="dd-symbol">❯</span></a>
<ul class="dropdown-content verbrauchsausweis">
{#if innerWidth < 1023}
<li><a href="">Verbrauchsausweis</a></li>
{/if}
<li><a href="">Verbrauchsausweis Wohngebäude</a></li>
<li><a href="">Verbrauchsausweis online erstellen</a></li>
<li><a href="">Häufige Fragen zum Verbrauchsausweis</a></li>
<li><a href="">Statistiken zum Verbrauchsausweis Wohngebäude</a></li>
<li><a href="">Verbrauchsausweis Gewerbe</a></li>
<li><a href="">Verbrauchsausweis Gewerbe online erstellen</a></li>
<li><a href="">Häufige Fragen zum Verbrauchsausweis Gewerbe</a></li>
<li><a href="">Statistiken zum Verbrauchsausweis Gewerbe</a></li>
</div>
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown}>
<a href="#" class="nav-element-child">Bedarfsausweis<span class="dd-symbol">❯</span></a>
<ul class="dropdown-content bedarfsausweis">
{#if innerWidth < 1023}
<li><a href="">Bedarfsausweis</a></li>
{/if}
<li><a href="">Bedarfsausweis Wohngebäude</a></li>
<li><a href="">Bedarfsausweis online erstellen</a></li>
<li><a href="">Häufige Fragen zum Bedarfsausweis</a></li>
<li><a href="">Statistiken zum Bedarfsausweis Wohngebäude</a></li>
<li><a href="">Bedarfsausweis Gewerbe</a></li>
<li><a href="">Bedarfsausweis Gewerbe online erstellen</a></li>
<li><a href="">Häufige Fragen zum Bedarfsausweis Gewerbe</a></li>
<li><a href="">Statistiken zum Bedarfsausweis Gewerbe</a></li>
</ul>
</div>
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown}>
<a href="#" class="nav-element-child">Energieausweis<span class="dd-symbol">❯</span></a>
<ul class="dropdown-content energieausweis">
{#if innerWidth < 1023}
<li><a href="">Energieausweis</a></li>
{/if}
<li class=""><a href="">Energieausweis Pflicht</a></li>
<li class=""><a href="">Energieausweis Kosten</a></li>
<li class=""><a href="">Energieausweis Haus</a></li>
</ul>
</div>
<div class="nav-element dropdown">
<div class="nav-element-child">EnEV Zusammenfassung - Archiv</div>
</div>
<div class="nav-element dropdown">
<div class="nav-element-child">Energieausweis Aussteller</div>
</div>
<div class="nav-element dropdown">
<div class="nav-element-child">Kundenbewertungen</div>
</div>
<div class="nav-element dropdown">
<div class="nav-element-child">FAQ</div>
</div>
<div class="nav-element dropdown">
<div class="nav-element-child xl:!rounded-b-xl">Für Entwickler</div>
</div>
</nav>

138
src/components/UMBE_navcard.astro
View File

@@ -1,100 +1,96 @@
<script>
<script>
</script>
<ul id="main-navigation">
<a class="nav-element-link">
<li class="dropdown dropdown-right dropdown-hover nav-element w-full">Energieausweis erstellen<span>❯</span>
</a>
<div class="">
<ul tabindex="0" class="nav-list dropdown-content z-[1] w-full">
<li class="nav-second"><a class="nav-element-link">Verbrauchsausweis erstellen</a></li>
<li class="nav-second"><a class="nav-element-link">Bedarfsausweis erstellen</a></li>
<li class="nav-second"><a class="nav-element-link">Verbrauchsausweis Gewerbe erstellen</a></li>
<li class="nav-second"><a class="nav-element-link">Bedarfsausweis Gewerbe erstellen</a></li>
<details class="dropdown block xl:dropdown-right">
<summary class="btn rounded-none w-full justify-start">Energieausweis erstellen<span class="absolute right-[20px]">❯</span></summary>
<ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
<li class=""><a>Verbrauchsausweis erstellen</a></li>
<li class=""><a>Bedarfsausweis erstellen</a></li>
<li class=""><a>Verbrauchsausweis Gewerbe erstellen</a></li>
<li class=""><a>Bedarfsausweis Gewerbe erstellen</a></li>
</ul>
</details>
</li>
<details class="dropdown block">
<summary class="btn rounded-none w-full justify-start">Welcher Energieausweis?</summary>
</details>
<li class="no-dropdown nav-element w-full">
<a class="nav-element-link" href="">Welcher Energieausweis</a>
</li>
<li class="dropdown lg:dropdown-bottom xl:dropdown-right dropdown-hover nav-element w-full">
<a class="nav-element-link" href="">Verbrauchsausweis<span>❯</span></a>
<ul tabindex="0" class="nav-list dropdown-content z-[1] w-full">
<li class="nav-second"><a class="nav-element-link">Item 1</a></li>
<li class="nav-second"><a class="nav-element-link">Item 2</a></li>
<details class="dropdown block xl:dropdown-hover xl:dropdown-right">
<summary class="btn rounded-none w-full justify-start">Verbrauchsausweis<span class="absolute right-[20px]">❯</span></summary>
<ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
<li class=""><a>Verbrauchsausweis Wohngebäude</a></li>
<li class=""><a>Verbrauchsausweis online erstellen</a></li>
<li class=""><a>Häufige Fragen zum Verbrauchsausweis</a></li>
<li class=""><a>Statistiken zum Verbrauchsausweis Wohngebäude</a></li>
<li class=""><a>Verbrauchsausweis Gewerbe</a></li>
<li class=""><a>Verbrauchsausweis Gewerbe online erstellen</a></li>
<li class=""><a>Häufige Fragen zum Verbrauchsausweis Gewerbe</a></li>
<li class=""><a>Statistiken zum Verbrauchsausweis Gewerbe</a></li>
</ul>
</li>
<li class="dropdown dropdown-right dropdown-hover nav-element w-full">
<a class="nav-element-link" href="">Bedarfsausweis<span>❯</span></a>
<ul tabindex="0" class="nav-list dropdown-content z-[1] w-full">
<li class="nav-second"><a class="nav-element-link">Item 1</a></li>
<li class="nav-second"><a class="nav-element-link">Item 2</a></li>
</details>
<details class="dropdown block xl:dropdown-hover xl:dropdown-right">
<summary class="btn rounded-none w-full justify-start">Bedarfsausweis<span class="absolute right-[20px]">❯</span></summary>
<ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
<li class=""><a>Bedarfsausweis Wohngebäude</a></li>
<li class=""><a>Bedarfsausweis online erstellen</a></li>
<li class=""><a>Häufige Fragen zum Bedarfsausweis</a></li>
<li class=""><a>Statistiken zum Bedarfsausweis Wohngebäude</a></li>
<li class=""><a>Bedarfsausweis Gewerbe</a></li>
<li class=""><a>Bedarfsausweis Gewerbe online erstellen</a></li>
<li class=""><a>Häufige Fragen zum Bedarfsausweis Gewerbe</a></li>
<li class=""><a>Statistiken zum Bedarfsausweis Gewerbe</a></li>
</ul>
</li>
<li class="dropdown dropdown-right dropdown-hover nav-element w-full">
<a class="nav-element-link" href="">Energieausweis<span>❯</span></a>
<ul tabindex="0" class="nav-list dropdown-content z-[1] w-full">
<li class="nav-second"><a class="nav-element-link">Item 1</a></li>
<li class="nav-second"><a class="nav-element-link">Item 2</a></li>
</details>
<details class="dropdown block xl:dropdown-hover xl:dropdown-right">
<summary class="btn rounded-none w-full justify-start">Energieausweis<span class="absolute right-[20px]">❯</span></summary>
<ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
<li class=""><a>Energieausweis Pflicht</a></li>
<li class=""><a>Energieausweis Kosten</a></li>
<li class=""><a>Energieausweis Haus</a></li>
</ul>
</li>
</details>
<details class="dropdown block">
<summary class="btn rounded-none w-full justify-start">EnEV Zusammenfassung - Archiv</summary>
</details>
<details class="dropdown block">
<summary class="btn rounded-none w-full justify-start">Energieausweis Aussteller</summary>
</details>
<details class="dropdown block">
<summary class="btn rounded-none w-full justify-start">Kundenbewertungen</summary>
</details>
<li class="no-dropdown nav-element w-full">
<a class="nav-element-link" href="">EnEV Zusammenfassung - Archiv</a>
</li>
<li class="no-dropdown nav-element w-full">
<a class="nav-element-link" href="">Energieausweis Aussteller</a>
</li>
<li class="no-dropdown nav-element w-full">
<a class="nav-element-link" href="">Kundenbewertungen</a>
</li>
<li class="no-dropdown nav-element w-full">
<a class="nav-element-link" href="">FAQ</a>
</li>
<li class="no-dropdown nav-element w-full">
<a class="nav-element-link" href="">Für Entwickler</a>
</li>
</div>
<style>
#main-navigation, .nav-list{border-top: 1px solid #ccc;}
#main-navigation li{border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;}
.nav-element{
@apply p-2 bg-white font-normal text-lg hover:bg-primary hover:text-white
.dd-cont{
@apply !relative lg:!absolute;
li{
@apply w-max
}
}
.nav-second{
@apply p-2 bg-white font-normal text-lg hover:bg-secondary hover:text-white
summary{
@apply text-black !text-[1.1rem] !font-normal
}
details:hover > summary {
@apply !bg-primary !text-white
}
details:hover > details.dd-cont {
@apply !visible
}
.nav-element-link{
@apply text-black no-underline hover:no-underline hover:text-white
}
.nav-element-link span{
position:absolute;right:15px;top:0.65rem;
}
.nav-element:hover > .nav-element-link, .nav-second:hover > .nav-element-link{
@apply text-white
}
.nav-element ul{margin: -1px 0;}
</style>

72
src/layouts/UMBE_Layout.astro
View File

@@ -1,6 +1,4 @@
---
import i18next from "i18next";
import "../style/UMBE_global.css";
import "../../svelte-dialogs.config"
import Footer from "../components/UMBE_Footer.astro";
@@ -19,7 +17,7 @@ const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang={i18next.language}>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
@@ -34,18 +32,31 @@ const { title } = Astro.props;
</head>
<body>
<container class="max-w-[1920px] w-full mx-auto bg-slate-600 grid border-solid border-grey-200 border">
<container class="w-full max-w-[1920px]">
<Header />
<main
class="lg:grid gap-6 md:p-6 lg:grid-cols-[2fr,6fr,2fr] max-w-[1920px] w-full bg-base-100"
>
<SidebarLeft />
<article class="w-full max-w-full bg-base-200 border border-base-300">
<slot />
</article>
<SidebarRight />
class="w-full p-0
lg:grid grid-cols-[max-content,6fr] lg:gap-1 lg:p-3
xl:grid-cols-[2fr,6fr,2fr] xl:gap-3 xl:py-4 xl:px-3
2xl:grid-cols-[2fr,6fr,2fr] 2xl:gap-5 2xl:py-4 2xl:px-9
">
<SidebarLeft />
<article class="box grow">
<slot />
</article>
<SidebarRight />
</main>
<Footer />
<NotificationWrapper client:load />
</container>
@@ -54,43 +65,4 @@ const { title } = Astro.props;
<style is:global lang="scss">
:root {
@apply bg-base-100 text-base-content;
}
article {
@apply rounded-lg w-full shadow-md border;
}
.mainContent {
p, h1, h2, h3, h4, h5, h6 {
@apply text-base-content;
}
}
body {
min-height: 100vh;
}
.button {
@apply px-8 py-2 bg-secondary rounded-lg text-white font-medium hover:shadow-lg transition-all hover:underline active:bg-blue-900 text-center cursor-pointer;
color: #fff !important;
}
h3 {
@apply text-xl font-medium mt-6 mb-4;
}
input {
@apply py-1.5 px-4 w-full rounded-lg outline-none text-lg text-slate-700 border bg-gray-50 transition-colors;
}
input:hover,
input:focus {
@apply bg-gray-100;
}
label {
@apply text-base font-semibold;
}
</style>

9
src/pages/UMBE_test.astro
View File

@@ -1,16 +1,9 @@
---
import Layout from "#layouts/UMBE_Layout.astro";
---
<Layout title="Energieausweis online erstellen - Online Energieausweis">
<h1>HALLO</h1>
<h1>Energieausweis online erstellen</h1>
</div>
</Layout>

122
src/style/UMBE_global.css
View File

@@ -1,5 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Abel:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
* {
font-weight: 400;
@@ -7,42 +7,112 @@
font-family: "Abel", "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
article hr {
@apply mb-4 mt-4;
body{
@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
}
/*ARTICLE*/
article {
@apply px-6 md:px-8 py-6 w-full relative bg-white;
@apply px-6 py-6 w-full relative bg-white min-h-screen;
hr {@apply mb-4 mt-4;}
h1 {@apply text-4xl font-normal mb-2;}
h2 {@apply text-2xl font-normal mb-2;}
h3 {@apply text-xl font-normal mb-2;}
a {@apply text-blue-700 font-medium text-lg;}
}
article h1 {
@apply text-4xl font-normal my-4;
/*SIDEBARS*/
/*BOXES*/
.box{
@apply rounded-none
xl:rounded-xl xl:shadow-box xl:ring-1 xl:ring-gray-200
}
article h2 {
@apply text-2xl font-normal my-4;
.card{
h2 {@apply text-lg font-bold text-box-heading leading-6}
hr {@apply my-2}
p {@apply text-lg}
a {@apply text-lg}
}
article h3 {
@apply text-xl font-normal my-2;
/*SIDEBAR-LEFT*/
/*NAVIGATION*/
.nav-element{@apply relative block cursor-pointer}
.nav-element:not(:first-child){@apply border-gray-200 border-t-[1px]}
.nav-element:hover > .nav-element-child{
@apply !bg-primary !text-white cursor-pointer
}
article a {
@apply text-blue-700 font-medium text-lg;
.nav-element:hover > .dropdown-content{
@apply lg:visible lg:opacity-100 lg:block
}
article select {
@apply rounded-lg px-2 py-1.5 outline-none;
.nav-element:hover:first-child > .nav-element-child{
@apply !rounded-none
xl:!rounded-tl-xl xl:!rounded-tr-none
}
.checkbox {
@apply h-5 w-4 checkbox-secondary;
}
.nav-element:hover:last-child > .nav-element-child{
@apply !rounded-none
xl:!rounded-b-xl
}
.nav-element-child{
@apply px-4 py-3 w-full justify-start text-sm bg-white flex !no-underline text-black
xl:text-lg
}
.dropdown-content{
@apply !relative z-[1] !p-0 !scale-100 hidden
lg:!absolute lg:min-w-max lg:p-2 lg:shadow-lg lg:!top-0;
li {@apply text-sm bg-white flex
xl:text-lg}
li a {@apply w-full text-sm px-6 py-3 rounded-none no-underline text-white hover:text-white bg-secondary
lg:px-4 py-3 lg:bg-[#efefef] lg:text-black lg:hover:bg-secondary
xl:text-lg}
li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}
}
.verbrauchsausweis li:nth-child(5), .bedarfsausweis li:nth-child(5){
@apply !border-primary !border-t-[1px]
}
#hamburger{
@apply my-1;
span {@apply block h-[3px] w-6 bg-white !transition-all}
span:nth-child(2) {@apply my-1}
}
.hamburger-swing-0{@apply origin-left rotate-45 -translate-y-[1.5px] !transition-all duration-500}
.hamburger-swing-1{@apply origin-center opacity-0 !transition-all}
.hamburger-swing-2{@apply origin-left -rotate-45 translate-y-[1.5px] !transition-all duration-500}
.show-dropdown-content{@apply block !visible !opacity-100 lg:!invisible}
.dd-symbol{ @apply absolute right-[20px] rotate-0 transition-all duration-300 origin-center md:transition-none}
.rotate-symbol{@apply rotate-[90deg] transition-all duration-300 origin-center lg:rotate-0 md:transition-none}
/*NAVIGATION-ANIMATION*/
/*SIDEBAR-RIGHT*/
/*FOOTER*/