From bebacd675d6198c68139312649290cb062d4ed35 Mon Sep 17 00:00:00 2001 From: Bingus_Violet Date: Mon, 12 Feb 2024 11:12:15 -0600 Subject: [PATCH] More info on page --- pageUpdater.js | 30 ++++++++++-- static/index.html | 37 +++++---------- static/root.css | 90 ++++++++++++++++++++++++++++++++++++ static/style.css | 113 ++++++--------------------------------------- static/subpage.css | 25 ++++++++++ 5 files changed, 164 insertions(+), 131 deletions(-) create mode 100644 static/root.css create mode 100644 static/subpage.css diff --git a/pageUpdater.js b/pageUpdater.js index 6afd500..8433758 100644 --- a/pageUpdater.js +++ b/pageUpdater.js @@ -45,25 +45,45 @@ function converter(html) { html = html.replaceAll(term, replacement) } + while (html.includes("{PATH_")) { + var pagePath = html.substring(html.indexOf("{PATH_")) + pagePath = pagePath.substring(6, pagePath.indexOf('}')) + + var stringIndex = `{PATH_${pagePath}}` + pagePath = pagePath.toLowerCase() + + var pageHTML = fs.readFileSync(path.join(__dirname, 'static', pagePath, 'index.html')).toString() + pageHTML = pageHTML.substring(pageHTML.indexOf('') + 6, pageHTML.indexOf('')) + html = html.replace(stringIndex, pageHTML) + } + return html } module.exports = { middleWare: function (req, res, next) { - var filePath = req.baseUrl + req.path - if (filePath.trim() == "/") { - filePath = "/index.html" + var filePath = (req.baseUrl + req.path).trim() + + if (filePath.includes(".html") || filePath.includes(".css")) { + + } else { + if (filePath.charAt(filePath.length - 1) != '/') { + res.redirect(filePath + '/') + return + } + filePath = path.join(filePath, '/index.html') } + filePath = path.join(__dirname, 'static', filePath || 'index.html') if (fs.existsSync(filePath)) { var data = fs.readFileSync(filePath).toString() - if (req.path.includes("style.css")) { + if (req.path.includes(".css")) { res.setHeader("Content-Type", "text/css") res.send(data) } else { data = converter(data) - res.send(data) + res.send(minify.minify(data)) } } else { res.status(404).send(` diff --git a/static/index.html b/static/index.html index 97bf06d..701e095 100644 --- a/static/index.html +++ b/static/index.html @@ -3,6 +3,7 @@ + @@ -22,48 +23,32 @@ -

Welcome to Violet's PurgatoryCommit - {COMMIT_COUNT}

-
+

Welcome to Violet's PurgatoryCommit {COMMIT_COUNT}

+

{RANDOM_QUOTE}

-
+

Violet

-

They/Them

+

They/Them

Developer

{DISCORD_STATUS}

-
-

Donate

- -

FileShare

- - - - - - -

Blog

- -

Dev Branch

- -

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.

+ 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