Files
online-energieausweis/src/layouts/Layout.astro
Moritz Utcke 754f6ab47a Sidebar überarbeitet
Layout nach den Vorgabenvon Umbe angepasst
2024-11-06 12:55:28 +11:00

155 lines
4.1 KiB
Plaintext

---
import i18next from "i18next";
import "../style/UMBE_global.css";
import "../style/global.scss";
import "../../svelte-dialogs.config"
import Footer from "../components/Footer.astro";
import Header from "../components/Header.astro";
import SidebarLeft from "../components/SidebarLeft.astro";
import SidebarRight from "../components/SidebarRight.astro";
import { NotificationWrapper } from "@ibcornelsen/ui";
import TicketPopup from "../components/Tickets/TicketButton.svelte"
export interface Props {
title: string;
}
const { title } = Astro.props;
const schema = JSON.stringify({
"@context": "http://schema.org",
"@type": "Corporation",
name: "IB Cornelsen",
alternateName: "online-energieausweis.org",
url: "https://online-energieausweis.org",
logo: "https://online-energieausweis.org/ib-cornelsen.png",
address: {
"@type": "PostalAddress",
streetAddress: "Katendeich 5A",
addressLocality: "Hamburg",
postalCode: "21035",
addressCountry: "Deutschland",
email: "info@online-energieausweis.org",
},
contactPoint: {
"@type": "ContactPoint",
telephone: "+49-040-209339850",
faxNumber: "+49-040-209339859",
contactType: "customer service",
areaServed: "DE",
availableLanguage: "German",
},
});
---
<!DOCTYPE html>
<html lang={i18next.language}>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<script type="application/ld+json" set:html={schema}></script>
<link rel="icon" type="image/svg+xml" href="/favicon.jpg" />
<meta
name="description"
content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
/>
<link rel="canonical" href="https://online-energieausweis.org/" />
<meta property="og:locale" content="de_DE" />
<meta property="og:type" content="website" />
<meta
property="og:title"
content="Energieausweis online erstellen - Online Energieausweis"
/>
<meta
property="og:description"
content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
/>
<meta property="og:url" content="https://online-energieausweis.org/" />
<meta
property="og:site_name"
content="Energieausweis online erstellen"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:description"
content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
/>
<meta
name="twitter:title"
content="Energieausweis online erstellen - Online Energieausweis"
/>
<meta
name="twitter:image"
content="https://online-energieausweis.org/images/energieausweis-online-erstellen.jpg"
/>
<title>
{title || "Energieausweis online erstellen - Online Energieausweis"}
</title>
</head>
<body>
<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>
<div class="hidden lg:block">
<SidebarRight />
<div>
</main>
<Footer />
<NotificationWrapper client:load />
<TicketPopup client:load />
</body>
</html>
<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>