style: remove placeholder stying

This commit is contained in:
ktyl 2024-08-03 14:16:44 +01:00
parent b9947236ba
commit 91b48e7582
3 changed files with 78 additions and 50 deletions

View File

@ -15,7 +15,7 @@
<!-- loader displays an animation before adding the next batch of posts -->
<div id="loader">
<div class="skeleton-post"></div>
<div class="block skeleton-post"></div>
</div>
<!-- post actions shows the post count and post total (we probably do not need this) -->

41
main.js
View File

@ -1,7 +1,7 @@
var users = [];
var posts = {};
const localMode = true;
const localMode = false;
const blockContainer = document.getElementById("block-container");
const postCountElem = document.getElementById("post-count");
const postTotalElem = document.getElementById("post-total");
@ -17,11 +17,6 @@ function getPageCount() {
return Math.ceil(Object.keys(posts).length / postIncrease);
}
function getRandomColor() {
const h = Math.floor(Math.random() * 360);
return `hsl(${h}deg, 90%, 85%)`;
}
class Post {
// JSON post data
constructor(data) {
@ -54,16 +49,7 @@ class Post {
}
getHeaderTag() {
const level = this.getPostLevel();
switch (level) {
case 0: return "h1";
case 1: return "h2";
case 2: return "h3";
case 3: return "h4";
default:
console.error(`${level} is not a supported post level`);
return null;
}
return this.getPostLevel() == 0 ? "h1" : "h2";
}
getHeaderElement() {
@ -81,7 +67,8 @@ class Post {
elem.appendChild(pfpElem);
const usernameElem = document.createElement(this.getHeaderTag());
usernameElem.innerHTML = this.username;
usernameElem.setAttribute("class", "username");
usernameElem.innerHTML = `<a href="#">${this.username}</a>`;
elem.setAttribute("href", "#");
elem.addEventListener("click", () => updateUserProfile(this.username));
@ -100,10 +87,11 @@ class Post {
const elem = document.createElement("div");
// display root posts as blocks, and comments as attached to their posts
let classes = ["post"];
if (this.getPostLevel() == 0) {
elem.className = "block post";
classes.push("block");
}
elem.style.backgroundColor = getRandomColor();
elem.className = classes.join(" ");
elem.appendChild(this.getHeaderElement());
elem.appendChild(this.getContentElement());
@ -247,16 +235,15 @@ function writePost() {
function addWritePostBlock() {
const blockElem = document.createElement("div");
blockElem.className = "block";
blockElem.style.backgroundColor = "red";
blockElem.addEventListener("click", writePost);
blockElem.className = "block write-post";
const buttonElem = document.createElement("a");
buttonElem.setAttribute("href", "#");
buttonElem.innerHTML = "Write something interesting for me!";
buttonElem.addEventListener("click", writePost);
blockElem.append(buttonElem);
const spanElem = document.createElement("h2");
spanElem.className = "";
spanElem.innerHTML = "Write something interesting for me!";
blockElem.append(spanElem);
blockContainer.append(blockElem)
blockContainer.append(blockElem);
}
function init() {

View File

@ -1,7 +1,15 @@
:root {
--header-height: 64px;
--background-color: #374955;
--accent-color: #86b1cc;
--comment-column-width: 3px;
}
body {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
background-color: var(--background-color);
}
@media only screen and (min-width: 800px) {
@ -25,23 +33,72 @@ body {
}
.block {
background-color: white;
width: calc(100% - 16px);
margin: 8px;
border-radius: 3px;
border-radius: var(--header-height);
padding: calc(var(--header-height) / 2);
transition: all 200ms ease-in-out;
}
.block:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.block:not(.write-post) {
padding-bottom: var(--header-height);
}
.block a .username {
margin-top: 0;
margin-bottom: 0;
padding-left: calc(var(--header-height) / 4);
height: var(--header-height);
display: flex;
align-items: center;
justify-content: left;
}
.write-post {
cursor: pointer;
color: var(--background-color);
}
.write-post:hover {
background-color: var(--accent-color);
color: white;
}
.write-post:active {
background-color: var(---background-color);
}
.write-post h2 {
display: flex;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
color: var(--background-color);
}
.pfp {
max-width: 64px;
max-height: 64px;
max-width: var(--header-height);
max-height: var(--header-height);
float: left;
border-radius: 50%;
}
.post p {
margin-bottom: 0;
}
.post:not(.block) {
margin-top: calc(var(--header-height) / 4);
border-left: var(--comment-column-width) solid var(--accent-color);
padding-left: calc(var(--header-height) / 2 - var(--comment-column-width));
}
.post-actions {
margin: 8px;
padding: 16px 0;
@ -58,21 +115,5 @@ body {
.skeleton-post {
height: 55vh;
width: calc(100% - 16px);
margin: 8px;
border-radius: 3px;
transition: all 200ms ease-in-out;
position: relative;
background-color: #eaeaea;
}
.skeleton-post::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
}