Practice CSS with smol.pub

[pinkvampyr]

Not sure if this is where i should post this lol but I recently decided to host a blog on smol.pub instead of directly from neocities, which i was bummed out about at first because I had wanted to do some customizing to it and get some practice in before I start my main project. Then i realized smol.pub had some CSS customization too! I was a bit limited because I couldn't fiddle with the HTML and could only work with Gemtext but I managed to work out something that was pretty similar to my original design!

here it is! i appreciate any critique people can give but again note that I could only work with CSS and gemtext.

[Lyonid]

I think it's so lovely! What kind of critique are you looking for? Is it aesthetics? Technicalities? I think the background is so cute, and I really enjoy the colors. Dragging and pushing my browser around also didn't break the site, so it's also clear. I can't wait for you to share some posts. 

[pinkvampyr]

I think it's so lovely! What kind of critique are you looking for? Is it aesthetics? Technicalities? I think the background is so cute, and I really enjoy the colors. Dragging and pushing my browser around also didn't break the site, so it's also clear. I can't wait for you to share some posts. 

i'm actually not sure pfff, i guess just any critique that pops up, and thank you!!!!

[arcus]

The way the colours match the background is really good. The borders are a nice touch too. It's a good amount of simplicity without being plain, I like it.

Code

img {
    padding-left: 150px;
    padding-right: 150px;
    display: block;
    margin: 5px auto 5px auto;
    width: 100%;
}

You don't need to add padding or use width 100%, since the image will automatically centre and scale down. The way it's set here is that the padding will take up the same amount of space, while the header image gets smaller.

If don't want your header image to take up the space to the sides in a smaller window, you can leave the width unset, and set the padding to the side to percentages.

Code

img {
    padding-left: 10%;
    padding-right: 10%;
    display: block;
    margin: 5px auto 5px auto;
}

Something like this.

Is there a reason why you went with h3 for the headers? Not that you need to change them. Just that it's the standard to use one h1 heading, then use h2 headings for sub headings for the h1 heading, and so on.

[pinkvampyr]

The way the colours match the background is really good. The borders are a nice touch too. It's a good amount of simplicity without being plain, I like it.

Code

img {
    padding-left: 150px;
    padding-right: 150px;
    display: block;
    margin: 5px auto 5px auto;
    width: 100%;
}

You don't need to add padding or use width 100%, since the image will automatically centre and scale down. The way it's set here is that the padding will take up the same amount of space, while the header image gets smaller.

If don't want your header image to take up the space to the sides in a smaller window, you can leave the width unset, and set the padding to the side to percentages.

Code

img {
    padding-left: 10%;
    padding-right: 10%;
    display: block;
    margin: 5px auto 5px auto;
}

Something like this.

Is there a reason why you went with h3 for the headers? Not that you need to change them. Just that it's the standard to use one h1 heading, then use h2 headings for sub headings for the h1 heading, and so on.

oh thank you i'll go fix that rn

also the reason i went with H3's is cause all the blog posts already kind of have a large header with the title of the post on it, and on the main page I kind of didnt have any use for anything bigger than h3 to denote the sections since the image takes up so much space and functions as a header already.