229 lines
7.3 KiB
HTML
229 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
||
<!--
|
||
Static maintenance page shown when PocketBase is unreachable. The gate in Program.cs
|
||
serves this file with status 503 before any component renders, so it must stand on
|
||
its own: no menu, no PocketBase, no script, and its styles are inlined rather than
|
||
linked to the fingerprinted app.css (whose hashed name this static file cannot know).
|
||
The tokens below are a copy of the ones this page needs from app.css, light and dark,
|
||
under the same names -- when a colour changes there, change it here too. The header
|
||
band and the signet mirror MainLayout and Signet.razor, so the page still looks like
|
||
the site. The font is our own self-hosted Nunito; static files stay reachable while
|
||
PocketBase is down, the gate only covers pages.
|
||
-->
|
||
<html lang="de">
|
||
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<meta name="robots" content="noindex"/>
|
||
<title>Elternbeirat der IGMH – gerade nicht erreichbar</title>
|
||
<style>
|
||
:root {
|
||
--color-brand: #2b6f9c;
|
||
--color-brand-dark: #1f5477;
|
||
--color-header: #2a77a6;
|
||
--color-on-header: #fff;
|
||
--color-accent-dark: #4f9247;
|
||
--gradient-brand: linear-gradient(135deg, var(--color-header) 0%, #3a7a3e 100%);
|
||
--color-focus: #1f5477;
|
||
--color-heading: #2b6f9c;
|
||
--color-text: #222;
|
||
--color-text-soft: #555;
|
||
--color-bg: #fff;
|
||
--color-page: #f4f6f4;
|
||
--color-border: #e0e0e0;
|
||
|
||
--space-2: 0.5rem;
|
||
--space-3: 1rem;
|
||
--space-4: 1.5rem;
|
||
--space-5: 2rem;
|
||
--radius: 12px;
|
||
--shadow: 0 1px 3px rgba(31, 58, 95, 0.08), 0 4px 12px rgba(31, 58, 95, 0.06);
|
||
|
||
--font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
--font-size-body: 1.0625rem;
|
||
--font-weight-heading: 800;
|
||
--letter-spacing-heading: -0.015em;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--color-brand: #7cc0ec;
|
||
--color-brand-dark: #a3d5f4;
|
||
--color-header: #266f9c;
|
||
--color-accent-dark: #86c97d;
|
||
--gradient-brand: linear-gradient(135deg, var(--color-header) 0%, #2f6b33 100%);
|
||
--color-focus: #a3d5f4;
|
||
--color-heading: #c9ced6;
|
||
--color-text: #a2a8b2;
|
||
--color-text-soft: #a2a8b2;
|
||
--color-bg: #222834;
|
||
--color-page: #171b22;
|
||
--color-border: #333b47;
|
||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
}
|
||
}
|
||
|
||
/* Absolute path: this file is served for any page URL, e.g. /posts/new-board,
|
||
where a relative "fonts/..." would point into /posts/. */
|
||
@font-face {
|
||
font-family: "Nunito";
|
||
src: url("/fonts/nunito-latin-wght.woff2") format("woff2");
|
||
font-weight: 400 800;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
html {
|
||
font-family: var(--font-family);
|
||
line-height: 1.65;
|
||
color-scheme: light dark;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
min-height: 100dvh;
|
||
background: var(--color-page);
|
||
color: var(--color-text);
|
||
font-size: var(--font-size-body);
|
||
}
|
||
|
||
/* The header band of MainLayout without the menu: there is nothing to
|
||
navigate to while the pages are down. */
|
||
header {
|
||
background: var(--gradient-brand);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.header-inner {
|
||
max-width: 72rem;
|
||
margin: 0 auto;
|
||
padding: var(--space-3) 1.25rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
color: var(--color-on-header);
|
||
}
|
||
|
||
.signet {
|
||
flex-shrink: 0;
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
}
|
||
|
||
.signet-bubble {
|
||
fill: var(--color-on-header);
|
||
}
|
||
|
||
.signet-figures {
|
||
fill: var(--color-accent-dark);
|
||
}
|
||
|
||
.brand-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.brand-name {
|
||
font-size: 1.35rem;
|
||
font-weight: var(--font-weight-heading);
|
||
letter-spacing: var(--letter-spacing-heading);
|
||
}
|
||
|
||
.brand-school {
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
main {
|
||
box-sizing: border-box;
|
||
max-width: 36rem;
|
||
margin: var(--space-5) auto;
|
||
padding: 0 1.25rem;
|
||
}
|
||
|
||
.card {
|
||
background: var(--color-bg);
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow);
|
||
padding: var(--space-5);
|
||
}
|
||
|
||
h1 {
|
||
margin: 0 0 var(--space-3);
|
||
color: var(--color-heading);
|
||
font-size: 1.5rem;
|
||
line-height: 1.25;
|
||
font-weight: var(--font-weight-heading);
|
||
letter-spacing: var(--letter-spacing-heading);
|
||
}
|
||
|
||
p {
|
||
margin: 0;
|
||
}
|
||
|
||
a {
|
||
color: var(--color-brand);
|
||
font-weight: 600;
|
||
text-underline-offset: 2px;
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--color-brand-dark);
|
||
}
|
||
|
||
a:focus-visible {
|
||
outline: 3px solid var(--color-focus);
|
||
outline-offset: 2px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.contact {
|
||
margin-top: var(--space-4);
|
||
padding-top: var(--space-4);
|
||
border-top: 1px solid var(--color-border);
|
||
color: var(--color-text-soft);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<header>
|
||
<div class="header-inner">
|
||
<!-- Not a link: the start page is down as well, it would only lead here. -->
|
||
<svg class="signet" viewBox="0 0 40 40" width="40" height="40" aria-hidden="true" focusable="false">
|
||
<path class="signet-bubble"
|
||
d="M8 4h24a6 6 0 0 1 6 6v15a6 6 0 0 1-6 6H18l-8 6v-6H8a6 6 0 0 1-6-6V10a6 6 0 0 1 6-6z"/>
|
||
<g class="signet-figures">
|
||
<circle cx="15" cy="12" r="3.5"/>
|
||
<path d="M9 26c0-5 2.7-8 6-8s6 3 6 8z"/>
|
||
<circle cx="26" cy="16" r="2.6"/>
|
||
<path d="M21.5 26c0-3.8 2-6 4.5-6s4.5 2.2 4.5 6z"/>
|
||
</g>
|
||
</svg>
|
||
<span class="brand-text">
|
||
<span class="brand-name">Elternbeirat</span>
|
||
<span class="brand-school">IGMH Mannheim</span>
|
||
</span>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="card">
|
||
<h1>Die Seite ist gerade nicht erreichbar</h1>
|
||
<p>
|
||
Wir bitten um Entschuldigung. Die Website des Elternbeirats der IGMH ist im
|
||
Moment nicht verfügbar. Wir arbeiten daran, bitte versuchen Sie es in Kürze
|
||
noch einmal.
|
||
</p>
|
||
<p class="contact">
|
||
In dringenden Fällen erreichen Sie den Elternbeirat per E-Mail:<br/>
|
||
<a href="mailto:kontakt@elternbeirat-igmh.info">kontakt@elternbeirat-igmh.info</a>
|
||
</p>
|
||
</div>
|
||
</main>
|
||
</body>
|
||
|
||
</html>
|