init

.gitattributes

@@ -0,0 +1,16 @@
+# Normalize EOL for all files that Git considers text files.
+* text=auto eol=lf
+
+#Setting up lfs for relevant files
+##Sound files
+*.ogg filter=lfs diff=lfs merge=lfs -text
+*.wav filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text
+## Images
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+## Videos
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.ogv filter=lfs diff=lfs merge=lfs -text
+## Fonts
+*.ttf filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,10 @@
+dev/
+src/public/
+.hugo_build.lock
+
+# IDE
+.vscode/
+
+*.png~
+*.jpg~
+*.bmp~

readme.md

@@ -0,0 +1,30 @@
+# SIWA - Game Site
+
+The following repository stores SIWA game site.  
+
+Requirements:  
+
+- Hugo 0.158.0
+
+## Environment setup
+
+You can put any environment-specific file in the `./dev` folder as it has been added to the `.gitignore` file.  
+
+You will want to copy Hugo executable to `./dev/hugo` folder and add it to your `PATH` environment variable.  
+
+If using VS Code or similar, this can be achieved by opening your workspace settings and adding the following content:  
+
+```json
+"terminal.integrated.env.<platform>": {
+        "PATH": "${env:PATH};${workspaceFolder}/dev/hugo"
+    }
+}
+```
+
+where `<platform>` must be replaced by `windows`, `linux`, or `macos`.
+
+```
+cd src
+hugo server --disableFastRender --ignoreCache
+hgo build
+```

src/archetypes/default.md

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

src/content/about.md

@@ -0,0 +1,3 @@
+D'hostiles monstres de métal ont atterri sur les terres de la paisible communauté des Asmah.
+
+Revêt le masque du sacrifié et prend le chemin de la ville pour t'offrir au Dieu-Roi et à son culte solaire, seule force à même de contrer la menace mécanique.

src/content/explore.md

@@ -0,0 +1,6 @@
+---
+titles:
+    - "PROGRESSE"
+    - "JUSQU'À TA PROPRE FIN"
+---
+Explore grottes, champs et forêts jusqu'au lieu du sacrifice. Suis les sources d'eau fertile et résous des puzzles environnementaux dans une aventure contemplative teintée d'éléments horrifiques.

src/content/features/eveille.md

@@ -0,0 +1,8 @@
+---
+titles:
+    - "ÉVEILLE-TOI"
+    - "AU MONDE DES ESPRITS"
+image: "/images/thumbnail_Esprit.png"
+order: 2
+---
+Écoute les esprits qui occupent les ténèbres de l'Inframonde, décrypte leur langage et apprend à réenchanter le monde grâce à la puissance  du rituel.

src/content/features/renaitre.md

@@ -0,0 +1,8 @@
+---
+titles:
+    - "FAIT RENAÎTRE"
+    - "LES MYTHES OUBLIÉS"
+image: "/images/thumbnail_Mythe.png"
+order: 1
+---
+Renoue avec les civilisations qui ont vécu sur tes terres en découvrant des secrets et ruines anciennes. Apporte la lumière sur le mythe originel pour empêcher aux puissants de faire basculer le cours de l'histoire.

src/content/trouve.md

@@ -0,0 +1,6 @@
+---
+titles:
+    - "TROUVE LES FAILLES"
+    - "DES CRÉATURES DE MÉTAL"
+---
+Infiltre-toi dans les entrailles mécaniques de tes ennemis. Déjoue leurs protocoles et manipule leurs circuits pour provoquer leur destruction.

src/data/configuration.toml

@@ -0,0 +1,136 @@
+# Info
+
+[info]
+[info.logo]
+image = "/images/tampon.png"
+top = 20
+left = 20
+width = 100
+height = 85
+
+[info.company]
+name = "Cute Little Monsters"
+copyrightYear = "2026"
+
+[info.developedBy]
+name = "CLeM"
+url = ""
+
+[info.designedBy]
+name = "CLeM"
+url = ""
+
+# Global
+
+[global]
+backgroundColor = "gray"
+scripts = [
+    "extra"
+]
+styles = [
+    "extra"
+]
+
+[global.font]
+url = "/fonts/JosefinSans-VariableFont_wght.ttf"
+color = "white"
+
+[global.button]
+padding = 1
+
+[global.button.default]
+image = ""
+color = "transparent"
+
+[global.button.hover]
+image = ""
+color = ""
+
+[global.button.pressed]
+image = ""
+color = ""
+
+[global.button.large]
+padding = 1
+
+# Footer
+
+[footer]
+logo = ""
+height = 400
+
+[footer.background]
+image = "/images/thumbnail_Roi_cropped.jpg"
+colorFrom = ""
+colorTo = ""
+
+# Menu
+
+[menu]
+height = 180
+width = 650
+backgroundImage = "/images/header.png"
+backgroundColor = ""
+centered = false
+groups = [
+    "navigation"
+]
+
+[[menu.entries]]
+text = ""
+group = "navigation"
+link = "#overview"
+[menu.entries.icon]
+image = "/images/icons/eye.png"
+width = 60
+height = 40
+
+[[menu.entries]]
+text = "À PROPOS"
+icon = ""
+group = "navigation"
+link = "#about"
+
+[[menu.entries]]
+text = "LE JEU"
+icon = ""
+group = "navigation"
+link = "#explore"
+
+[[menu.entries]]
+text = "GALERIE"
+icon = ""
+group = "navigation"
+link = "#gallery"
+
+[[menu.entries]]
+text = "ITCH"
+icon = ""
+group = "navigation"
+link = "https://cutelittlemonsters.itch.io/siwa"
+
+# Sections
+
+[[sections]]
+id = "overview"
+type = "logo"
+
+[[sections]]
+id = "about"
+type = "logo-with-text"
+
+[[sections]]
+id = "explore"
+type = "simple"
+
+[[sections]]
+id = "features"
+type = "ping-pong"
+
+[[sections]]
+id = "trouve"
+type = "simple"
+
+[[sections]]
+id = "gallery"
+type = "gallery"

