From d5402f3aa4a81bbd74dbe04a1318b4f61314adbd Mon Sep 17 00:00:00 2001 From: bingus_violet Date: Tue, 23 Apr 2024 11:13:46 -0500 Subject: [PATCH] Local CSS file & remove root --- .gitignore | 3 + index.js | 7 +- resources/base.html | 2 +- resources/root.html | 28 ----- resources/style.css | 281 +++++++++++++++++++++++++++++++++++++++++++ resources/watch.html | 2 +- 6 files changed, 288 insertions(+), 35 deletions(-) delete mode 100644 resources/root.html create mode 100644 resources/style.css diff --git a/.gitignore b/.gitignore index ceaea36..8ad17db 100644 --- a/.gitignore +++ b/.gitignore @@ -130,3 +130,6 @@ dist .yarn/install-state.gz .pnp.* +# Violet's Limbo +testPath +public \ No newline at end of file diff --git a/index.js b/index.js index 48f5ae4..c8d22b9 100644 --- a/index.js +++ b/index.js @@ -40,6 +40,7 @@ const videoFormats = ["mp4", "mkv"] app.use(express.static(directory)) app.use(express.static(pubDir)) +app.use(express.static(path.join(__dirname, 'resources'))) app.listen(PORT, () => { console.log("Now listening on PORT: " + PORT) @@ -104,11 +105,7 @@ app.get("/*", (req, res) => { var file = req.params[0] var absPath = path.join(pubDir, file) - if (file != '') { - var baseHTML = fs.readFileSync(path.join(__dirname, 'resources/base.html')).toString() - } else { - var baseHTML = fs.readFileSync(path.join(__dirname, 'resources/root.html')).toString() - } + var baseHTML = fs.readFileSync(path.join(__dirname, 'resources/base.html')).toString() var baseStart = baseHTML.substring(0, baseHTML.indexOf('{CONTENT}')) var baseEnd = baseHTML.substring(baseHTML.indexOf('{CONTENT}') + 9, baseHTML.length) diff --git a/resources/base.html b/resources/base.html index af1b6a3..f5273cb 100644 --- a/resources/base.html +++ b/resources/base.html @@ -6,7 +6,7 @@ - + {TITLE} diff --git a/resources/root.html b/resources/root.html deleted file mode 100644 index 8321d98..0000000 --- a/resources/root.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - Violet's Clipdump - - - -

Welcome to Violet's Clip dump

-
-

Yes, you heard that right. Well its more like a File Share but "Clip dump" is still pretty accurate, - and rolls off the tongue better.
- Here you'll mainly find just clips of me playin games and stuff. Its not really something designed to be - "looked through" - but I decided why not. It's not very organized so be warned!

