Widget vereinfacht
This commit is contained in:
Moritz Utcke
@@ -1,9 +1,7 @@
|
||||
<script lang="ts">
|
||||
import CardVerbrauchsausweisWidget from "#content/CardVerbrauchsausweisWidget.svelte";
|
||||
import CardVerbrauchsausweisGewerbeWidget from "#content/CardVerbrauchsausweisGewerbeWidget.svelte";
|
||||
import CardBedarfsausweisWidget from "#content/CardBedarfsausweisWidget.svelte";
|
||||
import CardBedarfsausweisGewerbeWidget from "#content/CardBedarfsausweisGewerbeWidget.svelte";
|
||||
import { fade } from "svelte/transition";
|
||||
import WidgetCardTemplate from "./design/content/WidgetCardTemplate.svelte";
|
||||
import { PRICES } from "#lib/constants.js";
|
||||
|
||||
let gebaeudetyp: string;
|
||||
let anlass: string;
|
||||
@@ -48,7 +46,7 @@
|
||||
class="OEA_auswahl1"
|
||||
bind:value={gebaeudetyp}
|
||||
>
|
||||
<option value="" selected disabled>bitte auswählen</option>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="Einfamilienhaus">Einfamilienhaus</option>
|
||||
<option value="Zweifamilienhaus">Zweifamilienhaus</option>
|
||||
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
|
||||
@@ -63,7 +61,7 @@
|
||||
class="OEA_auswahl1"
|
||||
bind:value={anlass}
|
||||
>
|
||||
<option value="" selected disabled>bitte auswählen</option>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="Vermietung/Verkauf"
|
||||
>Vermietung/Verkauf</option
|
||||
>
|
||||
@@ -83,7 +81,7 @@
|
||||
class="OEA_auswahl2"
|
||||
bind:value={baujahr}
|
||||
>
|
||||
<option value="" selected disabled>bitte auswählen</option>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="vor 1978">vor 1978</option>
|
||||
<option value="nach 1977">nach 1977</option>
|
||||
</select>
|
||||
@@ -95,7 +93,7 @@
|
||||
class="OEA_auswahl2"
|
||||
bind:value={einheiten}
|
||||
>
|
||||
<option value="" selected disabled>bitte auswählen</option>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="bis 4 Wohneinheiten"
|
||||
>bis 4 Wohneinheiten</option
|
||||
>
|
||||
@@ -124,7 +122,21 @@
|
||||
class="OEA_item6 result"
|
||||
transition:fade={{ duration: 1000 }}
|
||||
>
|
||||
<CardVerbrauchsausweisWidget />
|
||||
<WidgetCardTemplate
|
||||
name="Verbrauchsausweis Wohngebäude"
|
||||
price={PRICES.VerbrauchsausweisWohnen[0]}
|
||||
src="/images/right-sidebar/UMBE_wohngebaeude.svg"
|
||||
alt="Wohnhaus Verbrauchsausweis"
|
||||
variant="einfach"
|
||||
services={[
|
||||
["3 Jahresverbräuche der Heizung benötigt.", true],
|
||||
["Zulässig bei Vermietung oder Verkauf.", true],
|
||||
["Unzulässig bei unsanierten Gebäuden vor 1978.", false],
|
||||
["Ungenau durch individuelles Heizverhalten.", false],
|
||||
["Wird nicht immer bei den Banken akzeptiert.", false]
|
||||
]}
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
|
||||
></WidgetCardTemplate>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -133,7 +145,21 @@
|
||||
class="OEA_item6 result"
|
||||
transition:fade={{ duration: 1000 }}
|
||||
>
|
||||
<CardBedarfsausweisWidget />
|
||||
<WidgetCardTemplate
|
||||
name="Bedarfsausweis Wohngebäude"
|
||||
price={PRICES.BedarfsausweisWohnen[0]}
|
||||
src="/images/right-sidebar/UMBE_wohngebaeude.svg"
|
||||
alt="Wohnhaus Bedarfsausweis"
|
||||
variant="fundiert (empfohlen)"
|
||||
services={[
|
||||
["Erfassung der Gebäudegeometrie.", true],
|
||||
["Für Vermietung, Verkauf und Finanzierung.", true],
|
||||
["Zulässig auch für unsanierte Objekte.", true],
|
||||
["Kann als Grundlage für den ISFP dienen.", true],
|
||||
["Objektivere Berechnungsmethode nach DIN 18599.", true],
|
||||
]}
|
||||
href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
|
||||
></WidgetCardTemplate>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -142,7 +168,22 @@
|
||||
class="OEA_item6 result"
|
||||
transition:fade={{ duration: 1000 }}
|
||||
>
|
||||
<CardVerbrauchsausweisGewerbeWidget />
|
||||
<WidgetCardTemplate
|
||||
name="Verbrauchsausweis Gewerbe"
|
||||
price={PRICES.VerbrauchsausweisGewerbe[0]}
|
||||
src="/images/right-sidebar/UMBE_gewerbegebaeude.svg"
|
||||
alt="Gewerbe Verbrauchsausweis"
|
||||
variant="einfach"
|
||||
services={[
|
||||
|
||||
["3 Jahresverbräuche von Heizung Gebäudestrom nötig.", true],
|
||||
["Zulässig bei Vermietung oder Verkauf.", true],
|
||||
["Für bauliche und energetische Maßnahmen ungeeignet.", false],
|
||||
["Wird nicht immer bei den Banken akzeptiert.", false],
|
||||
]}
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
|
||||
></WidgetCardTemplate>
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -151,7 +192,21 @@
|
||||
class="OEA_item6 result"
|
||||
transition:fade={{ duration: 1000 }}
|
||||
>
|
||||
<CardBedarfsausweisGewerbeWidget />
|
||||
<WidgetCardTemplate
|
||||
name="Bedarfsausweis Gewerbe"
|
||||
price={PRICES.BedarfsausweisGewerbe[0]}
|
||||
src="/images/right-sidebar/UMBE_gewerbegebaeude.svg"
|
||||
alt="Gewerbe Bedarfsausweis"
|
||||
variant="fundiert (empfohlen)"
|
||||
services={[
|
||||
|
||||
["Mehrzonenmodell nach DIN 18599.", true],
|
||||
["Zulässig bei Vermietung oder Verkauf.", true],
|
||||
["Grundlage für Sanierungsvarianten.", false],
|
||||
["Objektiveres, besser vergleichbares Ergebnis.", false],
|
||||
]}
|
||||
href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
|
||||
></WidgetCardTemplate>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id ="card-BAG-promo" class="box card bg-white px-6 py-4 mb-5">
|
||||
<div class="">
|
||||
|
||||
<h2>Bedarfsausweis Gewerbe</h2>
|
||||
<hr class="mb-2">
|
||||
|
||||
<div class="flex flex-row mb-2 mt-2 w-full items-end">
|
||||
<div>
|
||||
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="white">
|
||||
<div class="variante">fundiert (empfohlen)</div>
|
||||
<div class="services"><div>Mehrzonenmodell nach DIN 18599.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Grundlage für Sanierungsvarianten.</div><div class="check-no">✔</div></div>
|
||||
<div class="services"><div>Objektiveres, besser vergleichbares Ergebnis.</div><div class="check-no">✔</div></div>
|
||||
</div>
|
||||
<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-VA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt online erstellen</a>
|
||||
|
||||
<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-VA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >zur Produktübersicht</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
#card-BAG-promo{
|
||||
|
||||
|
||||
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
|
||||
|
||||
.variante{@apply w-fit text-black justify-self-end mr-3}
|
||||
.variante{@apply text-2xl}
|
||||
|
||||
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
|
||||
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
|
||||
.check{@apply justify-self-end font-bold text-green-700}
|
||||
.check-no{@apply justify-self-end font-bold text-red-700}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +0,0 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id ="card-BA-promo" class="box card bg-white px-6 py-4 mb-5">
|
||||
<div class="">
|
||||
|
||||
<h2>Bedarfssausweis Wohngebäude</h2>
|
||||
<hr class="mb-2">
|
||||
|
||||
<div class="flex flex-row mb-2 mt-2 w-full items-end">
|
||||
<div>
|
||||
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Bedarfsausweis"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="white">
|
||||
<div class="variante">fundiert (empfohlen)</div>
|
||||
<div class="services"><div>Erfassung der Gebäudegeometrie.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Für Vermietung, Verkauf und Finanzierung.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Zulässig auch für unsanierte Objekte.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Kann als Grundlage für den ISFP dienen.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Objektivere Berechnungsmethode nach DIN 18599.</div><div class="check">✔</div></div>
|
||||
</div>
|
||||
<a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt online erstellen</a>
|
||||
|
||||
<a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >zur Produktübersicht</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
#card-BA-promo{
|
||||
|
||||
|
||||
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
|
||||
|
||||
.variante{@apply w-fit text-black justify-self-end mr-3}
|
||||
.variante{@apply text-2xl}
|
||||
|
||||
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
|
||||
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
|
||||
.check{@apply justify-self-end font-bold text-green-700}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +0,0 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id ="card-VAG-promo" class="box card bg-white px-6 py-4 mb-5">
|
||||
<div class="">
|
||||
|
||||
<h2>Verbrauchsausweis Gewerbe</h2>
|
||||
<hr class="mb-2">
|
||||
|
||||
<div class="flex flex-row mb-2 mt-2 w-full items-end">
|
||||
<div>
|
||||
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="white">
|
||||
<div class="variante">einfach</div>
|
||||
<div class="services"><div>3 Jahresverbräuche von Heizung Gebäudestrom nötig.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet.</div><div class="check-no">✘</div></div>
|
||||
<div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
|
||||
</div>
|
||||
<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt online erstellen</a>
|
||||
|
||||
<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >zur Produktübersicht</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
#card-VAG-promo{
|
||||
|
||||
|
||||
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
|
||||
|
||||
.variante{@apply w-fit text-black justify-self-end mr-3}
|
||||
.variante{@apply text-2xl}
|
||||
|
||||
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
|
||||
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
|
||||
.check{@apply justify-self-end font-bold text-green-700}
|
||||
.check-no{@apply justify-self-end font-bold text-red-700}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,96 +0,0 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id="card-VA-promo" class="box card bg-white px-6 py-4 mb-5">
|
||||
<div class="">
|
||||
<h2>Verbrauchsausweis Wohngebäude</h2>
|
||||
<hr class="mb-2" />
|
||||
|
||||
<div class="flex flex-row mb-2 mt-2 w-full items-end">
|
||||
<div>
|
||||
<img
|
||||
class="w-[100%] !min-w-[100px]"
|
||||
src="/images/right-sidebar/UMBE_wohngebaeude.svg"
|
||||
alt="Wohnhaus Verbrauchsausweis"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">
|
||||
ab<span class="promo pl-2"
|
||||
>{PRICES.VerbrauchsausweisWohnen[0]}</span
|
||||
>€
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="white">
|
||||
<div class="variante">einfach</div>
|
||||
<div class="services">
|
||||
<div>3 Jahresverbräuche der Heizung benötigt.</div>
|
||||
<div class="check">✔</div>
|
||||
</div>
|
||||
<div class="services">
|
||||
<div>Zulässig bei Vermietung oder Verkauf.</div>
|
||||
<div class="check">✔</div>
|
||||
</div>
|
||||
<div class="services">
|
||||
<div>Unzulässig bei unsanierten Gebäuden vor 1978.</div>
|
||||
<div class="check-no">✘</div>
|
||||
</div>
|
||||
<div class="services">
|
||||
<div>Ungenau durch individuelles Heizverhalten.</div>
|
||||
<div class="check-no">✘</div>
|
||||
</div>
|
||||
<div class="services">
|
||||
<div>Wird nicht immer bei den Banken akzeptiert.</div>
|
||||
<div class="check-no">✘</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap justify-center">
|
||||
<a
|
||||
href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
|
||||
id="link-VA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
">jetzt online erstellen</a
|
||||
>
|
||||
|
||||
<a
|
||||
href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
|
||||
id="link-VA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
">zur Produktübersicht</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
#card-VA-promo {
|
||||
.white {
|
||||
@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6;
|
||||
}
|
||||
|
||||
.variante {
|
||||
@apply w-fit text-black justify-self-end mr-3;
|
||||
}
|
||||
.variante {
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
.services {
|
||||
@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)];
|
||||
}
|
||||
.services:not(:last-child) {
|
||||
@apply border-b-[1px] border-gray-200;
|
||||
}
|
||||
.check {
|
||||
@apply justify-self-end font-bold text-green-700;
|
||||
}
|
||||
.check-no {
|
||||
@apply justify-self-end font-bold text-red-700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
81
src/components/design/content/WidgetCardTemplate.svelte
Normal file
81
src/components/design/content/WidgetCardTemplate.svelte
Normal file
@@ -0,0 +1,81 @@
|
||||
<script lang="ts">
|
||||
export let price: number;
|
||||
export let name: string;
|
||||
export let variant: string;
|
||||
export let services: [string, boolean][];
|
||||
export let href: string;
|
||||
export let src: string;
|
||||
export let alt: string;
|
||||
</script>
|
||||
|
||||
<div class="box card bg-white px-6 py-4 mb-5">
|
||||
<div>
|
||||
<h2>Bedarfssausweis Wohngebäude</h2>
|
||||
<hr class="mb-2" />
|
||||
|
||||
<div class="flex flex-row mb-2 mt-2 w-full items-end">
|
||||
<div>
|
||||
<img
|
||||
class="w-[100%] !min-w-[100px]"
|
||||
{src}
|
||||
{alt}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">
|
||||
ab<span class="promo pl-2"
|
||||
>{price}</span
|
||||
>€
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="white">
|
||||
<div class="variante">{variant}</div>
|
||||
{#each services as [service, check]}
|
||||
<div class="services">
|
||||
<span>{service}</span>
|
||||
<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap justify-center">
|
||||
<a
|
||||
{href}
|
||||
class="w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
">jetzt online erstellen</a
|
||||
>
|
||||
|
||||
<a
|
||||
{href}
|
||||
class="w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
">zur Produktübersicht</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.white {
|
||||
@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6;
|
||||
}
|
||||
|
||||
.variante {
|
||||
@apply text-2xl w-fit text-black justify-self-end mr-3;
|
||||
}
|
||||
|
||||
.services {
|
||||
@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)];
|
||||
}
|
||||
.services:not(:last-child) {
|
||||
@apply border-b-[1px] border-gray-200;
|
||||
}
|
||||
.check {
|
||||
@apply justify-self-end font-bold text-green-700;
|
||||
}
|
||||
.check-no {
|
||||
@apply justify-self-end font-bold text-red-700;
|
||||
}
|
||||
</style>
|
||||
@@ -21,4 +21,4 @@ class=" box card bg-white px-6 py-4 mb-5">
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
</style>
|
||||
@@ -1,20 +1,12 @@
|
||||
---
|
||||
|
||||
import Layout from "#layouts/Layout.astro";
|
||||
import Widget from "#components/Widget.svelte";
|
||||
|
||||
---
|
||||
|
||||
|
||||
<Layout title="Welcher Energieausweis">
|
||||
<h1 class="text-3xl">Welcher Energieausweis?</h1>
|
||||
|
||||
<h1 class="text-3xl">Welcher Energieausweis?</h1>
|
||||
|
||||
<div class="mt-12 m-auto w-[95%] relative">
|
||||
<Widget client:load />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="mt-12 m-auto w-[95%] relative">
|
||||
<Widget client:load />
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
|
||||
@@ -1,29 +1,26 @@
|
||||
/*@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-face {
|
||||
font-family: 'Heron';
|
||||
font-family: "Heron";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display:swap;
|
||||
src: url("/fonts/HeronSans-Light.woff2") format('woff2');
|
||||
}
|
||||
font-display: swap;
|
||||
src: url("/fonts/HeronSans-Light.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Heron';
|
||||
font-family: "Heron";
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display:swap;
|
||||
src: url("/fonts/HeronSans-Regular.woff2") format('woff2');
|
||||
}
|
||||
font-display: swap;
|
||||
src: url("/fonts/HeronSans-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Antique Olive Compact bold';
|
||||
@font-face {
|
||||
font-family: "Antique Olive Compact bold";
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display:swap;
|
||||
src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
|
||||
}
|
||||
font-display: swap;
|
||||
src: url("/fonts/Antique Olive Std Compact.woff2") format("woff2");
|
||||
}
|
||||
|
||||
* {
|
||||
font-weight: 400;
|
||||
@@ -31,150 +28,194 @@
|
||||
font-family: "Heron";
|
||||
}
|
||||
|
||||
|
||||
.promo1{
|
||||
.promo1 {
|
||||
font-weight: 700;
|
||||
box-sizing: border-box;
|
||||
font-family: "Antique Olive Compact bold";
|
||||
text-shadow: 2px 2px 8px #222;
|
||||
|
||||
}
|
||||
|
||||
.promo{
|
||||
font-weight: 700;
|
||||
box-sizing: border-box;
|
||||
font-family: "Antique Olive Compact bold";
|
||||
}
|
||||
|
||||
|
||||
body{
|
||||
@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
|
||||
.promo {
|
||||
font-weight: 700;
|
||||
box-sizing: border-box;
|
||||
font-family: "Antique Olive Compact bold";
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px];
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply w-full h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap
|
||||
hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary
|
||||
hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="number"], input[type="password"], select{
|
||||
@apply min-h-[38px] ring-1 ring-black/15 rounded-sm}
|
||||
input[type="checkbox"]{@apply inline-block}
|
||||
radio{@apply accent-primary}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
select {
|
||||
@apply min-h-[38px] ring-1 ring-black/15 rounded-sm;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
@apply inline-block;
|
||||
}
|
||||
radio {
|
||||
@apply accent-primary;
|
||||
}
|
||||
|
||||
/*ARTICLE*/
|
||||
|
||||
article {
|
||||
@apply w-full relative bg-white min-h-screen px-0 py-0;
|
||||
|
||||
hr {@apply mb-4 mt-4;}
|
||||
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;}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/*SIDEBARS*/
|
||||
|
||||
/*BOXES*/
|
||||
.box{
|
||||
@apply rounded-lg
|
||||
.box {
|
||||
@apply rounded-lg
|
||||
|
||||
lg:shadow-box lg:ring-1 lg:ring-gray-300
|
||||
xl:rounded-xl
|
||||
|
||||
xl:rounded-xl;
|
||||
}
|
||||
|
||||
.card{
|
||||
h2 {@apply text-lg font-bold text-box-heading leading-6}
|
||||
hr {@apply my-2}
|
||||
p {@apply text-lg}
|
||||
a {@apply text-lg}
|
||||
|
||||
.card {
|
||||
h2 {
|
||||
@apply text-lg font-bold text-box-heading leading-6;
|
||||
}
|
||||
hr {
|
||||
@apply my-2;
|
||||
}
|
||||
p {
|
||||
@apply text-lg;
|
||||
}
|
||||
a {
|
||||
@apply text-lg;
|
||||
}
|
||||
}
|
||||
|
||||
/*SIDEBAR-LEFT*/
|
||||
|
||||
/*NAVIGATION*/
|
||||
|
||||
.nav-element{@apply relative block cursor-pointer}
|
||||
|
||||
.nav-element:not(:first-child){@apply border-gray-200 border-t-[1px]}
|
||||
|
||||
.no-dropdown, .no-dropdown:hover{@apply text-black no-underline}
|
||||
|
||||
.nav-element:hover > .nav-element-child{
|
||||
@apply !bg-primary !text-white cursor-pointer
|
||||
.nav-element {
|
||||
@apply relative block cursor-pointer;
|
||||
}
|
||||
|
||||
.nav-element:hover > .nav-element-child .no-dropdown{
|
||||
@apply !bg-primary !text-white cursor-pointer
|
||||
.nav-element:not(:first-child) {
|
||||
@apply border-gray-200 border-t-[1px];
|
||||
}
|
||||
|
||||
|
||||
.nav-element:hover > .dropdown-content{
|
||||
@apply lg:visible lg:opacity-100 lg:block lg:ml-[calc(100%+2px)]
|
||||
.no-dropdown,
|
||||
.no-dropdown:hover {
|
||||
@apply text-black no-underline;
|
||||
}
|
||||
|
||||
.nav-element:hover:first-child > .nav-element-child{
|
||||
@apply !rounded-none
|
||||
lg:!rounded-tl-xl lg:!rounded-tr-none
|
||||
.nav-element:hover > .nav-element-child {
|
||||
@apply !bg-primary !text-white cursor-pointer;
|
||||
}
|
||||
|
||||
.nav-element:hover:last-child > .nav-element-child{
|
||||
@apply !rounded-none
|
||||
xl:!rounded-b-xl
|
||||
.nav-element:hover > .nav-element-child .no-dropdown {
|
||||
@apply !bg-primary !text-white cursor-pointer;
|
||||
}
|
||||
|
||||
.nav-element-child{
|
||||
@apply px-4 py-2 w-full justify-start text-sm bg-white flex !no-underline text-black
|
||||
xl:text-lg
|
||||
.nav-element:hover > .dropdown-content {
|
||||
@apply lg:visible lg:opacity-100 lg:block lg:ml-[calc(100%+2px)];
|
||||
}
|
||||
|
||||
.dropdown-content{
|
||||
@apply !relative z-[1] !p-0 !scale-100 hidden
|
||||
.nav-element:hover:first-child > .nav-element-child {
|
||||
@apply !rounded-none
|
||||
lg:!rounded-tl-xl lg:!rounded-tr-none;
|
||||
}
|
||||
|
||||
.nav-element:hover:last-child > .nav-element-child {
|
||||
@apply !rounded-none
|
||||
xl:!rounded-b-xl;
|
||||
}
|
||||
|
||||
.nav-element-child {
|
||||
@apply px-4 py-2 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 lg:ring-gray-300 lg:ring-1;
|
||||
|
||||
li {@apply text-sm bg-white flex
|
||||
xl:text-lg}
|
||||
|
||||
li a {@apply w-full text-sm px-4 py-2 rounded-none no-underline hover:text-white hover:bg-gradient-to-br from-secondary to-secondary-grad
|
||||
li {
|
||||
@apply text-sm bg-white flex
|
||||
xl:text-lg;
|
||||
}
|
||||
|
||||
li a {
|
||||
@apply w-full text-sm px-4 py-2 rounded-none no-underline hover:text-white hover:bg-gradient-to-br from-secondary to-secondary-grad
|
||||
lg:px-4 bg-[#efefef] text-black lg:hover:bg-secondary
|
||||
xl:text-lg}
|
||||
xl:text-lg;
|
||||
}
|
||||
|
||||
li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}
|
||||
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]
|
||||
.verbrauchsausweis li:nth-child(5),
|
||||
.bedarfsausweis li:nth-child(5) {
|
||||
@apply !border-primary !border-t-[1px];
|
||||
}
|
||||
|
||||
#hamburger{
|
||||
#hamburger {
|
||||
@apply my-1;
|
||||
span {@apply block h-[3px] w-6 bg-white !transition-all}
|
||||
span:nth-child(2) {@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}
|
||||
.dd-symbol-clone{ @apply absolute right-[20px] lg:text-primary}
|
||||
.rotate-symbol{@apply rotate-[90deg] transition-all duration-300 origin-center lg:rotate-0 md:transition-none}
|
||||
|
||||
.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;
|
||||
}
|
||||
.dd-symbol-clone {
|
||||
@apply absolute right-[20px] lg:text-primary;
|
||||
}
|
||||
.rotate-symbol {
|
||||
@apply rotate-[90deg] transition-all duration-300 origin-center lg:rotate-0 md:transition-none;
|
||||
}
|
||||
|
||||
/*NAVIGATION-ANIMATION*/
|
||||
|
||||
/*SIDEBAR-RIGHT*/
|
||||
|
||||
/*FOOTER*/
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user