Aggiornata home, miglioramenti CSS

Assets/Standard.css

@@ -18,6 +18,10 @@ Body {
 	Box-Sizing: Border-Box;
 }
 Details Div {
+	Margin: 8px;
+	Padding: 4px;
+}
+Details Div Details {
 	Border: 2px Solid Purple;
 	Margin: 8px;
 	Padding: 4px;
@@ -52,6 +56,9 @@ ul {
 	Width: 100%;
 	Padding: var(--ContentPadding);
 }
+#TopBox * {
+	Display: Inline;
+}
 #LeftBox, #LeftBoxContainer {
 	Float: Left;
 	Padding: var(--ContentPadding);
@@ -87,6 +94,8 @@ ul {
 	Color: #fafaf0;
 	Background: rgba(64, 0, 64, 0.6);
 	Text-Align: Right;
+	Padding-Left: var(--ContentPadding) !important;
+	Padding-Right: var(--ContentPadding) !important;
 	Z-Index: -1;
 }
 #LeftBoxContainer, #RightBoxContainer, #BottomBoxContainer {
@@ -101,6 +110,15 @@ ul {
 	Padding: var(--ScreenBorderPadding);
 	Width: 100%;
 }
+#TopBoxLeft {
+	Text-Align: Left;
+	Display: Inline-Block;
+}
+#TopBoxRight {
+	Text-Align: Right;
+	Float: Right;
+	Clear: Both;
+}
 
 #LeftBoxCheck, #LeftBoxLabel {
 	Float: Left;
