Test bottoni 88x31, footer collassabile

Assets/Standard.css

@@ -74,16 +74,22 @@ ul {
 	Padding-Bottom: calc(var(--ContentPadding) + 80px);
 }
 #BottomBox {
-	Box-Sizing: Border-Box;
 	Color: #fafaf0;
 	Background: rgba(64, 0, 64, 0.6);
+	Text-Align: Right;
+	Z-Index: -1;
+}
+#BottomBoxContainer {
+	Color: #808080;
+}
+#BottomBox, #BottomBoxContainer {
+	Box-Sizing: Border-Box;
 	Position: Fixed;
 	Bottom: 0;
 	Left: 0;
 	Right: 0;
 	Padding: var(--ScreenBorderPadding);
 	Width: 100%;
-	Text-Align: Right;
 }
 
 #LeftBoxCheck, #LeftBoxLabel {
@@ -96,7 +102,18 @@ ul {
 	Right: 0;
 	Margin: var(--ScreenBorderPadding);
 }
-#LeftBoxCheck, #RightBoxCheck {
+#BottomBoxCheck, #BottomBoxLabel {
+	Float: Left;
+	Left: 0;
+	Margin: var(--ScreenBorderPadding);
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+#LeftBoxCheck, #RightBoxCheck, #BottomBoxCheck {
 	Position: Fixed;
 	Opacity: 0;
 }

Pages/Chi-Sono.pug

@@ -7,7 +7,7 @@ p Giustamente, venendo qui, che tu abbia o meno letto le informazioni generali d
 p
 	| Io sono octt. Si, esatto, octt da cui postoctt, il mio posto, prende il nome.
 	br
-	| Io sono la webmaster di questo posto. O, forse, #[a(href='https://www.dictionary.com/browse/webmistress') webmistress] sarebbe più corretto, peccato che le persone che anche soltanto conoscono dell'esistenza di questa parola si contano sulle dita di una mano mozzata.
+	| Io sono la webmaster di questo posto. O, forse, #[a(href='https://www.dictionary.com/browse/webmistress' target='_blank' rel='noopener') webmistress] sarebbe più corretto, peccato che le persone che anche soltanto conoscono dell'esistenza di questa parola si contano sulle dita di una mano mozzata.
 	br
 	| Vabbe, io ho capito che nel mondo c'era necessità di questo sito #[small (ma quando mai??)], ho immaginato il sito, ho iniziato a costruire il sito, ho messo in piedi strategie per semplificarmi la creazione del sito #[small (eee, che paroloni, ho scritto un programmino in Pitone)], ed ecco qui il risultato.
 
@@ -21,7 +21,7 @@ p A volte spendo #[small (o perdo?)] tempo sul Fediverso, anche lì a scrivere e
 
 p Spesso dormo anche, ahhh bello quando dormi che stai lì così, ohhh, e ogni tanto ci vuole, toh.
 
-p Scrivo anche programmi veri e propri a volte. Più che altro, programmini, perchè se mi inbarco in grosse imprese poi rischio #[small (no no, succede spesso, quale "rischio", è una certezza)] di lasciare roba abbandonata a metà.
+p Scrivo anche programmi veri e propri a volte. Più che altro, programmini, perchè se mi imbarco in grosse imprese poi rischio #[small (no no, succede spesso, quale "rischio", è una certezza)] di lasciare roba abbandonata a metà.
 
 p Pensa te, inoltre: quando ho tempo, gioco anche ai videogiochi. In passato, molto di più, ma ad oggi impiego il mio tempo in tante altre cose, quindi il gioco è bello ma, ormai, dura sempre troppo poco.
 
@@ -42,9 +42,9 @@ h2 I miei contatti
 p
 	| Mi puoi trovare sul Fediverso, ai contatti da me preferiti che lascio qui sotto.
 	br
-	| #[span(style='Color:#2d2d2d;') Matrix]: #[a(href='https://matrix.to/#/@octt:octt.ddns.net') @octt:octt.ddns.net]
+	| #[span(style='Color:#2d2d2d;') Matrix]: #[a(href='https://matrix.to/#/@octt:octt.ddns.net' target='_blank' rel='noopener') @octt:octt.ddns.net]
 	br
-	| #[span(style='Color:#3088d4;') Mastodon]: #[a(href='https://mastodon.uno/@octo') @octo@mastodon.uno]
+	| #[span(style='Color:#3088d4;') Mastodon]: #[a(href='https://mastodon.uno/@octo' target='_blank' rel='noopener') @octo@mastodon.uno]
 
 h1 Fine?
 

Pages/index.pug

@@ -26,13 +26,13 @@ div
 
 p
 	| Esatto, il 
-	strong ✨
+	strong(class='twa twa-sparkles') #[span ✨]
 	strong(class='MainIdTextGradientL') postoctt
-	strong ✨
+	strong(class='twa twa-sparkles') #[span ✨]
 	| , Letteralmente il mio posto, perchè io sono octt e quindi #[i(style='Color:#8040d0;') posto] + #[i(style='Color:#d000d0;') octt] = 
-	strong ✨
+	strong(class='twa twa-sparkles') #[span ✨]
 	strong(class='MainIdTextGradientR') postoctt
-	strong ✨
+	strong(class='twa twa-sparkles') #[span ✨]
 	| .
 	br
 	| Se preferisci, puoi chiamarlo #[i(class='MainIdTextGradientL') postocto]. O anche #[i(class='MainIdTextGradientR') sitoctt]! È pur sempre un sito web questo!
@@ -101,7 +101,7 @@ p
 
 h2 Sorgenti e licenze
 
