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

Struktur & Navigation #9

Merged
UMBENOMENA merged 2 commits from UMBE into main 2024-11-19 18:46:42 +00:00
Conversation 0 Commits 2 Files Changed 7 +158 -27
7 changed files with 158 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.vscode/settings.json vendored
View File

@@ -8,9 +8,10 @@
"css.lint.unknownAtRules": "ignore",
"scss.lint.unknownAtRules": "ignore",
"less.lint.unknownAtRules": "ignore"
}
"workbench.colorCustomizations": {
"minimap.background": "#00000000",
"scrollbar.shadow": "#00000000"
}
},
}

5
package.json
View File

@@ -44,6 +44,7 @@
"i18next-http-backend": "^2.6.2",
"js-cookie": "^3.0.5",
"js-interpolate": "^1.0.1",
"postcss-nested": "^7.0.2",
"katex": "^0.16.11",
"moment": "^2.30.1",
"moment-timezone": "^0.5.46",
@@ -64,6 +65,7 @@
"@types/body-scroll-lock": "^3.1.2",
"@types/fontkit": "^2.0.7",
"@types/js-cookie": "^3.0.6",
"autoprefixer": "^10.4.20",
"@types/uuid": "^9.0.8",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
@@ -73,6 +75,9 @@
"daisyui": "^4.12.14",
"eslint": "~8.15.0",
"eslint-config-prettier": "8.1.0",
"postcss": "^8.4.49",
"postcss-import": "^16.1.0",
"postcss-nesting": "^13.0.1",
"prettier": "^2.8.8",
"typescript": "^4.9.5"
}

11
postcss.config.js Normal file
View File

@@ -0,0 +1,11 @@
// postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': 'postcss-nesting',
tailwindcss: {},
'postcss-preset-env': {
features: { 'nesting-rules': false },
},
}
}

147
src/components/UMBE_banner-saeule.svelte
View File

@@ -1,28 +1,133 @@
<div class="grid grid-cols-[1fr,1fr,1fr,1fr] gap-4" >
<script>
import { PRICES } from "#lib/constants";
</script>
<div class="grid">
<div>
<img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
<div class="h-[200px] bg-primary rounded-md mb-1"></div>
<div id="saeulen">
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
<div class="name">Verbrauchsausweis<br>Wohngebäude</div>
</div>
</div>
<div class="grid">
<div>
<img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
<div class="h-[200px] bg-primary rounded-md mb-1"></div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.VerbrauchsausweisWohnen[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
</div>
<div class="grid">
<div>
<img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
<div class="h-[200px] bg-primary rounded-md mb-1"></div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
</div>
</div>
<div class="grid">
<div>
<img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
<div class="h-[200px] bg-primary rounded-md mb-1"></div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
</div>
</div>
</div>
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
<div class="name">Verbrauchsausweis<br>Gewerbe</div>
</div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.VerbrauchsausweisGewerbe[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
</div>
</div>
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
<div class="name">Bedarfsausweis<br>Wohngebäude</div>
</div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.BedarfsausweisWohnen[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
</div>
</div>
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
<div class="name">Bedarfsausweis<br>Gewerbe</div>
</div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.BedarfsausweisGewerbe[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
</div>
</div>
</div>
<style lang="scss">
#saeulen{@apply grid grid-cols-[1fr,1fr,1fr,1fr] gap-4;
.saeule{@apply grid;
img{@apply w-full justify-self-center mb-1}
.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4}
.name{@apply w-full}
.name{font-size: clamp(15px, 2vh, 18px)}
.orange{@apply bg-primary text-white text-center rounded-t-md p-2 relative}
.ab{@apply leading-[1]}
.mwst{@apply leading-[auto]}
.price{font-size: clamp(15px, 5vh, 50px)}
.price:before{@apply content-['€'] absolute font-sans font-normal text-[60%] left-[15%] top-[30%]}
.white{@apply border-x-[1px] border-gray-500 text-center text-black p-4}
.services{@apply py-2}
.services:first-child{@apply font-bold}
.services:nth-child(even){@apply bg-secondary/10}
.services:not(:last-child){@apply border-b-[1px] border-gray-300}
.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-b-md p-4}
}
}
</style>

2
src/pages/UMBE_test.astro
View File

@@ -4,7 +4,7 @@ import BannerPrice from "#components/UMBE_banner-saeule.svelte";
---
<Layout title="Energieausweis online erstellen - Online Energieausweis" client:load>
<Layout title="Energieausweis online erstellen - Online Energieausweis">
<h1>Energieausweis online erstellen</h1>
<BannerPrice client:load />

10
src/style/UMBE_global.css
View File

@@ -37,6 +37,14 @@
font-family: "Antique Olive Compact bold";
}
.promo1{
font-weight: 700;
box-sizing: border-box;
font-family: "Antique Olive Compact bold";
text-shadow: 2px 2px 8px #222;
}
body{
@apply /*bg-[url('/images/pattern.png')] bg-repeat bg-fixed */ max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
}
@@ -112,7 +120,7 @@ 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
lg:px-4 lg:bg-[#efefef] lg:text-black lg:hover:bg-secondary
xl:text-lg}
li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}

5
tailwind.config.cjs
View File

@@ -128,8 +128,9 @@ module.exports = {
'5xl': '4.210rem',
},
fontFamily: {
heading: 'Abel',
body: 'Abel',
heading: 'Heron',
body: 'Heron',
},
fontWeight: {
normal: '400',