Aggiornamento UI sitoctt: migliore lista post, modalità a colonne

Assets/Assets/sitoctt.css

@@ -5,12 +5,17 @@
 :Root {
 	--ScreenBorderPadding: 4px;
 	--ContentPadding: 8px;
+	--BorderRad0: 2px;
 
 	--BodyTextColor: #080810;
 	--cPurpleLighter: #D000D0;
 	--cBasePinky: #EEDDFF;
 	--cBackDark: #300030;
 	--cPurpleDarker: #700070;
+
+	--mDesktopMainWidth: 72.5%;
+	--mDesktopSideWidth: 22.5%/*24%*/;
+	--mDesktopSideLeft: 12px/*8*/;
 }
 
 * {
@@ -155,22 +160,17 @@ Header > P > A > Img {
 	Left: -1.5em;
 	Opacity: 0.08;
 }
-.staticoso-SectionLink:Hover {
+.staticoso-SectionLink:Hover { Opacity: 0.8; }
-	Opacity: 0.8;
+.staticoso-SectionLink > A:Before { Content: '🔗'; }
-}
+.staticoso-SectionLink > A { Border-Radius: Var(--BorderRad0); }
-.staticoso-SectionLink > A::Before {
+.staticoso-SectionLink > A > Span { Font-Size: 0; }
-	Content: '🔗';
-}
-.staticoso-SectionLink > A > Span {
-	Font-Size: 0;
-}
 
 A:Hover:Not(
 	.NoABigger, .NoHoverLight,
 	:Where(.NoABigger, .NoHoverLight) A,
 	:Where(H3, H4, H5, H6) > A
 ),
-:Where(.YesHoverLight, .YesHoverLight A):Hover {
+.YesHoverLight:Hover, .YesHoverLight A:Hover {
 	Color: Var(--cBasePinky) !Important;
 	Background: Var(--cPurpleDarker) !Important;
 }
@@ -180,8 +180,6 @@ A:Hover:Not(
 	/* Margin-Bottom: -4px; */
 }
 
-Details > Summary:hover { Font-Size: 15pt; }
-
 H1:hover { Font-Size: 28pt; }
 H2:hover { Font-Size: 21.5pt; }
 H3:hover { Font-Size: 17.5pt; }
@@ -197,6 +195,7 @@ IFrame {
 	Max-Width: 90vw;
 	Color: #fafaf0;
 	Background: Var(--cBackDark);
+	Border-Radius: Var(--BorderRad0);
 }
 
 :Where(#LeftBox, #RightBox, #BottomBox) A { Color: Var(--cBasePinky); }
@@ -292,7 +291,7 @@ IFrame {
 	Z-Index: -1;
 }
 #LeftBoxContainer, #RightBoxContainer { Position: Absolute; }
-#LeftBoxContainer, #RightBoxContainer, #BottomBoxContainer { Color: #808080; }
+#LeftBoxContainer, #RightBoxContainer, #BottomBoxContainer, #DesktopModeCheck { Color: #808080; }
 #BottomBox, #BottomBoxContainer {
 	Box-Sizing: Border-Box;
 	Position: Fixed;
@@ -300,6 +299,7 @@ IFrame {
 	Left: 0;
 	Right: 0;
 	Width: 100%;
+	Min-Height: 48px;
 }
 #BottomBoxContainer { Padding: Var(--ScreenBorderPadding); }
 #TopBoxLeft {
@@ -352,11 +352,11 @@ IFrame {
 	Left: 0;
 	Margin: Var(--ScreenBorderPadding);
 }
-#LeftBoxCheck, #RightBoxCheck, #BottomBoxCheck {
+.ToggleBoxCheck {
 	Position: Fixed;
 	Opacity: 0;
 }
-:Checked ~ .ToggleBox {
+.ToggleBoxCheck:Checked ~ .ToggleBox {
 	Display: None;
 	Visibility: Hidden;
 }
@@ -364,7 +364,8 @@ IFrame {
 /* No selezione */
 #LeftBox, #LeftBoxContainer,
 #RightBox, #RightBoxContainer, 
-#BottomBoxCheck, #BottomBoxLabel {
+#BottomBoxLabel, #BottomBoxCheck,
+#DesktopModeLabel, #DesktopModeCheck {
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
 	-khtml-user-select: none;
@@ -373,14 +374,93 @@ IFrame {
 	User-Select: none;
 }
 
-/*
+#PageContent .staticoso-TreeList.staticoso-PagesList Li {
+	/*background: RGBA(128,128,128,0.5);
+	border-radius: 2px;
+	box-shadow: 0px 2px 2px pink;
+	margin-bottom: 1em;*/
+	Display: Block;
+}
+
+#PageContent .staticoso-TreeList.staticoso-PagesList Li > Span + A {
+	Font-Size: Larger;
+}
+
+@Media (Max-Width: 750px) {
+	#PageContent .staticoso-TreeList.staticoso-PagesList Li > Span + A {
+		Display: Block;
+		Margin-Bottom: 1em;
+	}
+}
+
+@Media (Min-Width: 750px) {
+	#PageContent .staticoso-TreeList.staticoso-PagesList Li { Display: Flex; }
+	#PageContent .staticoso-TreeList.staticoso-PagesList Li > Span + A {
+		Margin-Bottom: 1em;
+	}
+	/*
+	#PageContent .staticoso-TreeList.staticoso-PagesList Li:Not(:First-Of-Type) > Span {
+		Margin-Left: 16px;
+	}
+	#PageContent .staticoso-TreeList.staticoso-PagesList Li:Not(:First-Of-Type) > Span:Before {
+		background: black;
+		content: "";
+		min-width: 2px;
+		max-width: 2px;
+	}
+	*/
+}
+
+@Media (Max-Width: 1000px) {
+	Details > Summary:Hover { Font-Size: 15pt; }
+
+	#DesktopModeCheck, #DesktopModeLabel { Display: None; }
+}
+
+/*--------------------------------------------------------*/
+
+
+
+/*--------------------------------------------------------*
+ *    Desktop view mode                                   *
+ *--------------------------------------------------------*/
+
 @Media (Min-Width: 1000px) {
-	#MainBox {
+	#DesktopModeCheck/*:Unchecked*/ {
+		Position: Absolute;
+		/* Yeah what? These values have an unknown relationship *\
+		\* to the Top and Left of the label                     */
+		Top: 5.0em;
+		Left: 7.5em;
+		/*Opacity: 0;*/
+	}
+	/*#DesktopModeCheck:Unchecked ~*/ #DesktopModeLabel {
+		Position: Absolute;
+		/* Idk why sometimes with some zoom levels     *\
+		\* this appears to shift up or down 1-2 pixels */
+		Top: 3.55em;
+		Left: 5em;
+	}
+	
+	/* Nota: Forse dovrebbe stare più in alto, a destra, a fianco del tasto Menu */
+	#DesktopModeCheck:Checked {
+		Position: Fixed;
+		Top: 5.5em;
+		Left: 3.5em;
+	}
+	#DesktopModeCheck:Checked ~ #DesktopModeLabel {
+		Position: Fixed;
+		Top: 4em;
+		Left: 2em;
+	}
+
+	#DesktopModeCheck:Checked ~ Div #MainBox {
 		Top: 0px;
 		Left: Unset;