-p Tutto il contenuto presente su questo sito che ho creato io (i miei testi, media originali, e maggior parte del codice sorgente) è rilasciato sotto licenza #[a(href='https://creativecommons.org/licenses/by-sa/4.0/deed.it') CC BY-SA 4.0], una licenza libera che promuove la condivisione, e non intacca i legittimi diritti alla cultura e la collaborazione dell'umanità in generale.
+p Tutto il contenuto presente su questo sito che ho creato io (i miei testi, media originali, e maggior parte del codice sorgente) è rilasciato sotto licenza #[a(href='https://creativecommons.org/licenses/by-sa/4.0/deed.it' target='_blank' rel='noopener') CC BY-SA 4.0], una licenza libera che promuove la condivisione, e non intacca i legittimi diritti alla cultura e la collaborazione dell'umanità in generale.
 
 p
 	| Sono presenti, però, anche contenuti non miei.
@@ -125,7 +125,7 @@ p
 p
 	| Per terminare, trovate tutti i miei sorgenti sulle rispettive repo Git.
 	br
-	| Quelli del mio sito, alle condizioni descritte sopra: #[a(href='https://gitlab.com/octtspacc/postoctt') gitlab.com/octtspacc/postoctt].
+	| Quelli del mio sito, alle condizioni descritte sopra: #[a(href='https://gitlab.com/octtspacc/postoctt' target='_blank' rel='noopener') 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].
+	| Quelli del mio generatore, anche questo rilasciato sotto una licenza libera, la AGPL: #[a(href='https://gitlab.com/octtspacc/staticoso' target='_blank' rel='noopener') gitlab.com/octtspacc/staticoso].
 

Parts/Standard/LeftBoxBottom.html

@@ -0,0 +1,11 @@
+<hr>
+<a href="https://mastodon.uno/@octo" target="_blank" rel="noopener">
+	<img src="/sitoctt-assets/Buttons/Follow-Me-On-Mastodon.gif">
+</a>
+<br>
+<a href="https://www.torproject.org/it" target="_blank" rel="noopener">
+	<img src="/sitoctt-assets/Buttons/Tor.gif">
+</a>
+<a href="https://www.gnu.org/home.it" target="_blank" rel="noopener">
+	<img src="/sitoctt-assets/Buttons/Made-On-GNU-Linux.gif">
+</a>

Parts/Standard/TopBox.html

@@ -1 +1,16 @@
-<h3><a href="/postoctt">✨postoctt✨</a></h3>
+<div style="Text-Align:Left; Display:Inline;">
+	<h3 style="Display:Inline;">
+		<a href="/postoctt">
+			<!-- Odio HTML vanilla così tanto è illegibile, si, se vado a capo qui si crea uno spazio, non posso farlo... -->
+			<strong class="twa twa-sparkles"><span>✨</span></strong><strong class="MainIdTextGradientL">postoctt</strong><strong class="twa twa-sparkles"><span>✨</span></strong>
+		</a>
+	</h3>
+</div>
+
+<!--
+<div style="Text-Align:Right; Display:Inline; Width:100%;">
+	<a href="https://creativecommons.org/licenses/by-sa/4.0/deed.it" target="_blank" rel="noopener">
+		<img src="/sitoctt-assets/Buttons/CC-BY-SA">
+	</a>
+</div>
+-->

Templates/Standard.html

@@ -5,15 +5,16 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="[HTML:Page:CSS]">
 	<link href="/sitoctt-assets/Fonts/SpaceMono/Style.css" rel="stylesheet">
+	<link href="/sitoctt-assets/twemoji-amazing.min.css" rel="stylesheet">
 	<title>[HTML:Page:Title] - postoctt</title>
 	<style>
-		[HTML:Page:Style]
+[HTML:Page:Style]
 	</style>
 </head>
 <body>
 <div id="Container">
 	<div id="TopBox">
-		[HTML:Part:Standard/TopBox.html]
+[HTML:Part:Standard/TopBox.html]
 	</div>
 	<div id="MiddleBox">
 		<div id="LeftBoxContainer">
@@ -21,9 +22,9 @@
 			<input type="checkbox" id="LeftBoxCheck" checked>
 			<br>
 			<div id="LeftBox" class="ToggleBox">
-				[HTML:Part:Standard/LeftBoxTop.html]
+[HTML:Part:Standard/LeftBoxTop.html]
-				[HTML:Page:LeftBox]
+[HTML:Page:LeftBox]
-				[HTML:Part:Standard/LeftBoxBottom.html]
+[HTML:Part:Standard/LeftBoxBottom.html]
 			</div>
 		</div>
 		<div id="RightBoxContainer">
@@ -31,15 +32,19 @@
 			<input type="checkbox" id="RightBoxCheck" checked>
 			<br>
 			<div id="RightBox" class="ToggleBox">
-				[HTML:Page:RightBox]
+[HTML:Page:RightBox]
 			</div>
 		</div>
 		<div id="MainBox">
-			[HTML:Page:MainBox]
+[HTML:Page:MainBox]
 		</div>
 	</div>
-	<div id="BottomBox">
+	<div id="BottomBoxContainer">
-		[HTML:Part:Standard/BottomBox.html]
+		<label id="BottomBoxLabel" for="BottomBoxCheck"><b>[🏷️]</b></label>
+		<input type="checkbox" id="BottomBoxCheck">
+		<div id="BottomBox" class="ToggleBox">
+[HTML:Part:Standard/BottomBox.html]
+		</div>
 	</div>
 </div>
 </body>