diff --git a/index.js b/index.js index dd88539..4fea7d3 100644 --- a/index.js +++ b/index.js @@ -5,6 +5,8 @@ path = require("path"), showdown = require("showdown"), mkthtml = new showdown.Converter() +mkthtml.setFlavor("github") + const PORT = process.env.PORT || 8080 var dataPath = path.join(__dirname, 'data') @@ -73,6 +75,7 @@ app.get('/post/:post*', (req, res) => { var html = fs.readFileSync(path.join(__dirname, 'resources/postPage.html')).toString() html = html.replace('{POST}', post) + html = html.replace('{POST_TITLE}', req.params.post) res.send(html) }) \ No newline at end of file diff --git a/resources/postPage.html b/resources/postPage.html index 356241e..af27a8b 100644 --- a/resources/postPage.html +++ b/resources/postPage.html @@ -8,6 +8,11 @@ - {POST} +

Home

+

{POST_TITLE}

+
+
+ {POST} +
\ No newline at end of file diff --git a/static/style.css b/static/style.css index 0e3cb43..2151700 100644 --- a/static/style.css +++ b/static/style.css @@ -1,12 +1,346 @@ -body { - background-color: black; -} +@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css'); * { - color: white; + font-family: Verdana, Geneva, Tahoma, sans-serif; + padding: 0; text-align: center; + line-height: 1.5rem; +} + +h1 { + color: rgb(225, 215, 255); + font-size: 2.5rem; +} + +h2, +h3 { + color: white; +} + +body, +html { + overflow-x: hidden; + margin: auto; + background-color: rgb(20, 5, 60); + background: linear-gradient(rgb(25, 5, 75), 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); + text-decoration: none; + display: inline-block; + transition: 1.5s all cubic-bezier(0.075, 0.82, 0.165, 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 { + 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%; + transform: scale(0.9); + border-radius: 50%; +} + +.pfp:hover { + transform: scale(1); + border-color: rgb(255, 200, 255); + object-fit: cover; } hr { - color: green; + color: white; + opacity: 0.25; + border-width: 2px; + margin: 15px 10%; +} + +#card { + background-color: rgb(75, 25, 100); + padding: 15px; + border: 2px white solid; + margin: 20px auto; + width: 95%; + max-width: 800px; + z-index: 3; + position: relative; +} + +.me { + border-color: limegreen; +} + +/* I am so sorry about this code,,, */ + +.love::before { + content: "<3 "; + color: rgb(255, 100, 150); +} + +.like::before { + content: ":) "; + color: limegreen; +} + +.silly::before { + content: ":P "; + color: aqua; +} + +.fine::before { + content: ":/ "; + color: yellow; +} + +.hate::before { + content: ">:( "; + color: red; +} + +.love { + border-color: rgb(255, 100, 150); +} + +.like { + border-color: limegreen; +} + +.silly { + border-color: aqua; +} + +.fine { + border-color: yellow; +} + +.hate { + border-color: red; +} + +.up { + border-color: limegreen; +} + +.mid { + border-color: yellow; +} + +.down { + border-color: red; +} + +.post { + background-color: rgba(85, 50, 150, 0.3); + border: 2px gray solid; + display: inline-block; + /* border-radius: 15px; */ + padding: 10px; + margin: 8px; +} + +.minipfp { + width: 70px; + display: inline-block; + margin-right: 10px; + border: 2px lightgray solid; + border-radius: 5px; +} + +@keyframes fade-in { + 0% { + opacity: 0; + transform: translateY(50vh); + } + + 100% { + opacity: 1; + transform: none; + } +} + +.snowflake { + color: white; + font-size: 0.5em; + font-family: Arial, sans-serif; + text-shadow: 0 0 5px #000; + visibility: hidden; +} + +.snowflake, +.snowflake .inner { + z-index: 1; + animation-iteration-count: infinite; + animation-play-state: running +} + +@keyframes snowflakes-fall { + 0% { + visibility: visible; + transform: translateY(0) + } + + 100% { + visibility: visible; + transform: translateY(110vh) + } +} + +@keyframes snowflakes-shake { + + 0%, + 100% { + transform: translateX(0) + } + + 50% { + transform: translateX(80px) + } +} + +.snowflake { + position: fixed; + top: -10%; + -webkit-user-select: none; + user-select: none; + cursor: default; + animation-name: snowflakes-shake; + animation-delay: 0.5s; + animation-duration: 3s; + animation-timing-function: ease-in-out +} + +.snowflake .inner { + animation-duration: 10s; + animation-delay: 0.5s; + animation-name: snowflakes-fall; + animation-timing-function: linear +} + +.snowflake:nth-of-type(0) { + left: 1%; + animation-delay: 0s +} + +.snowflake:nth-of-type(0) .inner { + animation-delay: 0s +} + +.snowflake:first-of-type { + left: 10%; + animation-delay: 1s +} + +.snowflake:first-of-type .inner, +.snowflake:nth-of-type(8) .inner { + animation-delay: 1s +} + +.snowflake:nth-of-type(2) { + left: 20%; + animation-delay: .5s +} + +.snowflake:nth-of-type(2) .inner, +.snowflake:nth-of-type(6) .inner { + animation-delay: 6s +} + +.snowflake:nth-of-type(3) { + left: 30%; + animation-delay: 2s +} + +.snowflake:nth-of-type(11) .inner, +.snowflake:nth-of-type(3) .inner { + animation-delay: 4s +} + +.snowflake:nth-of-type(4) { + left: 40%; + animation-delay: 2s +} + +.snowflake:nth-of-type(10) .inner, +.snowflake:nth-of-type(4) .inner { + animation-delay: 2s +} + +.snowflake:nth-of-type(5) { + left: 50%; + animation-delay: 3s +} + +.snowflake:nth-of-type(5) .inner { + animation-delay: 8s +} + +.snowflake:nth-of-type(6) { + left: 60%; + animation-delay: 2s +} + +.snowflake:nth-of-type(7) { + left: 70%; + animation-delay: 1s +} + +.snowflake:nth-of-type(7) .inner { + animation-delay: 2.5s +} + +.snowflake:nth-of-type(8) { + left: 80%; + animation-delay: 0s +} + +.snowflake:nth-of-type(9) { + left: 90%; + animation-delay: 1.5s +} + +.snowflake:nth-of-type(9) .inner { + animation-delay: 3s +} + +.snowflake:nth-of-type(10) { + left: 25%; + animation-delay: 0s +} + +.snowflake:nth-of-type(11) { + left: 65%; + animation-delay: 2.5s } \ No newline at end of file