Port to astro
This commit is contained in:
Zebreus
parent
a701743635
commit
93ee2a943e
8 changed files with 3869 additions and 180 deletions
1
src/components/Prompt.astro
Normal file
1
src/components/Prompt.astro
Normal file
|
|
@ -0,0 +1 @@
|
|||
<p class="prompt"><b>root@khaos-im-kiez</b>:~# <slot /><span class="cursor"></span></p>
|
||||
110
src/components/Terminal.astro
Normal file
110
src/components/Terminal.astro
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
---
|
||||
import Prompt from './Prompt.astro';
|
||||
---
|
||||
<Prompt><span id="term-input"></span></Prompt>
|
||||
|
||||
<script>
|
||||
const term = document.getElementById('term-input');
|
||||
let buf = '';
|
||||
let ws = null;
|
||||
let connected = false;
|
||||
let firstEnter = true;
|
||||
|
||||
function appendOutput(text){
|
||||
if(!text) return;
|
||||
// append to term display (simple)
|
||||
term.textContent += text;
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function(e){
|
||||
const t = e.target;
|
||||
if(t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
|
||||
if(e.ctrlKey || e.altKey || e.metaKey) return;
|
||||
|
||||
if(e.key === 'Backspace'){
|
||||
e.preventDefault();
|
||||
if(connected && ws && ws.readyState === WebSocket.OPEN){
|
||||
ws.send('\b');
|
||||
return;
|
||||
}
|
||||
buf = buf.slice(0, -1);
|
||||
term.textContent = buf;
|
||||
return;
|
||||
}
|
||||
if(e.key === 'Enter'){
|
||||
e.preventDefault();
|
||||
if(firstEnter && !connected){
|
||||
// open ssh over websocket connection with username/password auth
|
||||
// keep connection open; run command after connection
|
||||
const line = buf;
|
||||
buf = '';
|
||||
firstEnter = false;
|
||||
term.textContent = term.textContent + '\n';
|
||||
// try to connect - endpoint can be configured
|
||||
const wsUrl = (location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/ssh';
|
||||
try {
|
||||
ws = new WebSocket(wsUrl);
|
||||
ws.onopen = function(){
|
||||
connected = true;
|
||||
// send auth info and/or initial command
|
||||
try {
|
||||
ws.send(JSON.stringify({type:'auth', line: line}));
|
||||
} catch(err) {
|
||||
ws.send(line + '\n');
|
||||
}
|
||||
ws.send('\n'); // run command/start shell
|
||||
};
|
||||
ws.onmessage = function(ev){
|
||||
appendOutput(ev.data);
|
||||
};
|
||||
ws.onclose = function(){
|
||||
connected = false;
|
||||
};
|
||||
ws.onerror = function(){
|
||||
connected = false;
|
||||
};
|
||||
} catch(err) {
|
||||
// fallback
|
||||
}
|
||||
return;
|
||||
}
|
||||
if(connected && ws && ws.readyState === WebSocket.OPEN){
|
||||
ws.send('\r');
|
||||
term.textContent = term.textContent + '\n';
|
||||
return;
|
||||
}
|
||||
buf += '\n';
|
||||
term.textContent = buf;
|
||||
return;
|
||||
}
|
||||
if(e.key === 'Escape'){
|
||||
e.preventDefault();
|
||||
if(connected && ws && ws.readyState === WebSocket.OPEN){
|
||||
ws.send('\x1b');
|
||||
return;
|
||||
}
|
||||
buf = '';
|
||||
term.textContent = buf;
|
||||
return;
|
||||
}
|
||||
if(e.key === 'Tab'){
|
||||
e.preventDefault();
|
||||
if(connected && ws && ws.readyState === WebSocket.OPEN){
|
||||
ws.send('\t');
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
if(e.key.length === 1){
|
||||
e.preventDefault();
|
||||
if(connected && ws && ws.readyState === WebSocket.OPEN){
|
||||
ws.send(e.key);
|
||||
// don't echo locally if server echoes; but keep simple
|
||||
return;
|
||||
}
|
||||
buf += e.key;
|
||||
term.textContent = buf;
|
||||
return;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
37
src/layouts/Layout.astro
Normal file
37
src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
import '../styles/style.css';
|
||||
import Prompt from '../components/Prompt.astro';
|
||||
import Terminal from '../components/Terminal.astro';
|
||||
|
||||
interface Props {
|
||||
lang: 'de' | 'en';
|
||||
title: string;
|
||||
description?: string;
|
||||
command: string;
|
||||
alternate: string;
|
||||
}
|
||||
|
||||
const { lang, title, description, command, alternate } = Astro.props;
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang={lang}>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{title}</title>
|
||||
{description && <meta name="description" content={description}>}
|
||||
<link rel="icon" type="image/png" href="logo.png">
|
||||
<link rel="alternate" hreflang={lang === 'de' ? 'en' : 'de'} href={alternate}>
|
||||
</head>
|
||||
<body>
|
||||
<main class="term">
|
||||
|
||||
<Prompt>{command}</Prompt>
|
||||
|
||||
<slot />
|
||||
|
||||
<Terminal />
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
49
src/pages/coc-en.astro
Normal file
49
src/pages/coc-en.astro
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
<Layout
|
||||
lang="en"
|
||||
title="Code of Conduct - Khaos im Kiez"
|
||||
command="cat CODE_OF_CONDUCT.en"
|
||||
alternate="coc.html"
|
||||
>
|
||||
|
||||
<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>
|
||||
|
||||
</Layout>
|
||||
49
src/pages/coc.astro
Normal file
49
src/pages/coc.astro
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
<Layout
|
||||
lang="de"
|
||||
title="Code of Conduct - Khaos im Kiez"
|
||||
command="cat CODE_OF_CONDUCT"
|
||||
alternate="coc-en.html"
|
||||
>
|
||||
|
||||
<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>
|
||||
|
||||
</Layout>
|
||||
98
src/pages/en.astro
Normal file
98
src/pages/en.astro
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
<Layout
|
||||
lang="en"
|
||||
title="Khaos im Kiez"
|
||||
description="Khaos im Kiez - a small CCC Berlin event, 28-29 November 2026, Marienstraße 11, Berlin."
|
||||
command="cat README.en"
|
||||
alternate="index.html"
|
||||
>
|
||||
|
||||
<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></dd>
|
||||
<dt>Food</dt> <dd>Eternal breakfast, vegan</dd>
|
||||
<dt>Accessibility</dt> <dd>Not accessible.</dd>
|
||||
<dt>Rules</dt> <dd><a href="coc-en.html">Code of Conduct</a></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/kik-v01/cfp">Submit a talk</a>
|
||||
<a class="btn" href="https://cfp.berlin.ccc.de/kik-v01/schedule">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="http://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>
|
||||
</footer>
|
||||
|
||||
</Layout>
|
||||
102
src/pages/index.astro
Normal file
102
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
<Layout
|
||||
lang="de"
|
||||
title="Khaos im Kiez"
|
||||
description="Khaos im Kiez - kleine Chaos-Veranstaltung des CCC Berlin, 28.-29. November 2026, Marienstraße 11, Berlin."
|
||||
command="cat README"
|
||||
alternate="en.html"
|
||||
>
|
||||
|
||||
<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></dd>
|
||||
<dt>Essen</dt> <dd>Ewiges Frühstück, vegan</dd>
|
||||
<dt>Barrierefrei</dt> <dd>Nicht barrierefrei.</dd>
|
||||
<dt>Regeln</dt> <dd><a href="coc.html">Code of Conduct</a></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/kik-v01/cfp">Talk einreichen</a>
|
||||
<a class="btn" href="https://cfp.berlin.ccc.de/kik-v01/schedule">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="http://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>
|
||||
<p>
|
||||
<a href="https://berlin.ccc.de/page/impressum/">Impressum</a> ·
|
||||
<a href="https://berlin.ccc.de/">CCC Berlin</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
</Layout>
|
||||
185
src/styles/style.css
Normal file
185
src/styles/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