src/data/sections/about.toml

@@ -0,0 +1,17 @@
+height = 100
+shadow = true
+shadowOpacity = 0.8
+content = "about.md"
+zIndex = 20
+padding = 40
+
+[logo]
+image = "/images/logos/SIWA_full.png"
+textBefore = ""
+textAfter = ""
+
+[background]
+image = "/images/bg1.png"
+colorFrom = ""
+colorTo = ""
+scale = 1.1

src/data/sections/explore.toml

@@ -0,0 +1,5 @@
+content = "explore.md"
+parallax = true
+
+[background]
+image = "/images/thumbnail_Explore.png"

src/data/sections/features.toml

@@ -0,0 +1,12 @@
+contentFolder = "features"
+height = 20
+shadow = true
+shadowOpacity = 0.8
+padding = 20
+zIndex = 20
+
+[background]
+image = "/images/bg_mythe.png"
+colorFrom = ""
+colorTo = ""
+scale = 1.05

src/data/sections/gallery.toml

@@ -0,0 +1,29 @@
+title = "GALERIE"
+contentFolder = "gallery"
+height = 100
+shadow = true
+shadowOpacity = 0.8
+padding = 0
+fontColor = "white"
+zIndex = 20
+
+[container]
+location = "start"
+
+[innerTopRibbon]
+height = 25
+left = "/images/separateur.png"
+right = "/images/separateur.png"
+middle = [
+    "/images/ribbon-eye.png",
+]
+
+[bottomRibbon]
+height = 25
+image = "/images/separateur.png"
+
+[background]
+image = "/images/bg2.png"
+colorFrom = ""
+colorTo = ""
+scale = 1.05

src/data/sections/overview.toml

@@ -0,0 +1,27 @@
+height = 100
+video = "/videos/bg_header.mp4"
+parallax = true
+
+[logo]
+image = "/images/logos/SIWA_full.png"
+width = 80
+
+[background]
+image = ""
+colorFrom = ""
+colorTo = ""
+
+[[buttons]]
+text = "SOUTENIR"
+icon = ""
+link = "https://docs.getgrist.com/forms/mwCShmbmmgMnq3gL32brmV/24"
+fontColor = ""
+color = ""
+
+[[buttons]]
+text = "JOUER"
+icon = ""
+link = "https://cutelittlemonsters.itch.io/siwa"
+fontColor = ""
+color = ""
+

src/data/sections/transition1.toml

@@ -0,0 +1,7 @@
+height = 40
+parallax = true
+
+[background]
+image = "/images/thumbnail_Roi_cropped.jpg"
+colorFrom = ""
+colorTo = ""

src/data/sections/trouve.toml

@@ -0,0 +1,5 @@
+content = "trouve.md"
+parallax = true
+
+[background]
+image = "/images/bg3.png"

src/hugo.toml

@@ -0,0 +1,4 @@
+baseURL = 'https://example.org/'
+locale = 'en-us'
+title = 'SIWA'
+theme = 'siwa'

src/static/css/extra.css

