style: remove placeholder stying

index.html

@@ -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) -->

main.js

@@ -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() {

styles.css

@@ -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));
 }