Divide website (postoctt) from static site generator (staticoso)

.gitignore

@@ -0,0 +1 @@
+public/*

.gitlab-ci.yml

@@ -0,0 +1,18 @@
+image: alpine:latest
+
+before_script:
+  - apk update
+  - apk add python3 py3-pip git
+  - pip3 install importlib-metadata
+
+pages:
+  stage: deploy
+  script:
+  - git clone --depth 1 https://gitlab.com/octtspacc/staticoso
+  - mv staticoso/Source/* ./
+  - python3 Build.py
+  artifacts:
+    paths:
+    - public
+  rules:
+    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH

Assets/Standard.css

@@ -0,0 +1,119 @@
+:root {
+	--ScreenBorderPadding: 4px;
+	--ContentPadding: 8px;
+}
+
+* {
+	Box-Sizing: Border-Box;
+}
+
+Body {
+	Margin: 0;
+	//Padding: var(--ScreenBorderPadding);
+	Box-Sizing: Border-Box;
+	Width: 100vw;
+	Position: Absolute;
+	Left: Auto;
+	Right: Auto;
+	Background: #eeddff;
+	Font-Family: "Liberation Mono";
+}
+#Container {
+	Box-Sizing: Border-Box;
+}
+
+#TopBox {
+	Border: 2px Solid Purple;
+	Padding: var(--ContentPadding);
+}
+#LeftBox {
+	Float: Left;
+	Padding: var(--ContentPadding);
+	//Border: 2px Solid Purple;
+	user-select: none;
+}
+#RightBox {
+	//Position: Inherit;
+	//Border: 2px Solid Purple;
+	//Top: 16px;
+	//Right: 16px;
+//	Margin: 0;
+	Padding: var(--ContentPadding);
+	Float: Right;
+	user-select: none;
+}
+#MainBox {
+	//Text-Align: Center;
+	Margin: Auto;
+	Position: Absolute;
+	Z-Index: -1;
+	Left: 0;
+	Right: 0;
+	Width: 80%;
+}
+#BottomBox {
+	Box-Sizing: Border-Box;
+	Border: 2px Solid Purple;
+	Position: Fixed;
+	Bottom: 0; //var(--ScreenBorderPadding);
+	//Margin: var(--ScreenBorderPadding);
+	Left: 0;
+	Right: 0;
+	Padding: var(--ContentPadding);
+	Width: 100vw;
+	Text-Align: Right;
+}
+
+@Media (Max-Width: 800px) {
+	#LeftBox {Display: None;}
+	#RightBox {Display: None;}
+}
+
+.BlinkA {
+	Animation: BlinkerA 0.25s Step-Start Infinite;
+}
+@keyframes BlinkerA {
+	0% {Position: Absolute; Visibility: Hidden;}
+	50% {Position: Static; Visibility: Visible;}
+	100% {Position: Absolute; Visibility: Hidden;}
+}
+.BlinkO {
+	Animation: BlinkerO 0.25s Step-Start Infinite;
+}
+@keyframes BlinkerO {
+	0% {Position: Static; Visibility: Visible;}
+	50% {Position: Absolute; Visibility: Hidden;}
+	100% {Position: Static; Visibility: Visible;}
+}
+
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@699;700&display=swap");
+:root {
+  --lower: 100;
+  --upper: 700;
+}
+
+/* Credits: https://codepen.io/jh3y/pen/WNrXqYz */
+.WavyText {
+  font-family: 'Roboto Mono', monospace;
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  white-space: nowrap;
+  transform: translate(-50%, -50%) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
+  font-variation-settings: 'wght' var(--lower);
+  margin: 0;
+}
+.WavyText span {
+  color: hsla(300, 100%, 10%, var(--alpha-l));
+  animation: rise 2.25s infinite ease-in-out;
+  animation-delay: calc((var(--index) - 6) * 0.225s);
+  display: inline-block;
+}
+@keyframes rise {
+  50% {
+    font-variation-settings: 'wght' var(--upper);
+    color: hsla(300, 100%, 20%, var(--alpha-u));
+    transform: translate(0, -15%);
+  }
+}
+

Pages/index.md

@@ -0,0 +1,23 @@
+% Template: Standard.html
+
+# Ciao!!
+
+Sei entrat<span class="BlinkA">a</span><span class="BlinkO">o</span>
+nel...
+
+% - Credits: https://codepen.io/jh3y/pen/WNrXqYz
+<h1 class="WavyText" style="--x: 6; --y: -6;"><span style="--index: 0; --alpha-l: 0.125; --alpha-u: 0.25;">p</span><span style="--index: 1; --alpha-l: 0.125; --alpha-u: 0.25;">o</span><span style="--index: 2; --alpha-l: 0.125; --alpha-u: 0.25;">s</span><span style="--index: 3; --alpha-l: 0.125; --alpha-u: 0.25;">t</span><span style="--index: 4; --alpha-l: 0.125; --alpha-u: 0.25;">o</span><span style="--index: 5; --alpha-l: 0.125; --alpha-u: 0.25;">c</span><span style="--index: 6; --alpha-l: 0.125; --alpha-u: 0.25;">t</span><span style="--index: 7; --alpha-l: 0.125; --alpha-u: 0.25;">t</span>
+</h1>
+<h1 class="WavyText" style="--x: 3; --y: -3;"><span style="--index: 0; --alpha-l: 0.25; --alpha-u: 0.5;">p</span><span style="--index: 1; --alpha-l: 0.25; --alpha-u: 0.5;">o</span><span style="--index: 2; --alpha-l: 0.25; --alpha-u: 0.5;">s</span><span style="--index: 3; --alpha-l: 0.25; --alpha-u: 0.5;">t</span><span style="--index: 4; --alpha-l: 0.25; --alpha-u: 0.5;">o</span><span style="--index: 5; --alpha-l: 0.25; --alpha-u: 0.5;">c</span><span style="--index: 6; --alpha-l: 0.25; --alpha-u: 0.5;">t</span><span style="--index: 7; --alpha-l: 0.25; --alpha-u: 0.5;">t</span>
+</h1>
+<h1 class="WavyText"><span style="--index: 0; --alpha-l: 0.5; --alpha-u: 1;">p</span><span style="--index: 1; --alpha-l: 0.5; --alpha-u: 1;">o</span><span style="--index: 2; --alpha-l: 0.5; --alpha-u: 1;">s</span><span style="--index: 3; --alpha-l: 0.5; --alpha-u: 1;">t</span><span style="--index: 4; --alpha-l: 0.5; --alpha-u: 1;">o</span><span style="--index: 5; --alpha-l: 0.5; --alpha-u: 1;">c</span><span style="--index: 6; --alpha-l: 0.5; --alpha-u: 1;">t</span><span style="--index: 7; --alpha-l: 0.5; --alpha-u: 1;">t</span>
+</h1>
+<br>
+
+Esatto, il **postoctt**, Letteralmente il mio posto, perchè io sono octt e quindi
+posto + octt = postoctt.
+Se preferisci, puoi chiamarlo postocto.
+
+### Di che si tratta?
+
+A breve.

Parts/Standard/BottomBox.html

@@ -0,0 +1 @@
+Footer

Parts/Standard/LeftBox.html

@@ -0,0 +1,2 @@
+<a href="/">Home</a>
+

Parts/Standard/TopBox.html

@@ -0,0 +1 @@
+Header

Templates/Standard.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="[HTML:Page:CSS]">
+	<script src="/App.js"></script>
+	<title>[HTML:Page:Title] - postoctt</title>
+	<style>
+		[HTML:Page:Style]
+	</style>
+</head>
+<body>
+<div id="Container">
+	<div id="TopBox">
+		[HTML:Part:Standard/TopBox.html]
+	</div>
+	<div id="MiddleBox">
+		<div id="LeftBox">
+			[HTML:Part:Standard/LeftBox.html]
+		</div>
+		<div id="RightBox">
+			[HTML:Page:RightBox]
+		</div>
+		<div id="MainBox">
+			[HTML:Page:MainBox]
+		</div>
+	</div>
+	<div id="BottomBox">
+		[HTML:Part:Standard/BottomBox.html]
+	</div>
+</div>
+</body>
+</html>