diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 4dd277f..848e1fa 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -26,7 +26,8 @@ jobs:
sudo pip3 install lxml
sudo npm install -g pug-cli
git clone --depth 1 https://gitlab.com/octtspacc/staticoso
- ./Scripts/Deploy.GitHub.sh
+ sh ./Scripts/Deploy.GitHub.sh
+ sh ./Scripts/Prepare.NoStyle.sh
- name: Deploy
uses: JamesIves/github-pages-deploy-action@v4
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index b3218ee..d8912f5 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -18,8 +18,9 @@ pages:
PATH=$PATH:$PWD
cd ..
git clone --depth 1 https://gitlab.com/octtspacc/staticoso
- ./Scripts/Deploy.GitLab.sh
- ./Scripts/Deploy.Gemini.sh
+ sh ./Scripts/Deploy.GitLab.sh
+ sh ./Scripts/Deploy.Gemini.sh
+ sh ./Scripts/Prepare.NoStyle.sh
artifacts:
paths:
- public
diff --git a/Assets/Assets/Global.css b/Assets/Assets/Global.css
index 690c6c7..9a7a7ab 100644
--- a/Assets/Assets/Global.css
+++ b/Assets/Assets/Global.css
@@ -10,9 +10,15 @@
.Inline { Display: Inline; }
.InlineBlock { Display: Inline-Block; }
.NoCol { Color: Transparent !Important; }
-.NoDisplay { Display: None; }
+.NoDisplay, .DispNone { Display: None; }
+.DispBlock { Display: Block; }
.NoWrap { White-Space: NoWrap; }
+.i1em {
+ Max-Width: 1em;
+ Max-Height: 1em;
+}
+
/* Set Headings as Inline when inside Details Summaries and List Items */
Summary > H1, Summary > H2, Summary > H3, Summary > H4, Summary > H5, Summary > H6,
Li > H1, Li > H3, Li > H3, Li > H4, Li > H5, Li > H6 {
diff --git a/Assets/Assets/WM.css b/Assets/Assets/WM.css
index 8d19236..5c4be55 100644
--- a/Assets/Assets/WM.css
+++ b/Assets/Assets/WM.css
@@ -149,6 +149,20 @@ Body {
}
/**** -------------------------------------------- ****/
+#Desktop {
+ Position: Absolute;
+ Top: 0px;
+ Left: 0px;
+ Width: 100vw;
+ Height: 100vh;
+}
+
+.Absolute-↙, .Absolute-↙️ {
+ Position: Absolute;
+ Bottom: 0px;
+ Left: 0px;
+}
+
/*--------------------------------------------------------*/
@@ -222,6 +236,7 @@ Body {
}
#CountWindow .WindowContent {
Padding: 0px;
+ Min-Height: Calc(32px + 8px);
Max-Height: Calc(32px + 8px);
Overflow: Hidden;
Text-Align: Center;
@@ -237,6 +252,7 @@ Body {
/* Tared for a 88x31 buttons and everything less tall */
#SlideWindow {
Max-Width: 50vw;
+ Min-Height: Calc(32px + 8px);
Max-Height: Calc(31px + 8px + Var(--TitleBarHeight));
Bottom: Calc(8px + Var(--TaskBarHeight) + 31px);
Left: Calc(8px + 2vw);
@@ -248,4 +264,13 @@ Body {
Overflow: Hidden;
}
+#DesktopButtons {
+ Bottom: Calc(Var(--TaskBarHeight) + Var(--WindowMargin));
+ Left: Calc(Var(--WindowMargin) * 2);
+}
+#DesktopButtons:Hover {
+ Z-Index: 192 !Important;
+}
+
/*--------------------------------------------------------*/
+/* Todo: Add show desktop button 🪬 */
\ No newline at end of file
diff --git a/Assets/Assets/loli-documentatrice.css b/Assets/Assets/loli-documentatrice.css
index eeb3181..c2ee090 100644
--- a/Assets/Assets/loli-documentatrice.css
+++ b/Assets/Assets/loli-documentatrice.css
@@ -91,18 +91,18 @@ article .e-content {
Display: Inline-Block;
}
-.SectionTitle:Target {
+.staticoso-SectionTitle:Target {
Text-Decoration: Underline;
}
-.SectionLink {
+.staticoso-SectionLink {
Opacity: 0.1;
}
-.SectionLink:Hover {
+.staticoso-SectionLink:Hover {
Opacity: 0.8;
}
-.SectionLink > A::Before {
+.staticoso-SectionLink > A::Before {
Content: '🔗';
}
-.SectionLink > A > Span {
+.staticoso-SectionLink > A > Span {
Font-Size: 0;
}
diff --git a/Assets/Assets/sitoctt.css b/Assets/Assets/sitoctt.css
index c341411..2b3312a 100644
--- a/Assets/Assets/sitoctt.css
+++ b/Assets/Assets/sitoctt.css
@@ -98,31 +98,36 @@ Code:Not(Pre Code) {
#MainBox A:Not(
.NoLinkLink, .NoLinkLink A,
- .SectionLink A,
+ .staticoso-SectionLink A,
#StatCounter A,
#RingsDiv A
):Before {
Content: '🔗 ';
}
+Header > P > A > Img {
+ Display: Inline !Important;
+}
+
/* Clickable link at the left of every section title */
-.SectionTitle:Target {
+#SitesList B:Target,
+.staticoso-SectionTitle:Target {
Color: #EEDDFF !Important;
Background: #700070 !Important;
Text-Decoration: Underline;
}
-.SectionLink {
+.staticoso-SectionLink {
Position: Absolute;
Left: -1.5em;
Opacity: 0.08;
}
-.SectionLink:Hover {
+.staticoso-SectionLink:Hover {
Opacity: 0.8;
}
-.SectionLink > A::Before {
+.staticoso-SectionLink > A::Before {
Content: '🔗';
}
-.SectionLink > A > Span {
+.staticoso-SectionLink > A > Span {
Font-Size: 0;
}
diff --git a/Pages/Devlogs.md b/Pages/Devlogs.md
index 0bee214..c2e7006 100644
--- a/Pages/Devlogs.md
+++ b/Pages/Devlogs.md
@@ -23,7 +23,7 @@ _Ovviamente, scriverò soltanto la roba interessante, non tutto quello che facci
noprocess --->
-
+
#### [2022-11-11] Novità estetiche incollate con lo sputo
diff --git a/Pages/PicoBlog.md b/Pages/PicoBlog.md
index 541034d..ec64e65 100644
--- a/Pages/PicoBlog.md
+++ b/Pages/PicoBlog.md
@@ -18,7 +18,7 @@ L'idea mia è quella di creare un flusso aggiornato più o meno spesso di frasi
Chissà se navigare questa pagina ti aiuterà a conoscermi meglio, ho paura di no. In verità direi, se del mio normale blog ti fidi 5, di quello che trovi qui devi fidarti -20. Non prendere troppo seriamente ciò che scrivo qui.
Tieni a mente che le pubblicazioni più recenti vanno sempre in cima, facendo scendere in basso le precedenti. Inoltre, ogni articolo è collassato di base per questioni di ordine, ti basta cliccare sul titolo per espanderne uno.
-
+
_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!_
diff --git a/Pages/index.pug b/Pages/index.pug
index 225bb16..f4b0f95 100644
--- a/Pages/index.pug
+++ b/Pages/index.pug
@@ -67,19 +67,18 @@ p
| Invece, l'icona con l'emoji di un foglio con un segnalibro (📑) indica l'elenco delle sezioni della pagina corrente - non è essenziale, ma può tornare utile per saltare tra parti diverse di un lungo testo.
details
- summary #[h4 Note sulla compatibilità dei browser (Espandi)]
- div
- p
- | Per la migliore esperienza #[span(style='Color:#d00000;') DEVI] usare un browser con supporto almeno a CSS3 e alle immagini in formato AVIF (quest'ultima cosina, almeno finché non riesco a far funzionare il polyfill).
- | Se usi un browser antico ti garantisco che troverai tanta, tanta roba rotta (ma comunque il sito dovrebbe essere navigabile lo stesso).
- br
- | Essendo che questo sito contiene immagini AVIF, assicurati che il tuo browser sia aggiornato e decente. Safari di Apple, per esempio, mi dicono che non supporta AVIF, quindi #[span(style='Color:#d00000;') buttalo via].
- br
- | Preferibilmente #[i non] usare Chromium, che ha degli strani memory leak su pagine con animazioni complesse, e ha qualche #[i glitch particolare]. #[b Firefox] non ha questo problema, ma usa molto di più la CPU.
- br
- | Direi che la scelta non è tra il migliore ma tra il meno peggio..
- br
- i Nota: se scegli Firefox, non usare la versione ESR! È per sua natura vecchia, fossilizzata, e manca sempre di funzionalità moderne - per esempio, al giorno d'oggi ancora non supporta AVIF.
+ summary: h4 Note sulla compatibilità dei browser (Espandi)
+ div: p
+ | Per la migliore esperienza #[span(style='Color:#d00000;') DEVI] usare un browser con supporto almeno a CSS3 e alle immagini in formato AVIF (quest'ultima cosina, almeno finché non riesco a far funzionare il polyfill).
+ | Se usi un browser antico ti garantisco che troverai tanta, tanta roba rotta (ma comunque il sito dovrebbe essere navigabile lo stesso).
+ br
+ | Essendo che questo sito, per l'appunto, contiene immagini AVIF, assicurati che il tuo browser sia aggiornato e decente. Safari di Apple, per esempio, mi dicono che non supporta AVIF, quindi #[span(style='Color:#d00000;') buttalo via].
+ br
+ | Preferibilmente #[i non] usare Chromium, che ha degli strani memory leak su pagine con animazioni complesse, e ha qualche #[i glitch particolare]. #[b Firefox] non ha questo problema, ma usa molto di più la CPU.
+ br
+ | Direi che la scelta non è tra il migliore ma tra il meno peggio..
+ br
+ i Nota: se scegli Firefox, non usare la versione ESR! È per sua natura vecchia, fossilizzata, e manca sempre di funzionalità moderne - per esempio, al giorno d'oggi ancora non supporta AVIF.
h3 Script client-side
@@ -89,28 +88,26 @@ p
| Ad ogni modo, però.. per fornire alcune funzionalità extra, devo per forza avere del JS, c'è poco da fare. Qui sotto, la lista di cosa uso. #[i Tutti i file sono caricati dai server del mio sito, quindi è difficile che enti malevoli possano nasconderci malware dentro].
details
- summary #[h4 Lista di script client-side usati nel sito Web (Espandi)]
- div
- ul
- li Script interni scritti da me: #[i Al momento, nessuno attivo!]
- li #[del Polyfill per supportare le immagini AVIF su vecchi browser: #[a(href='https://github.com/Kagami/avif.js' target='_blank' rel='noopener') avif.js di Kagami]] (#[i Non ancora attivato, lo sarà a breve])
+ summary: h4 Lista di script client-side usati nel sito Web (Espandi)
+ div: ul
+ li Script interni scritti da me: #[i Al momento, nessuno attivo!]
+ li #[del Polyfill per supportare le immagini AVIF su vecchi browser: #[a(href='https://github.com/Kagami/avif.js' target='_blank' rel='noopener') avif.js di Kagami]] (#[i Non ancora attivato... #[del lo sarà a breve] #[small quando cavolo lo farò? Sono mesi che rimando, il problema è che non è una soluzione plug-and-play, devo prima capirla e poi creare uno script di wrapping 😭]])
p Di seguito, metto la mia classifica dei possibili modi per visualizzare questo sito, dal migliore al peggiore. Per standardizzazione, tutti presuppongono supporto completo ai colori (nel possibile).
details
- summary #[h4 Mie inutili digressioni su modi assolutamente assurdi di consultare il sitoctt (Espandi)]
- div
- dl
- dt • Browser Web, con supporto completo a CSS3
- dd (Perfetto!)
- dt • Stampa su carta olografica, GIF e CSS3 completamente renderizzati nel possibile
- dd (Richiede muovere il foglio a mano ma ottimo!)
- dt • Browser Web, con supporto incompleto a CSS3
- dd (Meh, OK..)
- dt • Stampa su carta normale, animazioni CSS3 e GIF non renderizzate
- dd (Buuu, mancano le animazioni..)
- dt • Browser vecchio (Web vecchio, Web testuale, o Gemini) / Stampa su carta normale, zero supporto CSS
- dd (Ma che è sto schifo?!?!)
+ summary: h4 Mie inutili digressioni su modi assolutamente assurdi di consultare il sitoctt (Espandi)
+ div: dl
+ dt: b • Browser Web, con supporto completo a CSS3
+ dd (Perfetto!)
+ dt: b • Stampa su carta olografica, GIF e CSS3 completamente renderizzati nel possibile
+ dd (Richiede muovere il foglio a mano ma ottimo!)
+ dt: b • Browser Web, con supporto incompleto a CSS3
+ dd (Meh, OK..)
+ dt: b • Stampa su carta normale, animazioni CSS3 e GIF non renderizzate
+ dd (Buuu, mancano le animazioni..)
+ dt: b • Browser vecchio (Web vecchio, Web testuale, o Gemini) / Stampa su carta normale, zero supporto CSS
+ dd (Ma che è sto schifo?!?!)
h2 Ma di che si tratta?
@@ -146,8 +143,19 @@ h3 Web
p Il sito Web è disponibile da diverse fonti.
ul
- li Sul clearweb, sui server di #[span(style='Color:#fc6d26;') GitLab]: #[a(href='https://sitoctt.octt.eu.org') sitoctt.octt.eu.org].
- li Sull'Onion Web (#[span(style='Color:#59316b;') Tor]), sui server di Replit: #[a(href='http://sitoctt2fxjvx3lc2iqqef2aeulflprjaasv2xl4zi7sxxbmvjy5b5yd.onion') sitoctt2fxjvx3lc2iqqef2aeulflprjaasv2xl4zi7sxxbmvjy5b5yd.onion]. Alla fine non è più ospitato in casa mia, ma forse è meglio così, è un carico in meno per il povero serverino di fortuna che ho (al momento, una console Nintendo Switch con Ubuntu).
+ li Sul #[b clearweb] HTTPS, sui server di #[span(style='Color:#fc6d26;') GitLab]: #[a(href='https://sitoctt.octt.eu.org') sitoctt.octt.eu.org].
+ li Sull'#[b Onion Web] (#[span(style='Color:#59316b;') Tor]), sui server di Replit: #[a(href='http://sitoctt2fxjvx3lc2iqqef2aeulflprjaasv2xl4zi7sxxbmvjy5b5yd.onion') sitoctt2fxjvx3lc2iqqef2aeulflprjaasv2xl4zi7sxxbmvjy5b5yd.onion]. Alla fine non è più ospitato in casa mia, ma forse è meglio così, è un carico in meno per il povero serverino di fortuna che ho (al momento, #[del una console Nintendo Switch con Ubuntu] il Raspberry Pi 3).
+
+details
+ summary: h4 Opzioni di compatibilità per sistemi obsoleti o esotici (Espandi)
+ div: dl
+ dt: b • Versione HTTP di base
+ dd
+ | Il sito include funzioni CSS complesse e relativamente moderne, per poter fornire effetti grafici (e funzionali) epici. Ironia della sorte, per quanto visualizzando le pagine su browser veramente vecchi, che mancano di supporto CSS totale o quasi, il tutto si vede brutto ma è leggibile.. su browser che sono #[i sia troppo vecchi e sia troppo nuovi] si presentano bug parecchio gravi, che rendono impossibile usare alcuni menù o addirittura leggere il testo!
+ br
+ | Oltre al fatto che (nel possibile) voglio supportare sistemi vecchi, 'ste maledette rogne si presentano anche su dispositivi meno popolari ma attuali, tipo il Kindle! Insomma, per i troppi browser che non includono un'impostazione per disattivare completamente il CSS, era d'obbligo fare quello che ho fatto: al percorso #[a(href="./Plain") /Plain] sui miei domini del clearweb c'è una root parallela, e pagine con uguale contenuto ma CSS ridotto all'osso.
+ dt: b • HTTP non cifrato
+ dd Per evitare problemi ci ho dedicato un sottodominio dedicato, tenendo HTTPS forzato sul principale; ma, visto che non mi richiede manutenzione, ho fatto si che dal dominio di quinto (!) livello "#[span(style="Font-Style: Monospace;") http]" si acceda al sito tramite HTTP non cifrato (ospitato da GitHub, stavolta): in poche parole, l'indirizzo è #[code(style="Text-Decoration:Underline;") http://http.sitoctt.octt.eu.org]. I contenuti sono identici, ovviamente, ma finalmente si può navigare il sitoctt su roba come #[i Internet Explorer 4] direttamente contattando il server.
h3 Gemini
@@ -197,7 +205,7 @@ h2 Sorgenti e licenze
h3 Licenze dei contenuti
-
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 "Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale" (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.
+
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 "Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale" (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.
@@ -236,14 +244,13 @@ p
h3 Crediti speciali
details
- summary Lista di crediti e ringraziamenti speciali a chi ho preso materiale in prestito (Espandi)
- div
- ul
- li Lista di #[a(href='#-Script-client-side') script client-side], tra cui alcuni di terzi
- li Titolo animato ad onda: #[a(href='https://codepen.io/jh3y/pen/WNrXqYz' target='_blank' rel='noopener') Waaaves di jh3y]
- li Famiglia caratteri: #[a(href='https://fonts.google.com/specimen/Space+Mono' target='_blank' rel='noopener') Space Mono di Colophon Foundry]
- li Pacchetto emoji CSS: #[a(href='https://twemoji.twitter.com' target='_blank' rel='noopener') Twemoji di Twitter], via #[a(href='https://gitlab.com/octtspacc/twemoji-astonishing' target='_blank' rel='noopener') Twemoji Astonishing]
- li Alcuni bottoni 88x31 non identitari: #[a(href='https://cyber.dabamos.de/88x31' target='_blank' rel='noopener') 88x31 GIF Collection di cyber.dabamos.de]
+ summary: h4 Lista di crediti e ringraziamenti speciali a chi ho preso materiale in prestito (Espandi)
+ div: ul
+ li Lista di #[a(href='#-Script-client-side') script client-side], tra cui alcuni di terzi
+ li Titolo animato ad onda: #[a(href='https://codepen.io/jh3y/pen/WNrXqYz' target='_blank' rel='noopener') Waaaves di jh3y]
+ li Famiglia caratteri: #[a(href='https://fonts.google.com/specimen/Space+Mono' target='_blank' rel='noopener') Space Mono di Colophon Foundry]
+ li Pacchetto emoji CSS: #[a(href='https://twemoji.twitter.com' target='_blank' rel='noopener') Twemoji di Twitter], via #[a(href='https://gitlab.com/octtspacc/twemoji-astonishing' target='_blank' rel='noopener') Twemoji Astonishing]
+ li Alcuni bottoni 88x31 non identitari: #[a(href='https://cyber.dabamos.de/88x31' target='_blank' rel='noopener') 88x31 GIF Collection di cyber.dabamos.de]
br
hr
@@ -262,9 +269,14 @@ div#RingsDiv