@@ -0,0 +1,141 @@
+.large-button .button-arrow {
+    display: inline-block;
+    width: 24px;
+    height: 20px;
+    background-image: url("/images/Fleche_changement_de_zone.png");
+    background-size: 100% auto;
+    background-position: center center;
+    background-repeat: no-repeat;
+    rotate: 90deg;
+    margin-left: 10px;
+    translate: 0px 0px;
+    transition: all 0.25s ease;
+}
+
+.large-button:hover .button-arrow {
+    translate: 10px 0px;
+}
+
+.button,
+.large-button {
+    border-style: solid;
+    border-image: url("/images/button.png") 28 28 28 28 repeat repeat;
+}
+
+.large-button {
+    border-width: 25px 25px 25px 25px;
+}
+
+.button {
+    border-width: 15px 15px 15px 15px;
+}
+
+.sprite {
+    position: absolute;
+    z-index: 50;
+}
+
+#menu li {
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+#spirit-fish {
+    top: -154px;
+    left: -174px;
+    rotate: 45deg;
+    opacity: 0.2;
+}
+
+#spirit-doggo {
+    top: calc(100% - 140px);
+    left: calc(100% - 185px);
+    rotate: 0deg;
+    opacity: 0.2;
+}
+
+#spirit-butterfly-1 {
+    top: -35px;
+    left: calc(100% - 128px);
+    rotate: -20deg;
+    opacity: 0.2;
+    scale: 0.7;
+}
+
+#spirit-snow-1 {
+    top: -2px;
+    left: 26px;
+    rotate: 124deg;
+    opacity: 0.2;
+}
+
+#spirit-snow-2 {
+    top: 19px;
+    left: 144px;
+    rotate: 26deg;
+    opacity: 0.1;
+    scale: 0.8;
+}
+
+#spirit-bird {
+    top: -100px;
+    left: calc(100% - 281px);
+    rotate: 0deg;
+    opacity: 0.2;
+    scale: 0.8;
+}
+
+#spirit-large-fish {
+    top: 409px;
+    left: calc(100% - 254px);
+    rotate: -4deg;
+    opacity: 0.2;
+    scale: 0.8;
+}
+
+#spirit-snow-3 {
+    top: calc(100% - 570px);
+    left: 54px;
+    rotate: 6deg;
+    opacity: 0.1;
+    scale: 1;
+}
+
+#spirit-butterfly-2 {
+    top: calc(100% - 142px);
+    left: 64px;
+    rotate: -156deg;
+    opacity: 0.1;
+    scale: 1.5;
+}
+
+#tree-1 {
+    top: calc(100% - 752px);
+    left: calc(100% - 322px);
+    rotate: 0deg;
+    scale: 0.7;
+    z-index: 0;
+}
+
+#tree-2 {
+    top: calc(100% - 750px);
+    left: -422px;
+    rotate: -24deg;
+    scale: 0.7;
+    z-index: 0;
+    transform: scaleX(-1);
+}
+
+.arrow {
+    display: inline-block;
+    background-size: contain;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-image: url("/images/ribbon-arrows.png");
+    padding: 17px;
+    rotate: 90deg;
+}
+
+#menu {
+    background-position-y: -38px;
+}

src/static/scripts/extra.js

@@ -0,0 +1,36 @@
+function addSpriteOnSection(section, id, url) {
+    const spirit = document.createElement("img");
+    spirit.src = url;
+    spirit.id = id;
+    spirit.classList.add("sprite");
+    section.appendChild(spirit);
+}
+
+const buttons = document.querySelectorAll(".button, .large-button");
+
+for(const button of buttons) {
+    button.innerHTML += "<span class='button-arrow'></span>";
+}
+
+const gallery = document.querySelector("#gallery");
+addSpriteOnSection(gallery, "spirit-fish", "/images/spirits/9.png");
+addSpriteOnSection(gallery, "spirit-doggo", "/images/spirits/10.png");
+addSpriteOnSection(gallery, "spirit-butterfly-1", "/images/spirits/8.png");
+
+const features = document.querySelector("#features");
+addSpriteOnSection(features, "spirit-snow-1", "/images/spirits/1.png");
+addSpriteOnSection(features, "spirit-snow-2", "/images/spirits/1.png");
+addSpriteOnSection(features, "spirit-bird", "/images/spirits/5.png");
+addSpriteOnSection(features, "spirit-large-fish", "/images/spirits/2.png");
+addSpriteOnSection(features, "spirit-snow-3", "/images/spirits/3.png");
+addSpriteOnSection(features, "spirit-butterfly-2", "/images/spirits/4.png");
+
+const overview = document.querySelector("#overview");
+addSpriteOnSection(overview, "tree-1", "/images/tree.png");
+addSpriteOnSection(overview, "tree-2", "/images/tree.png");
+
+const titles = document.querySelectorAll("div > h1:first-child");
+
+for(const title of titles) {
+    title.innerHTML = "<span class='arrow'></span>" + title.innerHTML;
+}

src/themes/siwa/archetypes/default.md

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

src/themes/siwa/assets/css/components/footer.css

@@ -0,0 +1,37 @@
+footer {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    min-height: 200px;
+    position: relative;
+    z-index:10;
+}
+
+#footer-logo {
+    flex: 0 0 70px;
+}
+
+#footer-logo>img {
+    max-height: 70px;
+    margin-top: -35px;
+}
+
+#footer-logos {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#footer-logos>a {
+    margin: 10px;
+}
+
+#footer-logos>a>img {
+    max-width: 200px;
+    max-height: 70px;
+}
+
+#footer-credits {
+    min-height: 50px;
+}

src/themes/siwa/assets/css/components/gallery.css

