mirror of https://gitlab.com/octtspacc/sitoctt
CSS per colori ad alcune parole
This commit is contained in:
parent
39d5722981
commit
84b19c64c7
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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].
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue