Violet/Violets-Purgatory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Better Flakes

Browse source
This commit is contained in:
Bingus_Violet 2023-12-18 07:43:26 -06:00
parent 0033b9692f
commit 505d4a3c70
2 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/mainPage.html
View file

@ -11,7 +11,7 @@
<meta content="Welcome to Violet's Purgatory" property="og:title" /> <meta content="Welcome to Violet's Purgatory" property="og:title" />
<meta <meta
content="I'm Violet, a 14yo web and game developer. On my site i'm hosting various services, so please check out the site for more info!!!" content="I'm Violet, a web and game developer. On my site i'm hosting various services, so please check out the site for more info!!!"
property="og:description" /> property="og:description" />
<meta content="https://api.lanyard.rest/534132311781015564.png" property="og:image" /> <meta content="https://api.lanyard.rest/534132311781015564.png" property="og:image" />
<meta content="#a200ff" data-react-helmet="true" name="theme-color" /> <meta content="#a200ff" data-react-helmet="true" name="theme-color" />
@ -25,7 +25,7 @@
<div class="fadediv"> <div class="fadediv">
<div class="container-fluid row" id="card"> <div class="container-fluid row" id="card">
<h2>Violet</h2> <h2>Violet</h2>
<div class="col-sm-12" style="display: flex; justify-content: center; align-items: center;"> <div style="display: flex; justify-content: center; align-items: center;">
<img src="https://api.lanyard.rest/534132311781015564.png" class="pfp"> <img src="https://api.lanyard.rest/534132311781015564.png" class="pfp">
<div> <div>
<p>They/Them</p> <p>They/Them</p>
@ -34,7 +34,7 @@
{LANYARD_STATUS} {LANYARD_STATUS}
</div> </div>
</div> </div>
<div class="col-sm-12"> <div>
<hr> <hr>
<p class="chip"><a href="./hosted">Stuff i'm hosting!</a></p> <p class="chip"><a href="./hosted">Stuff i'm hosting!</a></p>
<p class="chip"><a href="./socials">Socials</a></p> <p class="chip"><a href="./socials">Socials</a></p>
@ -45,14 +45,14 @@
<p><em>The world's worst developer</em></p> <p><em>The world's worst developer</em></p>
<noscript> <noscript>
<p style="font-size: 0.9rem;">Fun fact: This website uses no Javascript! Everything dynamic (E.G. The discord status) is done <p style="font-size: 0.9rem;">Fun fact: This website uses no Javascript! Everything dynamic (E.G. The discord status) is done
server-side, so enjoy :D <br> P.S. Your really cool, I look up to people like u :> (Atleast, assuming you disabled javascript urself...)</p> server-side, so enjoy :D</p>
</noscript> </noscript>
{LANYARD_FULL} {LANYARD_FULL}
{SOCIALS} {SOCIALS}
{MASTODON_FEED} {MASTODON_FEED}
</div>
{SEASONAL_EFFECT} {SEASONAL_EFFECT}
</div>
</body> </body>
</html> </html>

8
static/style.css
View file

@ -50,6 +50,7 @@ a {
} }
.chip { .chip {
position: relative;
z-index: 3; z-index: 3;
font-size: 1.3rem; font-size: 1.3rem;
border: 2px gray solid; border: 2px gray solid;
@ -235,9 +236,10 @@ hr {
.snowflake { .snowflake {
color: white; color: white;
font-size: 0.5rem; font-size: 0.5em;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000; text-shadow: 0 0 5px #000;
visibility: hidden;
} }
.snowflake, .snowflake,
@ -249,10 +251,12 @@ hr {
@keyframes snowflakes-fall { @keyframes snowflakes-fall {
0% { 0% {
visibility: visible;
transform: translateY(0) transform: translateY(0)
} }
100% { 100% {
visibility: visible;
transform: translateY(110vh) transform: translateY(110vh)
} }
} }
@ -276,12 +280,14 @@ hr {
user-select: none; user-select: none;
cursor: default; cursor: default;
animation-name: snowflakes-shake; animation-name: snowflakes-shake;
animation-delay: 0.5s;
animation-duration: 3s; animation-duration: 3s;
animation-timing-function: ease-in-out animation-timing-function: ease-in-out
} }
.snowflake .inner { .snowflake .inner {
animation-duration: 10s; animation-duration: 10s;
animation-delay: 0.5s;
animation-name: snowflakes-fall; animation-name: snowflakes-fall;
animation-timing-function: linear animation-timing-function: linear
} }