108 lines
4.6 KiB
HTML
108 lines
4.6 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 class="ma3">
|
|
<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>
|
|
|
|
|
|
<h1>post-content test</h1>
|
|
|
|
<p>The <code>post-content</code> class yields styles that look nice for textual content.</p>
|
|
|
|
<div class="post-content pa3 ba b--theme-dim">
|
|
<h1>Heading 1</h1>
|
|
<p>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.</p>
|
|
|
|
<ol>
|
|
<li>List items without paragraphs.</li>
|
|
<li>
|
|
<p>List items with paragraphs.</p>
|
|
<p>These should also look reasonable.</p>
|
|
</li>
|
|
<li>And back to no paragraphs.</li>
|
|
</ol>
|
|
|
|
<h2>Heading 2</h2>
|
|
|
|
<p>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.</p>
|
|
|
|
<ul>
|
|
<li>List items without paragraphs.</li>
|
|
<li>
|
|
<p>List items with paragraphs.</p>
|
|
<p>These should also look reasonable.</p>
|
|
</li>
|
|
<li>And back to no paragraphs.</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|