From c5addb63a3536b0346359f5cde74451a5cf939c1 Mon Sep 17 00:00:00 2001 From: octospacc Date: Fri, 27 May 2022 16:24:08 +0200 Subject: [PATCH] Aggiornata home, miglioramenti CSS --- Assets/Standard.css | 49 +++++++++++++++++++++++-------- Pages/Chi-Sono.pug | 2 +- Pages/PicoBlog.pug | 5 ++-- Pages/index.pug | 20 +++++++++++-- Parts/Standard/LeftBoxBottom.html | 7 +++-- Parts/Standard/TopBox.html | 7 ++--- Templates/Standard.html | 9 +++--- 7 files changed, 70 insertions(+), 29 deletions(-) diff --git a/Assets/Standard.css b/Assets/Standard.css index d726485..c7d63e9 100644 --- a/Assets/Standard.css +++ b/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; diff --git a/Pages/Chi-Sono.pug b/Pages/Chi-Sono.pug index cd82d25..170867f 100644 --- a/Pages/Chi-Sono.pug +++ b/Pages/Chi-Sono.pug @@ -1,4 +1,4 @@ -// Title: 😺 Chi sono +// Title: 😺 Chi sono // Order: 1 h1 Chi sono? diff --git a/Pages/PicoBlog.pug b/Pages/PicoBlog.pug index f1ceae4..6835720 100644 --- a/Pages/PicoBlog.pug +++ b/Pages/PicoBlog.pug @@ -1,4 +1,4 @@ -// Title: ✉️ PicoBlog +// Title: ✉️ 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.. + diff --git a/Pages/index.pug b/Pages/index.pug index d0ce2d0..435511d 100644 --- a/Pages/index.pug +++ b/Pages/index.pug @@ -1,4 +1,4 @@ -// Title: 🏠 ~Home~ +// Title: 🏠 ~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. diff --git a/Parts/Standard/LeftBoxBottom.html b/Parts/Standard/LeftBoxBottom.html index cbb4730..e743797 100644 --- a/Parts/Standard/LeftBoxBottom.html +++ b/Parts/Standard/LeftBoxBottom.html @@ -3,9 +3,10 @@
- - - + + + + diff --git a/Parts/Standard/TopBox.html b/Parts/Standard/TopBox.html index f3a4964..9fe3c2f 100644 --- a/Parts/Standard/TopBox.html +++ b/Parts/Standard/TopBox.html @@ -1,5 +1,5 @@ -
-

+ - -
+
diff --git a/Templates/Standard.html b/Templates/Standard.html index 95e80c1..43a0625 100644 --- a/Templates/Standard.html +++ b/Templates/Standard.html @@ -18,7 +18,7 @@
- +
@@ -28,7 +28,7 @@
- +
@@ -40,7 +40,7 @@
- +
[HTML:Part:Standard/BottomBox.html] @@ -48,4 +48,5 @@
- + +