Completely new UI
This commit is contained in:
Bingus_Violet
parent
3c6270f83d
commit
e301f73ebf
6 changed files with 50 additions and 40 deletions
12
README.md
12
README.md
|
|
@ -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
|
||||
4
index.js
4
index.js
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
BIN
static/fonts/source-code-pro-v23-latin-regular.woff2
Normal file
BIN
static/fonts/source-code-pro-v23-latin-regular.woff2
Normal file
Binary file not shown.
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue