Welcome to Violet's PurgatoryCommit {COMMIT_COUNT}
+ {RANDOM_QUOTE}
-Violet
- - - - - - - - - - - - - -
Hi! I'm Violet, a 15 year old web and game developer.
- I aspire to make fast and javascript free websites! I'm currently learning the Godot Engine, and
- have been
- becoming quite fluent in NodeJS.
Although my site is pretty barebones at the moment due to a recent rewrite, I hope to continue with this - passion and update this website along with it. -
+Links
++ Beta site + Blog + Clipdump diff --git a/static/root.css b/static/root.css new file mode 100644 index 0000000..5cd008e --- /dev/null +++ b/static/root.css @@ -0,0 +1,90 @@ +/* + This is the CSS file for the root page. Only put changes in here + intended for the main page of the site! +*/ + +.mainTitle { + font-size: 2.75rem; + color: rgb(215, 80, 255); + display: block; + padding-top: 5px; + line-height: 2.2rem; +} + +#card { + background-color: rgb(15, 5, 80); + padding: 15px; + border: 2px white solid; + margin: 20px auto; + width: 95%; + max-width: 800px; + z-index: 3; + position: relative; +} + +.animatedTitle { + animation: mainText 3s cubic-bezier(0.075, 0.82, 0.165, 1); + margin: auto; + max-width: 75%; + /* outline: 1px white solid; */ +} + +.animatedMain { + opacity: 1; + animation: fadeDelay 3s cubic-bezier(0.075, 0.82, 0.165, 1); +} + +.pfp { + border-radius: 15px; + border: darkgray 4px solid; + width: 60%; + aspect-ratio: 1/1; + transform: scale(0.9); + border-radius: 50%; +} + +@keyframes mainText { + 0% { + transform: translateY(calc(50vh - 6rem)) scale(1.5); + opacity: 0; + height: 4rem; + } + + 50% { + opacity: 1; + height: 4rem; + transform: translateY(calc(50vh - 6rem)) scale(1.25); + } + + 100% { + transform: translateY(0) scale(1); + } +} + +@keyframes fadeDelay { + 0% { + opacity: 0; + } + + 66% { + opacity: 0; + transform: translateY(25vh) + } + + 100% { + opacity: 1; + transform: none; + } +} + +@keyframes hideContent { + 0% { + overflow-y: hidden; + overflow-x: hidden; + } + + 100% { + overflow-y: hidden; + overflow-x: hidden; + } +} \ No newline at end of file diff --git a/static/style.css b/static/style.css index d26b1aa..5297e88 100644 --- a/static/style.css +++ b/static/style.css @@ -1,3 +1,10 @@ +/* + This is the GLOBAL css file. + Any changes made in here, will apply to the ENTIRE site. + Only put changes here if you intend to put changes across + the whole site! +*/ + @font-face { font-display: swap; font-family: 'Rubik'; @@ -15,6 +22,12 @@ color: white; } +main:nth-of-type(1) { + width: 90%; + max-width: 1000px; + margin: auto; +} + body { background-color: black; overflow-x: hidden; @@ -31,14 +44,6 @@ body { animation: hideContent 2.5s; } -main { - opacity: 1; - animation: fadeDelay 3s cubic-bezier(0.075, 0.82, 0.165, 1); - width: 90%; - max-width: 1000px; - margin: auto; -} - a { color: rgb(175, 225, 255); display: inline-block; @@ -76,14 +81,6 @@ a { background-color: rgb(10, 0, 25); } - -.animatedTitle { - animation: mainText 3s cubic-bezier(0.075, 0.82, 0.165, 1); - margin: auto; - max-width: 75%; - /* outline: 1px white solid; */ -} - hr { border: 2px gray solid; margin: 20px; @@ -94,101 +91,17 @@ p { margin: 5px; } -#card { - background-color: rgb(15, 5, 80); - padding: 15px; - border: 2px white solid; - margin: 20px auto; - width: 95%; - max-width: 800px; - z-index: 3; - position: relative; -} - -.pfp { - border-radius: 15px; - border: darkgray 4px solid; - width: 60%; - aspect-ratio: 1/1; - transform: scale(0.9); - border-radius: 50%; -} - img { width: 100%; max-width: 135px; transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1); } - h2 { font-size: 1.8rem; } -.rainDrop { - position: fixed; - z-index: -2; - visibility: hidden; - width: 4px; - height: 120px; - background: rgba(0, 0, 150, 0.5); -} - -.mainTitle { - font-size: 2.75rem; - color: rgb(215, 80, 255); - display: block; - padding-top: 5px; - line-height: 2.2rem; -} - .note { color: gray; font-size: 1rem; -} - -@keyframes mainText { - 0% { - transform: translateY(calc(50vh - 6rem)) scale(1.5); - opacity: 0; - height: 4rem; - } - - 50% { - opacity: 1; - height: 4rem; - transform: translateY(calc(50vh - 6rem)) scale(1.25); - } - - 100% { - transform: translateY(0) scale(1); - } -} - -@keyframes fadeDelay { - 0% { - opacity: 0; - } - - 66% { - opacity: 0; - transform: translateY(25vh) - } - - 100% { - opacity: 1; - transform: none; - } -} - -@keyframes hideContent { - 0% { - overflow-y: hidden; - overflow-x: hidden; - } - - 100% { - overflow-y: hidden; - overflow-x: hidden; - } } \ No newline at end of file diff --git a/static/subpage.css b/static/subpage.css new file mode 100644 index 0000000..7c0ee52 --- /dev/null +++ b/static/subpage.css @@ -0,0 +1,25 @@ +/* + This page applies to any page on the site EXCEPT + the main page. Please only make changes here if you + want to modify the CSS of ALL subpages. +*/ + +h1:nth-of-type(1) { + font-size: 2.5rem; +} + +main { + animation: fadeUp 2s cubic-bezier(0.075, 0.82, 0.165, 1); +} + +@keyframes fadeUp { + 0% { + transform: translateY(50vw); + opacity: 0; + } + + 100% { + transform: none; + opacity: 1; + } +} \ No newline at end of file