-		Right: 2.5%;
+		Right: 2%;
-		Width: 72%;
+		Width: Var(--mDesktopMainWidth);
 	}
+	/*
 	#LeftBoxContainer, #RightBoxContainer {
 		Float: None;
 		Width: 24%;
@@ -390,8 +470,33 @@ IFrame {
 		Padding: 0px;
 		Margin: 0px;
 	}
+	*/
+	#DesktopModeCheck:Checked ~ Div #LeftBox { max-height: calc(100vh - 52px - 3.5em); Z-Index: 256; }
+	#DesktopModeCheck:Checked ~ Div #RightBox { max-height: calc(100vh - 56px - 4em); }
+	#DesktopModeCheck:Checked ~ Div #LeftBox,
+	#DesktopModeCheck:Checked ~ Div #RightBox {
+		Position: Fixed;
+		Bottom: 52px;
+		Left: Var(--mDesktopSideLeft)/*8px*/;
+		Width: Calc(Var(--mDesktopSideWidth) - Var(--mDesktopSideLeft));
+		Overflow: Scroll;
+	}
+	#DesktopModeCheck:Checked ~ Div #LeftBoxContainer > Details > Summary,
+	#DesktopModeCheck:Checked ~ Div #RightBoxContainer > Details > Summary {
+		position: fixed;
+		left: Calc(Var(--mDesktopSideWidth) - Var(--mDesktopSideLeft) - 60px);
+	}
+	#DesktopModeCheck:Checked ~ Div #LeftBoxContainer > Details > Summary { Top: 1em; }
+	#DesktopModeCheck:Checked ~ Div #RightBoxContainer > Details > Summary { Top: 4em; }
+	#DesktopModeCheck:Checked ~ Div #TopBoxLeft { Position: Fixed; }
+	
+	/* Disable this hover for now: Strange bug with summary button of right sidebar, *\
+	\* goes way lower than it should (?) and does glitchy movements                  */
+	#DesktopModeCheck:Checked ~ Div Details > Summary:Not(
+		#LeftBoxContainer > Details > Summary,
+		#RightBoxContainer > Details > Summary
+	):Hover { Font-Size: 15pt; }
 }
-*/
 
 /*--------------------------------------------------------*/
 
