Violet/BlogSharer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Completely new UI

Browse source
This commit is contained in:
Bingus_Violet 2024-03-03 16:17:15 -06:00
parent 3c6270f83d
commit e301f73ebf
6 changed files with 50 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
README.md
View file

@ -1,4 +1,10 @@
# Violets-Limbo # Violet's Limbo
Violet's Limbo is my own blog posting software, not made for commercial use.
Simple, easy to host nodejs application that allows making basic blog posts via markdown files. ## How does it work?
Intended for https://blog.violets-purgatory.dev !! Within `data.json`, I can specify the title & path of posts (more planned in the future) in an array, and the order of the posts is based on the order of the elements in the array. Janky? Yes. Functional? Yes!
## To-Do
- [x] Fix the css on list elements (like these lol)
- [x] Allow pinning of posts (like this one)
- [ ] Add table of contents to posts

4
index.js
View file

@ -44,9 +44,10 @@ function pageUpdate() {
addedHTML += addedHTML +=
`<div class="project"> `<div class="post">
<a style="text-decoration: none;" href="./post/${post.path}"> <a style="text-decoration: none;" href="./post/${post.path}">
<h2>${post.name}</h2> <h2>${post.name}</h2>
<p style="color: white; font-size: 1rem;">${post.desc}</p>
<p style="color: darkgray; font-size: 1rem;">Path: <code>/post/${post.path}</code></p> <p style="color: darkgray; font-size: 1rem;">Path: <code>/post/${post.path}</code></p>
</a> </a>
</div>` </div>`
@ -61,6 +62,7 @@ function pageUpdate() {
watcher watcher
.on('change', pageUpdate) .on('change', pageUpdate)
.on('add', pageUpdate)
app.get('/post/:post*', (req, res) => { app.get('/post/:post*', (req, res) => {
var postName = req.params.post var postName = req.params.post

9
resources/mainPage.html
View file

@ -5,17 +5,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Violet's Limbo</title> <title>Violet's Limbo</title>
<link rel="stylesheet" href="https://violets-purgatory.dev/style.css"> <link rel="stylesheet" href="./style.css">
</head> </head>
<body> <body>
<h2><a href="https://violets-purgatory.dev">Home</a></h2> <h2><a href="https://violets-purgatory.dev">Home</a></h2>
<h1>Violet's Limbo</h1> <h1>Violet's Limbo</h1>
<div class="fadediv"> <main>
<p>Violet's Limbo is just a bunch of random blogs I decided to post, because why not :></p> <p>Violet's Limbo is... my blog! I talk about game design, development, and whatever else comes to mind!</p>
<p>Currently its very early in development, and is going through a large rewrite :P</p>
<p>Enjoy my bad opinions!<hr></p> <p>Enjoy my bad opinions!<hr></p>
<h2>Posts:</h2> <h2>Posts:</h2>
{POSTS} {POSTS}
</div> </main>
</body> </body>
</html> </html>

6
resources/postPage.html
View file

@ -5,14 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Violet's Limbo</title> <title>Violet's Limbo</title>
<link rel="stylesheet" href="https://violets-purgatory.dev/style.css"> <link rel="stylesheet" href="/style.css">
</head> </head>
<body> <body>
<h2><a href="/">Home</a></h2> <h2><a href="/">Home</a></h2>
<h1 class="title">{POST_TITLE}</h1> <h1 class="title">{POST_TITLE}</h1>
<div class="fadediv"> <main>
<hr> <hr>
{POST} {POST}
</div> </main>
</body> </body>
</html> </html>

BIN
static/fonts/source-code-pro-v23-latin-regular.woff2 Normal file
View file

Binary file not shown.

59
static/style.css
View file

@ -1,44 +1,41 @@
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css'); @font-face {
font-display: swap;
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: url('../fonts/source-code-pro-v23-latin-regular.woff2') format('woff2');
}
* { * {
font-family: Verdana, Geneva, Tahoma, sans-serif; font-family: "Source Code Pro", Verdana, Geneva, Tahoma, sans-serif;
padding: 0; padding: 0;
text-align: center; text-align: center;
line-height: 1.5rem;
} }
h1 { h1 {
color: rgb(225, 215, 255); color: rgb(0, 255, 0);
font-size: 2.5rem; font-size: 2.5rem;
} }
h2, h2,
h3,
li { li {
color: white; color: rgb(0, 255, 0);
} }
body, body,
html { html {
overflow-x: hidden;
margin: auto; margin: auto;
background-color: rgb(20, 5, 60); background-color: black;
background: linear-gradient(rgb(25, 5, 75), black);
width: 100vw;
height: 100vh;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-attachment: local;
} }
body { body {
padding: 2.5%; padding: 2.5%;
} }
.fadediv { main {
animation-name: fade-in;
animation-duration: .75s;
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
margin: auto; margin: auto;
max-width: 1000px; max-width: 1000px;
} }
@ -49,6 +46,24 @@ a {
transition: 1.5s all cubic-bezier(0.075, 0.82, 0.165, 1); transition: 1.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
} }
.textBlock {
color: rgb(240, 240, 240);
white-space: pre-wrap;
background-color: rgb(10, 10, 10);
border: 2px lightgray solid;
padding: 0 10px;
}
.post {
color: rgb(240, 240, 240);
background-color: rgb(10, 10, 10);
border: 2px gray solid;
padding: 10px;
padding-top: 0;
margin: 25px 10px;
}
a:hover { a:hover {
color: white; color: white;
transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1); transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
@ -72,16 +87,4 @@ hr {
opacity: 0.25; opacity: 0.25;
border-width: 2px; border-width: 2px;
margin: 15px 10%; margin: 15px 10%;
}
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(50vh);
}
100% {
opacity: 1;
transform: none;
}
} }