Legal-Docs: Header an Hauptseite angleichen, app.css statt main.css

- Header-Markup wie web/index.html (nav#legal + zentrierte h1), gleiche
  Schrift/Beton-Hintergrund, weil jetzt dasselbe /css/app.css geladen wird
- Inhalt in <main><div class="doc"> -> weiße Spalte mit 5px Padding
- verwaiste static/css/{main.css,main.scss,normalize.css} entfernt (wurden
  nur von den Docs referenziert)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-15 21:18:50 +02:00
parent 642fe9466a
commit 85c283404d
7 changed files with 54 additions and 823 deletions
-118
View File
@@ -1,118 +0,0 @@
@font-face {
font-family: "EB Garamond";
src: url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Regular.ttf"), url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Regular.otf") format("truetype");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "Cheltenham Classic";
src: url("/static/assets/cheltenham/CheltenhamClassic.ttf"), url("/static/assets/cheltenham/CheltenhamClassic.otf") format("truetype");
font-weight: normal;
font-style: normal; }
html {
background-image: url("/static/assets/concrete/Concrete012_1024p_Color.jpg");
font-family: "EB Garamond";
font-optical-sizing: auto; }
h1 {
font-family: "Cheltenham Classic", serif;
background-color: white;
display: inline-block; }
p {
margin: 0px;
line-height: 1.5; }
span {
background-color: white; }
#main-frame {
background-color: white;
max-width: 600px;
margin: auto;
border: 1px solid black;
border-top: none;
border-bottom: none; }
hr {
border-top: 1px solid black;
border-bottom: none;
margin: 0px; }
#contentnotice {
background-color: white;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10pt; }
#contentnotice h1,
#contentnotice h3 {
margin: 6pt; }
#contentnotice div {
width: 100%;
max-width: 500px; }
.entry .meta {
color: gray;
margin: 2pt 4pt;
font-size: 12pt; }
.entry .content {
margin: 5pt 10px;
font-size: 14pt;
word-wrap: break-word;
max-height: 500px;
overflow: hidden; }
.entry img {
max-width: 100%; }
.entry .interactions {
display: flex;
justify-content: space-around; }
#loading {
background-color: #fff9;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
transition: background-color 5s;
transition-timing-function: ease-in; }
#infinite-scroll-indicator {
text-align: center; }
#headerbar {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: white;
margin: 0px; }
form {
display: flex;
flex-direction: column; }
form * {
margin: 4px 6px; }
form textarea {
resize: vertical;
font-size: 1rem; }
form.create {
border: 1px solid gray;
padding: 10px 15px;
margin: 0px; }
form hr {
width: 100%; }
-298
View File
@@ -1,298 +0,0 @@
@font-face {
font-family: "EB Garamond";
src:
url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Regular.ttf"),
url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Regular.otf")
format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Cheltenham Classic";
src:
url("/static/assets/cheltenham/CheltenhamClassic.ttf"),
url("/static/assets/cheltenham/CheltenhamClassic.otf")
format("truetype");
font-weight: normal;
font-style: normal;
}
html {
background-image: url("/static/assets/concrete/Concrete012_1024p_Color.jpg");
font-family: "EB Garamond";
font-optical-sizing: auto;
}
h1 {
font-family: "Cheltenham Classic", serif;
background-color: white;
display: inline-block;
}
p {
margin: 0px;
line-height: 1.5;
}
span {
background-color: white;
}
#main-frame {
background-color: white;
max-width: 600px;
margin: auto;
border: 1px solid black;
border-top: none;
border-bottom: none;
}
hr {
border-top: 1px solid black;
border-bottom: none;
margin: 0px;
}
#contentnotice {
background-color: white;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10pt;
h1,
h3 {
margin: 6pt;
}
div {
width: 100%;
max-width: 500px;
}
}
.entry {
.meta {
color: gray;
margin: 2pt 4pt;
font-size: 12pt;
}
.content {
margin: 5pt 10px;
font-size: 14pt;
word-wrap: break-word;
max-height: 500px;
overflow: hidden;
}
img {
max-width: 100%;
}
.interactions {
display: flex;
justify-content: space-around;
}
}
#loading {
// background-image: url('/static/spinner.gif');
background-color: #fff9;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
transition: background-color 5s;
transition-timing-function: ease-in;
}
#infinite-scroll-indicator {
text-align: center;
}
#headerbar {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: white;
margin: 0px;
}
// // @font-face {
// // font-family: 'avenir';
// // src: url('/static/avenir-font/AvenirLTStd-Medium.otf');
// // font-weight: normal;
// // font-style: normal;
// // }
// html {
// // font-family: "avenir";
// // font-weight: 400;
// // font-style: normal;
// // background-color: #e9e9ed;
// border: 1px solig gray;
// // border-radius: 5px;
// font-family: "DejaVu Serif";
// }
// div.entry {
// // background-color: green;
// border: 1px solid gray;
// padding: 10px 15px;
// margin: 0px;
// div.entrymeta {
// display: flex;
// justify-content: left;
// align-items: center;
// gap: 15px;
// cursor: pointer;
// span.time {
// // background-color: red;
// color: gray;
// }
// span.user {
// // background-color: blue;
// text-decoration: underline;
// }
// img.userimage {
// width: 80px;
// }
// }
// div.contents {
// // background-color: yellow;
// p {
// // background-color: orange;
// margin: 8pt 0pt;
// }
// }
// img {
// max-width: 100%;
// }
// &.comment {
// border: none;
// padding: 0px 15px;
// margin: 0px;
// display: flex;
// gap: 5px;
// .left {
// width: 70px;
// display: flex;
// flex-direction: column;
// // background-color: green;
// .spacer {
// background-color: black;
// height: 100%;
// width: 6%;
// margin: 0px 47%;
// }
// }
// // .right {
// // background-color: red;
// // }
// // .contents {
// // display: flex;
// // }
// }
// }
form {
display: flex;
flex-direction: column;
* {
margin: 4px 6px;
}
textarea {
// width: 100%;
resize: vertical;
font-size: 1rem;
}
&.create {
border: 1px solid gray;
padding: 10px 15px;
margin: 0px;
}
hr {
width: 100%;
}
}
// input,
// textarea,
// button,
// select {
// padding: 4pt 6pt;
// margin: 3pt 0pt;
// border: 2px solid black;
// cursor: pointer;
// box-shadow: 0px 0px;
// &:hover {
// box-shadow: 1px 1px;
// }
// &:focus {
// box-shadow: 3px 3px black;
// outline: none;
// }
// }
// button {
// background-color: #ffabcd;
// }
// #response {
// div {
// padding: 4pt 6pt;
// }
// .error {
// color: red;
// }
// }
// .post {
// border: 1px solid black;
// padding: 15px 15px;
// margin: 10px 0px;
// img {
// max-width: 100%;
// max-height: 800px;
// }
// .meta {
// color: gray;
// }
// .content {
// margin: 10px 0px;
// }
// }
-350
View File
@@ -1,350 +0,0 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
+16 -19
View File
@@ -1,25 +1,23 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beitragsordnung - Kontrollverlust</title>
<link rel="stylesheet" href="/static/css/main.css">
<link rel="stylesheet" href="/static/css/normalize.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beitragsordnung - Kontrollverlust</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="main-frame">
<header>
<a href="/static/docs/impressum.html">Impressum</a> -
<a href="/static/docs/datenschutz.html">Datenschutz</a> -
<a href="/static/docs/beitragsordnung.html">Beitragsordnung</a>
</header>
<div id="action">
<a style="color: black;" href="/"><h1>Kontrollverlust</h1></a>
<br>
</div>
<hr>
<div class="main" style="padding: 5pt" >
<header>
<nav id="legal">
<a href="/static/docs/impressum.html">Impressum</a> -
<a href="/static/docs/datenschutz.html">Datenschutz</a> -
<a href="/static/docs/beitragsordnung.html">Beitragsordnung</a>
</nav>
<a href="/"><h1>Kontrollverlust</h1></a>
</header>
<main>
<div class="doc">
<h1>Beitragsordnung</h1>
<p>Diese Ordnung bildet die Grundlage für die inhaltliche Moderation. Jede Löschung wird durch einen konkreten Paragraphen begründet.<br>
@@ -154,8 +152,7 @@ Inhalte, die gegen deutsches Recht verstoßen, sind verboten. Dazu gehören insb
</ul>
</p>
</div>
<hr>
</div>
</main>
</body>
</html>
+16 -19
View File
@@ -1,25 +1,23 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datenschutz - Kontrollverlust</title>
<link rel="stylesheet" href="/static/css/main.css">
<link rel="stylesheet" href="/static/css/normalize.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datenschutz - Kontrollverlust</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="main-frame">
<header>
<a href="/static/docs/impressum.html">Impressum</a> -
<a href="/static/docs/datenschutz.html">Datenschutz</a> -
<a href="/static/docs/beitragsordnung.html">Beitragsordnung</a>
</header>
<div id="action">
<a style="color: black;" href="/"><h1>Kontrollverlust</h1></a>
<br>
</div>
<hr>
<div class="main" style="padding: 5pt" >
<header>
<nav id="legal">
<a href="/static/docs/impressum.html">Impressum</a> -
<a href="/static/docs/datenschutz.html">Datenschutz</a> -
<a href="/static/docs/beitragsordnung.html">Beitragsordnung</a>
</nav>
<a href="/"><h1>Kontrollverlust</h1></a>
</header>
<main>
<div class="doc">
<h1>Datenschutzerklärung</h1>
<p><strong>Verantwortlicher</strong><br>
@@ -195,8 +193,7 @@ Zur Ausübung Ihrer Rechte wenden Sie sich bitte an die oben genannten Kontaktda
</ul>
</p>
</div>
<hr>
</div>
</main>
</body>
</html>
+16 -19
View File
@@ -1,25 +1,23 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum - Kontrollverlust</title>
<link rel="stylesheet" href="/static/css/main.css">
<link rel="stylesheet" href="/static/css/normalize.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum - Kontrollverlust</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="main-frame">
<header>
<a href="/static/docs/impressum.html">Impressum</a> -
<a href="/static/docs/datenschutz.html">Datenschutz</a> -
<a href="/static/docs/beitragsordnung.html">Beitragsordnung</a>
</header>
<div id="action">
<a style="color: black;" href="/"><h1>Kontrollverlust</h1></a>
<br>
</div>
<hr>
<div class="main" style="padding: 5pt" >
<header>
<nav id="legal">
<a href="/static/docs/impressum.html">Impressum</a> -
<a href="/static/docs/datenschutz.html">Datenschutz</a> -
<a href="/static/docs/beitragsordnung.html">Beitragsordnung</a>
</nav>
<a href="/"><h1>Kontrollverlust</h1></a>
</header>
<main>
<div class="doc">
<h1>Impressum</h1>
<p>Angaben gemäß § 5 DDG</p>
<p>David Bernet<br>
@@ -44,8 +42,7 @@ Unter dem folgenden Link finden Sie unsere <a href="/static/docs/datenschutz.htm
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 DDG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 DDG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.<br><br><strong>Haftung für Links</strong><br>
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.<br><br><strong>Urheberrecht</strong><br>
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.</p>
</div>
<hr>
</div>
</main>
</body>
</html>
+6
View File
@@ -110,6 +110,12 @@ main > h2 {
padding: 0.3rem 0.5rem;
}
/* Rechtstexte (Impressum/Datenschutz/Beitragsordnung): weiße Spalte mit etwas
Innenabstand, damit der Fließtext nicht am Rand klebt. */
.doc {
padding: 5px;
}
span, a {
font-size: 1.2rem;
}