@@ -422,7 +527,8 @@ IFrame {
  *    Animazioni                                          *
  *--------------------------------------------------------*/
 
-H1, H2, H3, A, Img, Video, Summary {
+H1, H2, H3, A, Img, Video, Summary,
+.YesHoverLight {
 	Transition: 0.3s;
 }
 

Pages/Raccolte/Internet/Raccolta-Siti-Internet.md

@@ -13,13 +13,13 @@ Le bandiere di nazione (emoji, forse non visibili su browser antichi) accanto ai
 <div markdown="1" id="SitesList" class="NoImgCenter NoLinkLink ImgShiftedH Pixelated">
 
 <marquee markdown="1">
-[![✨sitoctt✨]([staticoso:Folder:Assets:AbsoluteRoot]/Media/Buttons/Sites/sitoctt-1.png)](#-Il-mio)
+[![✨sitoctt✨]([staticoso:Folder:Assets:AbsoluteRoot]/Media/Buttons/Sites/sitoctt-1.png)](#-Il-mio)&nbsp;
-[![serimemo]([staticoso:Folder:Assets:AbsoluteRoot]/Media/Buttons/Sites/serimemo-88x31.png)](#-s-a-1)
+[![serimemo]([staticoso:Folder:Assets:AbsoluteRoot]/Media/Buttons/Sites/serimemo-88x31.png)](#-s-a-1)&nbsp;
-[![Dante Scanline]([staticoso:Folder:Assets:AbsoluteRoot]/Media/Buttons/Sites/DanteScanline-88x31.png)](#-s-a-2)
+[![Dante Scanline]([staticoso:Folder:Assets:AbsoluteRoot]/Media/Buttons/Sites/DanteScanline-88x31.png)](#-s-a-2)&nbsp;
-[![2Bit]([staticoso:Folder:Assets:AbsoluteRoot]/Media/Buttons/Sites/2Bit-88x31.png)](#-s-a-3)
+[![2Bit]([staticoso:Folder:Assets:AbsoluteRoot]/Media/Buttons/Sites/2Bit-88x31.png)](#-s-a-3)&nbsp;
-[![neonaut]([staticoso:Folder:Assets:AbsoluteRoot]/Media/Buttons/Sites/neonaut-88x31.png)](#-s-a-4)
+[![neonaut]([staticoso:Folder:Assets:AbsoluteRoot]/Media/Buttons/Sites/neonaut-88x31.png)](#-s-a-4)&nbsp;
-[![Yesterweb]([staticoso:Folder:Assets:AbsoluteRoot]/Media/Buttons/Sites/Yesterweb-88x31.png)](#-s-a-5)
+[![Yesterweb]([staticoso:Folder:Assets:AbsoluteRoot]/Media/Buttons/Sites/Yesterweb-88x31.png)](#-s-a-5)&nbsp;
-[![OpenBooks]([staticoso:Folder:Assets:AbsoluteRoot]/Media/Buttons/Sites/OpenBooks-88x31.gif)](#-s-a-6)
+[![OpenBooks]([staticoso:Folder:Assets:AbsoluteRoot]/Media/Buttons/Sites/OpenBooks-88x31.gif)](#-s-a-6)&nbsp;
 </marquee>  
 _Questi sopra sono i siti della lista che hanno un bottone 88x31. Vuoi anche tu il privilegio di stare anche in cima? Allora muoviti a disegnare st'immaginetta, su!_
 

Pages/index.pug

@@ -5,7 +5,7 @@
 // % Index = True
 // % Order = 10
 // % Image = [staticoso:Folder:Assets:AbsoluteRoot]/RichPreview/index.png
-// % UpdatedOn = 2023-02-01
+// % UpdatedOn = 2023-02-17
 
 h1 Ciao!! (UwU)
 
@@ -199,7 +199,7 @@ p
 	br
 	| - Suggerimento: se usi Friendica, puoi copiare il link al feed e incollarlo nella barra di ricerca, per poterlo seguire come se fosse un profilo!
 
-p Inoltre, se usi una qualunque piattaforma del #[b Fediverso ActivityPub] (Mastodon, Pleroma, Misskey, ...) puoi seguire il bot del sitoctt, così da ricevere nel tuo feed Home i nuovi post: #[a(href='https://botsin.space/@sitoctt' target='_blank' rel='me noopener') @sitoctt@botsin.space]!
+p #[del Inoltre, se usi una qualunque piattaforma del #[b Fediverso ActivityPub] (Mastodon, Pleroma, Misskey, ...) puoi seguire il bot del sitoctt, così da ricevere nel tuo feed Home i nuovi post: #[a(href='https://botsin.space/@sitoctt' target='_blank' rel='me noopener') @sitoctt@botsin.space]!] Per alcune complicazioni iniziate a fine agosto 2022, il bot non è accessibile dalla più grande istanza Mastodon italiana, #[i mastodon.uno], quindi è quasi praticamente inutile ora. Non lo tolgo di mezzo solo perché mi costerebbe di più fare ciò che lasciarlo dov'è #[b :P]; comunque ne dovrei creare uno nuovo, prima o poi.
 
 h2 Sorgenti e licenze
 

StaticParts/Standard/BottomBox.html

@@ -1,9 +1,9 @@
 <h3 class="NoSelect">
-	[<a href="https://translate.google.com/translate?sl=[staticoso:PageLang]&tl=en&hl=en&u=[staticoso:SiteDomain]/[staticoso:PagePath]&client=webapp">
+	[<a title="Open this Page in Google Translate" href="https://translate.google.com/translate?sl=[staticoso:PageLang]&tl=en&hl=en&u=https://sitoctt.octt.eu.org/[staticoso:PagePath]&client=webapp"><!--
-		<strong><span class="twa twa-🏳️‍🌈"><span>🏳️‍🌈</span></span> Translate</strong>
+		--><strong style="font-size: smaller;"><span class="twa twa-🏳️‍🌈"><span>🏳️‍🌈</span></span>Translate</strong><!--
-	</a>]
+	--></a>]<!--
-	
+	-->&nbsp;<!--
-	[<a href="#Container">
+	-->[<a title="Torna in Alto alla Pagina" href="#Container"><!--
-		<strong><span class="twa twa-⬆️ twa-up-arrow"><span>⬆️</span></span> Torna Su</strong>
+		--><strong><span class="twa twa-⬆️ twa-up-arrow"><span>⬆️</span></span>Su</strong><!--
-	</a>]
+	--></a>]
 </h3>

StaticParts/Standard/Footer.html

@@ -16,4 +16,8 @@
 
 <p><a href="<staticoso:SiteRelativeRoot>index.html#-Sorgenti-e-licenze">(Part.) Copyright</a> (C) 2022-2023, OctoSpacc</p>
 
-<p id="BuildTimeLine">Pagina compilata in data: <span><staticoso:BuildTime></span></p>
+<p>
+	<span id="BuildTimeLine">Pagina compilata in data: <span><staticoso:BuildTime></span></span><!--
+	-->&nbsp;|&nbsp;<!--
+	--><small><a href="https://gitlab.com/octtspacc/sitoctt/-/issues" [:HTMLTgtBlank:]>Commenti/Issue/PR?</a></small>
+</p>

Templates/sitoctt.html

@@ -15,13 +15,15 @@
 	<staticoso:DynamicPart:*/Header>
 </div>
 <div id="Container">
+	<input type="checkbox" id="DesktopModeCheck" checked="true">
+	<label title="Attiva/Disattiva Vista a Colonne" id="DesktopModeLabel" for="DesktopModeCheck"><big><b>[<span class="twa twa-framed-picture twa-🖼️"><span>🖼️</span></span>]</b></big></label>
 	<div id="TopBox">
 		<staticoso:StaticPart:Standard/TopBox.html>
 	</div>
 	<div id="MiddleBox">
 		<div id="LeftBoxContainer">
 			<details>
-				<summary><big><b>[<span class="twa twa-books"><span>📚</span></span>]</b></big></summary>
+				<summary title="Menu Globale"><big><b>[<span class="twa twa-books twa-📚"><span>📚</span></span>]</b></big></summary>
 				<div id="LeftBox">
 					<staticoso:SiteMenu>
 					<hr>
@@ -33,7 +35,7 @@
 		</div>
 		<div id="RightBoxContainer">
 			<details>
-				<summary><big><b>[<span class="twa twa-bookmark-tabs"><span>📑</span></span>]</b></big></summary>
+				<summary title="Sezioni della Pagina"><big><b>[<span class="twa twa-bookmark-tabs twa-📑"><span>📑</span></span>]</b></big></summary>
 				<div id="RightBox">
 					<staticoso:PageSections>
 				</div>
@@ -58,8 +60,8 @@
 		</div>
 	</div>
 	<div id="BottomBoxContainer">
-		<label id="BottomBoxLabel" for="BottomBoxCheck"><big><b>[<span class="twa twa-label"><span>🏷️</span></span>]</b></big></label>
+		<label id="BottomBoxLabel" for="BottomBoxCheck"><big><b>[<span class="twa twa-label twa-🏷️"><span>🏷️</span></span>]</b></big></label>
-		<input type="checkbox" id="BottomBoxCheck">
+		<input type="checkbox" id="BottomBoxCheck" class="ToggleBoxCheck">
 		<div id="BottomBox" class="ToggleBox">
 			<staticoso:StaticPart:Standard/BottomBox.html>
 		</div>