I also feel unsure about making the right side of my page because I have so many different things in mind and it's hard to choose. So I'll just focus on making the middle part, which is going to have a bunch of posts. I intend to make this a live feed. Although I'll have to figure that out when I get there. But first, I had to differentiate my profile section's body box (which I was going to use for everything) into something specifically for profile. Since I have a specific width in mind, it wouldn't work for a post format which requires something wider. So I copy pasted the class and made it specifically for posts. I initially tried naming my profile's section into something that references profile, but it broke the code for some reason. So for now it will stay as a generic name and I'll just have to remember that it's used for profiles until this method becomes inconvenient.
Considering a lot of the decorative heavy lifting was done in the profile section, I used the same formats to create the text box and inserting an image. My code looks like this
.section-body-posts {
display: flex;
flex-direction: column;
align-self: center;
background-color: #1D0000;
border: 2px solid #EF0000;
border-radius: 2px;
padding: 0px 0px 0px 10px;
margin: 10px 0px 0px 0px;; /* Format: Top, right, bottom, left */
width: 90%;
height: auto; /*height is adjusted based on content*/
box-shadow:0 0 15px rgba(251, 0, 0, 0.5); /*Format: X, Y, glow amount, color */
}
.posts-images{
width: 90%;
height: auto;
border: 2px solid #EF0000;
border-radius: 2px;
margin-bottom: 5px; /* center the image but
keep some space from the bottom */
object-fit: cover; /*ensures photo is adjusted
inside the square */
align-self: center;
margin: 10px;
}
And it looks like this! Although somewhere somehow, my profile section's alignment is a bit wonky so I have to do a lot of fidgeting with the properties to fix it.
