185 lines
4.3 KiB
CSS
185 lines
4.3 KiB
CSS
/* 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; }
|
|
}
|