CSS progress

Assets/Standard.css

@@ -15,6 +15,8 @@ Body {
 	Position: Absolute;
 	Left: Auto;
 	Right: Auto;
+	Background: #eeddff;
+	Font-Family: "Liberation Mono";
 }
 #Container {
 	Box-Sizing: Border-Box;
@@ -61,3 +63,57 @@ Body {
 	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%);
+  }
+}
+

Build.py

@@ -46,7 +46,6 @@ def PreProcessor(File):
 	File = ReadFile(File)
 	Content, Titles, Meta = '', [], {
 		'Template': 'Standard.html',
-		'Background': '',
 		'Style': ''}
 	for l in File.splitlines():
 		ls = l.lstrip()
@@ -57,7 +56,7 @@ def PreProcessor(File):
 		elif ls.startswith('% Template: '):
 			Meta['Template'] = ls[len('% Template: '):]
 		elif ls.startswith('% Background: '):
-			Meta['Background'] = ls[len('% Background: '):]
+			Meta['Style'] += "#MainBox{Background:" + ls[len('% Background: '):] + ";} "
 		elif ls.startswith('% Style: '):
 			Meta['Style'] += ls[len('% Style: '):] + ' '
 		else:

Build.sh

@@ -1,10 +0,0 @@
-#!/bin/sh
-cd "$( dirname "$( realpath "$0" )" )"
-
-mkdir -p public
-
-cp -R Pages/* public/
-find public -type f -name "*.html" -exec sh -c 'cat Templates/Standard.html > "$1"' _ {} \;
-find public -type f -name "*.html" -print0 | xargs -0 sed -i -e 's/\[HTML\:PageTitle\]/ERRE/g'
-
-cp Style.css public/

Pages/index.md

@@ -1,11 +1,23 @@
-% - Commento
 % Template: Standard.html
-% Background: #eeddff
 
-# Prova
-Si testa il semi-generatore di siti statici
+# Ciao!!
 
-% - Altro commento
+Sei entrat<span class="BlinkA">a</span><span class="BlinkO">o</span>
+nel...
 
-### Sottocoso
-Il generatore dovrebbe saper gestire i sottocosi
+% - 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.

Pages/test/test.md

@@ -1 +0,0 @@
-test.