css start
This commit is contained in:
florian committed
1 parent
92f8e00fb5
commit
dc1b35f344
9 files changed
+546
-10
No files matched your search
+219
-1
@@ -1 +1,219 @@
|
||||
/* Stylesheet der Website - hier das Layout gestalten. */
|
||||
/* ---- Pixel-Pferd im Header ---- */
|
||||
|
||||
header {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pixel-horse-container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
margin: 0 auto; /* zentriert im Header */
|
||||
image-rendering: pixelated;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
.pixel-horse {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
opacity: 0;
|
||||
animation: run 0.5s steps(1) infinite;
|
||||
}
|
||||
|
||||
.pixel-horse:nth-child(1) { animation-delay: 0s; opacity: 1; }
|
||||
.pixel-horse:nth-child(2) { animation-delay: 0.125s; }
|
||||
.pixel-horse:nth-child(3) { animation-delay: 0.25s; }
|
||||
.pixel-horse:nth-child(4) { animation-delay: 0.375s; }
|
||||
|
||||
@keyframes run {
|
||||
0%, 24.9% { opacity: 1; }
|
||||
25%, 49.9% { opacity: 0; }
|
||||
50%, 74.9% { opacity: 1; }
|
||||
75%, 99.9% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
Linux-Terminal Dark Theme
|
||||
Nur System-Fonts (lokal verfuegbar, keine Web-Fonts, DSGVO-konform)
|
||||
================================================================ */
|
||||
|
||||
:root {
|
||||
--bg: #1a1a1a; /* sehr dunkles Grau */
|
||||
--text: #ffffff; /* normaler Text weiss */
|
||||
--dim: #909090; /* gedimmter Text (Footer, Zitate) */
|
||||
--heading: #ff9500; /* Ueberschriften orange */
|
||||
--link: #66aaff; /* Links, gut lesbar auf schwarz */
|
||||
--green: #00ff00; /* Prompt, Code */
|
||||
--border: #333333;
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
body {
|
||||
/* Terminal-/Monospace-Fonts des Systems, kein Web-Font, DSGVO-konform */
|
||||
font-family: "Ubuntu Mono", "DejaVu Sans Mono", Menlo, "Liberation Mono",
|
||||
"Noto Sans Mono", Inconsolata, Monaco, "Courier New", monospace;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ---- Header = Terminal-Titelleiste ---- */
|
||||
|
||||
header {
|
||||
max-width: 1200px; /* gleiche Spalte wie main/footer */
|
||||
margin: 0 auto 1.5rem; /* in der Seitenmitte */
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* ---- Hauptbereich als Terminal-Fenster ---- */
|
||||
|
||||
main {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto; /* in der Seitenmitte */
|
||||
text-align: left;
|
||||
padding: 0 1.5rem 1.5rem 0;
|
||||
}
|
||||
|
||||
/* Shell-Prompt ganz oben auf der Seite */
|
||||
body::before {
|
||||
content: "user@hfg_linux_group:~$ ";
|
||||
color: var(--green);
|
||||
display: block;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 1.5rem;
|
||||
}
|
||||
|
||||
/* ---- Typografie ---- */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--heading);
|
||||
text-shadow: 0 0 8px rgba(255, 149, 0, 0.35);
|
||||
letter-spacing: 1px;
|
||||
font-size: 1rem; /* ueberall gleiche Schriftgroesse */
|
||||
font-weight: normal;
|
||||
margin: 1.5rem 0 .8rem;
|
||||
}
|
||||
|
||||
main > h1:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: .8rem 0;
|
||||
}
|
||||
|
||||
/* ---- Anker-Navigation im Header (Links auf die Ueberschriften) ---- */
|
||||
|
||||
.anker-nav {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .25rem 1.5rem;
|
||||
}
|
||||
|
||||
.anker-nav a {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.anker-nav a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ---- Links ---- */
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: underline;
|
||||
text-shadow: 0 0 8px rgba(102, 170, 255, 0.6);
|
||||
}
|
||||
|
||||
/* ---- Kein Bold: alle Schrift normal ---- */
|
||||
|
||||
strong, b, th {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* ---- Listen, Zitate, Trennlinien ---- */
|
||||
|
||||
ul, ol {
|
||||
margin: .8rem 0;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: .25rem 0;
|
||||
}
|
||||
|
||||
li::marker {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 3px solid var(--green);
|
||||
margin: 1rem 0;
|
||||
padding: .5rem 1rem;
|
||||
color: var(--dim);
|
||||
background: rgba(0, 255, 0, 0.05);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px dashed var(--border);
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
/* ---- Code ---- */
|
||||
|
||||
code {
|
||||
color: var(--green);
|
||||
background: #242424;
|
||||
padding: .1rem .3rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #141414;
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ---- Footer ---- */
|
||||
|
||||
footer {
|
||||
max-width: 1600px;
|
||||
margin: 1.5rem auto 0; /* in der Seitenmitte, bündig zu main */
|
||||
text-align: left;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 1rem;
|
||||
color: var(--dim);
|
||||
}
|
||||
|
||||
/* ---- Textauswahl invertiert, wie im Terminal ---- */
|
||||
|
||||
::selection {
|
||||
background: var(--link);
|
||||
color: #000000;
|
||||
}
|
||||
Reference in new issue
Block a user