Styleguide for the blog section of my personal website
This page contains all the elements that we currently use in our blog, all designed to be able to work together in any combination. This playground here is meant to be the place to explore and try out changes or improvements in the future.
Note
Not everything that is visible here might be already implemented on that actual blog on rathes.me/writing. I will leave anyhting new that I explore on here for a bit before I decide if this is good enough to take over to the new page.
The different heading levels
Right now, the blog uses every heading from level 1 down to level 4. A h1 is only used for the title of a blog post, so the first heading (the one you see just above this paragraph) is a h2 and is the main heading within the article.
When to the other headings
The main heading will usually be enough for most of the smaller articles. However, when writing longer pieces and then need to more granular structure of the article arises, a h3 can be used to structure bigger sections.
Unlike this piece of content, in which the headings are used artificially, the h3 should only be used when the section that is covered by the h2 is longer than a couple of paragraphs.
Avoid nesting too deep
While there is another nested heading, the h4 should be avoided as much as possible. This heading is usually only needed when writing really long articles (or book) that potentially span multiple pages.
If you feel like reaching to this heading, take a step back and think about the structure of the content first and whether you can improve and avoid this additional nesting.
Continue with dummy text
The following content now is just dummy text, so that all elements currently used can be showcased.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
On a side note: The blog is using MDX so there are some additional components that we use that are not covered by regular markdown such as this Aside component.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
- Finibus Bonorum
- Malorum
- Cicero
- Rackham
- Quidem rerum
- Praesentium voluptatum
- Corporis suscipit
Lorem Ipsum passage
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
“My favorite things in life do not cost any money. It is really clear that the most precious resource we all have is time.” — Steve Jobs
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system
- Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
- Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
- But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
Donec et mi eget magna suscipit pretium ut nec nisi. Nam aliquet, nibh ut ornare convallis, enim ligula placerat leo, ut ultricies nisi libero ac mauris.
Nam vel purus neque. Vivamus auctor est at velit dignissim ultrices. Ut non ante nec erat cursus consequat vitae vitae nisl. Vivamus eu ipsum sollicitudin mi aliquet placerat. Suspendisse potenti. Proin sed augue a quam iaculis sollicitudin. Aliquam erat volutpat. Fusce sit amet vestibulum libero. Mauris massa felis, suscipit a placerat id, aliquet sit amet tellus. Cras viverra sapien eget quam molestie sollicitudin.