[ADD] chaos map

README.md

@@ -2,63 +2,25 @@
 
 The source files for the <https://chaoszone.cz> website.
 
-## Dependencies
+# hugo
 
-This site is built using [Hakyll](https://jaspervdj.be/hakyll).
+- hugo is a static site generator
-To be able to build and run this, you need to install the following:
+- to start the development server 
+  - with docker: ```docker run --rm -p 1313:1313 -v ./:/src hugomods/hugo:exts-non-root server -D``` 
+  - local: ```hugo server```
+- to build the website 
+  - with docker: ```docker run --rm -v ./:/src hugomods/hugo:exts-non-root build``` 
+  - local: ```hugo```
 
-* ghc
-* cabal-install
-* alex
-* happy
-* zlib1g-dev
 
-## New post
+## todo
 
-To write new posts just invoke `newpost.sh`. This will guide you through the
+- eigene cursor und menü hover
-process.
+  - inspiration: https://eloyb.design/
-
+- ascii art: https://designs.events.ccc.de/Hackover_2017/Hackover_2017-Visual.png
-After you have written and saved the new post, add the post (you can find it in
+- play section
-`site/posts/`) to the repo, commit and push it.
+  - game of live
-
+  - raindrop: https://experiments.p5aholic.me/day/005/
-## Build and deploy
+  - pong: https://designs.events.ccc.de/GPN8/GPN8-Visual.png
-
+  - poly play: https://www.gugeli.de/2025/08/12/poly-play-der-einzige-arcade-automat-der-ddr-und-wie-man-ihn-heute-emuliert/
-### NixOS
+- matrix link im footer zu eigener unterseite mit beschreibung
-
-After cloning the repo and changing into the repo directory,
-you can invoke
-
-```bash
-nix-shell shell.nix
-```
-
-to build a shell with
-all dependencies in it. After that, you invoke
-
-```bash
-cabal new-run -- chaoszone build && cabal new-run -- chaoszone deploy
-```
-
-to build the static sites and eploy them in one step.
-
-### Other \*nix
-
-After cloning the repo, you change into the directory and invoke
-
-```
-cabal new-update
-```
-
-to initialize your cabal package repository list. After that you can run
-
-```bash
-cabal new-run -- chaoszone build && cabal new-run -- chaoszone deploy
-```
-
-to build the static sites and eploy them in one step.
-
-## Altering building process
-
-For altering the building process, you may edit the `src/Main.hs` file. To
-actually see your results, contact me at <nek0@nek0.eu> so I can rebuild the
-executable for the static site generator.

content/_index.md

@@ -1,5 +1,5 @@
 +++
-title = 'ChaosZone'
+title = 'About'
 date = 2025-06-01T22:39:26+02:00
 draft = true
 +++

content/news/20221219_36c3.md

@@ -0,0 +1,4 @@
++++
+title = 'ChaosZone at 36C3'
+date = 2023-12-19T22:39:26+02:00
++++

content/news/20231219_37c3.md

@@ -0,0 +1,4 @@
++++
+title = 'ChaosZone goes 37c3 ~ Kombinate aller Länder vereinigt euch! ~'
+date = 2023-12-19T22:39:26+02:00
++++

content/news/20250415_Geekend.md

@@ -0,0 +1,4 @@
++++
+title = 'Halle Geekend Weekend 2025 - Review'
+date = 2025-04-15T22:39:26+02:00
++++

hugo.yaml

@@ -1,4 +1,4 @@
 baseURL: https://chaoszone.cz/
 languageCode: en-us
 title: ChaosZone
-theme: zone
+theme: zone3

themes/zone/layouts/partials/nav.html

@@ -1,7 +1,7 @@
 <header class="site-header">
   <nav class="site-nav">
     <a class="logo" href="{{ .Site.BaseURL }}">
-	    <img src="/img/Chaoszone_crest.png">
+	    <img src="/img/Chaoszone.svg">
     </a>
     <ul class="main-menu">
       {{ range.Site.Menus.main }}

themes/zone/static/css/style.css

@@ -1,9 +1,9 @@
 :root {
-	--bg-color: #DE4129;
+	--bg-color: #841205;
 	--hl-color: #A72119;
 	--menu-font-color: white;
 	--font-color: #430C08;
-	--box-bg: #FF664B;
+	--box-bg: #ece2d5;
 	--main-font: 'Cubellan';
 }
 
@@ -38,11 +38,10 @@ header {
   grid-area: navigation;
   justify-self: stretch;
   padding-right: 25px;
-  border-right: 5px solid var(--hl-color);
 }
 
 nav a, nav a:visited {
-	color: var(--menu-font-color);
+	color: var(--box-bg);
 	font-size: 120%;
 }
 
@@ -59,11 +58,12 @@ nav li {
 	display: inline-block;
 	padding: 0.5em;
 	border-radius: 50%;
-	background-color: var(--hl-color);
+  border: 5px solid var(--box-bg);
 }
 
 .logo img {
 	max-width: 5em;
+	max-height: 5em;
 }
 
 main {

themes/zone2/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

themes/zone2/README.md

@@ -0,0 +1,7 @@
+# Theme Name
+
+## Features
+
+## Installation
+
+## Configuration

themes/zone2/archetypes/default.md

@@ -0,0 +1,5 @@
++++
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+date = {{ .Date }}
+draft = true
++++

themes/zone2/assets/css/main.css

@@ -0,0 +1,22 @@
+body {
+  color: #222;
+  font-family: sans-serif;
+  line-height: 1.5;
+  margin: 1rem;
+  max-width: 768px;
+}
+
+header {
+  border-bottom: 1px solid #222;
+  margin-bottom: 1rem;
+}
+
+footer {
+  border-top: 1px solid #222;
+  margin-top: 1rem;
+}
+
+a {
+  color: #00e;
+  text-decoration: none;
+}

themes/zone2/assets/js/main.js

@@ -0,0 +1 @@
+console.log('This site was generated by Hugo.');

themes/zone2/hugo.toml

@@ -0,0 +1,28 @@
+baseURL = 'https://example.org/'
+languageCode = 'en-us'
+title = 'My New Hugo Site'
+
+[[menus.main]]
+name = 'Home'
+pageRef = '/'
+weight = 10
+
+[[menus.main]]
+name = 'Members'
+pageRef = ''
+weight = 20
+
+[[menus.main]]
+name = 'Projects'
+pageRef = ''
+weight = 20
+
+[[menus.main]]
+name = 'Events'
+pageRef = ''
+weight = 20
+
+[module]
+  [module.hugoVersion]
+    extended = false
+    min = "0.116.0"

themes/zone2/layouts/404.html

@@ -0,0 +1,9 @@
+{{ partial "header.html" . }}
+
+<h1>Page Not Found</h1>
+
+<p>This page doesn't exist.</p>
+
+<p><a href="/">Go back to the home page</a></p>
+
+{{ partial "footer.html" . }}

themes/zone2/layouts/_default/list.html

@@ -0,0 +1,18 @@
+{{ partial "header.html" . }}
+
+<h1>{{ .Title }}</h1>
+
+{{ .Content }}
+
+{{ range.Data.Pages }}
+<article class="post-snippet">
+  <h3>
+    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+  </h3>
+	<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
+		{{ .Date.Format "January 2, 2006" }}
+	</time>
+</article>
+{{ end }}
+
+{{ partial "footer.html" . }}

themes/zone2/layouts/_default/single.html

@@ -0,0 +1,7 @@
+{{ partial "header.html" . }}
+
+<h1>{{ .Title }}</h1>
+
+{{ .Content }}
+
+{{ partial "footer.html" . }}

themes/zone2/layouts/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {{ partial "header.html" . }}
+  </head>
+
+  <body>
+
+    {{ partial "nav.html" . }}
+
+    <main class="content">
+
+        <div>
+        <h1>{{ .Title }}</h1>
+
+        {{ .Content }} 
+        </div>
+
+       
+
+        {{ partial "footer.html" . }}
+    </main>
+
+  </body>
+</html>
+
+
+
+

themes/zone2/layouts/partials/footer.html

@@ -0,0 +1,3 @@
+<footer>
+	<p>&copy;{{ dateFormat "2006" now }} {{ .Site.Title }}</p>
+</footer>

themes/zone2/layouts/partials/header.html

@@ -0,0 +1,11 @@
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+<title>{{ if not .IsHome }}{{ .Title }} | {{ end }}{{ .Site.Title }}</title>
+
+<link rel="stylesheet" href="/css/style.css" type="text/css" media="all" />
+<link rel="icon" type="image/svg+xml" href="/img/Chaoszone.svg" />
+
+{{ with .OutputFormats.Get "rss" -}} {{ printf `
+<link rel="%s" type="%s" href="%s" title="%s" />
+` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}}

themes/zone2/layouts/partials/nav.html

@@ -0,0 +1,12 @@
+<nav class="site-nav">
+  <a class="logo" href="{{ .Site.BaseURL }}">
+    <img src="/img/Chaoszone.svg" />
+  </a>
+  <ul class="main-menu">
+    {{ range.Site.Menus.main }}
+    <li>
+      <a href="{{ .URL }}">{{ .Name }}</a>
+    </li>
+    {{ end }}
+  </ul>
+</nav>

themes/zone2/static/css/style.css

@@ -0,0 +1,70 @@
+:root {
+	--bg-color: #841205;
+	--hl-color: #A72119;
+	--menu-font-color: white;
+	--font-color: #430C08;
+	--box-bg: #ece2d5;
+	--main-font: 'Cubellan';
+}
+
+@font-face {
+  font-family: 'Cubellan';
+  src: url('../font/Cubellan.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+html {
+	background-color: var(--bg-color);
+	color: var(--font-color);
+	font-family: var(--main-font);
+	font-size: 20pt;
+}
+
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+}
+
+.site-nav {
+	border-right: 2px solid var(--box-bg);
+	
+}
+
+.logo {
+	display: block;
+	padding: clamp(1em, 3vw, 3em);
+	border-bottom: 2px solid var(--box-bg);
+}
+
+.main-menu {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.main-menu > li {
+	margin: 0;
+	padding: 0;
+}
+
+.main-menu > li > a {
+	display: block;
+	padding: clamp(0.5em, 1.5vw, 1.5em);
+	color: var(--menu-font-color);
+	text-decoration: none;
+	border-bottom: 2px solid var(--box-bg);
+}
+
+.content {
+	margin-top: 3rem;
+	border-top: 2px solid var(--box-bg);
+	padding: clamp(1em, 3vw, 3em);
+	background-color: var(--box-bg);
+}

themes/zone2/theme.toml

@@ -0,0 +1,31 @@
+name = 'Theme name'
+license = 'MIT'
+licenselink = 'https://github.com/owner/repo/LICENSE'
+description = 'Theme description'
+
+# The home page of the theme, where the source can be found
+homepage = 'https://github.com/owner/repo'
+
+# If you have a running demo of the theme
+demosite = 'https://owner.github.io/repo'
+
+# Taxonomy terms
+tags = ['blog', 'company']
+features = ['some', 'awesome', 'features']
+
+# If the theme has multiple authors
+authors = [
+  {name = 'Name of author', homepage = 'Website of author'},
+  {name = 'Name of author', homepage = 'Website of author'}
+]
+
+# If the theme has a single author
+[author]
+  name = 'Your name'
+  homepage = 'Your website'
+
+# If porting an existing theme
+[original]
+  author = 'Name of original author'
+  homepage = 'Website of original author'
+  repo = 'https://github.com/owner/repo'

themes/zone3/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

themes/zone3/README.md

@@ -0,0 +1,7 @@
+# Theme Name
+
+## Features
+
+## Installation
+
+## Configuration

themes/zone3/archetypes/default.md

@@ -0,0 +1,5 @@
++++
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+date = {{ .Date }}
+draft = true
++++

themes/zone3/assets/css/main.css

@@ -0,0 +1,22 @@
+body {
+  color: #222;
+  font-family: sans-serif;
+  line-height: 1.5;
+  margin: 1rem;
+  max-width: 768px;
+}
+
+header {
+  border-bottom: 1px solid #222;
+  margin-bottom: 1rem;
+}
+
+footer {
+  border-top: 1px solid #222;
+  margin-top: 1rem;
+}
+
+a {
+  color: #00e;
+  text-decoration: none;
+}

themes/zone3/assets/js/main.js

@@ -0,0 +1 @@
+console.log('This site was generated by Hugo.');

themes/zone3/hugo.toml

@@ -0,0 +1,28 @@
+baseURL = 'https://example.org/'
+languageCode = 'en-us'
+title = 'My New Hugo Site'
+
+[[menus.main]]
+name = 'Home'
+pageRef = '/'
+weight = 10
+
+[[menus.main]]
+name = 'Members'
+pageRef = ''
+weight = 20
+
+[[menus.main]]
+name = 'Projects'
+pageRef = ''
+weight = 20
+
+[[menus.main]]
+name = 'Events'
+pageRef = ''
+weight = 20
+
+[module]
+  [module.hugoVersion]
+    extended = false
+    min = "0.116.0"

themes/zone3/layouts/404.html

@@ -0,0 +1,9 @@
+{{ partial "header.html" . }}
+
+<h1>Page Not Found</h1>
+
+<p>This page doesn't exist.</p>
+
+<p><a href="/">Go back to the home page</a></p>
+
+{{ partial "footer.html" . }}

themes/zone3/layouts/_default/list.html

@@ -0,0 +1,18 @@
+{{ partial "header.html" . }}
+
+<h1>{{ .Title }}</h1>
+
+{{ .Content }}
+
+{{ range.Data.Pages }}
+<article class="post-snippet">
+  <h3>
+    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+  </h3>
+	<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
+		{{ .Date.Format "January 2, 2006" }}
+	</time>
+</article>
+{{ end }}
+
+{{ partial "footer.html" . }}

themes/zone3/layouts/_default/single.html

@@ -0,0 +1,7 @@
+{{ partial "header.html" . }}
+
+<h1>{{ .Title }}</h1>
+
+{{ .Content }}
+
+{{ partial "footer.html" . }}

themes/zone3/layouts/baseof.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {{ partial "head.html" . }}
+  </head>
+
+  <body>
+
+    {{ partial "header.html" . }}
+
+    <main>
+    {{ block "main" . }}{{ end }}
+    </main>
+    
+    {{ partial "footer.html" . }}
+
+    <script src="./js/pong-game.js"></script>
+    <script src="./js/map.js"></script>
+    <script src="./js/script.js"></script>
+  </body>
+</html>

themes/zone3/layouts/index.html

@@ -0,0 +1,40 @@
+{{ define "main" }}
+    
+<section class="red">
+  <div class="container">
+    <pong-game></pong-game>    
+  </div>
+</section>
+
+<section class="container">
+  <h1>{{ .Title }}</h1>
+
+  {{ .Content }} 
+  </div>
+</section>
+
+<section class="container">
+  <h1>News</h1>
+  {{ $subpage := site.GetPage "news" }}
+  {{ with $subpage.Pages }}
+  <ul class="news-list">
+    {{ range . }}
+      <li>
+        <a href="{{ .RelPermalink }}">
+          <span>{{ .Date.Format "2006-01-02" }}</span>
+          {{ .Title }}</a>
+      </li>
+    {{ end }}
+  </ul>
+  {{ end }}
+
+  <a href="#">news archiv >>></a>
+</section>
+
+<section>
+  <chaos-map></chaos-map>
+</section>
+
+{{ end }}
+
+

themes/zone3/layouts/partials/footer.html

@@ -0,0 +1,16 @@
+<footer>
+	<div class="container">		
+		<div>
+			If you want to talk to the people behind ChaosZone, head on over to <a href="https://app.element.io/#/room/#chaoszone:matrix.eigenbaukombinat.de">our Matrix Channel</a>
+		</div>
+		
+		<div>
+			To contact the administrator of this site, write to <a href="mailto:website@chaoszone.cz" class="email">website@chaoszone.cz</a>.
+		</div>
+
+		<div>
+			Website design by ChaosZone Team<br/>
+			&copy; {{ dateFormat "2006" now }} {{ .Site.Title }}
+		</div>
+	</div>
+</footer>

themes/zone3/layouts/partials/head.html

@@ -0,0 +1,12 @@
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+<title>{{ if not .IsHome }}{{ .Title }} | {{ end }}{{ .Site.Title }}</title>
+
+<link rel="stylesheet" href="./css/style.css" type="text/css" media="all" />
+
+<link rel="icon" type="image/svg+xml" href="/img/Chaoszone.svg" />
+
+{{ with .OutputFormats.Get "rss" -}} {{ printf `
+<link rel="%s" type="%s" href="%s" title="%s" />
+` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}}

themes/zone3/layouts/partials/header.html

@@ -0,0 +1,17 @@
+<header>
+  <div class="container">
+    <a class="logo" href="{{ .Site.BaseURL }}">
+      Chaos <img src="./img/Chaoszone.svg" />Zone
+    </a>
+    <nav class="site-nav">
+      <ul class="main-menu">
+        {{ range.Site.Menus.main }}
+        <li>
+          <a href="{{ .URL }}">{{ .Name }}</a>
+        </li>
+        {{ end }}
+      </ul>
+    </nav>
+  </div>
+</header>
+

themes/zone3/static/css/style.css

@@ -0,0 +1,217 @@
+:root {
+	--bg-color: #841205;
+	--hl-color: #A72119;
+	--menu-font-color: white;
+	--font-color: #430C08;
+	--box-bg: #ece2d5;
+	--main-font: Arial, Helvetica, sans-serif;
+	--highlight-font: 'Cubellan';
+}
+
+@font-face {
+  font-family: 'Cubellan';
+  src: url('../font/Cubellan.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+html {
+	font-size: 1.5rem;
+}
+
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  background-color: var(--box-bg);
+  color: var(--font-color);
+  font-family: var(--main-font);
+}
+
+.container {
+	max-width: 60rem;
+	margin: 0 auto;
+	padding: clamp(.5rem, 2vw, 3rem);
+}
+
+section.red {
+	background-color: var(--bg-color);
+}
+
+main {
+	font-size: clamp(1rem, 2vw, 1.2rem);
+}
+
+h1, h2, h3, h4, h5 {
+	font-family: var(--highlight-font);
+}
+
+h1 {
+	font-size: clamp(2rem, 5vw, 3.5rem);
+	margin-bottom: 0.5rem;
+	margin-top: 1rem;
+}
+
+/** Header and Navigation ###################################################### **/
+
+header {
+	background-color: var(--bg-color);
+	border-bottom: 1px solid var(--box-bg);
+	font-family: var(--highlight-font);
+}
+
+header .container {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	padding-block: clamp(.5rem, 1.5vw, 1.7rem);
+}
+
+header .logo {
+	flex-grow: 1;
+	display: block;
+	text-decoration: none;
+	font-weight: bold;
+	font-size: clamp(1.5rem, 4vw, 3rem);
+	color: var(--box-bg);
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	flex-grow: 1;
+ 	justify-content: flex-start;
+}
+
+header .site-nav {
+	flex-grow: 1;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+}
+
+.logo img {
+	height: clamp(1.5rem, 4vw, 3rem);
+	margin: .5rem;
+}
+
+.main-menu {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+.main-menu > li {
+	margin: 0;
+	padding: 0;
+}
+
+.main-menu > li > a {
+	display: block;
+	padding-inline: clamp(0.5em, 1.5vw, 1.5em);
+	padding-block: 0.2rem;
+	color: var(--menu-font-color);
+	text-decoration: none;
+}
+
+/* landscape view */
+@media (orientation: portrait) {
+	header .logo {
+		justify-content:center;
+	}
+
+	header .site-nav {
+		justify-content:center;
+	}
+}
+
+/** footer ###################################################### **/
+
+footer {
+	background-color: var(--bg-color);
+	color: var(--box-bg);
+	padding: 1rem 0;
+}
+
+footer > .container {
+	display: flex;
+	justify-content: space-between;
+	gap: 2rem;
+}
+
+footer > .container > div {
+	flex-basis: 25%;
+}
+
+
+footer > .container > div:last-child {
+	flex-basis: auto;
+}
+
+.footer-menu {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.footer-menu  a {
+	color: var(--box-bg);
+	text-decoration: none;
+}
+
+@media (orientation: portrait) {
+	footer > .container {
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		gap: 0.5rem;
+	}
+	
+	footer > .container > div {
+		flex-basis: auto;
+		margin-bottom: 1rem;
+	}
+}
+
+/** other ###################################################### **/
+
+
+pong-game {
+	width: 100%;
+	height: auto;
+	margin: 0 auto;
+	display: block;
+}
+
+.news-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	text-decoration: none;
+}
+
+.news-list li a {
+	display: block;
+	margin-bottom: 0.5rem;
+	background-color: var(--hl-color);
+	color: var(--menu-font-color);
+	text-decoration: none;
+	padding: 0.5rem;
+}
+
+.news-list li a:hover {
+	background-color: var(--bg-color);
+}
+
+.news-list li a span {
+	display: block;
+	font-size: 0.7em;
+	margin-bottom: 0.3em;
+}
+
+

themes/zone3/static/js/map.js

@@ -0,0 +1,176 @@
+async function initMap(containerId, mapStyleUrl) {
+  return new Promise((resolve, reject) => {
+    const map = new maplibregl.Map({
+      style: mapStyleUrl,
+      center: [12.318427099380749, 51.323676093687546],
+      zoom: 7,
+      container: containerId,
+    });
+    map.on("load", () => {
+      addImages(map);
+      addEvents(map);
+      resolve(map);
+    });
+  });
+}
+
+
+async function displaySpacesLayer(spaces, map) {
+  const spaceFeatures = [];
+  const bounds = new maplibregl.LngLatBounds();
+
+  spaces.forEach((space, idx) => {
+    if (
+      !space.data ||
+      !space.data.ext_habitat ||
+      space.data.ext_habitat.toLowerCase() != "chaoszone"
+    ) {
+      return;
+    }
+
+    const open = space.data.state && space.data.state.open;
+
+    spaceFeatures.push({
+      type: "Feature",
+      properties: {
+        space: space.data,
+        icon: "custom-marker" + (open ? "-green" : ""),
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [space.data.location.lon, space.data.location.lat],
+      },
+    });
+
+    bounds.extend(
+      new maplibregl.LngLat(space.data.location.lon, space.data.location.lat)
+    );
+  });
+
+  map.addSource("points", {
+    type: "geojson",
+    data: {
+      type: "FeatureCollection",
+      features: spaceFeatures,
+    },
+  });
+
+  // Add a symbol layer
+  map.addLayer({
+    id: "symbols",
+    type: "symbol",
+    source: "points",
+    filter: ["!", ["has", "point_count"]],
+    layout: {
+      "icon-image": "{icon}",
+      "icon-size": 0.4,
+      "icon-allow-overlap": true,
+    },
+  });
+
+  map.fitBounds(bounds, { padding: 100, animate: false });
+
+  map.getCanvas().style.cursor = "default";
+
+  map.scrollZoom.disable();
+}
+
+
+async function addImages(map) {
+  map
+    .loadImage("./img/marker_small_white.png?l=1")
+    .then((image) => map.addImage("custom-marker", image.data));
+  map
+    .loadImage("./img/marker_small_green.png?l=1")
+    .then((image) => map.addImage("custom-marker-green", image.data));
+}
+
+
+function addEvents(map) {
+  map.on("mouseenter", "symbols", () => {
+    map.getCanvas().style.cursor = "pointer";
+  });
+
+  map.on("mouseleave", "symbols", () => {
+    map.getCanvas().style.cursor = "default";
+  });
+
+   map.on("click", "symbols", (e) => {
+    const coordinates = e.features[0].geometry.coordinates.slice();
+    const space = JSON.parse(e.features[0].properties.space);
+    console.log(e.features[0]);
+
+    // Ensure that if the map is zoomed out such that multiple
+    // copies of the feature are visible, the popup appears
+    // over the copy being pointed to.
+    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+      coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+    }
+
+    const open = space.state && space.state.open;
+
+    let stateHtml = space.state
+      ? `<div>${open ? "geöffnet" : "gerade geschlossen"}</div>`
+      : "";
+
+    let html = `<div>
+              <div><strong>${space.space}</strong></div>
+              ${stateHtml}
+              <div><a href="${space.url}" target='_blank'>${space.url}</a></div>
+            </div>`;
+
+    new maplibregl.Popup().setLngLat(coordinates).setHTML(html).addTo(map);
+  });
+}
+
+class ChaosMap extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <link rel="stylesheet" href="https://map.chaoszone.cz/proxy/maplibre-gl/dist/maplibre-gl.css">
+            <script src="https://map.chaoszone.cz/proxy/maplibre-gl/dist/maplibre-gl.js"></script>
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    height: max(400px, 50vh);
+                    margin: 0;
+                }
+
+                #map {
+                    width: 100%;
+                    height: 100%;
+                }
+            </style>
+            <div id="map"></div>
+        `;
+
+        setTimeout(() => {
+            this.initMap();
+        }, 500);
+    }
+
+    async initMap() {
+        const map = await initMap(this.shadowRoot.getElementById('map'), './js/mapstyle.json');
+
+        // Fetch spaces data from the API
+        const response = await fetch('https://map.chaoszone.cz/spaceapi');
+        const data = await response.json();
+
+        await displaySpacesLayer(data, map);
+    }
+}
+
+const script = document.createElement('script');
+script.src = 'https://map.chaoszone.cz/proxy/maplibre-gl/dist/maplibre-gl.js';
+document.body.appendChild(script);
+
+customElements.define('chaos-map', ChaosMap);

themes/zone3/static/js/pong-game.js

@@ -0,0 +1,134 @@
+const chaoszoneArray = [
+  // Zeile 1: " ######  ##     ##    ###     #######   ######  ########  #######  ##    ## ######## "
+  [0,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,1,1,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1],
+  
+  // Zeile 2: "##    ## ##     ##   ## ##   ##     ## ##    ##      ##  ##     ## ###   ## ##       "
+  [1,1,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,0,0,1,1,0,1,1,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,1,0,0,0,0,0,1,1,0,1,1,1,0,0,0,1,1,0,1,1,0,0,0,0,0,0,0],
+  
+  // Zeile 3: "##       ##     ##  ##   ##  ##     ## ##           ##   ##     ## ####  ## ##       "
+  [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1,1,0,0,1,1,0,0,0,1,1,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,1,1,0,0,1,1,0,1,1,0,0,0,0,0,0,0],
+  
+  // Zeile 4: "##       ######### ##     ## ##     ##  ######     ##    ##     ## ## ## ## ######   "
+  [1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,0,1,1,1,1,1,1,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,0,0,0],
+  
+  // Zeile 5: "##       ##     ## ######### ##     ##       ##   ##     ##     ## ##  #### ##       "
+  [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,1,0,1,1,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,1,1,1,1,0,1,1,0,0,0,0,0,0,0],
+  
+  // Zeile 6: "##    ## ##     ## ##     ## ##     ## ##    ##  ##      ##     ## ##   ### ##       "
+  [1,1,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,1,1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,1,1,1,0,1,1,0,0,0,0,0,0,0],
+  
+  // Zeile 7: " ######  ##     ## ##     ##  #######   ######  ########  #######  ##    ## ######## "
+  [0,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,0,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1]
+];
+
+//register custom element
+class PongGame extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    --canvas-bg: inherit;
+                    --text-color: #ece2d5;
+                    --ball-color: #ece2d5;
+                    display: block;
+                    text-align: center;
+                    margin: 1rem 0;
+                }
+
+                :root {
+                --text-color: #ece2d5;
+                }
+
+                canvas {
+                    width: 100%;
+                    height: auto;
+                }
+            </style>
+            <canvas id="pongCanvas"></canvas>
+        `;
+
+        this.initGame();
+    }
+
+    initGame() {
+        const canvas = this.shadowRoot.getElementById('pongCanvas');
+        const ctx = canvas.getContext('2d');
+
+        console.log('Initializing Pong Game');
+
+        // set cancan inner dimanesion
+        canvas.width = 520;
+        canvas.height = 100;
+
+        // Game variables
+        let ballRadius = 2;
+        let x = canvas.width / 2;
+        let y = canvas.height - 30;
+        let dx = 2;
+        let dy = -2;
+
+        // Draw the ball
+        function draw() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.beginPath();
+            ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
+            ctx.fillStyle = 'var(--ball-color)';
+            ctx.fill();
+            ctx.closePath();
+
+            // Draw the ASCII art
+            ctx.font = '10px monospace';
+            ctx.fillStyle = '#ece2d5';
+            //set text color
+            for (let row = 0; row < chaoszoneArray.length; row++) {
+                for (let col = 0; col < chaoszoneArray[row].length; col++) {
+                    if (chaoszoneArray[row][col] === 1) {
+                        ctx.fillText('#', col * 6 + 10, row * 12 + 20);
+                    }
+                }
+            }
+        }
+
+        // Update the game state
+        function update() {
+            draw();
+
+            // Move the ball
+            x += dx;
+            y += dy;
+
+            // Bounce off walls
+            if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
+                dx = -dx;
+            }
+            if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
+                dy = -dy;
+            }
+
+            //detect collision with ASCII art and remove part of it
+            let col = Math.floor((x - 10) / 6);
+            let row = Math.floor((y - 20) / 12);
+            if (row >= 0 && row < chaoszoneArray.length && col >= 0 && col < chaoszoneArray[row].length) {
+                if (chaoszoneArray[row][col] === 1) {
+                    chaoszoneArray[row][col] = 0;
+                    dy = -dy; //bounce the ball
+                }
+            }
+
+            requestAnimationFrame(update);
+        }
+
+        update();
+    }
+}
+
+customElements.define('pong-game', PongGame);

themes/zone3/theme.toml

@@ -0,0 +1,31 @@
+name = 'Theme name'
+license = 'MIT'
+licenselink = 'https://github.com/owner/repo/LICENSE'
+description = 'Theme description'
+
+# The home page of the theme, where the source can be found
+homepage = 'https://github.com/owner/repo'
+
+# If you have a running demo of the theme
+demosite = 'https://owner.github.io/repo'
+
+# Taxonomy terms
+tags = ['blog', 'company']
+features = ['some', 'awesome', 'features']
+
+# If the theme has multiple authors
+authors = [
+  {name = 'Name of author', homepage = 'Website of author'},
+  {name = 'Name of author', homepage = 'Website of author'}
+]
+
+# If the theme has a single author
+[author]
+  name = 'Your name'
+  homepage = 'Your website'
+
+# If porting an existing theme
+[original]
+  author = 'Name of original author'
+  homepage = 'Website of original author'
+  repo = 'https://github.com/owner/repo'