Base style test
This page demonstrates the baseline styles for the HMN website.
These styles intentionally do not affect layout, only text appearance, colors, etc. We do this because mixing layout and themeing in CSS is a bad idea. Modifying "layout" properties like margin and padding in your base styles makes it hard to ever use those tags across your site, and leads to lots of padding: 0 !important;
overrides across your site.
This does not produce good-looking longform text, like you want in forum posts or articles. This is the purpose of the .post-content
class, which opts into layout properties that are good for textual content.
Text & links
Text outside paragraphs looks like this.
Text can be strong and bold, emphasized and italic.
The Handmade Network started as a simple forum site for fans of Handmade Hero.
Lists
Lists are really not used outside of post-content
, but we can at least ensure that the bullets render the way we want.
- Ordered lists use numbers, obviously.
- What else would they do?
- It is the only sensible option.
The layout of lists obviously looks kind of bad, but again, we are not worried about that here. Better to leave the styles alone so we can more easily disable them in contexts like navigation.
- Unordered lists use bullets.
- The bullets need to look ok.
- It is important that things look ok.
Monospace
This is a website for programmers, after all.
Inline code in a paragraph looks like printf("Hello, world!");
.
A block of code looks like:
#include <stdio.h>
int main() {
printf("Hello, world!\n");
}
The same block of code in a paragraph looks different. Browsers are fun.
#include <stdio.h>
int main() {
printf("Hello, world!\n");
}
post-content test
The post-content
class yields styles that look nice for textual content.
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- List items without paragraphs.
-
List items with paragraphs.
These should also look reasonable.
- And back to no paragraphs.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.