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

Merge pull request #386 from IBCornelsen/UMBE

Browse Source 
responsive
This commit is contained in:
UMBENOMENA
2025-02-23 01:25:00 +01:00
committed by GitHub
parent 85ba433452 1bfa3276d6
commit 4a81a08157
16 changed files with 720 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
public/images/header/logo-IBC-big.svg
View File

@@ -1,32 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 143 163.6"> <svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="50.66mm" height="57.61mm" viewBox="0 0 143.6 163.3">
<!-- Generator: Adobe Illustrator 29.1.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 142) -->
<defs> <defs>
<style> <style>
.st0 { .cls-1 {
display: none;
fill: #878787;
}
.st1 {
fill: #445096; fill: #445096;
} }
.st2 { .cls-2 {
fill: #c6c6c6; fill: #c6c6c6;
} }
</style> </style>
</defs> </defs>
<path class="st0" d="M387,57.9c0,3.8-1,6.9-3.1,9.2-2.1,2.3-4.9,3.4-8.5,3.4h-16c-3.8,0-6.8-1.3-8.8-3.9-1.8-2.2-2.7-5-2.7-8.5V21.2c0-3.6,1-6.6,3-8.9,2-2.3,4.8-3.5,8.3-3.5h16.1c3.7,0,6.6,1.2,8.6,3.5s3,5.4,3,9.2l-10.9,2.8c0-3-1.5-4.5-4.6-4.5h-8.5c-2.7,0-4.1,1.3-4.1,3.9v32.1c0,2.5,1.4,3.7,4.1,3.7h9c2.8,0,4.1-1.5,4.1-4.4l10.9,2.7h.1Z"/> <path class="cls-1" d="M18.1,143.8H3.7V62.5h14.4v81.2h0v.1Z"/>
<g> <path class="cls-1" d="M84.8,127.2c0,4.8-1.3,8.7-3.8,11.7-2.7,3.1-6.4,4.7-11.1,4.7h-36.5v-14.4h3.6v-52.4h-3.6v-14.4h36.5c4.7,0,8.4,1.6,11.1,4.7,2.5,3,3.8,6.9,3.8,11.7v11c0,6-1.8,10.3-5.4,13,3.6,3,5.4,7.4,5.4,13.2v11.2h0ZM70.5,91.2v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8h0v-.1ZM70.5,124.6v-9.2c0-1.4-.5-2.6-1.4-3.5s-2.1-1.4-3.5-1.4h-14.1v19h13.9c3.4,0,5.1-1.6,5.1-4.8h0v-.1Z"/>
<path class="st1" d="M17.6,144.6H3.2V63.3h14.4v81.2h0Z"/> <path class="cls-1" d="M18.1,76.9v-14.4h3.7v14.4h-3.7Z"/>
<path class="st1" d="M84.3,128c0,4.8-1.3,8.7-3.8,11.7-2.7,3.1-6.4,4.7-11.1,4.7h-36.5v-14.4h3.6v-52.4h-3.6v-14.4h36.5c4.7,0,8.4,1.6,11.1,4.7,2.5,3,3.8,6.9,3.8,11.7v11c0,6-1.8,10.3-5.4,13,3.6,3,5.4,7.4,5.4,13.2v11.2ZM70,92v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8h0ZM70,125.4v-9.2c0-1.4-.5-2.6-1.4-3.5s-2.1-1.4-3.5-1.4h-14.1v19h13.9c3.4,0,5.1-1.6,5.1-4.8h0Z"/> <path class="cls-1" d="M0,76.9v-14.4h3.7v14.4H0Z"/>
<path class="st1" d="M17.6,77.7v-14.4h3.7v14.4h-3.7Z"/> <path class="cls-1" d="M18.1,143.8v-14.4h3.7v14.4h-3.7Z"/>
<path class="st1" d="M-.5,77.7v-14.4h3.7v14.4H-.5Z"/> <path class="cls-1" d="M0,143.8v-14.4h3.7v14.4H0Z"/>
<path class="st1" d="M17.6,144.6v-14.4h3.7v14.4h-3.7Z"/> <path class="cls-2" d="M125,129.4h-11.8c-3.6,0-5.3-1.6-5.3-4.9v-43.1c0-3.3,1.8-4.9,5.3-4.9h11.8c3.6,0,5.4,1.9,5.4,5.7h13.1c0-7.4,0-12.7-2.7-15.7s-6.4-4.5-11.1-4.5h-21.1c-5.1,0-8.9,1.7-11.6,5.1-2.3,2.9-3.5,6.6-3.5,11.2v49.1c0,4.6,1.2,8.3,3.5,11.2,2.7,3.4,6.5,5.1,11.6,5.1h21.1c4.7,0,8.4-1.5,11.1-4.5,2.7-3,2.7-8.3,2.7-15.7h-13.1c0,3.8-1.8,5.7-5.4,5.7v.2h0Z"/>
<path class="st1" d="M-.5,144.6v-14.4h3.7v14.4H-.5Z"/> <polygon class="cls-1" points="90.9 13.6 71.8 0 52.7 13.6 0 51.6 19.2 51.6 71.8 13.6 124.4 51.6 143.5 51.6 90.9 13.6"/>
<path class="st2" d="M124.5,130.2h-11.8c-3.6,0-5.3-1.6-5.3-4.9v-43.1c0-3.3,1.8-4.9,5.3-4.9h11.8c3.6,0,5.4,1.9,5.4,5.7h13.1c0-7.4,0-12.7-2.7-15.7s-6.4-4.5-11.1-4.5h-21.1c-5.1,0-8.9,1.7-11.6,5.1-2.3,2.9-3.5,6.6-3.5,11.2v49.1c0,4.6,1.2,8.3,3.5,11.2,2.7,3.4,6.5,5.1,11.6,5.1h21.1c4.7,0,8.4-1.5,11.1-4.5,2.7-3,2.7-8.3,2.7-15.7h-13.1c0,3.8-1.8,5.7-5.4,5.7v.2Z"/> <path class="cls-1" d="M.2,163.3v-9.3h143.4v9.3H.2Z"/>
<polygon class="st1" points="90.4 14.4 71.3 .8 52.2 14.4 -.5 52.4 18.7 52.4 71.3 14.4 123.9 52.4 143 52.4 90.4 14.4"/>
<path class="st1" d="M-.3,164.1v-9.3h143.4v9.3H-.3Z"/>
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

