first commit
This commit is contained in:
April John
commit
87140ccce3
6 changed files with 509 additions and 0 deletions
56
coc-en.html
Normal file
56
coc-en.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Code of Conduct – Khaos im Kiez</title>
|
||||
<link rel="icon" type="image/png" href="logo.png">
|
||||
<link rel="alternate" hreflang="de" href="coc.html">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="term">
|
||||
|
||||
<p class="prompt"><b>visitor@khaos-im-kiez</b>:~$ cat CODE_OF_CONDUCT.en<span class="cursor"></span></p>
|
||||
|
||||
<nav aria-label="Navigation">
|
||||
<a href="en.html"><- back</a>
|
||||
<a class="lang" href="coc.html" hreflang="de">[DE]</a>
|
||||
</nav>
|
||||
|
||||
<section>
|
||||
<h2>Code of Conduct</h2>
|
||||
<p>
|
||||
Khaos im Kiez is an event of the Chaos Computer Club Berlin e.V. (CCCB).
|
||||
To make everyone feel comfortable, these rules apply to all attendees,
|
||||
speakers and helpers.
|
||||
</p>
|
||||
<ul class="out">
|
||||
<li><b>Be nice to each other.</b> Treat each other respectfully and kindly, even when you disagree.</li>
|
||||
<li><b>No discrimination.</b> Racism, sexism, queerphobia, ableism and other hateful attitudes have no place here.</li>
|
||||
<li><b>No harassment.</b> This includes insults, threats, stalking, unwanted physical contact and unwanted sexual attention. No means no.</li>
|
||||
<li><b>Ask before taking pictures.</b> Photos, video and audio recordings of people only with their consent. This also applies to talks and workshops.</li>
|
||||
<li><b>Respect devices and property.</b> Do not touch other people's devices without permission. Treat the rooms and furniture with care.</li>
|
||||
<li><b>Be curious, not intrusive.</b> Chaos yes, crossing boundaries no.</li>
|
||||
</ul>
|
||||
<p>
|
||||
<b>House rules:</b> The organizers have the right to exclude people from
|
||||
the premises (Hausrecht). In case of violations they may issue warnings, ask
|
||||
people to leave, or ban them from the event. Follow the
|
||||
organizers' instructions.
|
||||
</p>
|
||||
<p>
|
||||
<b>Problems?</b> If something happens to you or you notice something, talk
|
||||
to a member of the organizing team or write to
|
||||
aprl [at] berlin [dot] ccc [dot] de. Reports are treated confidentially.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<a href="en.html">Home</a> ·
|
||||
<a href="https://berlin.ccc.de/page/impressum/">Legal notice</a>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
56
coc.html
Normal file
56
coc.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Code of Conduct – Khaos im Kiez</title>
|
||||
<link rel="icon" type="image/png" href="logo.png">
|
||||
<link rel="alternate" hreflang="en" href="coc-en.html">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="term">
|
||||
|
||||
<p class="prompt"><b>visitor@khaos-im-kiez</b>:~$ cat CODE_OF_CONDUCT<span class="cursor"></span></p>
|
||||
|
||||
<nav aria-label="Navigation">
|
||||
<a href="index.html"><- zurück</a>
|
||||
<a class="lang" href="coc-en.html" hreflang="en">[EN]</a>
|
||||
</nav>
|
||||
|
||||
<section>
|
||||
<h2>Code of Conduct</h2>
|
||||
<p>
|
||||
Khaos im Kiez ist eine Veranstaltung des Chaos Computer Club Berlin e.V.
|
||||
(CCCB). Damit sich alle wohlfühlen, gelten diese Regeln für alle Teilnehmenden,
|
||||
Vortragenden und Helfenden.
|
||||
</p>
|
||||
<ul class="out">
|
||||
<li><b>Sei nett zueinander.</b> Geh respektvoll und freundlich miteinander um, auch wenn du anderer Meinung bist.</li>
|
||||
<li><b>Keine Diskriminierung.</b> Rassismus, Sexismus, Queerfeindlichkeit, Ableismus und andere menschenverachtende Haltungen haben hier keinen Platz.</li>
|
||||
<li><b>Keine Belästigung.</b> Dazu gehören Beleidigungen, Bedrohungen, Stalking, unerwünschte körperliche Berührungen und unerwünschte sexuelle Aufmerksamkeit. Ein Nein ist ein Nein.</li>
|
||||
<li><b>Frag vor dem Fotografieren.</b> Fotos, Video- und Tonaufnahmen von Personen nur mit deren Einverständnis. Das gilt auch für Talks und Workshops.</li>
|
||||
<li><b>Achte auf Geräte und Eigentum.</b> Fass fremde Geräte nicht ohne Erlaubnis an. Geh pfleglich mit den Räumen und dem Inventar um.</li>
|
||||
<li><b>Sei neugierig, nicht übergriffig.</b> Chaos ja, Grenzenüberschreitungen nein.</li>
|
||||
</ul>
|
||||
<p>
|
||||
<b>Hausrecht:</b> Die Orga hat Hausrecht. Bei Verstößen gegen diese Regeln
|
||||
kann sie Verwarnungen aussprechen, Personen der Veranstaltung verweisen
|
||||
oder ein Hausverbot erteilen. Den Anweisungen der Orga ist Folge
|
||||
zu leisten.
|
||||
</p>
|
||||
<p>
|
||||
<b>Probleme?</b> Wenn dir etwas passiert oder du etwas beobachtest, sprich
|
||||
eine Person aus der Orga an oder schreib an
|
||||
aprl [at] berlin [dot] ccc [dot] de. Hinweise werden vertraulich behandelt.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<a href="index.html">Startseite</a> ·
|
||||
<a href="https://berlin.ccc.de/page/impressum/">Impressum</a>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
105
en.html
Normal file
105
en.html
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Khaos im Kiez</title>
|
||||
<meta name="description" content="Khaos im Kiez – a small CCC Berlin event, 28–29 November 2026, Marienstraße 11, Berlin.">
|
||||
<link rel="icon" type="image/png" href="logo.png">
|
||||
<link rel="alternate" hreflang="de" href="index.html">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="term">
|
||||
|
||||
<p class="prompt"><b>visitor@khaos-im-kiez</b>:~$ cat README.en<span class="cursor"></span></p>
|
||||
|
||||
<header>
|
||||
<img src="logo.png" alt="KiK logo: red star with keyboard and the letters kik" width="150" height="150">
|
||||
<div>
|
||||
<h1>Khaos<br>im <span>Kiez</span></h1>
|
||||
<p class="tagline">CCC Berlin · 2026-11-28 – 2026-11-29</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav aria-label="Navigation">
|
||||
<a href="#infos">[1] Info</a>
|
||||
<a href="#join">[2] Join in</a>
|
||||
<a href="#getting-here">[3] Getting here</a>
|
||||
<a class="lang" href="index.html" hreflang="de">[DE]</a>
|
||||
</nav>
|
||||
|
||||
<section id="infos">
|
||||
<h2>1 Info</h2>
|
||||
<p>
|
||||
Khaos im Kiez is a small chaos event, back to the roots: inspired by other
|
||||
small chaos events. A weekend to chill and to experience the side of chaos
|
||||
events that often gets no time at larger events.
|
||||
</p>
|
||||
<p>
|
||||
Give a talk or workshop, work on your projects, hack together, solder,
|
||||
tinker, or simply drop by, listen and meet people. Everyone who brings a
|
||||
love of $things, curiosity and a bit of chaos is welcome.
|
||||
</p>
|
||||
<dl class="kv">
|
||||
<dt>What</dt> <dd>Khaos im Kiez (KiK)</dd>
|
||||
<dt>When</dt> <dd>Sat 2026-11-28 – Sun 2026-11-29, 11:00 – 23:59</dd>
|
||||
<dt>Where</dt> <dd>Marienstraße 11, 10117 Berlin, Germany</dd>
|
||||
<dt>Who</dt> <dd>Chaos Computer Club Berlin</dd>
|
||||
<dt>Price</dt> <dd>€0.00 (ticket still required, ~50 seats)</dd>
|
||||
<dt>Schedule</dt> <dd><a href="https://cfp.berlin.ccc.de">cfp.berlin.ccc.de</a> <span class="note">(goes live later)</span></dd>
|
||||
<dt>Food</dt> <dd>Eternal breakfast, vegan</dd>
|
||||
<dt>Rules</dt> <dd><a href="coc-en.html">Code of Conduct</a></dd>
|
||||
<dt>Access</dt> <dd>About half of the club is accessible. The basement is not accessible. The toilets and the kitchen can only be reached over a threshold. There is no accessible toilet.</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section id="join">
|
||||
<h2>2 Join in</h2>
|
||||
<p>
|
||||
<b>Ticket:</b> Register via the ticket shop. The ticket is free, but seats
|
||||
are limited.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn hot" href="https://tickets.berlin.ccc.de/cccb/kik-v0.1/">Get ticket</a>
|
||||
</p>
|
||||
<p>
|
||||
<b>Talks & workshops:</b> Submit your proposal via the call for
|
||||
participation and check the schedule later.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn" href="https://cfp.berlin.ccc.de">Submit a talk</a>
|
||||
<a class="btn" href="https://cfp.berlin.ccc.de">Schedule</a>
|
||||
</p>
|
||||
<p>
|
||||
<b>Other:</b> Want to help otherwise or have questions? Write to
|
||||
aprl [at] berlin [dot] ccc [dot] de.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="getting-here">
|
||||
<h2>3 Getting here</h2>
|
||||
<dl class="kv">
|
||||
<dt>Address</dt> <dd>Club rooms in the back yard of Marienstraße 11, 10117 Berlin</dd>
|
||||
<dt>Coordinates</dt> <dd>52.52194° N, 13.38261° E</dd>
|
||||
<dt>Bicycle</dt> <dd>A limited number of bike racks are in the courtyard. Many bicycle streets lead there, preferably use those, e.g. with <a href="https://www.bbbike.de/">BBBike.de</a>.</dd>
|
||||
<dt>Local transit</dt> <dd>The club is right next to S+U Friedrichstraße (regional trains stop there too). From the elevated S-Bahn platform (S3/S5/S7) take the Schiffbauerdamm exit and walk across the Spree beneath the railway bridge. Albrechtstraße leads to Marienstraße.</dd>
|
||||
<dt>Long distance</dt> <dd>Get off at Berlin Hauptbahnhof, then take any S-Bahn or regional train eastbound one stop to Friedrichstraße. Leave the station towards the Spree, cross the footbridge and follow Albrechtstraße to the dead-end Marienstraße.</dd>
|
||||
<dt>Air</dt> <dd>BER: Airport Express (RE7, RB14) or S9 to Friedrichstraße, or FEX to Hauptbahnhof (then as above). Note: Terminal 5 (formerly SXF) is not connected to the rest of BER, only the S9 runs there. Strausberg airfield (EDAY): S7 direct to Friedrichstraße.</dd>
|
||||
<dt>Car</dt> <dd>Access from Hauptbahnhof or Brandenburger Tor via Luisenstraße. From Friedrichstraße either via Schiffbauerdamm and Albrechtstraße (outdoor seating and cobblestones) or via Reinhardstraße and Luisenstraße (Albrechtstraße is one-way the other direction).</dd>
|
||||
<dt>Parking</dt> <dd>Warning: parking is scarce, and Marienstraße and all surrounding streets are subject to paid parking zones.</dd>
|
||||
</dl>
|
||||
<p>
|
||||
<a href="https://www.openstreetmap.org/node/3872556357#map=20/52.5217003/13.3828041&layers=H">[ Map (OpenStreetMap) ]</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<a href="https://berlin.ccc.de/page/impressum/">Legal notice</a> ·
|
||||
<a href="https://berlin.ccc.de/">CCC Berlin</a>
|
||||
<p class="prompt"><b>visitor@khaos-im-kiez</b>:~$ <span class="cursor"></span></p>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
107
index.html
Normal file
107
index.html
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Khaos im Kiez</title>
|
||||
<meta name="description" content="Khaos im Kiez – kleine Chaos-Veranstaltung des CCC Berlin, 28.–29. November 2026, Marienstraße 11, Berlin.">
|
||||
<link rel="icon" type="image/png" href="logo.png">
|
||||
<link rel="alternate" hreflang="en" href="en.html">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="term">
|
||||
|
||||
<p class="prompt"><b>visitor@khaos-im-kiez</b>:~$ cat README<span class="cursor"></span></p>
|
||||
|
||||
<header>
|
||||
<img src="logo.png" alt="KiK-Logo: roter Stern mit Tastatur und den Buchstaben kik" width="150" height="150">
|
||||
<div>
|
||||
<h1>Khaos<br>im <span>Kiez</span></h1>
|
||||
<p class="tagline">CCC Berlin · 28. – 29.11.2026</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav aria-label="Navigation">
|
||||
<a href="#infos">[1] Infos</a>
|
||||
<a href="#mitmachen">[2] Mitmachen</a>
|
||||
<a href="#anfahrt">[3] Anfahrt</a>
|
||||
<a class="lang" href="en.html" hreflang="en">[EN]</a>
|
||||
</nav>
|
||||
|
||||
<section id="infos">
|
||||
<h2>1 Infos</h2>
|
||||
<p>
|
||||
Khaos im Kiez ist ein kleines Chaos-Event, back to the roots: inspiriert von
|
||||
anderen kleinen Chaos-Events. Ein Wochenende zum Chillen und um die Seite
|
||||
von Chaos-Events zu erleben, für die bei größeren Events oft keine Zeit
|
||||
mehr bleibt.
|
||||
</p>
|
||||
<p>
|
||||
Du kannst einen Talk oder Workshop halten, an deinen Projekten schrauben,
|
||||
gemeinsam hacken, löten, basteln oder einfach vorbeikommen, zuhören und
|
||||
Leute kennenlernen. Alle sind willkommen, die Lust auf $Dinge, Neugier und
|
||||
Chaos mitbringen.
|
||||
</p>
|
||||
<dl class="kv">
|
||||
<dt>Was</dt> <dd>Khaos im Kiez (KiK)</dd>
|
||||
<dt>Wann</dt> <dd>Sa 28.11. – So 29.11.2026, 11:00 – 23:59</dd>
|
||||
<dt>Wo</dt> <dd>Marienstraße 11, 10117 Berlin</dd>
|
||||
<dt>Wer</dt> <dd>Chaos Computer Club Berlin</dd>
|
||||
<dt>Preis</dt> <dd>0,00 € (Ticket trotzdem nötig, ~50 Plätze)</dd>
|
||||
<dt>Fahrplan</dt> <dd><a href="https://cfp.berlin.ccc.de">cfp.berlin.ccc.de</a> <span class="note">(geht später live)</span></dd>
|
||||
<dt>Essen</dt> <dd>Ewiges Frühstück, vegan</dd>
|
||||
<dt>Regeln</dt> <dd><a href="coc.html">Code of Conduct</a></dd>
|
||||
<dt>Barrierefrei</dt> <dd>Etwa die Hälfte des Clubs ist barrierefrei. Der Keller ist nicht barrierefrei. Toiletten und Küche sind nur über eine Schwelle erreichbar. Es gibt keine behindertengerechte Toilette.</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section id="mitmachen">
|
||||
<h2>2 Mitmachen</h2>
|
||||
<p>
|
||||
<b>Ticket:</b> Anmeldung über den Ticketshop. Das Ticket ist kostenlos,
|
||||
aber die Plätze sind begrenzt.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn hot" href="https://tickets.berlin.ccc.de/cccb/kik-v0.1/">Ticket sichern</a>
|
||||
</p>
|
||||
<p>
|
||||
<b>Talks & Workshops:</b> Reiche deinen Beitrag im Call for Participation ein
|
||||
und schau dir später den Fahrplan an.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn" href="https://cfp.berlin.ccc.de">Talk einreichen</a>
|
||||
<a class="btn" href="https://cfp.berlin.ccc.de">Fahrplan</a>
|
||||
</p>
|
||||
<p>
|
||||
<b>Sonstiges:</b> Du willst anders helfen oder hast Fragen? Schreib an
|
||||
aprl [at] berlin [dot] ccc [dot] de.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="anfahrt">
|
||||
<h2>3 Anfahrt</h2>
|
||||
<dl class="kv">
|
||||
<dt>Adresse</dt> <dd>Clubräume im Hinterhof der Marienstraße 11, 10117 Berlin</dd>
|
||||
<dt>Koordinaten</dt> <dd>52,52194° N, 13,38261° O</dd>
|
||||
<dt>Fahrrad</dt> <dd>Im Innenhof gibt es eine begrenzte Zahl an Fahrradständern. Auf dem Weg liegen viele Fahrradstraßen, nutz die am besten, z. B. mit <a href="https://www.bbbike.de/">BBBike.de</a>.</dd>
|
||||
<dt>ÖPNV</dt> <dd>Der Club liegt direkt beim S+U-Bahnhof Friedrichstraße (auch Regionalbahnen). Vom oberirdischen S-Bahn-Steig (S3/S5/S7) nimmst du den Ausgang Schiffbauerdamm und gehst unter der Bahnbrücke über die Spree. Über die Albrechtstraße kommst du zur Marienstraße.</dd>
|
||||
<dt>Fernverkehr</dt> <dd>Aussteigen in Berlin Hauptbahnhof, dann mit S-Bahn oder Regionalbahn Richtung Osten eine Station bis Friedrichstraße. Bahnhof Richtung Spree verlassen, über die Fußgängerbrücke und der Albrechtstraße bis zur Stichstraße Marienstraße folgen.</dd>
|
||||
<dt>Flugzeug</dt> <dd>BER: Airport Express (RE7, RB14) oder S9 bis Friedrichstraße, alternativ FEX bis Hauptbahnhof (dann wie Fernverkehr). Achtung: Terminal 5 (früher SXF) ist nicht mit dem Rest des BER verbunden, dort fährt nur die S9. Flugplatz Strausberg (EDAY): S7 direkt bis Friedrichstraße.</dd>
|
||||
<dt>Auto</dt> <dd>Zufahrt von Hauptbahnhof oder Brandenburger Tor über die Luisenstraße. Von der Friedrichstraße entweder über Schiffbauerdamm und Albrechtstraße (Außengastronomie und Kopfsteinpflaster) oder über Reinhardstraße und Luisenstraße (die Albrechtstraße ist nur in Gegenrichtung befahrbar).</dd>
|
||||
<dt>Parken</dt> <dd>Achtung: Es gibt kaum Parkplätze, und die Marienstraße und alle umliegenden Straßen sind parkraumbewirtschaftet.</dd>
|
||||
</dl>
|
||||
<p>
|
||||
<a href="https://www.openstreetmap.org/node/3872556357#map=20/52.5217003/13.3828041&layers=H">[ Karte (OpenStreetMap) ]</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<a href="https://berlin.ccc.de/page/impressum/">Impressum</a> ·
|
||||
<a href="https://berlin.ccc.de/">CCC Berlin</a>
|
||||
<p class="prompt"><b>visitor@khaos-im-kiez</b>:~$ <span class="cursor"></span></p>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
BIN
logo.png
Normal file
BIN
logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
185
style.css
Normal file
185
style.css
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
/* Khaos im Kiez — terminal look, pure CSS, no JS */
|
||||
|
||||
:root {
|
||||
--bg: #020a04;
|
||||
--fg: #33ff66;
|
||||
--dim: #1f9a3f;
|
||||
--hot: #ff2a2a; /* KiK-Logo-Rot */
|
||||
--glow: 0 0 6px rgba(51, 255, 102, .55);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html { background: #000; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
padding: 2rem 1rem 4rem;
|
||||
background: radial-gradient(ellipse at center, var(--bg) 55%, #000 100%);
|
||||
color: var(--fg);
|
||||
font: 16px/1.5 "DejaVu Sans Mono", "Liberation Mono", "Cascadia Mono", Menlo, Consolas, monospace;
|
||||
text-shadow: var(--glow);
|
||||
}
|
||||
|
||||
/* CRT: Scanlines + Vignette */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed; inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
background:
|
||||
repeating-linear-gradient(to bottom,
|
||||
rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px,
|
||||
rgba(0, 0, 0, .22) 3px, rgba(0, 0, 0, .22) 4px),
|
||||
radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%);
|
||||
}
|
||||
|
||||
::selection { background: var(--fg); color: #000; text-shadow: none; }
|
||||
|
||||
.term {
|
||||
max-width: 82ch;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--fg);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:focus-visible {
|
||||
background: var(--fg);
|
||||
color: #000;
|
||||
text-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Prompt */
|
||||
.prompt { color: var(--dim); }
|
||||
.prompt b { color: var(--fg); font-weight: normal; }
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
width: .6em; height: 1.1em;
|
||||
vertical-align: text-bottom;
|
||||
background: var(--fg);
|
||||
animation: blink 1.1s steps(1) infinite;
|
||||
}
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
margin: 1rem 0 1.5rem;
|
||||
}
|
||||
header img {
|
||||
width: 150px; height: 150px;
|
||||
flex: none;
|
||||
image-rendering: auto;
|
||||
filter: drop-shadow(0 0 8px rgba(255, 42, 42, .5));
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.9rem;
|
||||
line-height: 1.15;
|
||||
font-weight: bold;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h1 span { color: var(--hot); text-shadow: 0 0 6px rgba(255, 42, 42, .6); }
|
||||
.tagline { margin: .4rem 0 0; color: var(--dim); }
|
||||
|
||||
/* Menü */
|
||||
nav {
|
||||
border-top: 1px solid var(--dim);
|
||||
border-bottom: 1px solid var(--dim);
|
||||
padding: .3rem 0;
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .25rem 1.5rem;
|
||||
}
|
||||
nav .lang { margin-left: auto; }
|
||||
|
||||
/* Fenster-Boxen */
|
||||
section {
|
||||
border: 1px solid var(--fg);
|
||||
box-shadow: 0 0 10px rgba(51, 255, 102, .25), inset 0 0 10px rgba(51, 255, 102, .08);
|
||||
margin: 0 0 2rem;
|
||||
padding: 1.1rem 1.2rem .8rem;
|
||||
position: relative;
|
||||
}
|
||||
section > h2 {
|
||||
position: absolute;
|
||||
top: -.85em; left: 1rem;
|
||||
margin: 0;
|
||||
padding: 0 .6ch;
|
||||
background: #010603;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
section > h2::before { content: "┤ "; color: var(--dim); }
|
||||
section > h2::after { content: " ├"; color: var(--dim); }
|
||||
|
||||
section p { margin: 0 0 1rem; }
|
||||
|
||||
dl.kv {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: .15rem 1.5ch;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
dl.kv dt { color: var(--dim); white-space: nowrap; min-width: 12ch; }
|
||||
dl.kv dt::after { content: " :"; }
|
||||
dl.kv dd { margin: 0; }
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin: 0 1.5ch .5rem 0;
|
||||
padding: 0 1ch;
|
||||
border: 1px solid var(--fg);
|
||||
}
|
||||
.btn::before { content: "[ "; }
|
||||
.btn::after { content: " ]"; }
|
||||
.btn { border: 0; padding: 0; }
|
||||
.btn.hot { color: var(--hot); text-shadow: 0 0 6px rgba(255, 42, 42, .6); }
|
||||
.btn.hot:hover, .btn.hot:focus-visible { background: var(--hot); color: #000; }
|
||||
|
||||
.note { color: var(--dim); }
|
||||
.todo { color: #ffcc33; text-shadow: none; }
|
||||
|
||||
/* Output-Listen */
|
||||
ul.out { list-style: none; margin: 0 0 1rem; padding: 0; }
|
||||
ul.out li::before { content: "> "; color: var(--dim); }
|
||||
|
||||
footer {
|
||||
color: var(--dim);
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--dim);
|
||||
padding-top: .8rem;
|
||||
}
|
||||
footer a { color: var(--dim); }
|
||||
footer a:hover { color: #000; }
|
||||
|
||||
/* Mobil */
|
||||
@media (max-width: 560px) {
|
||||
body { font-size: 14px; padding: 1rem .6rem 3rem; }
|
||||
header { flex-direction: column; align-items: flex-start; gap: .8rem; }
|
||||
header img { width: 110px; height: 110px; }
|
||||
h1 { font-size: 1.4rem; }
|
||||
dl.kv { grid-template-columns: 1fr; }
|
||||
dl.kv dt::after { content: ""; }
|
||||
dl.kv dd { margin-bottom: .5rem; }
|
||||
nav .lang { margin-left: 0; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.cursor { animation: none; }
|
||||
}
|
||||
|
||||
@media print {
|
||||
body::before { display: none; }
|
||||
body, a { color: #000; background: #fff; text-shadow: none; }
|
||||
section { box-shadow: none; border-color: #000; }
|
||||
}
|
||||
Loading…
Reference in a new issue