UMBE files für Templates

2024-03-14 15:55:12 +01:00
parent 976afd1cd4
commit 918b470639
9 changed files with 329 additions and 1 deletions
--- a/src/layouts/UMBE_Layout.astro
+++ b/src/layouts/UMBE_Layout.astro
@@ -0,0 +1,96 @@
+---
+import i18next from "i18next";
+
+import "../style/UMBE_global.css";
+import "../../svelte-dialogs.config"
+import Footer from "../components/UMBE_Footer.astro";
+import Header from "../components/UMBE_Header.astro";
+import SidebarLeft from "../components/UMBE_SidebarLeft.astro";
+import SidebarRight from "../components/UMBE_SidebarRight.astro";
+import { NotificationWrapper } from "@ibcornelsen/ui";
+
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+
+
+---
+
+<!DOCTYPE html>
+<html lang={i18next.language}>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<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."
+		/>
+		<title>
+			{title || "Energieausweis online erstellen - Online Energieausweis"}
+		</title>
+	</head>
+
+	<body>
+		<container class="max-w-[1920px] w-full mx-auto bg-slate-600 grid  border-solid border-grey-200 border">
+		<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 />
+		
+		</main>
+		<Footer />
+		<NotificationWrapper client:load />
+	</container>
+	</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>