octospacc/sitoctt
1
0
Fork 0
mirror of https://gitlab.com/octtspacc/sitoctt synced 2025-06-05 22:09:20 +02:00
Code Issues Projects Releases Wiki Activity

CSS per colori ad alcune parole

Browse Source
This commit is contained in:
octospacc
2022-05-23 00:06:47 +02:00
parent 39d5722981
commit 84b19c64c7
2 changed files with 56 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
Assets/Standard.css
View File

@@ -2,12 +2,6 @@
--ScreenBorderPadding: 4px;
--ContentPadding: 8px;
}
* {
Box-Sizing: Border-Box;
}
a {
Color: #d000d0;
}
Body {
Margin: 0;
Box-Sizing: Border-Box;
@@ -24,6 +18,16 @@ Body {
Box-Sizing: Border-Box;
}
* {
Box-Sizing: Border-Box;
}
a {
Color: #d000d0;
}
ul {
padding-left: 20px;
}
#LeftBox, #RightBox {
Background: #300030;
Color: #fafaf0;
@@ -32,7 +36,6 @@ Body {
Color: #eeddff;
}
#TopBox {
//Border: 2px Solid Purple;
Padding: var(--ContentPadding);
}
#LeftBox, #LeftBoxContainer {
@@ -66,7 +69,6 @@ Body {
}
#BottomBox {
Box-Sizing: Border-Box;
//Border: 2px Solid Purple;
Color: #fafaf0;
Background: rgba(64, 0, 64, 0.6);
Position: Fixed;
@@ -97,13 +99,9 @@ Body {
Visibility: Hidden;
}
/*
@Media (Max-Width: 800px) {
#LeftBox {Display: None;}
#RightBox {Display: None;}
.NoDisplay {
Display: None;
}
*/
.BlinkA {
Animation: BlinkerA 0.25s Step-Start Infinite;
}
@@ -121,34 +119,40 @@ Body {
100% {Position: Static; Visibility: Visible;}
}
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@699;700&display=swap");
:root {
--lower: 100;
--upper: 700;
.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 {
font-family: 'Roboto Mono', monospace;
text-align: center;
position: absolute;
left: 50%;
white-space: nowrap;
transform: translate(-50%, -50%) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
Text-Align: center;
Position: absolute;
Left: 50%;
White-Space: nowrap;
Transform: translate(-50%, -50%) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
font-variation-settings: 'wght' var(--lower);
margin: 0;
Margin: 0;
}
.WavyText span {
color: hsla(300, 100%, 20%, var(--alpha-l));
animation: rise 2.25s infinite ease-in-out;
animation-delay: calc((var(--index) - 6) * 0.225s);
display: inline-block;
.WavyText Span {
Color: hsla(300, 100%, 20%, var(--alpha-l));
Animation: Rise 2.25s infinite ease-in-out;
Animation-Delay: calc((var(--index) - 6) * 0.225s);
Display: inline-block;
}
@keyframes rise {
@keyframes Rise {
50% {
font-variation-settings: 'wght' var(--upper);
color: hsla(300, 100%, 30%, var(--alpha-u));
transform: translate(0, -15%);
Color: hsla(300, 100%, 30%, var(--alpha-u));
Transform: translate(0, -15%);
}
}

26
Pages/index.pug
View File

@@ -1,8 +1,11 @@
// LastUpdated: Show
h1 Ciao!! (UwU)
h1 Ciao!!
p Sei entrat#[span(class='BlinkA') a]#[span(class='BlinkO') o] nel...
p
| Sei entrat
span(class='BlinkA') a
span(class='NoDisplay') /
span(class='BlinkO') o
| nel...
// Credits: https://codepen.io/jh3y/pen/WNrXqYz
div
@@ -19,9 +22,17 @@ div
br
p
| Esatto, il #[strong ✨postoctt✨], Letteralmente il mio posto, perchè io sono octt e quindi posto + octt = ✨postoctt✨.
| Esatto, il
strong ✨
strong(class='MainIdTextGradientL') postoctt
strong ✨
| , Letteralmente il mio posto, perchè io sono octt e quindi #[i(style='Color:#8040d0;') posto] + #[i(style='Color:#d000d0;') octt] =
strong ✨
strong(class='MainIdTextGradientR') postoctt
strong ✨
| .
br
| Se preferisci, puoi chiamarlo postocto. O anche sitoctt! È pur sempre un sito web questo!
| Se preferisci, puoi chiamarlo #[i(class='MainIdTextGradientL') postocto]. O anche #[i(class='MainIdTextGradientR') sitoctt]! È pur sempre un sito web questo!
p
| Come puoi vedere da elementi segnaposto mezzi rotti ai bordi della pagina, tutto questo ambaradan è ancora pesantemente in costruzione.
@@ -29,7 +40,7 @@ p
| 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.
p
| A tal proposito, per la migliore esperienza DEVI usare un browser con supporto almeno a CSS3.
| A tal proposito, per la migliore esperienza #[span(style='Color:#d00000;') DEVI] usare un browser con supporto almeno a CSS3.
br
| Preferibilmente non Chromium, che ha degli strani memory leak su pagine con animazioni complesse, oltre ad andare a scatti. Firefox non ha questo problema, ma usa molto di più la CPU. Ephiphany usa anche meno RAM di Firefox, ma al costo del doppio della CPU..
br
@@ -112,3 +123,4 @@ p
| Quelli del mio sito, alle condizioni descritte sopra: #[a(href='https://gitlab.com/octtspacc/postoctt') 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].