Test bottoni 88x31, footer collassabile

This commit is contained in:
octospacc 2022-05-26 23:30:42 +02:00
parent 7eba2ea033
commit eebfacdca5
6 changed files with 72 additions and 24 deletions

View File

@ -74,16 +74,22 @@ ul {
Padding-Bottom: calc(var(--ContentPadding) + 80px);
}
#BottomBox {
Box-Sizing: Border-Box;
Color: #fafaf0;
Background: rgba(64, 0, 64, 0.6);
Text-Align: Right;
Z-Index: -1;
}
#BottomBoxContainer {
Color: #808080;
}
#BottomBox, #BottomBoxContainer {
Box-Sizing: Border-Box;
Position: Fixed;
Bottom: 0;
Left: 0;
Right: 0;
Padding: var(--ScreenBorderPadding);
Width: 100%;
Text-Align: Right;
}
#LeftBoxCheck, #LeftBoxLabel {
@ -96,7 +102,18 @@ ul {
Right: 0;
Margin: var(--ScreenBorderPadding);
}
#LeftBoxCheck, #RightBoxCheck {
#BottomBoxCheck, #BottomBoxLabel {
Float: Left;
Left: 0;
Margin: var(--ScreenBorderPadding);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#LeftBoxCheck, #RightBoxCheck, #BottomBoxCheck {
Position: Fixed;
Opacity: 0;
}

View File

@ -7,7 +7,7 @@ p Giustamente, venendo qui, che tu abbia o meno letto le informazioni generali d
p
| Io sono octt. Si, esatto, octt da cui postoctt, il mio posto, prende il nome.
br
| Io sono la webmaster di questo posto. O, forse, #[a(href='https://www.dictionary.com/browse/webmistress') webmistress] sarebbe più corretto, peccato che le persone che anche soltanto conoscono dell'esistenza di questa parola si contano sulle dita di una mano mozzata.
| Io sono la webmaster di questo posto. O, forse, #[a(href='https://www.dictionary.com/browse/webmistress' target='_blank' rel='noopener') webmistress] sarebbe più corretto, peccato che le persone che anche soltanto conoscono dell'esistenza di questa parola si contano sulle dita di una mano mozzata.
br
| Vabbe, io ho capito che nel mondo c'era necessità di questo sito #[small (ma quando mai??)], ho immaginato il sito, ho iniziato a costruire il sito, ho messo in piedi strategie per semplificarmi la creazione del sito #[small (eee, che paroloni, ho scritto un programmino in Pitone)], ed ecco qui il risultato.
@ -21,7 +21,7 @@ p A volte spendo #[small (o perdo?)] tempo sul Fediverso, anche lì a scrivere e
p Spesso dormo anche, ahhh bello quando dormi che stai lì così, ohhh, e ogni tanto ci vuole, toh.
p Scrivo anche programmi veri e propri a volte. Più che altro, programmini, perchè se mi inbarco in grosse imprese poi rischio #[small (no no, succede spesso, quale "rischio", è una certezza)] di lasciare roba abbandonata a metà.
p Scrivo anche programmi veri e propri a volte. Più che altro, programmini, perchè se mi imbarco in grosse imprese poi rischio #[small (no no, succede spesso, quale "rischio", è una certezza)] di lasciare roba abbandonata a metà.
p Pensa te, inoltre: quando ho tempo, gioco anche ai videogiochi. In passato, molto di più, ma ad oggi impiego il mio tempo in tante altre cose, quindi il gioco è bello ma, ormai, dura sempre troppo poco.
@ -42,9 +42,9 @@ h2 I miei contatti
p
| Mi puoi trovare sul Fediverso, ai contatti da me preferiti che lascio qui sotto.
br
| #[span(style='Color:#2d2d2d;') Matrix]: #[a(href='https://matrix.to/#/@octt:octt.ddns.net') @octt:octt.ddns.net]
| #[span(style='Color:#2d2d2d;') Matrix]: #[a(href='https://matrix.to/#/@octt:octt.ddns.net' target='_blank' rel='noopener') @octt:octt.ddns.net]
br
| #[span(style='Color:#3088d4;') Mastodon]: #[a(href='https://mastodon.uno/@octo') @octo@mastodon.uno]
| #[span(style='Color:#3088d4;') Mastodon]: #[a(href='https://mastodon.uno/@octo' target='_blank' rel='noopener') @octo@mastodon.uno]
h1 Fine?

View File

