From bfcad31cb489b374524d21c59e98157e0d5e0cd5 Mon Sep 17 00:00:00 2001 From: bingus_violet Date: Thu, 18 Apr 2024 19:17:55 -0500 Subject: [PATCH] FAQ section, easter egg, general format improvements --- config.json | 4 +++- static/faq/index.html | 55 +++++++++++++++++++++++++++++++++++++++++++ static/global.css | 10 +++++++- static/index.html | 2 ++ static/root.css | 32 ++++++++++++++++++------- 5 files changed, 93 insertions(+), 10 deletions(-) create mode 100644 static/faq/index.html diff --git a/config.json b/config.json index 128843c..a04ee9f 100644 --- a/config.json +++ b/config.json @@ -73,6 +73,8 @@ "Ko-fi": "rgb(255, 150, 150)", "Revolt": "rgb(255, 50, 50)", "Discord": "rgb(150, 150, 255)", - "SearXNG": "rgb(100, 100, 255)" + "SearXNG": "rgb(100, 100, 255)", + "Highlighting": "yellow", + "highlighted": "yellow" } } \ No newline at end of file diff --git a/static/faq/index.html b/static/faq/index.html new file mode 100644 index 0000000..e0a7d29 --- /dev/null +++ b/static/faq/index.html @@ -0,0 +1,55 @@ + + + + + + + + + + + Violet's Purgatory + + + + + + + + + + + {WEATHER_MODIFIER} + +

FAQ (and more!)

+
+
+

This page is divided in 2 sections:

+
    +
  1. The basic Questions & Answers
    2. +
  2. Neat fun facts about the site
    3. +
+

+
+

Questions & Answers

+
+

Why are so many words colored?

+

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 Automatic Word Highlighting System! This allows me have words automatically highlighted, on the server side, without having to do it in the code manually. E.G.

+

Godot Engine, Javascript, NodeJS, Starwalker, Violet's Purgatory, Violet, Purgatory, and more :)

+

I thought the site doesn't use Javascript? So why is it there?

+

Originally, all my sites were completely Javascript free. As of late, though, I decided to add Javascript to this one. Javascript will NEVER be a requirement on this site. Javascript will ONLY be used where nessacary, and I will do everything possible to make the experience indistinguishable.

+

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.

+
+

Why are there 4 CSS files?

+

Originally the idea was that I could organize the site with:

+
    +
  1. CSS for the main page
    2. +
  2. CSS for the subsites
    3. +
  3. Global CSS
    4. +
+

Slowly, though, they're slowly all merging into one CSS file, so I can't be sure it'll stay this way for long.

+

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 mostly fixed, but the FileShare still does, so it'll stay until I finally give the FileShare its own CSS.

+
+ + + \ No newline at end of file diff --git a/static/global.css b/static/global.css index 279efc0..9835200 100644 --- a/static/global.css +++ b/static/global.css @@ -152,7 +152,6 @@ p { img { width: 100%; /* max-width: 135px; */ - transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1); } h2 { @@ -219,4 +218,13 @@ h2 { .activity>.smallimg:hover { transform: scale(1); +} + +ul, ol { + display: inline-block +} + +li { + font-size: 1.2rem; + text-align: left; } \ No newline at end of file diff --git a/static/index.html b/static/index.html index fd104f8..4911cf2 100644 --- a/static/index.html +++ b/static/index.html @@ -74,6 +74,8 @@ {PATH_SOCIALS}

Please note I am extremely unhinged and gay on Fedi, I don't use Github, and I barely understand Docker.


+

FAQ:

+ {PATH_FAQ}

{WEATHER_TEXT}


diff --git a/static/root.css b/static/root.css index 32032ba..b5dd08a 100644 --- a/static/root.css +++ b/static/root.css @@ -24,13 +24,12 @@ box-shadow: outset rgb(35, 20, 60) 0px 0px 20px; } -@media screen and (min-width: 415px) { - .linkContainer { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - max-width: 415px; - margin: auto; - } +.linkContainer { + display: flex; + flex-wrap: wrap; + max-width: 385px; + margin: auto; + justify-content: center; } .animatedTitle { @@ -54,6 +53,13 @@ aspect-ratio: 1/1; transform: scale(0.9); 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 { @@ -63,7 +69,7 @@ img:not(.project-inner > div > img):not(.activity>img) { width: 100%; 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) { @@ -103,6 +109,16 @@ img:not(.project-inner > div > img):not(.activity>img) { position: relative; } +@keyframes spinny { + 0% { + rotate: 0deg; + } + + 100% { + rotate: 360deg; + } +} + @keyframes mainText { 0% { transform: translateY(calc(50vh - 6rem)) scale(1.5);