struktur, responsive

This commit is contained in:
Robert Jagtiani
2024-11-25 19:16:20 +01:00
parent a955d25727
commit 07ba49fb7e
20 changed files with 144 additions and 119 deletions

View File

@@ -1,9 +1,10 @@
---
import "../style/global.scss"
import "../style/global.css";
import "../../svelte-dialogs.config"
import Footer from '../components/Footer.astro';
import Header from '../components/Header.astro';
import SidebarLeft from '../components/SidebarLeft.astro';
import Header from "#header/Header.astro";
import Footer from "#footer/Footer.astro";
import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
import { NotificationWrapper } from "@ibcornelsen/ui";
export interface Props {
title: string;
@@ -11,38 +12,14 @@ export interface Props {
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="en">
<html lang="de">
<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
@@ -83,14 +60,30 @@ const schema = JSON.stringify({
</head>
<body>
<container class="w-full max-w-[1920px]">
<Header />
<main class="grid gap-6 p-6 grid-cols-[2fr,8fr] max-w-[1920px] w-full bg-base-100">
<SidebarLeft></SidebarLeft>
<article class="bg-base-200 rounded-lg border border-base-300 h-min">
<slot />
</article>
<main
class="w-full p-0 grid
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-1
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-2
lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
2xl:grid-cols-[minmax(350px,350px)1fr] 2xl:gap-5 2xl:p-5
">
<SidebarLeft />
<article class="box grow">
<slot />
</article>
</main>
<Footer />
<NotificationWrapper client:load />
</container>
</body>
</html>
@@ -186,15 +179,6 @@ article {
); */
}
.box {
@apply border-2 border-[#ffcc03] p-4 rounded-lg bg-base-200;
/* background: linear-gradient(
135deg,
rgba(252, 234, 187, 1) 0%,
rgba(253, 235, 189, 1) 52%,
rgba(251, 223, 147, 1) 100%
); */
}
.headline {
@apply text-lg;