- -
- - - \ No newline at end of file diff --git a/resources/style.css b/resources/style.css new file mode 100644 index 0000000..db6ed54 --- /dev/null +++ b/resources/style.css @@ -0,0 +1,281 @@ +/*DO NOT MODIFY IF YOU ARE TRYING TO CHANGE THINGS ON THE SITE!!!This exists for compatibility with services on Violet's purgatorySoon, this will be removed, and replaced with a CDN or something...*/ +@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"); + +@font-face { + font-display: swap; + font-family: 'Rubik'; + font-style: normal; + font-weight: 400; + src: url('./fonts/rubik-v28-latin-regular.woff2') format('woff2'); +} + +* { + font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif; + padding: 0; + text-align: center; +} + +h1 { + color: rgb(225, 215, 255); + font-size: 2.5rem; +} + +h2 { + font-size: 2rem; + color: rgb(225, 215, 255) +} + +h3 { + font-size: 1.65rem +} + +h3, +li { + color: white; +} + +ul, +ol { + display: inline-block +} + +li { + font-size: 1.2rem; + text-align: left; +} + +body, +html { + overflow-x: hidden; + margin: auto; + background-color: rgb(15, 4, 45); + background: linear-gradient(rgb(20, 4, 55), black); + width: 100vw; + height: 100vh; + margin: 0; + padding: 0; + background-attachment: local; +} + +body { + padding: 2.5%; +} + +.fadediv { + animation-name: fade-in; + animation-duration: .75s; + animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); + margin: auto; + max-width: 1000px; +} + +a { + color: rgb(175, 225, 255); + display: inline-block; + transition: 1.5s all cubic-bezier(0.075, 0.82, 0.165, 1); +} + +.chip { + position: relative; + z-index: 3; + font-size: 1.3rem; + border: 2px gray solid; + border-radius: 6px; + background-color: black; + padding: 8px; + margin: 3px; + display: inline-block; + transform: scale(0.95); + transition: transform 1.25s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 2s cubic-bezier(0.075, 0.82, 0.165, 1); +} + +.chip, +.chip>* { + text-decoration: none; +} + +.chip:hover { + background-color: rgb(10, 0, 25); + transform: scale(1); + /* font-size: 1.35rem; */ + border-color: white; + transition: transform 0.75s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 3s cubic-bezier(0.075, 0.82, 0.165, 1); +} + +.chip:hover>.smallimg { + background-color: rgb(10, 0, 25); +} + +.activity { + border-width: 3px; + border-radius: 10px; + overflow: hidden; + margin: auto; + padding: 0; + display: flex; + position: relative; + z-index: 3; +} + +.activity>p { + width: 100%; + overflow-wrap: break-word; +} + +.activity>img { + width: 128px; + aspect-ratio: 1/1; + object-fit: cover; +} + +.activity>.smallimg { + width: 64px; + height: 64px; + position: absolute; + bottom: 0px; + left: 72px; + border-radius: 50px; + background: black; + padding: 5px; + /* border: 2px gray solid; */ + transform: scale(0.9); +} + +.activity>.smallimg:hover { + transform: scale(1); +} + +a:hover { + color: white; + transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1); +} + +p { + color: white; + font-size: 1.2rem; + padding: 0; + margin: 10px; +} + +img:not(.project-inner > div > img) { + width: 100%; + max-width: 135px; + transition: all 2s 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%; +} + +.pfp:hover { + transform: scale(1); + border-color: rgb(255, 200, 255); + object-fit: cover; +} + +.emoji { + width: 32px; + border-radius: 10%; + /* border: 1px gray solid; */ +} + +hr { + color: white; + opacity: 0.25; + border-width: 2px; + margin: 15px 10%; +} + +#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; +} + +.me { + border-color: limegreen; +} + +.project { + background-color: rgba(35, 35, 35, 0.8); + padding: 15px; + border: 2px gray solid; + margin: 20px 0px; + border-radius: 15px; +} + +.project-inner { + overflow: hidden; + padding: 0; + margin: auto; + z-index: 3; +} + +.project-inner>div>img { + object-fit: cover; + border: 2px white solid; + width: 80%; + max-width: 500px; + margin: auto; + border-radius: 10px; +} + +.project>p { + display: inline-block; +} + +.minipfp { + width: 70px; + display: inline-block; + margin-right: 10px; + border: 2px lightgray solid; + border-radius: 5px; +} + +.lengthBar { + background-color: rgb(50, 40, 60); + display: inline-block; + width: 80%; + height: 10px; + padding: 0; + overflow: hidden; + border-radius: 5px; + margin-right: 1.9%; +} + +.lengthBar>span { + margin: 0; + padding: 0; + width: 100%; + background-color: rgb(200, 200, 230); + height: 20px; + display: block; + position: relative; +} + +.note { + font-size: 0.95rem; + color: lightgray; +} + +@keyframes fade-in { + 0% { + opacity: 0; + transform: translateY(50vh); + } + + 100% { + opacity: 1; + transform: none; + } +} \ No newline at end of file diff --git a/resources/watch.html b/resources/watch.html index 19da0dd..4a4b1f4 100644 --- a/resources/watch.html +++ b/resources/watch.html @@ -6,7 +6,7 @@ - +