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
|
├── impressum.html
|
||||||
├── datenschutz.html
|
├── datenschutz.html
|
||||||
├── barrierefreiheit.html
|
├── barrierefreiheit.html
|
||||||
|
├── wartung.html
|
||||||
├── styles.css
|
├── styles.css
|
||||||
├── script.js
|
├── script.js
|
||||||
└── public/
|
└── 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.
|
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
|
## Lokal ansehen
|
||||||
|
|
||||||
```sh
|
```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