@@ -0,0 +1,62 @@
+.gallery-container {
+    text-align: center;
+}
+
+.gallery-container>.page-container:not(:first-child) {
+    display: none;
+}
+
+.gallery-container>.page-container>img {
+    width: 20%;
+    min-width: 200px;
+    margin: 0.5%;
+    aspect-ratio: 16/9;
+    object-fit: cover;
+    cursor: pointer;
+}
+
+.gallery-container>.page-container>.empty {
+    width: 20%;
+    min-width: 200px;
+    margin: 0.5%;
+    aspect-ratio: 16/9;
+    display: inline-block;
+    background: #222;
+}
+
+.gallery-container .pages {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.gallery-container .pages>.page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    margin: 5px;
+    cursor: pointer;
+}
+
+.gallery-viewer {
+    position: fixed;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    transition: all 0.5s ease;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    top: 0;
+    left: 0;
+    visibility: hidden;
+}
+
+.gallery-viewer.opened {
+    opacity: 1;
+    visibility: visible;
+}

src/themes/siwa/assets/css/components/menu.css

@@ -0,0 +1,33 @@
+#logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#logo>img {
+    width: 100%;
+    height: 100%;
+}
+
+#menu a {
+    text-decoration: none;
+}
+
+#menu>ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+}
+
+#menu>ul>li {
+    padding: 16px;
+    text-align: center;
+    display: inline-block;
+}
+
+#menu>ul>li>a {
+    display: flex;
+    align-items: center;
+}

src/themes/siwa/assets/css/components/ping-pong.css

