css start
This commit is contained in:
florian committed
1 parent
92f8e00fb5
commit
dc1b35f344
9 files changed
+546
-10
No files matched your search
@@ -37,10 +37,12 @@ FOOTER_PAGE = "footer" # Baustein: wird unter den Inhalt jeder Seite gesetzt
|
||||
|
||||
# ---------------------------------------------------------------- markdown
|
||||
|
||||
def md_to_html(text):
|
||||
def md_to_html(text, headings=None):
|
||||
"""Minimaler Markdown->HTML-Konverter:
|
||||
Ueberschriften, **fett**, *kursiv*, `code`, [Links](url),
|
||||
Listen, Code-Bloecke, > Zitate, --- Trennlinien, Absaetze.
|
||||
Ueberschriften bekommen id-Anker; in headings (Liste) werden
|
||||
optional (anker, text) aller Ueberschriften gesammelt.
|
||||
"""
|
||||
lines = text.replace("\r\n", "\n").split("\n")
|
||||
out = []
|
||||
@@ -48,6 +50,7 @@ def md_to_html(text):
|
||||
in_code = False
|
||||
in_list = False
|
||||
list_tag = None
|
||||
used_ids = {}
|
||||
|
||||
def inline(s):
|
||||
s = re.sub(r"`([^`]+)`", r"<code>\1</code>", s)
|
||||
@@ -89,11 +92,28 @@ def md_to_html(text):
|
||||
i += 1
|
||||
continue
|
||||
|
||||
# Rohe HTML-Zeilen (z.B. <div>, <svg>) unveraendert durchreichen
|
||||
if stripped.startswith("<"):
|
||||
close_list()
|
||||
out.append(stripped)
|
||||
i += 1
|
||||
continue
|
||||
|
||||
m = re.match(r"^(#{1,6})\s+(.*)$", stripped)
|
||||
if m:
|
||||
close_list()
|
||||
level = len(m.group(1))
|
||||
out.append("<h%d>%s</h%d>" % (level, inline(_escape(m.group(2))), level))
|
||||
text_h = m.group(2)
|
||||
hid = _slugify(text_h)
|
||||
if hid in used_ids:
|
||||
used_ids[hid] += 1
|
||||
hid = "%s-%d" % (hid, used_ids[hid])
|
||||
else:
|
||||
used_ids[hid] = 0
|
||||
if headings is not None:
|
||||
headings.append((hid, text_h))
|
||||
out.append('<h%d id="%s">%s</h%d>'
|
||||
% (level, hid, inline(_escape(text_h)), level))
|
||||
i += 1
|
||||
continue
|
||||
|
||||
@@ -136,7 +156,7 @@ def md_to_html(text):
|
||||
close_list()
|
||||
para = [stripped]
|
||||
while (i + 1 < len(lines) and lines[i + 1].strip()
|
||||
and not re.match(r"^(#{1,6}\s|[-*+]\s|\d+\.\s|>|```|-{3,}$)",
|
||||
and not re.match(r"^(#{1,6}\s|[-*+]\s|\d+\.\s|>|```|-{3,}$|<)",
|
||||
lines[i + 1].strip())):
|
||||
i += 1
|
||||
para.append(lines[i].strip())
|
||||
@@ -151,6 +171,23 @@ def _escape(s):
|
||||
return (s.replace("&", "&").replace("<", "<").replace(">", ">"))
|
||||
|
||||
|
||||
def _slugify(s):
|
||||
"""Ueberschriftentext -> HTML-id (ankertauglich, klein, ohne Sonderzeichen)."""
|
||||
s = s.lower()
|
||||
for k, v in (("ä", "ae"), ("ö", "oe"), ("ü", "ue"), ("ß", "ss")):
|
||||
s = s.replace(k, v)
|
||||
s = re.sub(r"[^a-z0-9]+", "-", s).strip("-")
|
||||
return s or "abschnitt"
|
||||
|
||||
|
||||
def heading_nav(headings):
|
||||
"""Baut die Anker-Linkliste (Text-Links auf die Ueberschriften der Seite)."""
|
||||
if not headings:
|
||||
return ""
|
||||
return "".join('<a href="#%s">%s</a>' % (hid, _escape(text))
|
||||
for hid, text in headings)
|
||||
|
||||
|
||||
# ------------------------------------------------------------------- seiten
|
||||
|
||||
def parse_md(raw):
|
||||
@@ -208,10 +245,18 @@ def block_html(slug):
|
||||
|
||||
def render_page(raw, template, header_html="", footer_html=""):
|
||||
meta, body = parse_md(raw)
|
||||
html = md_to_html(body)
|
||||
headings = []
|
||||
html = md_to_html(body, headings)
|
||||
anker_html = heading_nav(headings)
|
||||
page = (template
|
||||
.replace("{{titel}}", _escape(meta.get("titel", "")))
|
||||
.replace("{{inhalt}}", html))
|
||||
if "{{anker}}" in template:
|
||||
page = page.replace("{{anker}}", anker_html)
|
||||
elif anker_html and "{{header}}" in template:
|
||||
# Template ohne {{anker}}-Platzhalter: Anker ans Ende des Headers
|
||||
page = page.replace("{{header}}",
|
||||
header_html + '\n<nav class="anker-nav">' + anker_html + "</nav>")
|
||||
if "{{header}}" in template:
|
||||
page = page.replace("{{header}}", header_html)
|
||||
elif header_html and "<body>" in page:
|
||||
|
||||
+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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
+9
-1
@@ -2,7 +2,15 @@
|
||||
titel: Header
|
||||
---
|
||||
|
||||
# Meine Website
|
||||
<div class="pixel-horse-container">
|
||||
<svg class="pixel-horse" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="45" width="60" height="30" fill="#00ffff" /><rect x="55" y="25" width="30" height="25" fill="#00ffff" /><rect x="55" y="20" width="10" height="10" fill="#00ffff" /><rect x="75" y="20" width="10" height="10" fill="#00ffff" /><rect x="65" y="30" width="5" height="5" fill="#000000" /><rect x="80" y="30" width="5" height="5" fill="#000000" /><rect x="70" y="45" width="3" height="3" fill="#000000" /><rect x="78" y="45" width="3" height="3" fill="#000000" /><rect x="55" y="25" width="5" height="5" fill="#ff00ff" /><rect x="60" y="20" width="5" height="5" fill="#ff00ff" /><rect x="65" y="25" width="5" height="5" fill="#ff00ff" /><rect x="70" y="20" width="5" height="5" fill="#ff00ff" /><rect x="75" y="25" width="5" height="5" fill="#ff00ff" /><rect x="25" y="70" width="8" height="20" fill="#00ffff" /><rect x="40" y="75" width="8" height="15" fill="#00ffff" /><rect x="60" y="70" width="8" height="20" fill="#00ffff" /><rect x="75" y="75" width="8" height="15" fill="#00ffff" /><rect x="10" y="50" width="10" height="20" fill="#ff00ff" /><rect x="5" y="60" width="10" height="10" fill="#ff00ff" /><rect x="25" y="85" width="8" height="5" fill="#008888" /><rect x="60" y="85" width="8" height="5" fill="#008888" /></svg>
|
||||
<svg class="pixel-horse" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="45" width="60" height="30" fill="#00ffff" /><rect x="55" y="25" width="30" height="25" fill="#00ffff" /><rect x="55" y="20" width="10" height="10" fill="#00ffff" /><rect x="75" y="20" width="10" height="10" fill="#00ffff" /><rect x="65" y="30" width="5" height="5" fill="#000000" /><rect x="80" y="30" width="5" height="5" fill="#000000" /><rect x="70" y="45" width="3" height="3" fill="#000000" /><rect x="78" y="45" width="3" height="3" fill="#000000" /><rect x="55" y="25" width="5" height="5" fill="#ff00ff" /><rect x="60" y="20" width="5" height="5" fill="#ff00ff" /><rect x="65" y="25" width="5" height="5" fill="#ff00ff" /><rect x="70" y="20" width="5" height="5" fill="#ff00ff" /><rect x="75" y="25" width="5" height="5" fill="#ff00ff" /><rect x="25" y="75" width="8" height="15" fill="#00ffff" /><rect x="40" y="70" width="8" height="20" fill="#00ffff" /><rect x="60" y="75" width="8" height="15" fill="#00ffff" /><rect x="75" y="70" width="8" height="20" fill="#00ffff" /><rect x="10" y="50" width="10" height="20" fill="#ff00ff" /><rect x="5" y="60" width="10" height="10" fill="#ff00ff" /><rect x="40" y="85" width="8" height="5" fill="#008888" /><rect x="75" y="85" width="8" height="5" fill="#008888" /></svg>
|
||||
<svg class="pixel-horse" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="45" width="60" height="30" fill="#00ffff" /><rect x="55" y="25" width="30" height="25" fill="#00ffff" /><rect x="55" y="20" width="10" height="10" fill="#00ffff" /><rect x="75" y="20" width="10" height="10" fill="#00ffff" /><rect x="65" y="30" width="5" height="5" fill="#000000" /><rect x="80" y="30" width="5" height="5" fill="#000000" /><rect x="70" y="45" width="3" height="3" fill="#000000" /><rect x="78" y="45" width="3" height="3" fill="#000000" /><rect x="55" y="25" width="5" height="5" fill="#ff00ff" /><rect x="60" y="20" width="5" height="5" fill="#ff00ff" /><rect x="65" y="25" width="5" height="5" fill="#ff00ff" /><rect x="70" y="20" width="5" height="5" fill="#ff00ff" /><rect x="75" y="25" width="5" height="5" fill="#ff00ff" /><rect x="25" y="70" width="8" height="20" fill="#00ffff" /><rect x="40" y="75" width="8" height="15" fill="#00ffff" /><rect x="60" y="70" width="8" height="20" fill="#00ffff" /><rect x="75" y="75" width="8" height="15" fill="#00ffff" /><rect x="10" y="50" width="10" height="20" fill="#ff00ff" /><rect x="5" y="60" width="10" height="10" fill="#ff00ff" /><rect x="25" y="85" width="8" height="5" fill="#008888" /><rect x="60" y="85" width="8" height="5" fill="#008888" /></svg>
|
||||
<svg class="pixel-horse" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="45" width="60" height="30" fill="#00ffff" /><rect x="55" y="25" width="30" height="25" fill="#00ffff" /><rect x="55" y="20" width="10" height="10" fill="#00ffff" /><rect x="75" y="20" width="10" height="10" fill="#00ffff" /><rect x="65" y="30" width="5" height="5" fill="#000000" /><rect x="80" y="30" width="5" height="5" fill="#000000" /><rect x="70" y="45" width="3" height="3" fill="#000000" /><rect x="78" y="45" width="3" height="3" fill="#000000" /><rect x="55" y="25" width="5" height="5" fill="#ff00ff" /><rect x="60" y="20" width="5" height="5" fill="#ff00ff" /><rect x="65" y="25" width="5" height="5" fill="#ff00ff" /><rect x="70" y="20" width="5" height="5" fill="#ff00ff" /><rect x="75" y="25" width="5" height="5" fill="#ff00ff" /><rect x="25" y="75" width="8" height="15" fill="#00ffff" /><rect x="40" y="70" width="8" height="20" fill="#00ffff" /><rect x="60" y="75" width="8" height="15" fill="#00ffff" /><rect x="75" y="70" width="8" height="20" fill="#00ffff" /><rect x="10" y="50" width="10" height="20" fill="#ff00ff" /><rect x="5" y="60" width="10" height="10" fill="#ff00ff" /><rect x="40" y="85" width="8" height="5" fill="#008888" /><rect x="75" y="85" width="8" height="5" fill="#008888" /></svg>
|
||||
</div>
|
||||
|
||||
# hfg_linux_usergroup
|
||||
# free-software-for-art-and-design
|
||||
|
||||
Dieser Header-Baustein wird automatisch ueber den Inhalt **aller** Seiten gesetzt.
|
||||
|
||||
|
||||
+27
-1
@@ -2,4 +2,30 @@
|
||||
titel: startseite
|
||||
---
|
||||
|
||||
Neue Seite. hier kommen alle inhalte hin.
|
||||
## Was ist die hfg_linux_usergroup
|
||||
|
||||
Die hfg_linux_usergroup ist eine diverse Gemeinschaft der HFG Offenbach, die sich für freie Software, Open Source und digitale Souveränität einsetzt.
|
||||
|
||||
Hintergrund ist die zentrale Bedeutung von Open Source für Kunst und Gestaltung: Es ermöglicht Demokratisierung, Transparenz, Chancengleichheit und Weiterentwicklung. Durch offene Lizenzen und frei zugängliche Software werden Wissen und kreative Prozesse entmonopolisiert. Künstler:innen und Designer:innen sind so nicht länger abhängig von proprietärer Software – die oft mit hohen Kosten, geschlossenen Systemen, Abhängigkeiten oder Abos einhergeht. Hinzu kommen ethische Bedenken wie Datenschutz oder Überwachungskapitalismus.
|
||||
Open Source fördert nicht nur gestalterische Freiheit, sondern auch eine kritische Reflexion über Technologie selbst.
|
||||
|
||||
## Nächste Treffen
|
||||
Die nächsten Termine für den Herbst/Winter 2026 werden aktuell geplant:
|
||||
|
||||
hfg_linux_usergroup_date_1_music
|
||||
hfg_linux_usergroup_date_2_image-editing
|
||||
hfg_linux_usergroup_date_3_coding-development
|
||||
hfg_linux_usergroup_date_4_3d-film-fotogrammetrie
|
||||
|
||||
## Wer ist die hfg_linux_usergroup
|
||||
|
||||
Alle, die sich für Linux, Open Source und die Förderung von Wissen in Kunst und Design interessieren, können Teil der Gemeinschaft werden oder an den Treffen teilnehmen. Die hfg_linux_usergroup wurde von den beiden HFG-Lehrenden Sebastian Kujas und Florian Albrecht-Schoeck gegründet und wird aktuell von ihnen moderiert.
|
||||
|
||||
## Was sind die Ziele der hfg_linux_usergroup
|
||||
Ziel ist es, den Einsatz freier Software in Kunst und Design zu fördern. Durch Workshops, den Aufbau von Wissensdatenbanken, Austausch und Debatten sollen Eigenermächtigung und Verantwortung für Technologie wiederhergestellt werden. Dazu entwickeln wir gemeinsam ein eigenes Linux-basiertes Betriebssystem und unterstützen bei allen Schritten des Wechsels zu freier Software.
|
||||
|
||||
## Das hfg_OS_
|
||||
Das hfg_OS ist ein auf Debian 13 (Trixie) basierendes, Linux-basiertes Betriebssystem. Es wurde speziell für die Bedürfnisse von Künstler:innen und Designer:innen angepasst und wird kontinuierlich weiterentwickelt.
|
||||
|
||||
Bald verfügbar: hfg_OS_Falbella-2026-10
|
||||
|
||||
+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;
|
||||
}
|
||||
+22
-2
@@ -8,15 +8,35 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Meine Website</h1>
|
||||
<div class="pixel-horse-container">
|
||||
<svg class="pixel-horse" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="45" width="60" height="30" fill="#00ffff" /><rect x="55" y="25" width="30" height="25" fill="#00ffff" /><rect x="55" y="20" width="10" height="10" fill="#00ffff" /><rect x="75" y="20" width="10" height="10" fill="#00ffff" /><rect x="65" y="30" width="5" height="5" fill="#000000" /><rect x="80" y="30" width="5" height="5" fill="#000000" /><rect x="70" y="45" width="3" height="3" fill="#000000" /><rect x="78" y="45" width="3" height="3" fill="#000000" /><rect x="55" y="25" width="5" height="5" fill="#ff00ff" /><rect x="60" y="20" width="5" height="5" fill="#ff00ff" /><rect x="65" y="25" width="5" height="5" fill="#ff00ff" /><rect x="70" y="20" width="5" height="5" fill="#ff00ff" /><rect x="75" y="25" width="5" height="5" fill="#ff00ff" /><rect x="25" y="70" width="8" height="20" fill="#00ffff" /><rect x="40" y="75" width="8" height="15" fill="#00ffff" /><rect x="60" y="70" width="8" height="20" fill="#00ffff" /><rect x="75" y="75" width="8" height="15" fill="#00ffff" /><rect x="10" y="50" width="10" height="20" fill="#ff00ff" /><rect x="5" y="60" width="10" height="10" fill="#ff00ff" /><rect x="25" y="85" width="8" height="5" fill="#008888" /><rect x="60" y="85" width="8" height="5" fill="#008888" /></svg>
|
||||
<svg class="pixel-horse" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="45" width="60" height="30" fill="#00ffff" /><rect x="55" y="25" width="30" height="25" fill="#00ffff" /><rect x="55" y="20" width="10" height="10" fill="#00ffff" /><rect x="75" y="20" width="10" height="10" fill="#00ffff" /><rect x="65" y="30" width="5" height="5" fill="#000000" /><rect x="80" y="30" width="5" height="5" fill="#000000" /><rect x="70" y="45" width="3" height="3" fill="#000000" /><rect x="78" y="45" width="3" height="3" fill="#000000" /><rect x="55" y="25" width="5" height="5" fill="#ff00ff" /><rect x="60" y="20" width="5" height="5" fill="#ff00ff" /><rect x="65" y="25" width="5" height="5" fill="#ff00ff" /><rect x="70" y="20" width="5" height="5" fill="#ff00ff" /><rect x="75" y="25" width="5" height="5" fill="#ff00ff" /><rect x="25" y="75" width="8" height="15" fill="#00ffff" /><rect x="40" y="70" width="8" height="20" fill="#00ffff" /><rect x="60" y="75" width="8" height="15" fill="#00ffff" /><rect x="75" y="70" width="8" height="20" fill="#00ffff" /><rect x="10" y="50" width="10" height="20" fill="#ff00ff" /><rect x="5" y="60" width="10" height="10" fill="#ff00ff" /><rect x="40" y="85" width="8" height="5" fill="#008888" /><rect x="75" y="85" width="8" height="5" fill="#008888" /></svg>
|
||||
<svg class="pixel-horse" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="45" width="60" height="30" fill="#00ffff" /><rect x="55" y="25" width="30" height="25" fill="#00ffff" /><rect x="55" y="20" width="10" height="10" fill="#00ffff" /><rect x="75" y="20" width="10" height="10" fill="#00ffff" /><rect x="65" y="30" width="5" height="5" fill="#000000" /><rect x="80" y="30" width="5" height="5" fill="#000000" /><rect x="70" y="45" width="3" height="3" fill="#000000" /><rect x="78" y="45" width="3" height="3" fill="#000000" /><rect x="55" y="25" width="5" height="5" fill="#ff00ff" /><rect x="60" y="20" width="5" height="5" fill="#ff00ff" /><rect x="65" y="25" width="5" height="5" fill="#ff00ff" /><rect x="70" y="20" width="5" height="5" fill="#ff00ff" /><rect x="75" y="25" width="5" height="5" fill="#ff00ff" /><rect x="25" y="70" width="8" height="20" fill="#00ffff" /><rect x="40" y="75" width="8" height="15" fill="#00ffff" /><rect x="60" y="70" width="8" height="20" fill="#00ffff" /><rect x="75" y="75" width="8" height="15" fill="#00ffff" /><rect x="10" y="50" width="10" height="20" fill="#ff00ff" /><rect x="5" y="60" width="10" height="10" fill="#ff00ff" /><rect x="25" y="85" width="8" height="5" fill="#008888" /><rect x="60" y="85" width="8" height="5" fill="#008888" /></svg>
|
||||
<svg class="pixel-horse" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="45" width="60" height="30" fill="#00ffff" /><rect x="55" y="25" width="30" height="25" fill="#00ffff" /><rect x="55" y="20" width="10" height="10" fill="#00ffff" /><rect x="75" y="20" width="10" height="10" fill="#00ffff" /><rect x="65" y="30" width="5" height="5" fill="#000000" /><rect x="80" y="30" width="5" height="5" fill="#000000" /><rect x="70" y="45" width="3" height="3" fill="#000000" /><rect x="78" y="45" width="3" height="3" fill="#000000" /><rect x="55" y="25" width="5" height="5" fill="#ff00ff" /><rect x="60" y="20" width="5" height="5" fill="#ff00ff" /><rect x="65" y="25" width="5" height="5" fill="#ff00ff" /><rect x="70" y="20" width="5" height="5" fill="#ff00ff" /><rect x="75" y="25" width="5" height="5" fill="#ff00ff" /><rect x="25" y="75" width="8" height="15" fill="#00ffff" /><rect x="40" y="70" width="8" height="20" fill="#00ffff" /><rect x="60" y="75" width="8" height="15" fill="#00ffff" /><rect x="75" y="70" width="8" height="20" fill="#00ffff" /><rect x="10" y="50" width="10" height="20" fill="#ff00ff" /><rect x="5" y="60" width="10" height="10" fill="#ff00ff" /><rect x="40" y="85" width="8" height="5" fill="#008888" /><rect x="75" y="85" width="8" height="5" fill="#008888" /></svg>
|
||||
</div>
|
||||
<h1 id="hfg-linux-usergroup">hfg_linux_usergroup</h1>
|
||||
<h1 id="free-software-for-art-and-design">free-software-for-art-and-design</h1>
|
||||
<p>Dieser Header-Baustein wird automatisch ueber den Inhalt <strong>aller</strong> Seiten gesetzt.</p>
|
||||
<ul>
|
||||
<li><a href="index.html">Startseite</a></li>
|
||||
</ul>
|
||||
<nav class="anker-nav"><a href="#was-ist-die-hfg-linux-usergroup">Was ist die hfg_linux_usergroup</a><a href="#naechste-treffen">Nächste Treffen</a><a href="#wer-ist-die-hfg-linux-usergroup">Wer ist die hfg_linux_usergroup</a><a href="#was-sind-die-ziele-der-hfg-linux-usergroup">Was sind die Ziele der hfg_linux_usergroup</a><a href="#das-hfg-os">Das hfg_OS_</a></nav>
|
||||
</header>
|
||||
<main>
|
||||
<h1>startseite</h1>
|
||||
<p>Neue Seite. hier kommen alle inhalte hin.</p>
|
||||
<h2 id="was-ist-die-hfg-linux-usergroup">Was ist die hfg_linux_usergroup</h2>
|
||||
<p>Die hfg_linux_usergroup ist eine diverse Gemeinschaft der HFG Offenbach, die sich für freie Software, Open Source und digitale Souveränität einsetzt.</p>
|
||||
<p>Hintergrund ist die zentrale Bedeutung von Open Source für Kunst und Gestaltung: Es ermöglicht Demokratisierung, Transparenz, Chancengleichheit und Weiterentwicklung. Durch offene Lizenzen und frei zugängliche Software werden Wissen und kreative Prozesse entmonopolisiert. Künstler:innen und Designer:innen sind so nicht länger abhängig von proprietärer Software – die oft mit hohen Kosten, geschlossenen Systemen, Abhängigkeiten oder Abos einhergeht. Hinzu kommen ethische Bedenken wie Datenschutz oder Überwachungskapitalismus. Open Source fördert nicht nur gestalterische Freiheit, sondern auch eine kritische Reflexion über Technologie selbst.</p>
|
||||
<h2 id="naechste-treffen">Nächste Treffen</h2>
|
||||
<p>Die nächsten Termine für den Herbst/Winter 2026 werden aktuell geplant:</p>
|
||||
<p>hfg_linux_usergroup_date_1_music hfg_linux_usergroup_date_2_image-editing hfg_linux_usergroup_date_3_coding-development hfg_linux_usergroup_date_4_3d-film-fotogrammetrie</p>
|
||||
<h2 id="wer-ist-die-hfg-linux-usergroup">Wer ist die hfg_linux_usergroup</h2>
|
||||
<p>Alle, die sich für Linux, Open Source und die Förderung von Wissen in Kunst und Design interessieren, können Teil der Gemeinschaft werden oder an den Treffen teilnehmen. Die hfg_linux_usergroup wurde von den beiden HFG-Lehrenden Sebastian Kujas und Florian Albrecht-Schoeck gegründet und wird aktuell von ihnen moderiert.</p>
|
||||
<h2 id="was-sind-die-ziele-der-hfg-linux-usergroup">Was sind die Ziele der hfg_linux_usergroup</h2>
|
||||
<p>Ziel ist es, den Einsatz freier Software in Kunst und Design zu fördern. Durch Workshops, den Aufbau von Wissensdatenbanken, Austausch und Debatten sollen Eigenermächtigung und Verantwortung für Technologie wiederhergestellt werden. Dazu entwickeln wir gemeinsam ein eigenes Linux-basiertes Betriebssystem und unterstützen bei allen Schritten des Wechsels zu freier Software.</p>
|
||||
<h2 id="das-hfg-os">Das hfg_OS_</h2>
|
||||
<p>Das hfg_OS ist ein auf Debian 13 (Trixie) basierendes, Linux-basiertes Betriebssystem. Es wurde speziell für die Bedürfnisse von Künstler:innen und Designer:innen angepasst und wird kontinuierlich weiterentwickelt.</p>
|
||||
<p>Bald verfügbar: hfg_OS_Falbella-2026-10</p>
|
||||
</main>
|
||||
<footer>
|
||||
<p>Dieser Footer-Baustein wird automatisch an das Ende <strong>aller</strong> Seiten gesetzt. Zum Beispiel mit Links: <a href="index.html">Startseite</a></p>
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
<body>
|
||||
<header>
|
||||
{{header}}
|
||||
<nav class="anker-nav">{{anker}}</nav>
|
||||
</header>
|
||||
<main>
|
||||
<h1>{{titel}}</h1>
|
||||
|
||||
Reference in new issue
Block a user