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.)
<footer class="article-footer"><div class="date">Date or whatever</div> <div class="tags"> <span class="tag">#tag here</span> </div> </footer>
Tags can contain links without any issues.
Image posts
You can add a main image to a section by putting it in front of the article-content element. It willseparate 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.