@@ -0,0 +1,39 @@
+.ping-pong {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 80px;
+    margin-bottom: 80px;
+}
+
+.ping-pong:nth-child(2n) {
+    flex-flow: row-reverse;
+    text-align: right;
+}
+
+.ping-pong-image-container {
+    position: relative;
+}
+
+.ping-pong-image-container::after {
+    box-shadow: inset 0px 0px 0px 16px rgba(0, 0, 0, 0.3);
+    content: '';
+    display: block;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+.ping-pong-image-container>img {
+    aspect-ratio: 16/9;
+    object-fit: cover;
+    width: 100%;
+}
+
+.ping-pong>div {
+    margin-left: 50px;
+    margin-right: 50px;
+    max-width: 50%;
+}

src/themes/siwa/assets/css/components/section.css

@@ -0,0 +1,48 @@
+.ribbon {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    width:100%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.ribbon-part {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+.ribbon-part>img {
+    width: 100%;
+    object-fit: fill;
+}
+
+.section-background-image {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1;
+}
+
+.section-background-color {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -2;
+}
+
+.section-video-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -3;
+}
+
+.section-video-container > video {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 16/9;
+}

src/themes/siwa/assets/css/main.css

@@ -0,0 +1,113 @@
+@import "components/ping-pong.css";
+@import "components/gallery.css";
+@import "components/menu.css";
+@import "components/footer.css";
+@import "components/section.css";
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    min-width: 800px;
+}
+
+html {
+    overflow-x: auto;
+}
+
+body {
+    font-family: "main-font", sans-serif;
+    position: relative;
+    z-index: -1000;
+    overflow-x: hidden;
+}
+
+h1 {
+    font-size: 45px;
+    font-weight: 400;
+}
+
+.button,
+.large-button {
+    text-decoration: none;
+    margin: 5px;
+    text-align: center;
+    background-color: black;
+    color: white;
+}
+
+.button {
+    padding: 10px;
+}
+
+.button-icon {
+    display: inline-block;
+    background-size: contain;
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+
+.large-button {
+    padding: 20px;
+    font-size: 28px;
+}
+
+.mw-m {
+    min-width: 100px;
+}
+
+.mw-l {
+    min-width: 200px;
+}
+
+.fs-xs {
+    font-size: 10px;
+}
+
+.fs-s {
+    font-size: 14px;
+}
+
+.fs-m {
+    font-size: 20px;
+}
+
+.fs-l {
+    font-size: 28px;
+}
+
+.fs-xl {
+    font-size: 40px;
+}
+
+.lh-m {
+    line-height: 50px;
+}
+
+.ta-l {
+    text-align: left;
+}
+
+.ta-c {
+    text-align: center;
+}
+
+.tt-u {
+    text-transform: uppercase;
+}
+
+.f-1 {
+    flex: 1;
+}
+
+.m-0 {
+    margin: 0;
+}
+
+.flip-h {
+    transform: scale(-1, 1);
+}
+
+.flip-v {
+    transform: scale(1, -1);
+}

src/themes/siwa/assets/css/templates/button.css

@@ -0,0 +1,35 @@
+{{- $config := site.Data.configuration }}
+
+{{- $button := $config.global.button }}
+{{- with $button }}
+{{- if ne $button.padding nil -}}
+.button {
+    padding: {{ $button.padding }}px;
+}
+{{- end }}
+{{- with $button.default }}
+{{- with .color }}
+.button {
+    background-color: {{ . | safeCSS }};
+}
+{{- end }}
+{{- end }}
+{{- end }}
+
+{{- $largeButton := cond $config.global.button.large $config.global.button.large $button }}
+{{- with $largeButton }}
+{{- $largeButtonPadding := cond $largeButton.padding $largeButton.padding $button.padding }}
+{{- $largeButtonDefault := cond $largeButton.default $largeButton.default $button.default }}
+{{- if ne $largeButtonPadding nil -}}
+.large-button {
+    padding: {{ $largeButtonPadding }}px;
+}
+{{- end }}
+{{- with $largeButtonDefault }}
+{{- with .color }}
+.large-button {
+    background-color: {{ . | safeCSS }};
+}
+{{- end }}
+{{- end }}
+{{- end }}

src/themes/siwa/assets/css/templates/global.css

@@ -0,0 +1,36 @@
+{{- $config := site.Data.configuration }}
+
+{{- $backgroundColor := $config.global.backgroundColor | default "black" }}
+{{- $fontColor := $config.global.font.color | default "white" -}}
+html {
+    background-color: {{ $backgroundColor | safeCSS }};
+    color: {{ $fontColor | safeCSS }};
+}
+
+{{- with $config.global.font.url -}}
+@font-face {
+    font-family: "main-font";
+    src: url("{{ . }}");
+    font-display: auto;
+    font-style: normal;
+    font-stretch: normal;
+}
+{{- end }}
+
+{{- $menuHeight := $config.menu.height | default 80 }}
+{{- $menuAlignItems := cond $config.menu.centered "center" "stretch" }}
+header {
+    position: fixed;
+    width: 100%;
+    display: flex;
+    height: {{ $menuHeight }}px;
+    align-items: {{ $menuAlignItems | safeCSS }};
+    justify-content: space-between;
+    z-index: 1000;
+    pointer-events: none;
+}
+
+{{- $footerHeight := $config.footer.height | default 200 -}}
+footer {
+    min-height: {{ $footerHeight }}px !important;
+}

src/themes/siwa/assets/css/templates/menu.css

@@ -0,0 +1,35 @@
+{{- $config := site.Data.configuration }}
+
+{{- $logoWidth := $config.info.logo.width | default 100 }}
+{{- $logoHeight := $config.info.logo.height | default 100 }}
+{{- $logoTop := $config.info.logo.top | default 10 }}
+{{- $logoLeft := $config.info.logo.left | default 10 -}}
+{{- $fontColor := $config.global.font.color | default "white" }}
+
+#logo {
+    height: {{ $logoWidth }}px;
+    min-width: {{ $logoHeight }}px;
+    margin-top: {{ $logoTop }}px;
+    margin-left: {{ $logoLeft }}px;
+}
+
+{{- $menuBackgroundImage := cond (ne $config.menu.backgroundImage nil) (printf "url(%s)" $config.menu.backgroundImage) "none" }}
+{{- $menuBackgroundColor := $config.menu.backgroundColor | default "transparent" -}}
+{{- $menuMinWidth := $config.menu.width | default 1 -}}
+#menu {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: row;
+    background-image: {{ $menuBackgroundImage | safeCSS }};
+    background-color: {{ $menuBackgroundColor | safeCSS }};
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    align-items: start;
+    justify-content: end;
+    min-width: {{ $menuMinWidth }}px;
+    pointer-events: auto;
+}
+
+#menu a {
+    color: {{ $fontColor | safeCSS }};
+}

src/themes/siwa/assets/css/templates/section/base.css

@@ -0,0 +1,41 @@
+{{- $id := .id }}
+{{- $config := index site.Data.sections $id }}
+
+{{- $height := cond (ne $config.height nil) $config.height 100 }}
+{{- $shadow := $config.shadow | default false }}
+{{- $shadowOpacity := $config.shadowOpacity | default 0.4 }}
+{{- $centeredContainerWidth := sub 100 (cond (ne $config.padding nil) $config.padding 30) }}
+{{- $fontColor := $config.fontColor | default "inherit" }}
+{{- $containerLocation := $config.container.location | default "center" }}
+{{- $containerMarginLeft := cond (ne $config.container.margins.left nil) $config.container.margins.left 0 }}
+{{- $containerMarginRight := cond (ne $config.container.margins.right nil) $config.container.margins.right 0 }}
+{{- $containerMarginTop := cond (ne $config.container.margins.top nil) $config.container.margins.top 50 }}
+{{- $containerMarginBottom := cond (ne $config.container.margins.bottom nil) $config.container.margins.bottom 50 }}
+{{- $containerMarginUnit := cond $config.container.margins.usePercentage "%" "px" }}
+{{- $zIndex := cond (ne $config.zIndex nil) $config.zIndex "auto" -}}
+
+#{{ $id }} {
+    color: {{ $fontColor }};
+    width: 100%;
+    min-height: {{ $height }}vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: {{ $containerLocation }};
+    position: relative;
+    background-size: cover;
+    box-shadow: {{ cond $shadow ((printf "0px 0px 64px 24px rgba(0, 0, 0, %f)" $shadowOpacity) | safeCSS) "none" }};
+    z-index: {{ $zIndex | safeCSS }};
+}
+
+#{{ $id }}-centered-container {
+    width: {{ $centeredContainerWidth }}%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 10;
+    margin-left: {{ $containerMarginLeft }}{{ $containerMarginUnit }};
+    margin-right: {{ $containerMarginRight }}{{ $containerMarginUnit }};
+    margin-top: {{ $containerMarginTop }}{{ $containerMarginUnit }};
+    margin-bottom: {{ $containerMarginBottom }}{{ $containerMarginUnit }};
+}

