76 lines
2.8 KiB
HTML
76 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<title>Style test</title>
|
|
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600' rel='stylesheet' type='text/css'>
|
|
<link href='https://fonts.googleapis.com/css?family=Fira+Mono:300,400,500,700' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" type="text/css" href="{{ static "style.build.css" }}" />
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Base style test</h1>
|
|
|
|
<p>
|
|
This page demonstrates the baseline styles for the HMN website.
|
|
</p>
|
|
<p>
|
|
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 <code>padding: 0 !important;</code> overrides across your site.
|
|
</p>
|
|
<p>
|
|
This does not produce good-looking longform text, like you want in forum posts or articles. This is the purpose of the <code>.post-content</code> class, which opts into layout properties that are good for textual content.
|
|
</p>
|
|
|
|
<h2>Text & links</h2>
|
|
Text outside paragraphs looks like this.
|
|
<p>
|
|
Text can be <strong>strong</strong> and <b>bold</b>, <em>emphasized</em> and <i>italic</i>.
|
|
</p>
|
|
<p>
|
|
The <a href="https://handmade.network/">Handmade Network</a> started as a simple forum site for fans of <a href="https://handmadehero.org/" class="external">Handmade Hero</a>.
|
|
</p>
|
|
|
|
<h2>Lists</h2>
|
|
<p>
|
|
Lists are really not used outside of <code>post-content</code>, but we can at least ensure that the bullets render the way we want.
|
|
</p>
|
|
<ol>
|
|
<li>Ordered lists use numbers, obviously.</li>
|
|
<li>What else would they do?</li>
|
|
<li>It is the only sensible option.</li>
|
|
</ol>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<ul>
|
|
<li>Unordered lists use bullets.</li>
|
|
<li>The bullets need to look ok.</li>
|
|
<li>It is important that things look ok.</li>
|
|
</ul>
|
|
|
|
<h2>Monospace</h2>
|
|
<p>
|
|
This is a website for programmers, after all.
|
|
</p>
|
|
<p>
|
|
Inline code in a paragraph looks like <code>printf("Hello, world!");</code>.
|
|
</p>
|
|
<p>
|
|
A block of code looks like:
|
|
</p>
|
|
<code><pre>#include <stdio.h>
|
|
|
|
int main() {
|
|
printf("Hello, world!\n");
|
|
}
|
|
</pre></code>
|
|
<p>
|
|
The same block of code in a paragraph looks different. Browsers are fun.
|
|
</p>
|
|
<p><code><pre>#include <stdio.h>
|
|
|
|
int main() {
|
|
printf("Hello, world!\n");
|
|
}
|
|
</pre></code></p>
|
|
</body>
|