Halloween theme done, I guess

This commit is contained in:
bingus_violet 2024-09-30 18:23:48 -05:00
parent e3cfd9142f
commit 242af79ed0
5 changed files with 99 additions and 9 deletions

View file

@ -121,6 +121,13 @@
"color": "red",
"caseInsensitive": true
},
{
"words": [
"EVIL"
],
"color": "red",
"bold": true
},
{
"words": [
"Spooky's Jump Scare Mansion"
@ -134,7 +141,8 @@
".html",
"Shortcat",
"Valve",
"Spooky",
"Spooky Month",
"spooky",
"The Ironclad",
"Search Party"
],

View file

@ -70,8 +70,6 @@ module.exports = {
returnTheme: function() {
var time = new Date()
// return halloween()
if (time.getMonth() + 1 == 10) {
return halloween()
}

View file

@ -17,21 +17,22 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Violet's Purgatory</title>
<title>Violet's EVIL Purgatory</title>
<meta name="darkreader-lock">
<meta content="Violet's Purgatory" property="og:title" />
<meta content="Hi, I'm Violet, a 15 year old web & game developer. My site has info about me, so please visit!" property="og:description" />
<meta content="Violet's EVIL Purgatory" property="og:title" />
<meta content="Hi, I'm Violet, an EVIL 15 year old web & game developer. Happy Halloween!" property="og:description" />
<meta content="https://api.violets-purgatory.dev/v1/pfp" property="og:image" />
<meta content="#a200ff" data-react-helmet="true" name="theme-color" />
<meta content="orange" data-react-helmet="true" name="theme-color" />
</head>
<body>
{WEATHER_MODIFIER}
<h1 class="animatedTitle">Welcome to <span class="mainTitle noHighlight">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span></h1>
<h1 class="animatedTitle">Welcome to <span class="mainTitle noHighlight">Violet's <span class="evil">EVIL</span> Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span></h1>
<main class="animatedMain">
<p>Make sure to check out this project on <a href="https://git.violets-purgatory.dev/bingus_violet/violets-purgatory">Forgejo</a>!</p>
<p class="evil">I know, pretty spooky right</p>
<hr>
<div id="card">
<h2>{Violet}</h2>
@ -53,7 +54,7 @@
<hr>
<div>
<p style="padding: 10px;">Hi, I'm Violet! a 15 year old web and game developer. I make dynamic websites with server-side rendering, so no Javascript needed! I'm currently making games in the Godot Engine, and my dynamic sites in NodeJS.</p>
<p style="padding: 10px;">Hi, I'm Violet! a<span class="evil">n EVIL</span> 15 year old web and game developer. I make dynamic websites with server-side rendering, so no Javascript needed! I'm currently making games in the Godot Engine, and my dynamic sites in NodeJS.</p>
<div class="linkContainer">
<a class="chip" href="./socials/">Socials</a>
<a class="chip" href="./stats">Stats</a>

View file

@ -340,3 +340,7 @@ b, b > *, .activityTitle, .activityTitle > *, .bold {
.durationBarFormatter {
float: right;
}
.evil {
display: none;
}

View file

@ -0,0 +1,79 @@
body {
background-image: linear-gradient(rgb(40, 25, 0), black 100vh);
background-color: black;
}
.mainTitle {
color: orange;
}
.mainTitle > .evil {
color: red;
/* animation-name: evilReveal;
animation-duration: 1s;
animation-fill-mode: both; */
}
.evil {
display: inline-block;
}
#card {
/* background-color: rgb(75, 0, 0); */
/* border-color: orange; */
}
a[href]:not(.chip) {
color: orange;
}
/*
body::after {
width: 100vw;
height: 100vh;
background-color: rgb(30, 4, 75);
background-image: linear-gradient(rgb(30, 4, 75), black);
position: fixed;
top: 0px;
left: 0px;
opacity: 0;
content: "";
z-index: -1;
animation-name: flashbang;
animation-delay: 0.9s;
animation-duration: 3s;
animation-fill-mode: both;
}
@keyframes flashbang {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes orangeShift {
0% {
color:
}
100% {
opacity: 1;
}
}
@keyframes evilReveal {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
} */