4
public/images/header/logo-IBC-white.svg
View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 143.6 163.3"> <svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="50.66mm" height="57.61mm" viewBox="0 0 143.6 163.3">
<defs> <defs>
<style> <style>
.cls-1 { .cls-1 {
@@ -12,7 +12,7 @@
</style> </style>
</defs> </defs>
<path class="cls-1" d="M18.1,143.8H3.7V62.5h14.4v81.2h0v.1Z"/> <path class="cls-1" d="M18.1,143.8H3.7V62.5h14.4v81.2h0v.1Z"/>
<path class="cls-1" d="M84.8,127.2c0,4.8-1.3,8.7-3.8,11.7-2.7,3.1-6.4,4.7-11.1,4.7h-36.5v-14.4h3.6v-52.4h-3.6v-14.4h36.5c4.7,0,8.4,1.6,11.1,4.7,2.5,3,3.8,6.9,3.8,11.7v11c0,6-1.8,10.3-5.4,13,3.6,3,5.4,7.4,5.4,13.2v11.2h0ZM70.5,91.2v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8h0v-.1ZM70.5,124.6v-9.2c0-1.4-.5-2.6-1.4-3.5s-2.1-1.4-3.5-1.4h-14.1v19h13.9c3.4,0,5.1-1.6,5.1-4.8h0v-.1Z"/> <path class="cls-1" d="M84.8,127.2c0,4.8-1.3,8.7-3.8,11.7-2.7,3.1-6.4,4.7-11.1,4.7h-36.5v-14.4h3.6v-52.4h-3.6v-14.4h36.5c4.7,0,8.4,1.6,11.1,4.7,2.5,3,3.8,6.9,3.8,11.7v11c0,6-1.8,10.3-5.4,13,3.6,3,5.4,7.4,5.4,13.2v11.2h0ZM70.5,91.2v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8h0s0-.1,0-.1ZM70.5,124.6v-9.2c0-1.4-.5-2.6-1.4-3.5s-2.1-1.4-3.5-1.4h-14.1v19h13.9c3.4,0,5.1-1.6,5.1-4.8h0v-.1Z"/>
<path class="cls-1" d="M18.1,76.9v-14.4h3.7v14.4h-3.7Z"/> <path class="cls-1" d="M18.1,76.9v-14.4h3.7v14.4h-3.7Z"/>
<path class="cls-1" d="M0,76.9v-14.4h3.7v14.4H0Z"/> <path class="cls-1" d="M0,76.9v-14.4h3.7v14.4H0Z"/>
<path class="cls-1" d="M18.1,143.8v-14.4h3.7v14.4h-3.7Z"/> <path class="cls-1" d="M18.1,143.8v-14.4h3.7v14.4h-3.7Z"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

77
src/components/Ausweis/ButtonWeiterHilfe.svelte
View File

@@ -79,8 +79,8 @@
let loginOverlayHidden = true; let loginOverlayHidden = true;
</script> </script>
<div class="grid grid-cols-1 grid-rows-[min_content_1fr] gap-x-2 gap-y-1 self-start mt-0 <div class="grid grid-cols-1 gap-x-2 gap-y-1 self-start
sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt-8"> sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end">
<div></div> <div></div>
@@ -90,15 +90,33 @@ sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt
> >
</div> </div>
{#if showHelp} <button class="button" type="button" on:click={spaeterWeitermachen}
<div class="col-start-1 row-start-2 col-span-4 mt-4"> >Später Weitermachen
<div </button>
class="bereich-box grid relative
grid-cols-1 gap-x-4 gap-y-4
"
{#if showWeiter}
<div>
<Overlay bind:hidden={loginOverlayHidden}>
<div class="bg-white w-full max-w-screen-sm py-8">
<EmbeddedAuthFlowModule onLogin={loginAction} email={""}></EmbeddedAuthFlowModule>
</div>
</Overlay>
<button on:click={ausweisAbschicken} type="button" class="button" data-cy="weiter">Weiter</button>
</div>
{/if}
</div>
{#if showHelp}
<div class="w-full col-start-1 row-start-2 sm:row-start-2 col-span-4 mt-4">
<div
class="bereich-box w-full 2xl:w-[50%] xs:mx-auto grid relative
grid-cols-1 gap-x-2 gap-y-4
"
> >
<div class="pr-12"> <div class="pr-4 xs:pr-12">
Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen
haben. Kurze Fragen zum Formular oder der Ausweisart werden haben. Kurze Fragen zum Formular oder der Ausweisart werden
kostenfrei telefonisch unter <a href="tel:+4940209339850" kostenfrei telefonisch unter <a href="tel:+4940209339850"
@@ -111,42 +129,41 @@ sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt
<hr class="m-0" /> <hr class="m-0" />
<div class="grid grid-cols-[30px_490px_200px_1fr] items-center"> <div class="grid grid-cols-1 xs:grid-cols-[30px_1fr_1fr] items-center">
<input <input
type="radio" type="radio"
class=" accent-secondary w-[20px] h-[20px]" class=" accent-secondary w-[20px] h-[20px] mb-2 xs:mb-0 justify-self-center xs:justify-self-start"
id="Produkttb1" id="Produkttb1"
value={Enums.AusweisTyp.Beratung} value={Enums.AusweisTyp.Beratung}
name="Produkt" name="Produkt"
bind:group={ausweistyp} bind:group={ausweistyp}
/> />
<div class="justify-self-stretch"> <div class="text-center xs:text-left justify-self-stretch">
Verbrauchsausweis online inkl. ausführlicher telefonischer Verbrauchsausweis online<br>inkl. ausführlicher&nbsp;telefonischer
Beratung Beratung
</div> </div>
<div class="text-right"> <div class="text-center xs:text-right">
<b>{PRICES[ausweisart][Enums.AusweisTyp.Beratung]} €</b> inkl. MwSt. <b>{PRICES[ausweisart][Enums.AusweisTyp.Beratung]} €</b> inkl. MwSt.
</div> </div>
</div> </div>
<div class="grid grid-cols-[30px_490px_200px_1fr] items-center"> <div class="grid grid-cols-1 xs:grid-cols-[30px_1fr_1fr] items-center">
<input <input
type="radio" type="radio"
class=" accent-secondary w-[20px] h-[20px]" class=" accent-secondary w-[20px] h-[20px] mb-2 xs:mb-0 justify-self-center xs:justify-self-start"
id="Produktof1" id="Produktof1"
value={Enums.AusweisTyp.Offline} value={Enums.AusweisTyp.Offline}
name="Produkt" name="Produkt"
bind:group={ausweistyp} bind:group={ausweistyp}
/> />
<div> <div class="text-center xs:text-left justify-self-stretch">
Verbrauchsausweis offline (Sie schicken uns 3 Verbrauchsausweis offline Sie schicken uns 3&nbsp;Verbrauchsabrechnungen&nbsp;zu)
Verbrauchsabrechnungen zu)
</div> </div>
<div class="text-right"> <div class="text-center xs:text-right">
<b>{PRICES[ausweisart][Enums.AusweisTyp.Offline]} €</b> inkl. MwSt. <b>{PRICES[ausweisart][Enums.AusweisTyp.Offline]} €</b> inkl. MwSt.
</div> </div>
</div> </div>
@@ -161,23 +178,5 @@ sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt
on:click={() => (showHelp = !showHelp)}>X</button on:click={() => (showHelp = !showHelp)}>X</button
> >
</div> </div>
</div>
{/if}
<button class="button" type="button" on:click={spaeterWeitermachen}
>Später Weitermachen
</button>
{#if showWeiter}
<div>
<Overlay bind:hidden={loginOverlayHidden}>
<div class="bg-white w-full max-w-screen-sm py-8">
<EmbeddedAuthFlowModule onLogin={loginAction} email={""}></EmbeddedAuthFlowModule>
</div>
</Overlay>
<button on:click={ausweisAbschicken} type="button" class="button" data-cy="weiter">Weiter</button>
</div>
{/if}
</div> </div>
{/if}

10
src/components/Ausweis/PerformanceScore.svelte
View File

@@ -83,6 +83,9 @@
})(); })();
} }
</script> </script>
<div id="performance-box" class="order-2 sm:order-1 w-full box relative px-0 sm:px-4 self-stretch grid grid-cols-1">
<div class="self-center relative"> <div class="self-center relative">
{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.BedarfsausweisWohnen} {#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.BedarfsausweisWohnen}
<img id="skalaImage" class="w-full" src="/images/formular/skala-verbrauchsausweis-wohnen.png" alt="Energieeffizienz Skala" /> <img id="skalaImage" class="w-full" src="/images/formular/skala-verbrauchsausweis-wohnen.png" alt="Energieeffizienz Skala" />
@@ -91,7 +94,7 @@
{/if} {/if}
<ThickArrowDown <ThickArrowDown
size={28} size={28}
class="fill-base-content absolute top-0 transition-left duration-1000 ease-in-out" class="fill-base-content absolute -top-1 sm:top-4 transition-left duration-1000 ease-in-out"
style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries( style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(
translation_1, translation_1,
50, 50,
@@ -102,7 +105,7 @@
/> />
<ThickArrowUp <ThickArrowUp
size={28} size={28}
class="fill-base-content absolute bottom-0 transition-left duration-1000 ease-in-out" class="fill-base-content absolute -bottom-1 sm:bottom-4 transition-left duration-1000 ease-in-out"
style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries( style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(
translation_2, translation_2,
50, 50,
@@ -112,3 +115,6 @@
)}%)" )}%)"
/> />
</div> </div>
</div>

9
src/components/Ausweis/Progressbar.svelte
View File

@@ -6,8 +6,16 @@
]; ];
export let active: number; export let active: number;
export let progress: number = active / (steps.length - 1) * 100; export let progress: number = active / (steps.length - 1) * 100;
export let ausweisart;
import { PRICES } from "#lib/constants.js";
import { Enums } from "#lib/client/prisma.js";
</script> </script>
<div id="progress-box" class="order-1 sm:order-2 w-full box relative px-4 pt-3 sm:py-3 text-center self-stretch">
<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0 font-bold sm:font-normal">Energieausweis erstellen</h1>
<h2 class="text-primary [font-size:_clamp(18px,1.5vw,24px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
<div class="grid grid-cols-3 self-start justify-between"> <div class="grid grid-cols-3 self-start justify-between">
<div class="col-span-3 relative"> <div class="col-span-3 relative">
<div <div
@@ -29,6 +37,7 @@
{/each} {/each}
</div> </div>
</div>
<style lang="postcss"> <style lang="postcss">

