diff --git a/.DS_Store b/.DS_Store index 336b29d..786dd3c 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/cms.py b/cms.py index 3edc84d..ce2f038 100755 --- a/cms.py +++ b/cms.py @@ -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"\1", s) @@ -89,11 +92,28 @@ def md_to_html(text): i += 1 continue + # Rohe HTML-Zeilen (z.B.
, ) 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("%s" % (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('%s' + % (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('%s' % (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") if "{{header}}" in template: page = page.replace("{{header}}", header_html) elif header_html and "" in page: diff --git a/css/style.css b/css/style.css index e3ec04d..27bd819 100644 --- a/css/style.css +++ b/css/style.css @@ -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; +} diff --git a/images/pferd.png b/images/pferd.png new file mode 100644 index 0000000..29a5085 Binary files /dev/null and b/images/pferd.png differ diff --git a/md/header.md b/md/header.md index 71ee792..856ab9f 100644 --- a/md/header.md +++ b/md/header.md @@ -2,7 +2,15 @@ titel: Header --- -# Meine Website +
+ + + + +
+ +# hfg_linux_usergroup +# free-software-for-art-and-design Dieser Header-Baustein wird automatisch ueber den Inhalt **aller** Seiten gesetzt. diff --git a/md/startseite.md b/md/startseite.md index 578ade4..aece968 100644 --- a/md/startseite.md +++ b/md/startseite.md @@ -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 + diff --git a/output/css/style.css b/output/css/style.css index e3ec04d..27bd819 100644 --- a/output/css/style.css +++ b/output/css/style.css @@ -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; +} diff --git a/output/index.html b/output/index.html index c7efd00..009cb96 100644 --- a/output/index.html +++ b/output/index.html @@ -8,15 +8,35 @@
-

Meine Website

+
+ + + + +
+

hfg_linux_usergroup

+

free-software-for-art-and-design

Dieser Header-Baustein wird automatisch ueber den Inhalt aller Seiten gesetzt.

+

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