Violet/api.violets-purgatory.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

FAQ section, easter egg, general format improvements

Browse source
This commit is contained in:
bingus_violet 2024-04-18 19:17:55 -05:00
parent c140edf16e
commit bfcad31cb4
5 changed files with 93 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
config.json
View file

@ -73,6 +73,8 @@
"Ko-fi": "rgb(255, 150, 150)", "Ko-fi": "rgb(255, 150, 150)",
"Revolt": "rgb(255, 50, 50)", "Revolt": "rgb(255, 50, 50)",
"Discord": "rgb(150, 150, 255)", "Discord": "rgb(150, 150, 255)",
"SearXNG": "rgb(100, 100, 255)" "SearXNG": "rgb(100, 100, 255)",
"Highlighting": "yellow",
"highlighted": "yellow"
} }
} }

55
static/faq/index.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../global.css">
<link rel="stylesheet" type="text/css" href="../subpage.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Violet's Purgatory</title>
<meta name="darkreader-lock">
<meta content="Socials - Violet's Purgatory" property="og:title" />
<meta content="This page lists all the social media I use :3" 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" />
</head>
<body>
{WEATHER_MODIFIER}
<h1>FAQ (and more!)</h1>
<div class="mainDiv">
<hr>
<p>This page is divided in 2 sections:</p>
<ol>
<li>The basic Questions & Answers</li>
<li>Neat fun facts about the site</li>
</ol>
<p></p>
<hr>
<h2>Questions & Answers<hr></h2>
<main>
<h3>Why are so many words colored?</h3>
<p>I like the way it looks to have certain words be highlighted, makes it look fancier and easier to read (imo). So, when I remade this site, I went ahead and added an <em>Automatic Word Highlighting System!</em> This allows me have words automatically highlighted, on the server side, without having to do it in the code manually. E.G.</p>
<p>Godot Engine, Javascript, NodeJS, Starwalker, Violet's Purgatory, Violet, Purgatory, and more :)</p>
<h3>I thought the site doesn't use Javascript? So why is it there?</h3>
<p>Originally, all my sites were completely Javascript free. As of late, though, I decided to add Javascript to this one. Javascript will <b><em>NEVER</em></b> be a requirement on this site. Javascript will ONLY be used where nessacary, and I will do everything possible to make the experience indistinguishable.</p>
<p>For example, things such as the song duration bar on my activities are pure HTML, using some mathy NodeJS-generated CSS animations! The only thing the site uses Javascript for right now, is setting the scroll to the top of the page on reload, and real time updating discord activities.</p>
</main>
<h3>Why are there 4 CSS files?</h3>
<p>Originally the idea was that I could organize the site with:</p>
<ol>
<li>CSS for the main page</li>
<li>CSS for the subsites</li>
<li>Global CSS</li>
</ol>
<p>Slowly, though, they're slowly all merging into one CSS file, so I can't be sure it'll stay this way for long.</p>
<p>As for the "unused" style.css, though, that exists for compatibility reasons- many of my older sites just grabbed CSS from the site for their css. This has been <b>mostly</b> fixed, but the FileShare still does, so it'll stay until I finally give the FileShare its own CSS.</p>
</div>
</body>
</html>

10
static/global.css
View file

@ -152,7 +152,6 @@ p {
img { img {
width: 100%; width: 100%;
/* max-width: 135px; */ /* max-width: 135px; */
transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
} }
h2 { h2 {
@ -220,3 +219,12 @@ h2 {
.activity>.smallimg:hover { .activity>.smallimg:hover {
transform: scale(1); transform: scale(1);
} }
ul, ol {
display: inline-block
}
li {
font-size: 1.2rem;
text-align: left;
}

2
static/index.html
View file

@ -74,6 +74,8 @@
{PATH_SOCIALS} {PATH_SOCIALS}
<p class="note">Please note I am extremely unhinged and gay on Fedi, I don't use Github, and I barely understand Docker.</p> <p class="note">Please note I am extremely unhinged and gay on Fedi, I don't use Github, and I barely understand Docker.</p>
<br> <br>
<h1>FAQ:</h1>
{PATH_FAQ}
<p>{WEATHER_TEXT}</p> <p>{WEATHER_TEXT}</p>
<br> <br>
</main> </main>

28
static/root.css
View file

@ -24,13 +24,12 @@
box-shadow: outset rgb(35, 20, 60) 0px 0px 20px; box-shadow: outset rgb(35, 20, 60) 0px 0px 20px;
} }
@media screen and (min-width: 415px) {
.linkContainer { .linkContainer {
display: grid; display: flex;
grid-template-columns: 1fr 1fr 1fr; flex-wrap: wrap;
max-width: 415px; max-width: 385px;
margin: auto; margin: auto;
} justify-content: center;
} }
.animatedTitle { .animatedTitle {
@ -54,6 +53,13 @@
aspect-ratio: 1/1; aspect-ratio: 1/1;
transform: scale(0.9); transform: scale(0.9);
border-radius: 50%; border-radius: 50%;
rotate: 0deg;
transition: rotate 2s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.pfp:active {
rotate: 1440deg;
transition: rotate 5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
} }
.CLAlign { .CLAlign {
@ -63,7 +69,7 @@
img:not(.project-inner > div > img):not(.activity>img) { img:not(.project-inner > div > img):not(.activity>img) {
width: 100%; width: 100%;
max-width: 168px; max-width: 168px;
transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1); /* transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1); */
} }
@media screen and (min-width: 850px) { @media screen and (min-width: 850px) {
@ -103,6 +109,16 @@ img:not(.project-inner > div > img):not(.activity>img) {
position: relative; position: relative;
} }
@keyframes spinny {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
@keyframes mainText { @keyframes mainText {
0% { 0% {
transform: translateY(calc(50vh - 6rem)) scale(1.5); transform: translateY(calc(50vh - 6rem)) scale(1.5);