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

CSS

Browse source
This commit is contained in:
Bingus_Violet 2024-02-08 17:25:10 -06:00
parent 524ce47eb6
commit 0aaec4181f
3 changed files with 40 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
pageUpdater.js
View file

@ -7,20 +7,20 @@ var highlightedWords = config.highlightedWords
function makeStars() {
var html = ""
for (let index = 0; index < 15; index++) {
html += `<div class="star"></div>`
for (let index = 0; index < 35; index++) {
html += `<div class="rainDrop"></div>`
}
html += "<style>"
for (let index = 0; index < 15; index++) {
for (let index = 0; index < 35; index++) {
html += `
.star:nth-of-type(${index + 1}) {
animation: starAnim${index} ${15 + (Math.random() * 15)}s linear;
.rainDrop:nth-of-type(${index + 1}) {
animation: rainAnim${index} 1s linear;
animation-iteration-count: infinite;
animation-delay: ${-Math.random() * 15}s;
animation-delay: ${Math.random() * 15}s;
}
`
var rando = Math.random() * 100
html += `@keyframes starAnim${index} {
html += `@keyframes rainAnim${index} {
0% {
top: -10vh;
right: ${rando}vw;
@ -29,7 +29,7 @@ function makeStars() {
100% {
top: 110vh;
right: calc(${rando}vw + ${5 - (Math.random() * 10)}vw);
right: calc(${rando}vw);
}
}`

17
static/index.html
View file

@ -22,22 +22,11 @@
</head>
<body>
<h1>Welcome to <span>Violet's&nbsp;Purgatory</span></h1>
<h1>Welcome to <span class="mainTitle">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span><br></h1>
{BG_EFFECT}
<main>
<p>Currently i'm working on the new system for word highlighting!</p>
<p>You can see that it is pretty much the same as before, outside of the code being a little bit shorter and
more dispersed (I didn't know until recently that "replaceAll" was a function...)</p>
<p>The big difference, is unlike the original site, this can apply to all pages!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sint magnam laborum architecto ratione est illo praesentium nemo dolorem quisquam at ipsum dignissimos accusantium, tenetur optio nisi culpa sapiente eum!
Aperiam, iste. Distinctio iste rem minus explicabo aut, nostrum voluptatum earum sit eveniet, qui harum! At eaque minus dolor, aliquam reiciendis dicta, obcaecati magni dolore nulla vero tempore. Dolor, odio.
Fugiat distinctio temporibus ipsa corporis. Rem suscipit atque enim debitis illo animi reiciendis, aliquid ea, neque corporis aut asperiores reprehenderit repudiandae porro veritatis. Autem magni eius enim amet expedita molestiae!
Aspernatur ipsam unde porro non, veritatis error! Ipsam nisi fugiat totam, dolore magnam, placeat aperiam aliquam porro necessitatibus et corrupti libero ea officia odio ad quisquam beatae rerum cumque aspernatur.
Earum officia quae doloribus culpa veritatis ea architecto provident, nesciunt, assumenda excepturi ipsam pariatur incidunt nobis animi quis fugiat saepe autem a alias tenetur adipisci fuga eos quidem repellat. Fugiat?
Pariatur incidunt maxime corrupti dolores impedit ullam quos, in architecto perferendis, culpa sint? Aspernatur impedit repudiandae hic eum veritatis molestiae debitis, incidunt ut pariatur provident explicabo nemo id molestias cumque.
Ab cumque accusamus alias. Temporibus beatae assumenda, accusamus nisi vitae qui laboriosam, animi minima sequi officia id exercitationem aliquid quaerat ipsum neque inventore, sint delectus sit dolorem quod! Error, repellendus?
Sapiente, minus autem, placeat fugit ipsam iste consequuntur quidem, aperiam natus vero labore reiciendis itaque temporibus non porro? Nostrum laboriosam debitis enim amet? Possimus non sed quas magnam placeat aliquid.</p>
<hr>
{RANDOM_QUOTE}
</main>
</body>

39
static/style.css
View file

@ -9,7 +9,7 @@
* {
font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
padding: 0;
font-weight: 200;
font-weight: 400;
text-align: center;
color: white;
}
@ -22,35 +22,54 @@ body {
main {
opacity: 1;
animation: fadeDelay 3s cubic-bezier(0.075, 0.82, 0.165, 1);
width: 90%;
max-width: 1000px;
margin: auto;
}
body>h1 {
animation: mainText 3s cubic-bezier(0.075, 0.82, 0.165, 1);
margin: auto;
max-width: 75%;
/* outline: 1px white solid; */
}
.star {
hr {
border: 2px rgba(100, 0, 150, 0.5) solid;
margin: 20px;
}
.rainDrop {
position: fixed;
z-index: -2;
visibility: hidden;
font-size: 0.35rem;
width: 40px;
height: 40px;
background: radial-gradient(white, rgb(255, 255, 255, 0.25) 10%, transparent 50%);
width: 4px;
height: 120px;
background: rgba(0, 0, 150, 0.5);
}
.mainTitle {
font-size: 2.75rem;
color: rgb(215, 80, 255);
display: block;
}
.note {
color: gray;
font-size: 0.9rem;
}
@keyframes mainText {
0% {
transform: translateY(50vh) scale(1.5);
transform: translateY(calc(50vh - 2rem)) scale(1.5);
opacity: 0;
height: 0px;
height: 4rem;
}
50% {
opacity: 1;
height: 0px;
transform: translateY(50vh) scale(1);
height: 4rem;
transform: translateY(calc(50vh - 2rem)) scale(1);
}
100% {