Probably not going to do top bar, but keeping code in consideration.

This commit is contained in:
Bingus_Violet 2024-02-13 11:12:46 -06:00
parent 1820154c58
commit edf199f80d
3 changed files with 27 additions and 5 deletions

View file

@ -29,7 +29,8 @@ function converter(html) {
"DISCORD_STATUS": "DISCORD_STATUS":
`<span style="color: ${statusData.color};">${statusData.text}</span>` + `<span style="color: ${statusData.color};">${statusData.text}</span>` +
`<style>.pfp { border-color: ${statusData.color} }</style>`, `<style>.pfp { border-color: ${statusData.color} }</style>`,
"UPTIME": uptime "UPTIME": uptime,
"TOPBAR": `<div id="topbar"><h3><a href="/socials">Socials</a></h3></div>`
} }
var rpTable = Object.keys(replacers) var rpTable = Object.keys(replacers)
@ -87,9 +88,10 @@ module.exports = {
var data = fs.readFileSync(filePath).toString() var data = fs.readFileSync(filePath).toString()
if (req.path.includes(".css")) { if (req.path.includes(".css")) {
res.setHeader("Content-Type", "text/css") res.setHeader("Content-Type", "text/css")
} else { } else if (!req.path.includes(".woff2")) {
data = converter(data) data = converter(data)
} }
res.send(minify.minify(data)) res.send(minify.minify(data))
} else { } else {
res.status(404).send(` res.status(404).send(`

View file

@ -21,7 +21,6 @@
</head> </head>
<body> <body>
{TOPBAR}
<h1 class="animatedTitle">Welcome to <span class="mainTitle">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span><br></h1> <h1 class="animatedTitle">Welcome to <span class="mainTitle">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span><br></h1>
<main class="animatedMain"> <main class="animatedMain">
<p>{RANDOM_QUOTE}</p> <p>{RANDOM_QUOTE}</p>

View file

@ -22,6 +22,29 @@
color: white; color: white;
} }
#topbar {
background-color: rgb(75, 50, 125);
width: 100%;
padding: 1vh 0px;
position: sticky;
left: 0px;
top: 0px;
z-index: 10;
opacity: 0.5;
transform: scale(1);
transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#topbar:hover {
opacity: 1;
transform: scale(1.05);
}
#topbar > * {
display: inline-block;
font-size: 1.5rem;
}
main:nth-of-type(1) { main:nth-of-type(1) {
width: 95%; width: 95%;
max-width: 1000px; max-width: 1000px;
@ -38,8 +61,6 @@ body {
min-height: 100vh; min-height: 100vh;
padding: 25px;
animation: hideContent 2.5s; animation: hideContent 2.5s;
} }