Styling a bit more.

Author: GustavBoe

src/components/singlePost.js

@@ -6,9 +6,11 @@ import { createHeader } from "./headerFooterLoader.js";
 
 async function generateSinglePost(post) {
   const postContainer = document.createElement("div");
+  postContainer.classList = "post-container";
   const postTitle = document.createElement("h1");
   postTitle.classList = "single-title";
   postTitle.textContent = post.title;
+
   const postMedia = document.createElement("img");
   postMedia.classList = "single-image";
   if (post.media) {
@@ -25,7 +27,7 @@ async function generateSinglePost(post) {
   postContainer.append(postTitle, postMedia, postBody);
   if (profileName === post.author.name) {
     const sendToEditButton = document.createElement("button");
-    sendToEditButton.classList = "editButton";
+    sendToEditButton.classList = "edit-button";
     sendToEditButton.textContent = "Edit post";
     sendToEditButton.addEventListener("click", () => {
       window.location.href = `./edit.html?id=${post.id}`;

src/profile.js

@@ -26,12 +26,16 @@ async function renderProfile(profile) {
 
   const profilePageUsername = document.createElement("h2");
   profilePageUsername.textContent = profile.name;
+  profilePageUsername.classList = "profile-page-name";
+
   const followButton = document.createElement("button");
   followButton.textContent = "Follow";
+  followButton.classList = "follow-button";
   followButton.addEventListener("click", followUser);
 
   const unfollowButton = document.createElement("button");
   unfollowButton.textContent = "Unfollow";
+  unfollowButton.classList = "unfollow-button";
   unfollowButton.addEventListener("click", unfollowUser);
 
   if (profile.name === profileName) {
@@ -68,10 +72,8 @@ async function renderPosts(posts) {
       profilePostImage.src = "https://i.imghippo.com/files/AVMh8683c.png";
     }
     profilePostImage.classList = "profile-post-image";
-    const profilePostTitle = document.createElement("p");
-    profilePostTitle.textContent = posts[i].title;
-    profilePostTitle.classList = "profile-post-title";
-    postContainer.append(profilePostImage, profilePostTitle);
+
+    postContainer.append(profilePostImage);
     profilePostsContainer.append(postContainer);
   }
 }
@@ -88,6 +90,7 @@ async function mainProfile() {
     alert("Something went wrong", error);
   }
 }
+
 if (!getFromLocalStorage("accessToken")) {
   profileContainer.innerHTML = loggedOutText;
 } else {

src/style.css

@@ -12,7 +12,10 @@ body a {
   margin: 0%;
 }
 
-.header-button {
+.header-button,
+.follow-button,
+.unfollow-button,
+.edit-button {
   height: 2rem;
   background-color: white;
   border-color: black;
@@ -25,7 +28,8 @@ body a {
   width: 100%;
   margin-top: 5rem;
 }
-.profile-pic-feed {
+.profile-pic-feed,
+.profile-page-image {
   border-radius: 50%;
   width: 3rem;
   height: auto;
@@ -35,8 +39,48 @@ body a {
   align-self: center;
   text-align: center;
 }
-.post-image-feed {
+.post-image-feed,
+.profile-page-image {
   width: 20rem;
   display: block;
   margin: 0 auto;
 }
+
+/**Profile.html**/
+#profile-container {
+  text-align: center;
+}
+.profile-page-banner {
+  width: 100%;
+}
+.profile-page-image {
+  width: 10rem;
+  margin-top: 3rem;
+}
+#profile-posts-container {
+  max-width: 100%;
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+}
+.profile-post-image {
+  max-width: 10rem;
+  aspect-ratio: 1/1;
+}
+
+/*post.html*/
+.post-container {
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+  text-align: center;
+}
+.single-image {
+  max-width: 20rem;
+}
+.single-body {
+  max-width: 60%;
+}