src/themes/siwa/assets/css/templates/section/gallery.css

@@ -0,0 +1,2 @@
+{{- $id := .id }}
+{{- $config := index site.Data.sections $id -}}

src/themes/siwa/assets/css/templates/section/logo-with-text.css

@@ -0,0 +1,7 @@
+{{- $id := .id }}
+{{- $config := index site.Data.sections $id -}}
+
+#{{ $id }}-centered-container > img {
+    width: 60%;
+    min-width: 400px;
+}

src/themes/siwa/assets/css/templates/section/logo.css

@@ -0,0 +1,14 @@
+{{- $id := .id }}
+{{- $config := index site.Data.sections $id }}
+
+{{- $logoWidth := $config.logo.width | default 40 -}}
+
+#{{ $id }}-centered-container > img {
+    width: {{ $logoWidth }}%;
+    min-width: 400px;
+}
+
+#{{ $id }}-buttons {
+    display: flex;
+    flex-direction: row;
+}

src/themes/siwa/assets/css/templates/section/ping-pong.css

@@ -0,0 +1,2 @@
+{{- $id := .id }}
+{{- $config := index site.Data.sections $id -}}

src/themes/siwa/assets/css/templates/section/simple.css

@@ -0,0 +1,13 @@
+{{- $id := .id }}
+{{- $config := index site.Data.sections $id -}}
+
+#{{ $id }}-centered-container {
+    align-items: start !important;
+    width: 40% !important;
+    margin: 5%;
+}
+
+#{{ $id }} {
+    justify-content: end !important;
+    align-items: start !important;
+}

src/themes/siwa/assets/css/templates/section/transition.css

@@ -0,0 +1,2 @@
+{{- $id := .id }}
+{{- $config := index site.Data.sections $id -}}

src/themes/siwa/assets/js/main.js

@@ -0,0 +1,46 @@
+const imgs = document.querySelectorAll("section > img.parallax, section > div.parallax > video");
+const screenRatio = 1.77;
+
+function updateParallax() {
+    for(const img of imgs) {
+        let bbox = img.getBoundingClientRect();
+        img.style.objectPosition = `center ${(-bbox.top) * 0.3}px`;
+        img.style.width = `${Math.max(100, ((outerHeight / outerWidth) / screenRatio) * 100)}%`;
+    }
+}
+
+onscroll = () => updateParallax();
+onresize = () => updateParallax();
+
+const galleries = document.querySelectorAll(".gallery-container");
+let galleryViewer = null;
+
+if(galleries.length > 0) {
+    galleryViewer = document.createElement("div");
+    galleryViewer.classList.add("gallery-viewer");
+    document.body.appendChild(galleryViewer);
+    galleryViewer.onclick = () => {
+        galleryViewer.classList.remove("opened");
+    };
+}
+
+for(const gallery of galleries) {
+    const pages = new Array(...gallery.querySelectorAll(".page-container")).toSorted((a, b) => parseInt(a.dataset.page) - parseInt(b.dataset.page));
+    const buttons = new Array(...gallery.querySelectorAll(".page")).toSorted((a, b) => parseInt(a.dataset.page) - parseInt(b.dataset.page));
+    const images = gallery.querySelectorAll("img");
+
+    for(const button of buttons) {
+        button.onclick = () => {
+            for(const page of pages) {
+                page.style.display = page.dataset.page === button.dataset.page ? "block" : "none";
+            }
+        };
+    }
+
+    for(const image of images) {
+        image.onclick = () => {
+            galleryViewer.classList.add("opened");
+            galleryViewer.innerHTML = `<img src="${image.src}" style="width: 80%; cursor: pointer;" />`;
+        };
+    }
+}

src/themes/siwa/data/configuration.toml

