mirror of https://gitlab.com/octtspacc/sitoctt
Aggiornamento UI sitoctt: migliore lista post, modalità a colonne
This commit is contained in:
parent
9cfacf4ac0
commit
b8debbe2be
|
|
@ -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 {
|
||||
Opacity: 0.8;
|
||||
}
|
||||
.staticoso-SectionLink > A::Before {
|
||||
Content: '🔗';
|
||||
}
|
||||
.staticoso-SectionLink > A > Span {
|
||||
Font-Size: 0;
|
||||
}
|
||||
.staticoso-SectionLink:Hover { Opacity: 0.8; }
|
||||
.staticoso-SectionLink > A:Before { Content: '🔗'; }
|
||||
.staticoso-SectionLink > A { Border-Radius: Var(--BorderRad0); }
|
||||
.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%;
|
||||
Width: 72%;
|
||||
Right: 2%;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
[](#-Il-mio)
|
||||
[](#-s-a-1)
|
||||
[](#-s-a-2)
|
||||
[](#-s-a-3)
|
||||
[](#-s-a-4)
|
||||
[](#-s-a-5)
|
||||
[](#-s-a-6)
|
||||
[](#-Il-mio)
|
||||
[](#-s-a-1)
|
||||
[](#-s-a-2)
|
||||
[](#-s-a-3)
|
||||
[](#-s-a-4)
|
||||
[](#-s-a-5)
|
||||
[](#-s-a-6)
|
||||
</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!_
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<strong><span class="twa twa-🏳️🌈"><span>🏳️🌈</span></span> Translate</strong>
|
||||
</a>]
|
||||
|
||||
[<a href="#Container">
|
||||
<strong><span class="twa twa-⬆️ twa-up-arrow"><span>⬆️</span></span> Torna Su</strong>
|
||||
</a>]
|
||||
[<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 style="font-size: smaller;"><span class="twa twa-🏳️🌈"><span>🏳️🌈</span></span>Translate</strong><!--
|
||||
--></a>]<!--
|
||||
--> <!--
|
||||
-->[<a title="Torna in Alto alla Pagina" href="#Container"><!--
|
||||
--><strong><span class="twa twa-⬆️ twa-up-arrow"><span>⬆️</span></span>Su</strong><!--
|
||||
--></a>]
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -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><!--
|
||||
--> | <!--
|
||||
--><small><a href="https://gitlab.com/octtspacc/sitoctt/-/issues" [:HTMLTgtBlank:]>Commenti/Issue/PR?</a></small>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<input type="checkbox" id="BottomBoxCheck">
|
||||
<label id="BottomBoxLabel" for="BottomBoxCheck"><big><b>[<span class="twa twa-label twa-🏷️"><span>🏷️</span></span>]</b></big></label>
|
||||
<input type="checkbox" id="BottomBoxCheck" class="ToggleBoxCheck">
|
||||
<div id="BottomBox" class="ToggleBox">
|
||||
<staticoso:StaticPart:Standard/BottomBox.html>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue