Notebook layout

Hi!!

I'm just getting started with building a Web page.

Mostly idk what I'm doing and it's messy (╥﹏╥)

Just trying to put the bare minimum together at this point, so if you stumble upon this don't judge.

Thanks for stopping by <3

Using this abomination

Is this annoyingly complex? Yes. Is it still easier to parse than a real Tumblr theme? Also yes.

Adding blocks

There is a very specific element wrapping pattern you need to follow for the styling to look correct. Usually, you'll probably be splitting your page into sections, so use the <section> tag with the "post: class with the following structure:

<section class="post">
<div class="article-content">
THIS IS WHERE YOUR TEXT ACTUALLY GOES
</div>
<footer class="article-footer"><div class="date">Optional footer line, you can put a date here. Delete if not using</div></footer>
</section>

There are two scenarios where you don't want to use section: if you're doing an actual list of blog posts, each post should be wrapped in an article tag, so use <article class="post"> instead. If you're just using the boxes for stylistic purposes, use <div class="post">. (If you're not sure whether that's the case, you should most likely use a regular div if there's no header at the beginning of the section.)

Image posts

You can add a main image to a section by putting it in front of the article-content element. It will separate the image from the rest of the "post" content like in a Tumblr image post. If you want inline images (i.e. the image is inside the box), you can just add them normally.

<section class="post">
<img src="IMAGE PATH" alt="ALT TEXT" class="postimage" />
<div class="article-content">
THIS IS WHERE YOUR TEXT ACTUALLY GOES
</div>
<footer class="article-footer"><div class="date">FOOTER</div></footer>
</section>

If you're still confused, the next post has the full enchilada (image and tags) as a demo.