diff --git a/README.md b/README.md index 103d32e..17c09d3 100644 --- a/README.md +++ b/README.md @@ -13,3 +13,12 @@ The source files for the 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 \ No newline at end of file diff --git a/hugo.yaml b/hugo.yaml index 1f822ad..cd8d1be 100644 --- a/hugo.yaml +++ b/hugo.yaml @@ -1,4 +1,4 @@ baseURL: https://chaoszone.cz/ languageCode: en-us title: ChaosZone -theme: zone +theme: zone3 diff --git a/themes/zone3/LICENSE b/themes/zone3/LICENSE new file mode 100644 index 0000000..8aa2645 --- /dev/null +++ b/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. diff --git a/themes/zone3/README.md b/themes/zone3/README.md new file mode 100644 index 0000000..7cec74e --- /dev/null +++ b/themes/zone3/README.md @@ -0,0 +1,7 @@ +# Theme Name + +## Features + +## Installation + +## Configuration diff --git a/themes/zone3/archetypes/default.md b/themes/zone3/archetypes/default.md new file mode 100644 index 0000000..c6f3fce --- /dev/null +++ b/themes/zone3/archetypes/default.md @@ -0,0 +1,5 @@ ++++ +title = '{{ replace .File.ContentBaseName "-" " " | title }}' +date = {{ .Date }} +draft = true ++++ diff --git a/themes/zone3/assets/css/main.css b/themes/zone3/assets/css/main.css new file mode 100644 index 0000000..166ade9 --- /dev/null +++ b/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; +} diff --git a/themes/zone3/assets/js/main.js b/themes/zone3/assets/js/main.js new file mode 100644 index 0000000..e2aac52 --- /dev/null +++ b/themes/zone3/assets/js/main.js @@ -0,0 +1 @@ +console.log('This site was generated by Hugo.'); diff --git a/themes/zone3/hugo.toml b/themes/zone3/hugo.toml new file mode 100644 index 0000000..8c7d66a --- /dev/null +++ b/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" diff --git a/themes/zone3/layouts/404.html b/themes/zone3/layouts/404.html new file mode 100644 index 0000000..9b100d8 --- /dev/null +++ b/themes/zone3/layouts/404.html @@ -0,0 +1,9 @@ +{{ partial "header.html" . }} + +

Page Not Found

+ +

This page doesn't exist.

+ +

Go back to the home page

+ +{{ partial "footer.html" . }} diff --git a/themes/zone3/layouts/_default/list.html b/themes/zone3/layouts/_default/list.html new file mode 100644 index 0000000..b4d94d4 --- /dev/null +++ b/themes/zone3/layouts/_default/list.html @@ -0,0 +1,18 @@ +{{ partial "header.html" . }} + +

{{ .Title }}

+ +{{ .Content }} + +{{ range.Data.Pages }} +
+

+ {{ .Title }} +

+ +
+{{ end }} + +{{ partial "footer.html" . }} diff --git a/themes/zone3/layouts/_default/single.html b/themes/zone3/layouts/_default/single.html new file mode 100644 index 0000000..a903ad6 --- /dev/null +++ b/themes/zone3/layouts/_default/single.html @@ -0,0 +1,7 @@ +{{ partial "header.html" . }} + +

{{ .Title }}

+ +{{ .Content }} + +{{ partial "footer.html" . }} diff --git a/themes/zone3/layouts/baseof.html b/themes/zone3/layouts/baseof.html new file mode 100644 index 0000000..2fc4e29 --- /dev/null +++ b/themes/zone3/layouts/baseof.html @@ -0,0 +1,19 @@ + + + + {{ partial "head.html" . }} + + + + + {{ partial "header.html" . }} + +
+ {{ block "main" . }}{{ end }} +
+ + {{ partial "footer.html" . }} + + + + \ No newline at end of file diff --git a/themes/zone3/layouts/index.html b/themes/zone3/layouts/index.html new file mode 100644 index 0000000..0aa8967 --- /dev/null +++ b/themes/zone3/layouts/index.html @@ -0,0 +1,24 @@ +{{ define "main" }} + +
+
+ +
+
+ +
+

{{ .Title }}

+ + {{ .Content }} + +
+ +
+

News

+ ... + +
+ +{{ end }} + + diff --git a/themes/zone3/layouts/partials/footer.html b/themes/zone3/layouts/partials/footer.html new file mode 100644 index 0000000..dd33fc8 --- /dev/null +++ b/themes/zone3/layouts/partials/footer.html @@ -0,0 +1,16 @@ + diff --git a/themes/zone3/layouts/partials/head.html b/themes/zone3/layouts/partials/head.html new file mode 100644 index 0000000..f5efcc8 --- /dev/null +++ b/themes/zone3/layouts/partials/head.html @@ -0,0 +1,12 @@ + + + +{{ if not .IsHome }}{{ .Title }} | {{ end }}{{ .Site.Title }} + + + + + +{{ with .OutputFormats.Get "rss" -}} {{ printf ` + +` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}} diff --git a/themes/zone3/layouts/partials/header.html b/themes/zone3/layouts/partials/header.html new file mode 100644 index 0000000..574dcf5 --- /dev/null +++ b/themes/zone3/layouts/partials/header.html @@ -0,0 +1,17 @@ +
+
+ + +
+
+ diff --git a/themes/zone3/static/css/style.css b/themes/zone3/static/css/style.css new file mode 100644 index 0000000..93d2739 --- /dev/null +++ b/themes/zone3/static/css/style.css @@ -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; +} + + diff --git a/themes/zone3/static/favicon.ico b/themes/zone3/static/favicon.ico new file mode 100644 index 0000000..67f8b77 Binary files /dev/null and b/themes/zone3/static/favicon.ico differ diff --git a/themes/zone3/static/font/Cubellan.ttf b/themes/zone3/static/font/Cubellan.ttf new file mode 100644 index 0000000..0ac914a Binary files /dev/null and b/themes/zone3/static/font/Cubellan.ttf differ diff --git a/themes/zone3/static/img/Chaoszone.svg b/themes/zone3/static/img/Chaoszone.svg new file mode 100644 index 0000000..983a720 --- /dev/null +++ b/themes/zone3/static/img/Chaoszone.svg @@ -0,0 +1,54 @@ + + + + + + + + image/svg+xml + + + + + + + diff --git a/themes/zone3/static/img/Chaoszone_crest.png b/themes/zone3/static/img/Chaoszone_crest.png new file mode 100644 index 0000000..b16b261 Binary files /dev/null and b/themes/zone3/static/img/Chaoszone_crest.png differ diff --git a/themes/zone3/static/js/script.js b/themes/zone3/static/js/script.js new file mode 100644 index 0000000..c7709b7 --- /dev/null +++ b/themes/zone3/static/js/script.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 = ` + + + `; + + 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); \ No newline at end of file diff --git a/themes/zone3/theme.toml b/themes/zone3/theme.toml new file mode 100644 index 0000000..3ba3164 --- /dev/null +++ b/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'