ChaosZone/chaoszone.cz
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[ADD] Theme3

Browse Source
This commit is contained in:
Falk Mueller 2025-10-27 22:43:17 +01:00
parent 03bcd0ad74
commit 1bbc3775b6
23 changed files with 614 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -13,3 +13,12 @@ The source files for the <https://chaoszone.cz> website.
- local: ```hugo```
## todo
- eigene cursor und menü hover
- inspiration: https://eloyb.design/
- ascii art: https://designs.events.ccc.de/Hackover_2017/Hackover_2017-Visual.png
- play section
- game of live
- raindrop: https://experiments.p5aholic.me/day/005/
- pong: https://designs.events.ccc.de/GPN8/GPN8-Visual.png

2
hugo.yaml
View File

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

21
themes/zone3/LICENSE Normal file
View File

@ -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.

7
themes/zone3/README.md Normal file
View File

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

5
themes/zone3/archetypes/default.md Normal file
View File

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

22
themes/zone3/assets/css/main.css Normal file
View File

@ -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;
}

1
themes/zone3/assets/js/main.js Normal file
View File

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

28
themes/zone3/hugo.toml Normal file
View File

@ -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"

9
themes/zone3/layouts/404.html Normal file
View File

@ -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" . }}

18
themes/zone3/layouts/_default/list.html Normal file
View File

@ -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" . }}

7
themes/zone3/layouts/_default/single.html Normal file
View File

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

19
themes/zone3/layouts/baseof.html Normal file
View File

@ -0,0 +1,19 @@
<!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/script.js"></script>
</body>
</html>

24
themes/zone3/layouts/index.html Normal file
View File

@ -0,0 +1,24 @@
{{ 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>
...
</section>
{{ end }}

16
themes/zone3/layouts/partials/footer.html Normal file
View File

@ -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>

12
themes/zone3/layouts/partials/head.html Normal file
View File

@ -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 -}}

17
themes/zone3/layouts/partials/header.html Normal file
View File

@ -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>

179
themes/zone3/static/css/style.css Normal file
View File

@ -0,0 +1,179 @@
: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 {
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: 1.2rem;
}
/** Header and Navigation ###################################################### **/
header {
background-color: var(--bg-color);
border-bottom: 1px solid var(--box-bg);
}
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: 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;
}

BIN
themes/zone3/static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
themes/zone3/static/font/Cubellan.ttf Normal file
View File

Binary file not shown.

54
themes/zone3/static/img/Chaoszone.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
themes/zone3/static/img/Chaoszone_crest.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 180 KiB

134
themes/zone3/static/js/script.js Normal file
View File

@ -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);

31
themes/zone3/theme.toml Normal file
View File

@ -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'