@@ -0,0 +1,40 @@
+backgroundColor = "#19ffcd"
+companyName = "My Company Name"
+copyrightYear = "2026"
+developedBy = "My Company Name"
+developedByUrl = ""
+designedBy = "My Company Name"
+designedByUrl = ""
+logo = ""
+font = ""
+
+# Footer
+
+[footer]
+logo = ""
+
+# [[footer.logos]]
+# image = ""
+# url = ""
+# width = 200
+
+# Menu
+
+[menu]
+height = 160
+backgroundImage = ""
+backgroundColor = ""
+centered = false
+groups = []
+
+# [[menu.entries]]
+# text = "Home"
+# icon = ""
+# group = "navigation"
+# link = "#overview"
+
+# Sections
+
+[[sections]]
+id = "overview"
+type = "logo"

src/themes/siwa/layouts/_partials/css.html

@@ -0,0 +1,42 @@
+{{- $config := site.Data.configuration }}
+{{- with resources.Get "css/main.css" | resources.ExecuteAsTemplate "css/main.css" . }}
+{{- $opts := dict
+  "minify" (cond hugo.IsDevelopment false true)
+  "sourceMap" (cond hugo.IsDevelopment "linked" "none")
+}}
+{{- with . | css.Build $opts }}
+{{- if hugo.IsDevelopment -}}
+<link rel="stylesheet" href="{{ .RelPermalink }}">
+{{- else }}
+{{- with . | fingerprint -}}
+<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+{{- end }}
+{{- end }}
+{{- end }}
+{{- end }}
+{{ $dataHash := md5 (printf "%v" $config) }}
+{{- with resources.Get "css/templates/global.css" | resources.ExecuteAsTemplate (printf "css/templates/global-%s.css" $dataHash) . | resources.Minify | resources.Fingerprint -}}
+<link rel="stylesheet" href="{{ .RelPermalink }}">
+{{- end }}
+{{- with resources.Get "css/templates/button.css" | resources.ExecuteAsTemplate (printf "css/templates/button-%s.css" $dataHash) . | resources.Minify | resources.Fingerprint -}}
+<link rel="stylesheet" href="{{ .RelPermalink }}">
+{{- end }}
+{{- with resources.Get "css/templates/menu.css" | resources.ExecuteAsTemplate (printf "css/templates/menu-%s.css" $dataHash) . | resources.Minify | resources.Fingerprint -}}
+<link rel="stylesheet" href="{{ .RelPermalink }}">
+{{- end }}
+{{- range $config.sections }}
+{{- $section := . }}
+{{- $sectionConfig := index site.Data.sections $section.id }}
+{{- $sectionDataHash := md5 (printf "%v" $sectionConfig) }}
+{{- with resources.Get "css/templates/section/base.css" | resources.ExecuteAsTemplate (printf "css/templates/%s/base-%s.css" $section.id $sectionDataHash) (dict "id" $section.id) | resources.Minify | resources.Fingerprint -}}
+<link rel="stylesheet" href="{{ .RelPermalink }}">
+{{- end }}
+{{- with resources.Get (printf "css/templates/section/%s.css" $section.type) | resources.ExecuteAsTemplate (printf "css/templates/%s/%s-%s.css" $section.id $section.type $sectionDataHash) (dict "id" $section.id) | resources.Minify | resources.Fingerprint -}}
+<link rel="stylesheet" href="{{ .RelPermalink }}">
+{{- end }}
+{{- end }}
+{{- with $config.global.styles }}
+{{- range $config.global.styles -}}
+<link rel="stylesheet" href="/css/{{ . }}.css">
+{{- end }}
+{{- end }}

src/themes/siwa/layouts/_partials/js.html

@@ -0,0 +1,21 @@
+{{- $config := site.Data.configuration }}
+{{- with resources.Get "js/main.js" }}
+{{- $opts := dict
+  "minify" (cond hugo.IsDevelopment false true)
+  "sourceMap" (cond hugo.IsDevelopment "linked" "none")
+}}
+{{- with . | js.Build $opts }}
+{{- if hugo.IsDevelopment -}}
+<script src="{{ .RelPermalink }}" defer></script>
+{{- else }}
+{{- with . | fingerprint -}}
+<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous" defer></script>
+{{- end }}
+{{- end }}
+{{- end }}
+{{- end }}
+{{- with $config.global.scripts }}
+{{- range $config.global.scripts -}}
+<script src="/scripts/{{ . }}.js" defer></script>
+{{- end }}
+{{- end }}

src/themes/siwa/layouts/_partials/ribbon.html

@@ -0,0 +1,29 @@
+{{ $ribbon := .ribbon -}}
+
+{{ if $ribbon.image -}}
+<div class="ribbon">
+    <div class="ribbon-part f-1">
+        {{ with $ribbon.image -}}
+        <img src="{{ . }}" style="height: {{ $ribbon.height }}px" />
+        {{- end }}
+    </div>
+</div>
+{{ else -}}
+<div class="ribbon">
+    <div class="ribbon-part f-1">
+        {{ with $ribbon.left -}}
+        <img src="{{ . }}" style="height: {{ $ribbon.height }}px" />
+        {{- end }}
+    </div>
+    {{ range $ribbon.middle -}}
+    <div class="ribbon-part">
+        <img src="{{ . }}" style="height: {{ $ribbon.height }}px" />
+    </div>
+    {{- end }}
+    <div class="ribbon-part f-1 flip-h">
+        {{ with $ribbon.right -}}
+        <img src="{{ . }}" style="height: {{ $ribbon.height }}px" />
+        {{- end }}
+    </div>
+</div>
+{{- end }}

src/themes/siwa/layouts/_partials/sections/base.html

@@ -0,0 +1,35 @@
+{{- $id := .id }}
+{{- $type := print "sections/" .type }}
+{{- $config := index site.Data.sections $id }}
+{{- $parallax := cond $config.parallax " parallax" "" -}}
+
+<section id="{{ $id }}">
+    {{- with $config.background.image }}
+    {{- $backgroundScale := $config.background.scale | default 1 -}}
+    <img class="section-background-image{{ $parallax }}" src="{{ . }}" style="transform: scaleY({{ $backgroundScale }})" />
+    {{- end }}
+
+    {{- with $config.background.colorFrom -}}
+    <div class="section-background-color"
+        style="background-image: linear-gradient(to bottom, {{ $config.background.colorFrom | safeCSS }}, {{ $config.background.colorTo | safeCSS }})">
+    </div>
+    {{- end }}
+
+    {{- with $config.video -}}
+    <div class="section-video-container{{ $parallax }}">
+        <video src="{{ . }}" autoplay loop muted></video>
+    </div>
+    {{- end -}}
+
+    <div id="{{ $id }}-centered-container">
+        {{- with $config.topRibbon }}
+        {{- partial "ribbon" (dict "ribbon" $config.topRibbon) }}
+        {{- end -}}
+
+        {{ partial $type (dict "id" $id "config" $config) }}
+        
+        {{- with $config.bottomRibbon }}
+        {{- partial "ribbon" (dict "ribbon" $config.bottomRibbon) }}
+        {{- end -}}
+    </div>
+</section>

src/themes/siwa/layouts/_partials/sections/gallery.html

@@ -0,0 +1,38 @@
+{{- $id := .id }}
+{{- $config := .config }}
+
+{{- with site.GetPage $config.contentFolder -}}
+<h1>{{ $config.title }}</h1>
+
+{{- with $config.innerTopRibbon -}}
+{{ partial "ribbon" (dict "ribbon" $config.innerTopRibbon) }}
+{{- end -}}
+
+<div class="gallery-container">
+    {{- $images := .Resources.ByType "image" }}
+    {{- range $index, $image := $images }}
+    {{- if eq (mod $index 8) 0 }}
+    {{- if gt (div $index 8) 0 -}}
+    </div>
+    {{- end -}}
+    <div class="page-container" data-page="{{ div $index 8 }}">
+    {{- end -}}
+        <img src="{{ .RelPermalink }}" />
+    {{- end }}
+    {{- $remaining := mod (len $images) 8 }}
+    {{- if gt $remaining 0 }}
+    {{- range $i := seq (add $remaining 1) 8 -}}
+        <div class="empty"></div>
+    {{- end }}
+    {{- end -}}
+    </div>
+    <div class="pages">
+        {{- $pageCount := div (len $images) 8 }}
+        {{- if gt $pageCount 1 }}
+        {{- range $i := seq 0 (sub $pageCount 1) -}}
+        <div class="page button" data-page="{{ $i }}"><span>{{ add $i 1 }}</span></div>
+        {{- end -}}
+        {{- end -}}
+    </div>
+</div>
+{{- end }}

src/themes/siwa/layouts/_partials/sections/logo-with-text.html

@@ -0,0 +1,18 @@
+{{- $id := .id }}
+{{- $config := .config -}}
+
+{{- with $config.logo.textBefore -}}
+<h2 class="ta-c tt-u">{{ . }}</h2>
+{{- end }}
+
+{{- with $config.logo.image -}}
+<img src="{{ . }}" />
+{{- end }}
+
+{{- with $config.logo.textAfter -}}
+<h2 class="ta-c">{{ . }}</h2>
+{{- end }}
+
+{{- with site.GetPage $config.content -}}
+<div class="fs-l lh-m ta-c">{{ .Content }}</div>
+{{- end }}

src/themes/siwa/layouts/_partials/sections/logo.html

@@ -0,0 +1,14 @@
+{{- $id := .id }}
+{{- $config := .config }}
+
+{{- with $config.logo.image -}}
+<img src="{{ . }}" />
+{{- end -}}
+
+<div id="{{ $id }}-buttons">
+    {{- range $config.buttons }}
+    {{- $color := .color | default "revert-layer" }}
+    {{- $fontColor := .fontColor | default "revert-layer" -}}
+    <a class="large-button mw-l" href="{{ .link }}" style="background-color: {{ $color }}; color: {{ $fontColor }}">{{ .text }}</a>
+    {{- end -}}
+</div>