@ -26,13 +26,13 @@ div
p
| Esatto, il
strong ✨
strong(class='twa twa-sparkles') #[span]
strong(class='MainIdTextGradientL') postoctt
strong ✨
strong(class='twa twa-sparkles') #[span]
| , Letteralmente il mio posto, perchè io sono octt e quindi #[i(style='Color:#8040d0;') posto] + #[i(style='Color:#d000d0;') octt] =
strong ✨
strong(class='twa twa-sparkles') #[span]
strong(class='MainIdTextGradientR') postoctt
strong ✨
strong(class='twa twa-sparkles') #[span]
| .
br
| Se preferisci, puoi chiamarlo #[i(class='MainIdTextGradientL') postocto]. O anche #[i(class='MainIdTextGradientR') sitoctt]! È pur sempre un sito web questo!
@ -101,7 +101,7 @@ p
h2 Sorgenti e licenze
p 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 #[a(href='https://creativecommons.org/licenses/by-sa/4.0/deed.it') 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 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 #[a(href='https://creativecommons.org/licenses/by-sa/4.0/deed.it' target='_blank' rel='noopener') 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.
@ -125,7 +125,7 @@ p
p
| Per terminare, trovate tutti i miei sorgenti sulle rispettive repo Git.
br
| Quelli del mio sito, alle condizioni descritte sopra: #[a(href='https://gitlab.com/octtspacc/postoctt') gitlab.com/octtspacc/postoctt].
| Quelli del mio sito, alle condizioni descritte sopra: #[a(href='https://gitlab.com/octtspacc/postoctt' target='_blank' rel='noopener') gitlab.com/octtspacc/postoctt].
br
| Quelli del mio generatore, anche questo rilasciato sotto una licenza libera, la AGPL: #[a(href='https://gitlab.com/octtspacc/staticoso') gitlab.com/octtspacc/staticoso].
| Quelli del mio generatore, anche questo rilasciato sotto una licenza libera, la AGPL: #[a(href='https://gitlab.com/octtspacc/staticoso' target='_blank' rel='noopener') gitlab.com/octtspacc/staticoso].

View File

@ -0,0 +1,11 @@
<hr>
<a href="https://mastodon.uno/@octo" target="_blank" rel="noopener">
<img src="/sitoctt-assets/Buttons/Follow-Me-On-Mastodon.gif">
</a>
<br>
<a href="https://www.torproject.org/it" target="_blank" rel="noopener">
<img src="/sitoctt-assets/Buttons/Tor.gif">
</a>
<a href="https://www.gnu.org/home.it" target="_blank" rel="noopener">
<img src="/sitoctt-assets/Buttons/Made-On-GNU-Linux.gif">
</a>

View File

@ -1 +1,16 @@
<h3><a href="/postoctt">✨postoctt✨</a></h3>
<div style="Text-Align:Left; Display:Inline;">
<h3 style="Display:Inline;">
<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>
</a>
</h3>
</div>
<!--
<div style="Text-Align:Right; Display:Inline; Width:100%;">
<a href="https://creativecommons.org/licenses/by-sa/4.0/deed.it" target="_blank" rel="noopener">
<img src="/sitoctt-assets/Buttons/CC-BY-SA">
</a>
</div>
-->

View File

@ -5,15 +5,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="[HTML:Page:CSS]">
<link href="/sitoctt-assets/Fonts/SpaceMono/Style.css" rel="stylesheet">
<link href="/sitoctt-assets/twemoji-amazing.min.css" rel="stylesheet">
<title>[HTML:Page:Title] - postoctt</title>
<style>
[HTML:Page:Style]
[HTML:Page:Style]
</style>
</head>
<body>
<div id="Container">
<div id="TopBox">
[HTML:Part:Standard/TopBox.html]
[HTML:Part:Standard/TopBox.html]
</div>
<div id="MiddleBox">
<div id="LeftBoxContainer">
@ -21,9 +22,9 @@
<input type="checkbox" id="LeftBoxCheck" checked>
<br>
<div id="LeftBox" class="ToggleBox">
[HTML:Part:Standard/LeftBoxTop.html]
[HTML:Page:LeftBox]
[HTML:Part:Standard/LeftBoxBottom.html]
[HTML:Part:Standard/LeftBoxTop.html]
[HTML:Page:LeftBox]
[HTML:Part:Standard/LeftBoxBottom.html]
</div>
</div>
<div id="RightBoxContainer">
@ -31,15 +32,19 @@
<input type="checkbox" id="RightBoxCheck" checked>
<br>
<div id="RightBox" class="ToggleBox">
[HTML:Page:RightBox]
[HTML:Page:RightBox]
</div>
</div>
<div id="MainBox">
[HTML:Page:MainBox]
[HTML:Page:MainBox]
</div>
</div>
<div id="BottomBox">
[HTML:Part:Standard/BottomBox.html]
<div id="BottomBoxContainer">
<label id="BottomBoxLabel" for="BottomBoxCheck"><b>[🏷️]</b></label>
<input type="checkbox" id="BottomBoxCheck">
<div id="BottomBox" class="ToggleBox">
[HTML:Part:Standard/BottomBox.html]
</div>
</div>
</div>
</body>