34
src/components/design/header/Header.astro
View File

@@ -2,9 +2,9 @@
import HeaderLogin from "#components/design/header/HeaderLogin.svelte"; import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
--- ---
<header id="header"> <header id="header" class="hidden sm:block">
<div id="header-grid" class="grid relative bg-white items-center gap-x-4 pt-4 px-0 <div id="header-grid" class="grid relative bg-white items-end gap-x-4 pt-4 px-0
grid-cols-1 grid-cols-1
sm:grid-cols-1 sm:grid-cols-1
@@ -14,14 +14,14 @@ lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-x-3 lg:px-4 lg:py-4
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-x-4 xl:px-6 xl:py-4 xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-x-4 xl:px-6 xl:py-4
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-x-5 2xl:px-6 2xl:py-4"> 2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-x-5 2xl:px-6 2xl:py-4">
<div class="justify-self-center xs:justify-self-start"> <div class="justify-self-start">
<div class="grid grid-cols-1 px-2 gap-2 gap-y-1 <div class="w-full grid grid-cols-[48px_1fr] px-2 gap-2 gap-y-1 self-end
xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4 xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
md:gap-y-4 md:gap-y-4
lg:px-0 lg:gap-x-4"> lg:px-0 lg:gap-x-4">
<div class="self-start justify-self-start"> <div class="justify-self-start">
<a href="/"> <a href="/">
<img id="header-logo" class="w-full <img id="header-logo" class="w-full
xs:max-w-[64px] xs:max-w-[64px]
@@ -34,33 +34,39 @@ lg:px-0 lg:gap-x-4">
</a> </a>
</div> </div>
<div class="self-center justify-self-center md:justify-self-start xs:mt-[20px] md:mt-[18px]"> <div class="self-end">
<div id="header-text-1"class="text-secondary justify-self-center <div id="header-text-1"class="text-secondary justify-self-start
xs:[font-size:_clamp(15px,5vw,36px)] xs:justify-self-start xs:leading-[36px] [font-size:_clamp(16px,6vw,36px)]
xs:[font-size:_clamp(15px,6vw,36px)] xs:justify-self-start xs:leading-[3.5rem]
lg:[font-size:_clamp(15px,3vw,26px)] lg:[font-size:_clamp(15px,3vw,26px)]
lg:leading-[2rem]
xl:[font-size:_clamp(15px,3vw,36px)] xl:[font-size:_clamp(15px,3vw,36px)]
xl:leading-[4.5rem] pt-[0px]"> ">
Energieausweis online erstellen</div> Energieausweis online erstellen</div>
<div id="header-text-2"class="text-primary justify-self-center <div id="header-text-2"class="text-primary justify-self-start
xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[20px] [font-size:_clamp(10px,4vw,22px)] leading-[10px]
xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[1rem]
lg:[font-size:_clamp(15px,3vw,20px)] lg:[font-size:_clamp(15px,3vw,20px)]
lg:leading-[2rem]
xl:[font-size:_clamp(15px,3vw,24px)] xl:[font-size:_clamp(15px,3vw,24px)]
xl:leading-[0.5rem]"> ">
Energieausweise nach aktuellem GEG</div> Energieausweise nach aktuellem GEG</div>
</div> </div>
</div> </div>
</div> </div>
<div class="w-full justify-self-center"> <div class="w-full justify-self-center">
<HeaderLogin client:load /> <HeaderLogin client:load />
</div> </div>
</div> </div>

82
src/components/design/header/Header_ORG.astro Normal file
View File

@@ -0,0 +1,82 @@
---
import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
---
<header id="header">
<div id="header-grid" class="grid relative bg-white items-center gap-x-4 pt-4 px-0
grid-cols-1
sm:grid-cols-1
md:grid-cols-1
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-x-3 lg:px-4 lg:py-4
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-x-4 xl:px-6 xl:py-4
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-x-5 2xl:px-6 2xl:py-4">
<div class="justify-self-center xs:justify-self-start">
<div class="grid grid-cols-1 px-2 gap-2 gap-y-1
xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
md:gap-y-4
lg:px-0 lg:gap-x-4">
<div class="self-start justify-self-start">
<a href="/">
<img id="header-logo" class="w-full
xs:max-w-[64px]
sm:max-w-[64px]
md:max-w-[64px] md:ml-6
lg:max-w-[64px] lg:ml-0
xl:max-w-[94px] xl:ml-0
"
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
</a>
</div>
<div class="self-center justify-self-center md:justify-self-start xs:mt-[20px] md:mt-[18px]">
<div id="header-text-1"class="text-secondary justify-self-center
xs:[font-size:_clamp(15px,5vw,36px)] xs:justify-self-start xs:leading-[36px]
lg:[font-size:_clamp(15px,3vw,26px)]
lg:leading-[2rem]
xl:[font-size:_clamp(15px,3vw,36px)]
xl:leading-[4.5rem] pt-[0px]">
Energieausweis online erstellen</div>
<div id="header-text-2"class="text-primary justify-self-center
xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[20px]
lg:[font-size:_clamp(15px,3vw,20px)]
lg:leading-[2rem]
xl:[font-size:_clamp(15px,3vw,24px)]
xl:leading-[0.5rem]">
Energieausweise nach aktuellem GEG</div>
</div>
</div>
</div>
<div class="w-full justify-self-center">
<HeaderLogin client:load />
</div>
</div>
</div>
<div class="col-start-1 col-span-3">
<div id="header-line" class="px-2 flex flex-row w-full justify-end items-center bg-primary
lg:h-[12px] xl:h-[12px]"></div>
</div>
</header>
<style>
.header-button {
@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
}
</style>

34
src/components/design/sidebars/cards/NavigationCard.svelte
View File

@@ -65,6 +65,10 @@
for (let i = 0; i < rotate_list.length; i++) { for (let i = 0; i < rotate_list.length; i++) {
rotate_list[i].classList.remove("rotate-symbol"); rotate_list[i].classList.remove("rotate-symbol");
} }
const rotate_list1 = document.querySelectorAll(".dd-symbol-clone");
for (let i = 0; i < rotate_list1.length; i++) {
rotate_list1[i].classList.remove("rotate-symbol");
}
} else { } else {
for (let i = 0; i < spans.length; i++) { for (let i = 0; i < spans.length; i++) {
spans[i].classList.add("hamburger-swing-" + i); spans[i].classList.add("hamburger-swing-" + i);
@@ -75,21 +79,25 @@
<svelte:window bind:innerWidth /> <svelte:window bind:innerWidth />
<div <div class="hamburger_menu py-1 px-2 bg-secondary xs:px-4 lg:hidden">
class="hamburger_menu py-1 px-2 bg-secondary
xs:px-4 <div id="hamburger" class="cursor-pointer grid grid-cols-2 items-center">
lg:hidden"
> <div class="burger justify-self-start"
<div on:click={hamburger}
id="hamburger" on:keydown={hamburger}>
on:click={hamburger}
on:keydown={hamburger}
class="cursor-pointer"
>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</div> </div>
<div class="justify-self-end">
<a href="/">
<img id="header-logo" class="w-8 m-1" src="/images/header/logo-IBC-white.svg" alt="IBCornelsen-Logo"/>
</a>
</div>
</div>
</div> </div>
<nav <nav
@@ -387,7 +395,7 @@
</div> </div>
<div class="nav-element"> <div class="nav-element">
<a class="no-dropdown nav-element-child" href="/kundenbewertungen/" <a class="no-dropdown nav-element-child lg:rounded-b-xl" href="/kundenbewertungen/"
>Kundenbewertungen</a >Kundenbewertungen</a
> >
</div> </div>

455
src/components/design/sidebars/cards/NavigationCard_ORG.svelte Normal file
View File

@@ -0,0 +1,455 @@
<script lang="ts">
let innerWidth: number;
function dropdown() {
if (innerWidth < 1024) {
const check_element = this.lastChild;
const rotate_list = document.querySelectorAll(".dd-symbol-clone");
const rotate_element = this.childNodes[0].children[0];
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 hover() {
if (innerWidth > 1024) {
const check_element = this.firstChild.lastChild;
check_element.style.visibility = "visible";
}
}
function hoverout() {
if (innerWidth > 1024) {
const check_element = this.firstChild.lastChild;
check_element.style.visibility = "hidden";
}
}
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("cardNavigation");
element.classList.toggle("hidden");
const spans = this.children;
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-4
lg:hidden"
>
<div
id="hamburger"
on:click={hamburger}
on:keydown={hamburger}
class="cursor-pointer"
>
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav
id="cardNavigation"
class="cardNavigation box hidden relative ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block mb-0 lg:mb-5"
>
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
Jetzt bestellen
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/welcher-energieausweis/"
>Welcher Energieausweis?</a
>
</div>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div
class="nav-element dropdown lg:dropdown-right"
on:click={dropdown}
on:keydown={dropdown}
on:mouseover={hover}
on:mouseleave={hoverout}
>
{#if innerWidth > 1023}
<a href={undefined} class="nav-element-child"
>Energieausweis erstellen<span class="dd-symbol-clone">❯</span
><span class="dd-symbol">❯</span></a
>
{:else}
<a href={undefined} class="nav-element-child"
>Energieausweis erstellen<span class="dd-symbol-clone">❯</span
><span class="dd-symbol">❯</span></a
>
{/if}
<ul class="dropdown-content energieasusweis-erstellen">
{#if innerWidth < 1023}
<li>
<a href="/energieausweis-erstellen"
>Energieausweis erstellen</a
>
</li>
{/if}
<li>
<a
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
>Verbrauchsausweis erstellen</a
>
</li>
<li>
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
>Bedarfsausweis erstellen</a
>
</li>
<li>
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
>Verbrauchsausweis Gewerbe erstellen</a
>
</li>
</ul>
</div>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div
class="nav-element dropdown lg:dropdown-right"
on:click={dropdown}
on:keydown={dropdown}
on:mouseover={hover}
on:mouseleave={hoverout}
>
{#if innerWidth > 1023}
<a href={undefined} class="nav-element-child"
>Angebot anfragen<span class="dd-symbol-clone">❯</span><span
class="dd-symbol">❯</span
></a
>
{:else}
<a href={undefined} class="nav-element-child"
>Angebot anfragen<span class="dd-symbol-clone">❯</span><span
class="dd-symbol">❯</span
></a
>
{/if}
<ul class="dropdown-content angebot-anfragen">
{#if innerWidth < 1023}
<li>
<a href="/energieausweis-erstellen">Angebot anfragen</a>
</li>
{/if}
<li>
<a
href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen"
>Bedarfsausweis Gewerbe anfragen</a
>
</li>
<li>
<a href="/angebot-anfragen/geg-nachweis-wohnen-anfragen"
>GEG Nachweis Wohnen anfragen</a
>
</li>
<li>
<a href="/angebot-anfragen/geg-nachweis-gewerbe-anfragen"
>GEG Nachweis Gewerbe anfragen</a
>
</li>
</ul>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan"
>Sanierungsfahrplan (iSFP)</a
>
</div>
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
Produkte & Preise
</div>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div
class="nav-element dropdown lg:dropdown-right"
on:click={dropdown}
on:keydown={dropdown}
on:mouseover={hover}
on:mouseleave={hoverout}
>
<a href="/verbrauchsausweis/" class="nav-element-child"
>Verbrauchsausweis<span class="dd-symbol-clone">❯</span><span
class="dd-symbol">❯</span
></a
>
<ul class="dropdown-content verbrauchsausweis">
{#if innerWidth < 1023}
<li><a href="index">Verbrauchsausweis</a></li>
{/if}
<li><a href="/verbrauchsausweis/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis Wohngebäude</a></li>
<li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis online erstellen</a></li>
<li><a href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis/">Häufige Fragen zum Verbrauchsausweis</a></li>
<li>
<a href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis/">Statistiken zum Verbrauchsausweis Wohngebäude</a
>
</li>
<li><a href="/verbrauchsausweis/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe</a></li>
<li>
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe online erstellen</a>
</li>
<li>
<a href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis-gewerbe/">Häufige Fragen zum Verbrauchsausweis Gewerbe</a>
</li>
<li>
<a href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis-gewerbe/">Statistiken zum Verbrauchsausweis Gewerbe</a>
</li>
</ul>
</div>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div
class="nav-element dropdown lg:dropdown-right"
on:click={dropdown}
on:keydown={dropdown}
on:mouseover={hover}
on:mouseleave={hoverout}
>
<a href="/bedarfsausweis/" class="nav-element-child"
>Bedarfsausweis<span class="dd-symbol-clone">❯</span><span
class="dd-symbol">❯</span
></a
>
<ul class="dropdown-content bedarfsausweis">
{#if innerWidth < 1023}
<li><a href="/bedarfsausweis/">Bedarfsausweis</a></li>
{/if}
<li><a href="/bedarfsausweis/bedarfsausweis-wohngebaeude/">Bedarfsausweis Wohngebäude</a></li>
<li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Bedarfsausweis online erstellen</a></li>
<li><a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis/">Häufige Fragen zum Bedarfsausweis</a></li>
<li>
<a href="/bedarfsausweis/statistiken-zum-bedarfsausweis/">Statistiken zum Bedarfsausweis Wohngebäude</a>
</li>
<li><a href="/bedarfsausweis/bedarfsausweis-gewerbe/">Bedarfsausweis Gewerbe</a></li>
<li><a href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen">Bedarfsausweis Gewerbe anfragen</a></li>
<li>
<a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis-gewerbe/">Häufige Fragen zum Bedarfsausweis Gewerbe</a>
</ul>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan"
>Sanierungsfahrplan</a
>
</div>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div
class="nav-element dropdown lg:dropdown-right"
on:click={dropdown}
on:keydown={dropdown}
on:mouseover={hover}
on:mouseleave={hoverout}
>
<a href="/" class="nav-element-child"
>Energieausweis<span class="dd-symbol-clone">❯</span><span
class="dd-symbol">❯</span
></a
>
<ul class="dropdown-content energieausweis">
{#if innerWidth < 1023}
<li><a href="/energieausweis/">Energieausweis</a></li>
{/if}
<li><a href="/energieausweis/energieausweis-pflicht/">Energieausweis Pflicht</a></li>
<li><a href="/energieausweis/energieausweis-kosten/">Energieausweis Kosten</a></li>
<li><a href="/energieausweis/energieausweis-haus/">Energieausweis Haus</a></li>
</ul>
</div>
<!-- <div class="nav-element">
<a
class="no-dropdown nav-element-child"
href="/energieausweis-aussteller">Energieberater finden</a
>
</div> -->
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
FAQ & Hilfe
</div>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div
class="nav-element dropdown lg:dropdown-right"
on:click={dropdown}
on:keydown={dropdown}
on:mouseover={hover}
on:mouseleave={hoverout}
>
{#if innerWidth > 1023}
<a href="/bestellprozess-energieausweis" class="nav-element-child"
>Bestellprozess Energieausweis<span class="dd-symbol-clone"
>❯</span
><span class="dd-symbol">❯</span></a
>
{:else}
<a href="/bestellprozess-energieausweis" class="nav-element-child"
>Bestellprozess Energieausweis<span class="dd-symbol-clone"
>❯</span
><span class="dd-symbol">❯</span></a
>
{/if}
<ul class="dropdown-content bestellprozess-energieausweis">
{#if innerWidth < 1023}
<li>
<a href="/bestellprozess-energieausweis"
>Bestellprozess Energieausweis</a
>
</li>
{/if}
<li>
<a
href="/bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen/"
>Merkblatt Verbrauchsausweis Wohnen</a
>
</li>
<li>
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
>Merkblatt Bedarfsausweis Wohnen</a
>
</li>
<li>
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
>Merkblatt Verbrauchsausweis Gewerbe</a
>
</li>
</ul>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/geg/"
>Gebäudeenergiegesetz (GEG)</a
>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/enev-zusammenfassung/"
>EnEV Zusammenfassung - Archiv</a
>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/faq/">FAQ</a>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/glossar/">Glossar</a>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child lg:rounded-b-xl" href="/kundenbewertungen/"
>Kundenbewertungen</a
>
</div>
<!-- <div class="nav-element">
<a
class="no-dropdown nav-element-child lg:!rounded-b-lg xl:!rounded-b-xl"
href="/fuer-entwickler/">Für Entwickler</a
>
</div> -->
</nav>
<style lang="scss">
.dd-symbol::before {
content: "❯";
font-size: 0.95rem;
position: absolute;
top: 0px;
left: -7px;
animation-name: flim;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.dd-symbol {
visibility: hidden;
}
.dd-symbol::after {
content: "❯";
font-size: 0.95rem;
position: absolute;
top: 0px;
right: -7px;
animation-name: flim;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
@keyframes flim {
0% {
opacity: 0;
}
16.66% {
opacity: 0.25;
}
33.32% {
opacity: 0.5;
}
49.98% {
opacity: 0.75;
}
66.64% {
opacity: 0.5;
}
83.33% {
opacity: 0.25;
}
100% {
opacity: 0;
}
}
</style>

4
src/layouts/AusweisLayoutDaten.astro
View File

@@ -2,7 +2,7 @@
import "../style/global.css"; import "../style/global.css";
import "../style/formular.css"; import "../style/formular.css";
import "../../svelte-dialogs.config"; import "../../svelte-dialogs.config";
import Header from "#components/design/header/AusweisHeader.astro"; import Header from "#components/design/header/Header.astro";
import Footer from "#components/design/footer/Footer.astro"; import Footer from "#components/design/footer/Footer.astro";
import SidebarLeft from "#components/design/sidebars/SidebarLeft.astro"; import SidebarLeft from "#components/design/sidebars/SidebarLeft.astro";
import { NotificationWrapper } from "@ibcornelsen/ui"; import { NotificationWrapper } from "@ibcornelsen/ui";
@@ -128,7 +128,7 @@ const { title } = Astro.props;
> >
<SidebarLeft /> <SidebarLeft />
<article class="box rounded-tl-none p-2 lg:p-12"> <article class="">
<slot /> <slot />
</article> </article>
</main> </main>

13
src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte"; import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
import ProgressBar from "#components/Ausweis/Progressbar.svelte"; import Progressbar from "#components/Ausweis/Progressbar.svelte";
//import Hilfe from "#components/Ausweis/Hilfe.svelte"; //import Hilfe from "#components/Ausweis/Hilfe.svelte";
import { PRICES } from "#lib/constants.js"; import { PRICES } from "#lib/constants.js";
@@ -165,21 +165,18 @@
lg:grid-cols-2 lg:gap-x-6 lg:grid-cols-2 lg:gap-x-6
"> ">
<div id="performance-box" class="w-full box relative px-0 sm:px-4 order-1 self-stretch grid grid-cols-1">
<PerformanceScore <PerformanceScore
bind:ausweis bind:ausweis
bind:aufnahme={aufnahme} bind:aufnahme={aufnahme}
bind:objekt={objekt} bind:objekt={objekt}
{ausweisart} {ausweisart}
/> />
</div>
<div id="progress-box" class="w-full box relative px-0 sm:px-4 py-3 text-center order-2 self-stretch">
<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0">Energieausweis erstellen</h1>
<h2 class="text-primary [font-size:_clamp(18px,1vw,18px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2> <Progressbar active={0} {ausweisart}/>
<ProgressBar step1={'step'}/>
</div>
</div> </div>

15
src/modules/KundendatenModule.svelte
View File

@@ -336,25 +336,16 @@
" "
> >
{#if !gegAnfrage} {#if !gegAnfrage}
<div
id="performance-box"
class="w-full box relative px-0 sm:px-4 order-1 self-stretch grid grid-cols-1"
>
<PerformanceScore <PerformanceScore
bind:ausweis bind:ausweis
bind:aufnahme bind:aufnahme
bind:objekt bind:objekt
{ausweisart} {ausweisart}
/> />
</div>
{/if} {/if}
<div
id="progress-box"
class="w-full box relative px-0 sm:px-4 py-3 text-center order-1 2xl:order-2 self-stretch"
>
<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0">Energieausweis erstellen</h1>
<h2 class="text-primary [font-size:_clamp(18px,1vw,18px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
{#if gegAnfrage} {#if gegAnfrage}
<Progressbar <Progressbar
active={1} active={1}
@@ -364,7 +355,7 @@
<Progressbar active={1} /> <Progressbar active={1} />
{/if} {/if}
</div> </div>
</div>
<form id="formInput-2" bind:this={form}> <form id="formInput-2" bind:this={form}>
<div id="formular-box" class="formular-boxen ring-0"> <div id="formular-box" class="formular-boxen ring-0">

11
src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
View File

@@ -122,23 +122,18 @@
2xl:grid-cols-2 2xl:gap-x-8 2xl:grid-cols-2 2xl:gap-x-8
"> ">
<div id="performance-box" class="w-full box relative px-0 sm:px-4 order-2 2xl:order-1 self-stretch grid grid-cols-1">
<PerformanceScore <PerformanceScore
bind:ausweis bind:ausweis
bind:aufnahme={aufnahme} bind:aufnahme={aufnahme}
bind:objekt={objekt} bind:objekt={objekt}
{ausweisart} {ausweisart}
/> />
<Progressbar active={0} {ausweisart}/>
</div> </div>
<div id="progress-box" class="w-full box relative px-0 sm:px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0">Energieausweis erstellen</h1>
<h2 class="text-primary [font-size:_clamp(18px,1vw,18px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>>
<Progressbar active={0} />
</div>
</div>

13
src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
View File

@@ -166,21 +166,20 @@ const ausweisart = Enums.Ausweisart.VerbrauchsausweisWohnen
<div id="skala" class="bg-white grid grid-cols-1 px-0 sm:p-4 lg:grid-cols-2 lg:gap-x-6"> <div id="skala" class="bg-white grid grid-cols-1 px-0 sm:p-4 lg:grid-cols-2 lg:gap-x-6">
<div id="performance-box" class="w-full box relative px-0 sm:px-4 order-1 self-stretch grid grid-cols-1">
<PerformanceScore <PerformanceScore
bind:ausweis bind:ausweis
bind:aufnahme={aufnahme} bind:aufnahme={aufnahme}
bind:objekt={objekt} bind:objekt={objekt}
{ausweisart} {ausweisart}
/> />
</div>
<div id="progress-box" class="w-full box relative px-0 sm:px-4 py-3 text-center order-2 self-stretch">
<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0">Energieausweis erstellen</h1>
<h2 class="text-primary [font-size:_clamp(18px,1vw,18px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
<Progressbar active={0}/> <Progressbar active={0} {ausweisart}/>
</div>
</div> </div>

2
src/style/formular.css
View File

@@ -3,7 +3,7 @@
} }
.formular-boxen { .formular-boxen {
@apply w-full ml-[2px] ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg; @apply w-full ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg;
} }
.formular-abschnitt1 { .formular-abschnitt1 {

16
src/style/global.css
View File

@@ -76,12 +76,16 @@ input:disabled, input:read-only {
/*ARTICLE*/ /*ARTICLE*/
article { article {
@apply w-full relative bg-white px-0 py-0 z-0; @apply w-full relative bg-white p-0 z-0 box rounded-tl-none sm:p-2 lg:p-12;
hr {@apply mb-4 mt-4 border-primary;} hr {@apply mb-4 mt-4 border-primary;}
h1 {@apply pl-2 sm:pl-0 text-4xl font-normal mb-2;} h1 {@apply pl-2 font-normal mb-2
h2{@apply pl-2 sm:pl-0 text-2xl font-normal mb-2;} [font-size:_clamp(24px,1.5vw,36px)] leading-7
sm:text-4xl;}
h2 {@apply pl-2 font-normal mb-2
[font-size:_clamp(24px,1.5vw,36px)] leading-7
sm:text-4xl;}
h3 {@apply pl-2 sm:pl-0 text-xl font-normal ml-1 mb-1;} h3 {@apply pl-2 sm:pl-0 text-xl font-normal ml-1 mb-1;}
a {@apply text-blue-700 font-medium inline;} a {@apply text-blue-700 font-medium inline;}
@@ -154,6 +158,7 @@ article {
xl:text-lg xl:text-lg
} }
.dropdown-content{ .dropdown-content{
@apply !relative z-[1] !p-0 !scale-100 hidden @apply !relative z-[1] !p-0 !scale-100 hidden
lg:!absolute lg:min-w-max lg:p-2 lg:shadow-lg lg:!top-0 lg:ring-gray-300 lg:ring-1; lg:!absolute lg:min-w-max lg:p-2 lg:shadow-lg lg:!top-0 lg:ring-gray-300 lg:ring-1;
@@ -174,8 +179,9 @@ li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}
#hamburger{ #hamburger{
@apply my-1; @apply my-1;
span {@apply block h-[3px] w-6 bg-white !transition-all} .burger {@apply w-6}
span:nth-child(2) {@apply my-1} span {@apply block h-[4px] bg-white !transition-all}
span:nth-child(2) {@apply my-[3px]}
} }
.hamburger-swing-0{@apply origin-left rotate-45 -translate-y-[1.5px] !transition-all duration-500} .hamburger-swing-0{@apply origin-left rotate-45 -translate-y-[1.5px] !transition-all duration-500}