Completely new UI

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

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.
Intended for https://blog.violets-purgatory.dev !!
## How does it work?
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

View file

@ -44,9 +44,10 @@ function pageUpdate() {
addedHTML +=
`<div class="project">
`<div class="post">
<a style="text-decoration: none;" href="./post/${post.path}">
<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>
</a>
</div>`
@ -61,6 +62,7 @@ function pageUpdate() {
watcher
.on('change', pageUpdate)
.on('add', pageUpdate)
app.get('/post/:post*', (req, res) => {
var postName = req.params.post

View file

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

View file

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

Binary file not shown.

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;
text-align: center;
line-height: 1.5rem;
}
h1 {
color: rgb(225, 215, 255);
color: rgb(0, 255, 0);
font-size: 2.5rem;
}
h2,
h3,
li {
color: white;
color: rgb(0, 255, 0);
}
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;
background-color: black;
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);
main {
margin: auto;
max-width: 1000px;
}
@ -49,6 +46,24 @@ a {
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 {
color: white;
transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
@ -73,15 +88,3 @@ hr {
border-width: 2px;
margin: 15px 10%;
}
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(50vh);
}
100% {
opacity: 1;
transform: none;
}
}