diff --git a/Assets/Standard.css b/Assets/Standard.css index 92689e6..4542692 100644 --- a/Assets/Standard.css +++ b/Assets/Standard.css @@ -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%); } } diff --git a/Pages/index.pug b/Pages/index.pug index 3765028..c30814a 100644 --- a/Pages/index.pug +++ b/Pages/index.pug @@ -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]. +