CSS per colori ad alcune parole

Assets/Standard.css

@@ -2,12 +2,6 @@
 	--ScreenBorderPadding: 4px;
 	--ContentPadding: 8px;
 }
-* {
-	Box-Sizing: Border-Box;
-}
-a {
-	Color: #d000d0;
-}
 Body {
 	Margin: 0;
 	Box-Sizing: Border-Box;
@@ -24,6 +18,16 @@ Body {
 	Box-Sizing: Border-Box;
 }
 
+* {
+	Box-Sizing: Border-Box;
+}
+a {
+	Color: #d000d0;
+}
+ul {
+	padding-left: 20px;
+}
+
 #LeftBox, #RightBox {
 	Background: #300030;
 	Color: #fafaf0;
@@ -32,7 +36,6 @@ Body {
 	Color: #eeddff;
 }
 #TopBox {
-	//Border: 2px Solid Purple;
 	Padding: var(--ContentPadding);
 }
 #LeftBox, #LeftBoxContainer {
@@ -66,7 +69,6 @@ Body {
 }
 #BottomBox {
 	Box-Sizing: Border-Box;
-	//Border: 2px Solid Purple;
 	Color: #fafaf0;
 	Background: rgba(64, 0, 64, 0.6);
 	Position: Fixed;
@@ -97,13 +99,9 @@ Body {
 	Visibility: Hidden;
 }
 
-/*
+.NoDisplay {
-@Media (Max-Width: 800px) {
+	Display: None;
-	#LeftBox {Display: None;}
-	#RightBox {Display: None;}
 }
-*/
-
 .BlinkA {
 	Animation: BlinkerA 0.25s Step-Start Infinite;
 }
@@ -121,34 +119,40 @@ Body {
 	100% {Position: Static; Visibility: Visible;}
 }
 
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@699;700&display=swap");
+.MainIdTextGradientL {
-:root {
+	Background: linear-gradient(to left, #d000d0, #8040d0);
-  --lower: 100;
+	Color: Transparent;
-  --upper: 700;
+	-webkit-background-clip: Text;
+	Background-Clip: Text;
+}
+.MainIdTextGradientR {
+	Background: linear-gradient(to right, #d000d0, #8040d0);
+	Color: Transparent;
+	-webkit-background-clip: Text;
+	Background-Clip: Text;
 }
 
 /* Credits: https://codepen.io/jh3y/pen/WNrXqYz */
 .WavyText {
-	font-family: 'Roboto Mono', monospace;
+	Text-Align: center;
-	text-align: center;
+	Position: absolute;
-	position: absolute;
+	Left: 50%;
-	left: 50%;
+	White-Space: nowrap;
-	white-space: nowrap;
+	Transform: translate(-50%, -50%) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
-	transform: translate(-50%, -50%) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
 	font-variation-settings: 'wght' var(--lower);
-	margin: 0;
+	Margin: 0;
 }
-.WavyText span {
+.WavyText Span {
-	color: hsla(300, 100%, 20%, var(--alpha-l));
+	Color: hsla(300, 100%, 20%, var(--alpha-l));
-	animation: rise 2.25s infinite ease-in-out;
+	Animation: Rise 2.25s infinite ease-in-out;
-	animation-delay: calc((var(--index) - 6) * 0.225s);
+	Animation-Delay: calc((var(--index) - 6) * 0.225s);
-	display: inline-block;
+	Display: inline-block;
 }
-@keyframes rise {
+@keyframes Rise {
 	50% {
 		font-variation-settings: 'wght' var(--upper);
-		color: hsla(300, 100%, 30%, var(--alpha-u));
+		Color: hsla(300, 100%, 30%, var(--alpha-u));
-		transform: translate(0, -15%);
+		Transform: translate(0, -15%);
 	}
 }
 

Pages/index.pug

@@ -1,8 +1,11 @@
-// LastUpdated: Show
+h1 Ciao!! (UwU)
 
-h1 Ciao!!
+p
-
+	| Sei entrat
-p Sei entrat#[span(class='BlinkA') a]#[span(class='BlinkO') o] nel...
+	span(class='BlinkA') a
+	span(class='NoDisplay') /
+	span(class='BlinkO') o
+	|  nel...
 
 // Credits: https://codepen.io/jh3y/pen/WNrXqYz
 div
@@ -19,9 +22,17 @@ div
 	br
 
 p
-	| Esatto, il #[strong ✨postoctt✨], Letteralmente il mio posto, perchè io sono octt e quindi posto + octt = ✨postoctt✨.
+	| Esatto, il 
+	strong ✨
+	strong(class='MainIdTextGradientL') postoctt
+	strong ✨
+	| , Letteralmente il mio posto, perchè io sono octt e quindi #[i(style='Color:#8040d0;') posto] + #[i(style='Color:#d000d0;') octt] = 
+	strong ✨
+	strong(class='MainIdTextGradientR') postoctt
+	strong ✨
+	| .
 	br
-	| Se preferisci, puoi chiamarlo postocto. O anche sitoctt! È pur sempre un sito web questo!
+	| Se preferisci, puoi chiamarlo #[i(class='MainIdTextGradientL') postocto]. O anche #[i(class='MainIdTextGradientR') sitoctt]! È pur sempre un sito web questo!
 
 p
 	| Come puoi vedere da elementi segnaposto mezzi rotti ai bordi della pagina, tutto questo ambaradan è ancora pesantemente in costruzione.
@@ -29,7 +40,7 @@ p
 	| Gli aggiornamenti sono continui e avvengono senza preavviso, quindi dovresti rivisitare questo sito almeno qualche volta a settimana se ti interessano le novità sempre fresche.
 
 p
-	| A tal proposito, per la migliore esperienza DEVI usare un browser con supporto almeno a CSS3.
+	| A tal proposito, per la migliore esperienza #[span(style='Color:#d00000;') DEVI] usare un browser con supporto almeno a CSS3.
 	br
 	| Preferibilmente non Chromium, che ha degli strani memory leak su pagine con animazioni complesse, oltre ad andare a scatti. Firefox non ha questo problema, ma usa molto di più la CPU. Ephiphany usa anche meno RAM di Firefox, ma al costo del doppio della CPU..
 	br
@@ -112,3 +123,4 @@ p
 	| Quelli del mio sito, alle condizioni descritte sopra: #[a(href='https://gitlab.com/octtspacc/postoctt') gitlab.com/octtspacc/postoctt].
 	br
 	| Quelli del mio generatore, anche questo rilasciato sotto una licenza libera, la AGPL: #[a(href='https://gitlab.com/octtspacc/staticoso') gitlab.com/octtspacc/staticoso].
+