@@ -135,6 +153,24 @@ ul {
 .NoDisplay {
 	Display: None;
 }
+
+/* Gradienti */
+
+.MainIdTextGradientL {
+	Background: linear-gradient(to left, #d000d0, #8040d0);
+	Color: Transparent;
+	-webkit-background-clip: Text;
+	Background-Clip: Text;
+}
+.MainIdTextGradientR {
+	Background: linear-gradient(to right, #d000d0, #8040d0);
+	Color: Transparent;
+	-webkit-background-clip: Text;
+	Background-Clip: Text;
+}
+
+/* Animazioni */
+
 .BlinkA {
 	Animation: BlinkerA 0.25s Step-Start Infinite;
 }
@@ -152,19 +188,6 @@ ul {
 	100% {Position: Static; Visibility: Visible;}
 }
 
-.MainIdTextGradientL {
-	Background: linear-gradient(to left, #d000d0, #8040d0);
-	Color: Transparent;
-	-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 {
 	Text-Align: center;

Pages/Chi-Sono.pug

@@ -1,4 +1,4 @@
-// Title: 😺 Chi sono
+// Title: <span class="twa twa-grinning-cat"><span>😺</span></span> Chi sono
 // Order: 1
 
 h1 Chi sono?

Pages/PicoBlog.pug

@@ -1,4 +1,4 @@
-// Title: ✉️ PicoBlog
+// Title: <span class="twa twa-envelope"><span>✉️</span></span> PicoBlog
 // Order: 2
 
 h1 Il mio PicoBlog
@@ -31,7 +31,8 @@ details
 			summary [2022-05-27] Prova
 			p Questo articolo è solo una prova, forse verrà cancellato.
 
-	div
+
 		details
 			summary [2022-05-27] Il PicoBlog inizia!
 			p A cosa serve questo post? A farmi vedere l'effetto iniziale ed eventualmente sistemare del CSS..
+

Pages/index.pug

@@ -1,4 +1,4 @@
-// Title: 🏠 ~Home~
+// Title: <span class="twa twa-house"><span>🏠</span></span> ~Home~
 // Order: 0
 
 h1 Ciao!! (UwU)
@@ -42,7 +42,11 @@ p
 	br
 	| 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.
 	br
-	| Ah, non so se hai notato, ma negli angoli in alto dello schermo ci sono dei tastini. Lo sto scrivendo perché ho paura non si capisca, che devo fare... Vabbe, se premi lì puoi accedere ai menu ad albero, rispettivamente delle pagine del sito a sinistra (#[span(class='twa twa-blue-book') #[span 📘️]]), e delle sezioni della pagina a destra (#[span(class='twa twa-bookmark') #[span 🔖️]]). Quello di sinistra soprattutto è importante per navigare il sito.
+	| Ah, non so se hai notato, ma negli angoli in alto dello schermo ci sono dei tastini. Lo sto scrivendo perché ho paura non si capisca, che devo fare... Vabbe, se premi lì puoi accedere ai menu ad albero, rispettivamente delle pagine del sito a sinistra (
+	big(class='twa twa-books') #[span 📚]
+	| ), e delle sezioni della pagina a destra (
+	big(class='twa twa-bookmark-tabs') #[span 📑]
+	| ). Quello di sinistra soprattutto è importante per navigare il sito.
 
 p
 	| A tal proposito, per la migliore esperienza #[span(style='Color:#d00000;') DEVI] usare un browser con supporto almeno a CSS3. Chissà se usando un browser antico si rompe roba in giro, eh...
@@ -111,6 +115,18 @@ p
 	| Per la roba presa in prestito, invece, verrà sempre indicata la fonte da cui ho prelevato e la licenza, che sia questa di dominio pubblico, Creative Commons, o non specificata.
 	br
 	| Occhio, che i crediti per le cosine HTML e CSS spesso li lascio soltanto nei sorgenti della pagina.. Quindi, in caso, controllate lì per questo genere di crediti. Per cose come immagini o testi, invece, eventuali crediti sono parte visibile della pagina, vicini all'oggetto preso in prestito.
+	br
+	| Comunque, ho pensato di creare questa sezione della pagina subito sotto, dedicata a crediti speciali (che compilo quando mi ricordo).
+
+h3 Crediti speciali
+
+details
+	summary Espandi la lista di crediti e ringraziamenti speciali a chi ho preso materiale in prestito
+	div
+		p Titolo animato ad onda: #[a(href='https://codepen.io/jh3y/pen/WNrXqYz' target='_blank' rel='noopener') Waaaves di jh3y]
+		p Famiglia caratteri: #[a(href='https://fonts.google.com/specimen/Space+Mono' target='_blank' rel='noopener') Space Mono di Colophon Foundry]
+		p Pacchetto emoji: #[a(href='https://twemoji.twitter.com' target='_blank' rel='noopener') Twemoji di Twitter], via #[a(href='https://github.com/SebastianAigner/twemoji-amazing' target='_blank' rel='noopener') Twemoji-Amazing di SebastianAigner]
+		p Alcuni bottoni 88x31: #[a(href='https://cyber.dabamos.de/88x31' target='_blank' rel='noopener') 88x31 GIF Collection di cyber.dabamos.de]
 
 p
 	| Parlando dei sorgenti del sito, quelli HTML dell'effettiva pagina caricata dal browser potrebbero essere difficili da leggere. Questo è perché in realtà non scrivo direttamente l'HTML completo per comporre il sito.

Parts/Standard/LeftBoxBottom.html

@@ -3,9 +3,10 @@
 	<img src="/sitoctt-assets/Buttons/Follow-Me-On-Mastodon.gif">
 </a>
 <br>
-<a class="NoCol" href="https://www.torproject.org/it" target="_blank" rel="noopener">
-	<img src="/sitoctt-assets/Buttons/Tor.gif">
-</a>
 <a class="NoCol" href="https://www.gnu.org/home.it" target="_blank" rel="noopener">
 	<img src="/sitoctt-assets/Buttons/Made-On-GNU-Linux.gif">
 </a>
+<a class="NoCol" href="https://www.torproject.org/it" target="_blank" rel="noopener">
+	<img src="/sitoctt-assets/Buttons/Tor.gif">
+</a>
+

Parts/Standard/TopBox.html

@@ -1,5 +1,5 @@
-<div style="Text-Align:Left; Display:Inline;">
+<div id="TopBoxLeft">
-	<h3 style="Display:Inline;">
+	<h3>
 		<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>
@@ -7,8 +7,7 @@
 	</h3>
 </div>
 
-
+<div id="TopBoxRight">
-<div style="Text-Align:Right; Width:100%;">
 	<a href="/postoctt/index.html#-Sorgenti-e-licenze">
 		<img src="/sitoctt-assets/Buttons/CC-BY-SA.gif">
 	</a>

Templates/Standard.html

@@ -18,7 +18,7 @@
 	</div>
 	<div id="MiddleBox">
 		<div id="LeftBoxContainer">
-			<label id="LeftBoxLabel" for="LeftBoxCheck"><b>[📘️]</b></label>
+			<label id="LeftBoxLabel" for="LeftBoxCheck"><big class="twa twa-books"><b>[📚]</b></big></label>
 			<input type="checkbox" id="LeftBoxCheck" checked>
 			<br>
 			<div id="LeftBox" class="ToggleBox">
@@ -28,7 +28,7 @@
 			</div>
 		</div>
 		<div id="RightBoxContainer">
-			<label id="RightBoxLabel" for="RightBoxCheck"><b>[🔖️]</b></label>
+			<label id="RightBoxLabel" for="RightBoxCheck"><big class="twa twa-bookmark-tabs"><b>[📑]</b></big></label>
 			<input type="checkbox" id="RightBoxCheck" checked>
 			<br>
 			<div id="RightBox" class="ToggleBox">
@@ -40,7 +40,7 @@
 		</div>
 	</div>
 	<div id="BottomBoxContainer">
-		<label id="BottomBoxLabel" for="BottomBoxCheck"><b>[🏷️]</b></label>
+		<label id="BottomBoxLabel" for="BottomBoxCheck"><big class="twa twa-label"><b>[🏷️]</b></big></label>
 		<input type="checkbox" id="BottomBoxCheck">
 		<div id="BottomBox" class="ToggleBox">
 [HTML:Part:Standard/BottomBox.html]
@@ -49,3 +49,4 @@
 </div>
 </body>
 </html>
+