feat: Wartungsseite ergänzen
Docker-Image bauen / Image bauen und veröffentlichen (push) Canceled after 0s
Docker-Image bauen / Image bauen und veröffentlichen (push) Canceled after 0s
This commit is contained in:
@@ -13,6 +13,7 @@ src/website/
|
||||
├── impressum.html
|
||||
├── datenschutz.html
|
||||
├── barrierefreiheit.html
|
||||
├── wartung.html
|
||||
├── styles.css
|
||||
├── script.js
|
||||
└── public/
|
||||
@@ -31,6 +32,15 @@ Für einen Upload oder eine Synchronisation muss deshalb nur der **Inhalt von `s
|
||||
|
||||
Die `.htaccess` erzwingt HTTPS, deaktiviert Verzeichnislisten, aktiviert gzip-Komprimierung und Browser-Caches und setzt grundlegende Sicherheits-Header. Solange das SSL-Zertifikat noch nicht aktiv ist, muss der entsprechend kommentierte HTTPS-Block vorübergehend auskommentiert werden.
|
||||
|
||||
### Wartungsmodus
|
||||
|
||||
Die Wartungsseite liegt als `wartung.html` bereit. Zum vorübergehenden Aktivieren auf dem Webspace:
|
||||
|
||||
1. die reguläre `index.html` beispielsweise in `website.html` umbenennen
|
||||
2. `wartung.html` in `index.html` umbenennen
|
||||
|
||||
Zum Freischalten werden die beiden Dateien wieder auf ihre ursprünglichen Namen zurückbenannt. Im Repository bleiben sie immer als `index.html` und `wartung.html` erhalten.
|
||||
|
||||
## Lokal ansehen
|
||||
|
||||
```sh
|
||||
|
||||
@@ -0,0 +1,293 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Die Website der Hardtschule Karlsruhe wird gerade überarbeitet und ist bald wieder erreichbar." />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#3f63d3" />
|
||||
<title>Website in Bearbeitung · Hardtschule Karlsruhe</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2224%22 fill=%22%233f63d3%22/><path d=%22M22 67V39L50 22l28 17v28%22 fill=%22none%22 stroke=%22%23ffc857%22 stroke-width=%229%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/><path d=%22M35 70V52h30v18%22 fill=%22none%22 stroke=%22white%22 stroke-width=%229%22 stroke-linecap=%22round%22/></svg>" />
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--navy: #252451;
|
||||
--blue: #3f63d3;
|
||||
--violet: #7655d8;
|
||||
--coral: #c24b46;
|
||||
--sun: #ffc857;
|
||||
--cream: #fffaf3;
|
||||
--white: #ffffff;
|
||||
--ink-soft: #625e75;
|
||||
--font-display: Georgia, "Times New Roman", serif;
|
||||
--font-sans: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background:
|
||||
radial-gradient(circle at 10% 12%, rgba(255, 200, 87, 0.2), transparent 25%),
|
||||
radial-gradient(circle at 90% 88%, rgba(194, 75, 70, 0.17), transparent 28%),
|
||||
linear-gradient(145deg, var(--blue), var(--violet));
|
||||
color: var(--navy);
|
||||
font-family: var(--font-sans);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
place-items: center;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.maintenance-card {
|
||||
position: relative;
|
||||
width: min(760px, 100%);
|
||||
overflow: hidden;
|
||||
padding: clamp(34px, 7vw, 68px);
|
||||
border-radius: 40px;
|
||||
background: var(--cream);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, 0.28),
|
||||
0 24px 70px rgba(28, 25, 68, 0.28);
|
||||
}
|
||||
|
||||
.maintenance-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
right: -105px;
|
||||
bottom: -115px;
|
||||
border: 38px solid rgba(255, 200, 87, 0.42);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, var(--blue), var(--violet));
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.2) inset,
|
||||
0 8px 20px rgba(63, 99, 211, 0.24);
|
||||
}
|
||||
|
||||
.brand-roof {
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
top: 11px;
|
||||
border-top: 4px solid var(--sun);
|
||||
border-left: 4px solid var(--sun);
|
||||
border-radius: 2px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.brand-door {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 17px;
|
||||
bottom: 10px;
|
||||
border: 4px solid var(--white);
|
||||
border-bottom: 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.brand-copy strong {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.brand-copy span {
|
||||
margin-top: 5px;
|
||||
color: var(--violet);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
min-height: 30px;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
margin-top: clamp(48px, 8vw, 72px);
|
||||
padding: 5px 12px;
|
||||
border-radius: 999px;
|
||||
background: #fff0bd;
|
||||
color: #654800;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--coral);
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 610px;
|
||||
margin: 22px 0 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(3rem, 8vw, 5.6rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.05em;
|
||||
line-height: 0.98;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
h1 em {
|
||||
color: var(--coral);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.lead {
|
||||
max-width: 590px;
|
||||
margin: 28px 0 0;
|
||||
color: var(--ink-soft);
|
||||
font-size: clamp(1rem, 2vw, 1.15rem);
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.contact {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-top: 36px;
|
||||
padding-top: 26px;
|
||||
border-top: 1px solid rgba(37, 36, 81, 0.12);
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.contact strong {
|
||||
color: var(--navy);
|
||||
}
|
||||
|
||||
.contact-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 24px;
|
||||
}
|
||||
|
||||
.contact a {
|
||||
display: inline-flex;
|
||||
min-height: 44px;
|
||||
align-items: center;
|
||||
color: var(--blue);
|
||||
font-weight: 750;
|
||||
overflow-wrap: anywhere;
|
||||
text-decoration-thickness: 0.08em;
|
||||
text-underline-offset: 0.18em;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 3px solid var(--white);
|
||||
outline-offset: 3px;
|
||||
box-shadow: 0 0 0 6px var(--navy);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
main {
|
||||
align-items: start;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.maintenance-card {
|
||||
min-height: calc(100vh - 28px);
|
||||
padding: 28px 24px 34px;
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 54px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(3rem, 15vw, 4.25rem);
|
||||
}
|
||||
|
||||
.contact-links {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.maintenance-card,
|
||||
.brand-mark,
|
||||
.status {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="maintenance-card" aria-labelledby="wartungstitel">
|
||||
<div class="brand" aria-label="Hardtschule Karlsruhe">
|
||||
<span class="brand-mark" aria-hidden="true">
|
||||
<span class="brand-roof"></span>
|
||||
<span class="brand-door"></span>
|
||||
</span>
|
||||
<span class="brand-copy">
|
||||
<strong>Hardtschule</strong>
|
||||
<span>Karlsruhe</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="status"><span class="status-dot" aria-hidden="true"></span>Website in Bearbeitung</div>
|
||||
<h1 id="wartungstitel">Hier entsteht gerade <em>etwas Neues.</em></h1>
|
||||
<p class="lead">
|
||||
Die Website der Hardtschule Karlsruhe wird aktuell überarbeitet. Wir sind bald wieder mit allen wichtigen Informationen für Sie da.
|
||||
</p>
|
||||
|
||||
<address class="contact">
|
||||
<strong>In dringenden Fällen erreichen Sie uns:</strong>
|
||||
<span class="contact-links">
|
||||
<a href="mailto:poststelle@hardtschule-ka.schule.bwl.de">poststelle@hardtschule-ka.schule.bwl.de</a>
|
||||
<a href="tel:+497211334686">0721 133-4686</a>
|
||||
</span>
|
||||
</address>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user