From 91b48e7582b374167828b9ad7963a68e36653f29 Mon Sep 17 00:00:00 2001 From: ktyl Date: Sat, 3 Aug 2024 14:16:44 +0100 Subject: [PATCH] style: remove placeholder stying --- index.html | 2 +- main.js | 41 +++++++++----------------- styles.css | 85 ++++++++++++++++++++++++++++++++++++++++-------------- 3 files changed, 78 insertions(+), 50 deletions(-) diff --git a/index.html b/index.html index 05b0ca1..787d831 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@
-
+
diff --git a/main.js b/main.js index 85d9d81..7b02d5d 100644 --- a/main.js +++ b/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 = `${this.username}`; 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() { diff --git a/styles.css b/styles.css index 7f480ad..e590ca6 100644 --- a/styles.css +++ b/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)); }