525 lines
20 KiB
HTML
525 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="../css/normalize.css" />
|
|
<link rel="stylesheet" href="../css/skeleton.css" />
|
|
<link rel="stylesheet" href="../css/statocles-default.css" />
|
|
<style type="text/css">
|
|
.section-head { border-bottom: 2px solid #222 }
|
|
.section-sub { border-bottom: 1px solid #222 }
|
|
.example { background-color: white; font-size: 80%; }
|
|
</style>
|
|
<title>Style Demo</title>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<a class="brand" href="/">Brand</a>
|
|
<ul>
|
|
<li><a href="#text">Text</a></li>
|
|
<li><a href="#widgets">Widgets</a></li>
|
|
<li><a href="#blog">Blog</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="container">
|
|
|
|
<h1>Style Demo</h1>
|
|
|
|
<h2 id="text" class="section-head">Text</h2>
|
|
|
|
<p>These are plain styles for plain HTML. No formatting classes
|
|
involved in this section!</p>
|
|
|
|
<section>
|
|
<div class="row">
|
|
<div class="one-half column">
|
|
<h3 class="section-sub">Headings</h3>
|
|
|
|
<h1>Heading 1</h1>
|
|
<pre><code class="example"># Heading 1
|
|
<h1>Heading 1</h1></code></pre>
|
|
|
|
<h2>Heading 2</h2>
|
|
<pre><code class="example">## Heading 2
|
|
<h2>Heading 2</h2></code></pre>
|
|
|
|
<h3>Heading 3</h3>
|
|
<pre><code class="example">### Heading 3
|
|
<h3>Heading 3</h3></code></pre>
|
|
|
|
<h4>Heading 4</h4>
|
|
<pre><code class="example">#### Heading 4
|
|
<h4>Heading 4</h4></code></pre>
|
|
|
|
<h5>Heading 5</h5>
|
|
<pre><code class="example">##### Heading 5
|
|
<h5>Heading 5</h5></code></pre>
|
|
|
|
</div>
|
|
|
|
<div class="one-half column">
|
|
<h3 class="section-sub">Formatting</h3>
|
|
|
|
<p><a href="#">Links</a></p>
|
|
<pre><code class="example">[Link text](http://example.com)
|
|
<a href="http://example.com">Link text</a></code></pre>
|
|
|
|
<p><em>Emphasis</em></p>
|
|
<pre><code class="example">_Emphasis_
|
|
<em>Emphasis</em></code></pre>
|
|
|
|
<p><strong>Strong Emphasis</strong></p>
|
|
<pre><code class="example">*Strong Emphasis*
|
|
<strong>Strong Emphasis</strong></code></pre>
|
|
|
|
<p><code>Inline code</code></p>
|
|
<pre><code class="example">`Inline code`
|
|
<code>Inline code</code></code></pre>
|
|
|
|
<p><kbd>Keyboard input</kbd></p>
|
|
<pre><code class="example"><kbd>...</kbd></code></pre>
|
|
|
|
<p><samp>Sample output</samp></p>
|
|
<pre><code class="example"><samp>...</samp></code></pre>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<h3 class="section-sub">Text Blocks</h3>
|
|
|
|
<h4>Paragraphs</h4>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Vestibulum vestibulum nunc at velit sagittis, id pulvinar augue
|
|
volutpat. In lobortis semper scelerisque. Praesent pharetra
|
|
augue vitae hendrerit aliquet. Aliquam vel ex felis. Nam
|
|
gravida accumsan odio eu semper. Sed id leo tellus. Suspendisse
|
|
pretium ligula et cursus hendrerit. Ut commodo metus a
|
|
efficitur tempus. Fusce vel enim eget velit fringilla
|
|
congue.</p>
|
|
|
|
<pre><code class="example">Lorem ipsum dolor sit amet...
|
|
|
|
<p>Lorem ipsum dolor sit amet...</p></code></pre>
|
|
|
|
<h4>Code</h4>
|
|
|
|
<pre><code>use strict;
|
|
use warnings;
|
|
use feature qw( say );
|
|
|
|
package Hash::Object;
|
|
|
|
sub new {
|
|
my ( $class, %self ) = @_;
|
|
return bless { %self }, $class;
|
|
}
|
|
</code></pre>
|
|
|
|
<pre><code>use strict; use warnings; use feature qw( say ); package Hash::Object; sub new { my ( $class, %self ) = @_; return bless { %self }, $class; }</code></pre>
|
|
|
|
<pre><code class="example"> # 4-space indent
|
|
use strict;
|
|
use warnings;
|
|
|
|
<pre><code>use strict;
|
|
use warnings;</code></pre></code></pre>
|
|
|
|
<h4>Blockquote</h4>
|
|
|
|
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
elit. Vestibulum vestibulum nunc at velit sagittis, id
|
|
pulvinar augue volutpat. In lobortis semper scelerisque.
|
|
Praesent pharetra augue vitae hendrerit aliquet. Aliquam
|
|
vel ex felis. Nam gravida accumsan odio eu semper. Sed id
|
|
leo tellus. Suspendisse pretium ligula et cursus hendrerit. Ut
|
|
commodo metus a efficitur tempus. Fusce vel enim eget velit
|
|
fringilla congue. <cite>Some Author</cite></blockquote>
|
|
|
|
<pre><code class="example">> Lorem ipsum dolor sit amet...
|
|
|
|
<blockquote>
|
|
Lorem ipsum dolor sit amet...
|
|
<cite>Citation</cite>
|
|
</blockquote></code></pre>
|
|
|
|
<h3 class="section-sub">Lists</h3>
|
|
|
|
<div class="row">
|
|
<div class="one-half column">
|
|
<h4>Ordered</h4>
|
|
|
|
<ol>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Vivamus quis hendrerit quam</li>
|
|
<li>Aenean sed velit lobortis, interdum</li>
|
|
<li>Vivamus nunc purus, malesuada at lacinia</li>
|
|
<li>Aenean nec arcu quis</li>
|
|
</ol>
|
|
|
|
<pre><code class="example">1. Lorem ipsum dolor sit amet
|
|
2. Vivamus quis hendrerit quam
|
|
3. Aenean sed velit lobortis, interdum
|
|
|
|
<ol>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Vivamus quis hendrerit quam</li>
|
|
<li>Aenean sed velit lobortis, interdum</li>
|
|
</ol></code></pre>
|
|
|
|
</div>
|
|
|
|
<div class="one-half column">
|
|
<h4>Unordered</h4>
|
|
|
|
<ul>
|
|
<li>Maecenas consequat, quam id rhoncus</li>
|
|
<li>Massa finibus justo, a interdum</li>
|
|
<li>Nullam consequat lacus mattis</li>
|
|
<li>Proin viverra tincidunt mauris ac interdum</li>
|
|
<li>Interdum ante in, ullamcorper tortor</li>
|
|
</ul>
|
|
|
|
<pre><code class="example">* Lorem ipsum dolor sit amet
|
|
* Vivamus quis hendrerit quam
|
|
* Aenean sed velit lobortis, interdum
|
|
|
|
<ul>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Vivamus quis hendrerit quam</li>
|
|
<li>Aenean sed velit lobortis, interdum</li>
|
|
</ul></code></pre>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<h2 id="classes" class="section-head">Classes</h2>
|
|
|
|
<section>
|
|
<h3 class="section-sub">Lists</h3>
|
|
|
|
<h4>Inline lists</h4>
|
|
|
|
<div class="row">
|
|
<div class="one-half column">
|
|
<ul class="list-inline">
|
|
<li>Lorem</li>
|
|
<li>Ipsum</li>
|
|
<li>Dolor</li>
|
|
</ul>
|
|
|
|
<pre><code class="example"><ul class="list-inline">
|
|
<li>Lorem</li>
|
|
<li>Ipsum</li>
|
|
<li>Dolor</li>
|
|
</ul></code></pre>
|
|
</div>
|
|
<div class="one-half column">
|
|
<ol class="list-inline">
|
|
<li>Lorem</li>
|
|
<li>Ipsum</li>
|
|
<li>Dolor</li>
|
|
</ol>
|
|
|
|
<pre><code class="example"><ol class="list-inline">
|
|
<li>Lorem</li>
|
|
<li>Ipsum</li>
|
|
<li>Dolor</li>
|
|
</ol></code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
<h3 class="section-sub">Images</h3>
|
|
|
|
<div class="row">
|
|
|
|
<div class="one-half column">
|
|
<p><img src="http://placehold.it/150x150"
|
|
class="u-pull-left"> Lorem ipsum dolor sit amet,
|
|
consectetur adipiscing elit. Vestibulum vestibulum
|
|
nunc at velit sagittis, id pulvinar augue volutpat. In
|
|
lobortis semper scelerisque. Praesent pharetra augue
|
|
vitae hendrerit aliquet.</p>
|
|
<div class="u-cf"></div>
|
|
<pre><code class="example"><img src="#" class="u-pull-left"></code></pre>
|
|
</div>
|
|
|
|
<div class="one-half column">
|
|
<p><img src="http://placehold.it/150x150"
|
|
class="u-pull-right"> Lorem ipsum dolor sit amet,
|
|
consectetur adipiscing elit. Vestibulum vestibulum
|
|
nunc at velit sagittis, id pulvinar augue volutpat. In
|
|
lobortis semper scelerisque. Praesent pharetra augue
|
|
vitae hendrerit aliquet.</p>
|
|
<div class="u-cf"></div>
|
|
<pre><code class="example"><img src="#" class="u-pull-right"></code></pre>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<h2 id="widgets" class="section-head">Widgets</h2>
|
|
|
|
<section>
|
|
<h3 class="section-sub">Pager</h3>
|
|
|
|
<div class="row">
|
|
<div class="one-half column">
|
|
<h4>Enabled</h4>
|
|
|
|
<ul class="pager">
|
|
<li class="prev">
|
|
<a class="button button-primary" rel="next" href="#">
|
|
← Older
|
|
</a>
|
|
</li>
|
|
<li class="next">
|
|
<a class="button button-primary" rel="prev" href="#">
|
|
Newer →
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="u-cf"></div>
|
|
|
|
<pre><code class="example"><ul class="pager">
|
|
<li class="prev">
|
|
<a class="button button-primary" rel="next" href="#">
|
|
&larr; Older
|
|
</a>
|
|
</li>
|
|
<li class="next">
|
|
<a class="button button-primary" rel="prev" href="#">
|
|
Newer &rarr;
|
|
</a>
|
|
</li>
|
|
</ul></code></pre>
|
|
|
|
</div>
|
|
|
|
<div class="one-half column">
|
|
<h4>Disabled</h4>
|
|
|
|
<ul class="pager">
|
|
<li class="prev">
|
|
<a class="button disabled" rel="next" href="#">
|
|
← Older
|
|
</a>
|
|
</li>
|
|
<li class="next">
|
|
<a class="button disabled" rel="prev">
|
|
Newer →
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="u-cf"></div>
|
|
|
|
<pre><code class="example"><ul class="pager">
|
|
<li class="prev">
|
|
<a class="button disabled" rel="next" href="#">
|
|
&larr; Older
|
|
</a>
|
|
</li>
|
|
<li class="next">
|
|
<a class="button disabled" rel="prev">
|
|
Newer &rarr;
|
|
</a>
|
|
</li>
|
|
</ul></code></pre>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<h3 class="section-sub">Sidebar</h3>
|
|
|
|
<p>Recommended width is <code class="example">class="three
|
|
columns"</code>.</p>
|
|
|
|
<pre><code class="example"><div class="three columns sidebar">...</div></code></pre>
|
|
|
|
<div class="row">
|
|
<div class="three columns sidebar">
|
|
<h1>Heading 1</h1>
|
|
<p>Lorem ipsum dolor sit amet, consectetur
|
|
adipiscing elit. Vivamus quis hendrerit quam, ac
|
|
tristique nisl. <code>Aenean sed velit lobortis, interdum
|
|
ante in, ullamcorper tortor.</code></p>
|
|
<ul>
|
|
<li>Maecenas consequat, quam id rhoncus</li>
|
|
<li>Massa finibus justo, a interdum</li>
|
|
<li>Proin viverra tincidunt mauris ac interdum</li>
|
|
<li>Interdum ante in, ullamcorper tortor</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="three columns sidebar">
|
|
<h2>Heading 2</h2>
|
|
<p>Vivamus nunc purus, malesuada at lacinia a,
|
|
pellentesque nec enim. <em>Vestibulum</em> et est euismod,
|
|
ultrices lectus non, aliquam magna. Proin viverra
|
|
tincidunt mauris ac interdum. Aenean nec arcu quis
|
|
turpis accumsan dignissim et ut risus.</p>
|
|
</div>
|
|
|
|
<div class="three columns sidebar">
|
|
<h3>Heading 3</h3>
|
|
<img src="http://placehold.it/200x200">
|
|
<ol>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Vivamus quis hendrerit quam</li>
|
|
<li>Aenean sed velit lobortis, interdum</li>
|
|
<li>Vivamus nunc purus, malesuada at lacinia</li>
|
|
<li>Aenean nec arcu quis</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="three columns sidebar">
|
|
<h4>Heading 4</h4>
|
|
<p>Maecenas consequat, quam id rhoncus convallis,
|
|
erat massa finibus justo, a interdum justo est eget
|
|
tellus. Ut mattis <strong>dolor dolor</strong>. Maecenas vitae
|
|
congue diam. <kbd>Nullam consequat lacus mattis,
|
|
faucibus arcu ut, auctor ex.</kbd></p>
|
|
|
|
<h5>Heading 5</h5>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="section-sub">Crumbtrail</h3>
|
|
<div class="crumbtrail">
|
|
<ul>
|
|
<li>
|
|
<a href="http://example.com">Foo</a>
|
|
</li>
|
|
<li>
|
|
Bar
|
|
</li>
|
|
<li>
|
|
<a href="http://example.com">Baz</a>
|
|
</li>
|
|
</ul>
|
|
(<a href="http://example.com">extras</a>)
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<h2 id="blog" class="section-head">Blog</h2>
|
|
|
|
<section>
|
|
|
|
<div class="row">
|
|
<div class="nine columns">
|
|
<article>
|
|
|
|
<header>
|
|
<h1><a href="#">A Blog Post</a></h1>
|
|
|
|
<p class="tags">Tags:
|
|
<a href="#" rel="tag">massa</a>
|
|
<a href="#" rel="tag">efficitur</a>
|
|
<a href="#" rel="tag">semper</a>
|
|
</p>
|
|
|
|
<aside>
|
|
<p><time datetime="2014-01-01T00:00:00Z">
|
|
Posted on 2014-01-01
|
|
</time>
|
|
by preaction</p>
|
|
</aside>
|
|
|
|
<p>Originally posted as:
|
|
<a href="#">
|
|
<em>Another Blog Post</em> on medium.com.
|
|
</a>
|
|
</p>
|
|
|
|
</header>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Vestibulum vestibulum nunc at velit sagittis, id pulvinar
|
|
augue volutpat. In lobortis semper scelerisque. Praesent
|
|
pharetra augue vitae hendrerit aliquet. Aliquam vel ex
|
|
felis. Nam gravida accumsan odio eu semper. Sed id leo
|
|
tellus. Suspendisse pretium ligula et cursus hendrerit. Ut
|
|
commodo metus a efficitur tempus. Fusce vel enim eget velit
|
|
fringilla congue.</p>
|
|
|
|
<p>Nullam massa neque, viverra id efficitur in, bibendum
|
|
eget odio. Suspendisse potenti. Nunc suscipit, erat eu
|
|
pulvinar scelerisque, orci leo tempor ante, eget rutrum
|
|
massa purus vitae velit. Curabitur nec ex vitae ipsum
|
|
blandit aliquet ut eu sem. Cras vel orci lorem. In dictum
|
|
iaculis massa, tempor faucibus mi tempus sit amet. Donec
|
|
porttitor diam et nulla facilisis mattis.</p>
|
|
|
|
<p><a href="#">Continue reading A Blog Post...</a></p>
|
|
|
|
</article>
|
|
|
|
<ul class="pager">
|
|
<li class="prev">
|
|
<a class="button button-primary" rel="next" href="#">← Older</a>
|
|
</li>
|
|
<li class="next">
|
|
<a class="button disabled" rel="next">Newer →</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="three columns sidebar">
|
|
<h3>Tags</h3>
|
|
<ul class="list-inline">
|
|
<li><a href="#">bibendum</a></li>
|
|
<li><a href="#">orci</a></li>
|
|
<li><a href="#">lorem</a></li>
|
|
<li><a href="#">vitae</a></li>
|
|
<li><a href="#">efficitur</a></li>
|
|
<li><a href="#">massa</a></li>
|
|
<li><a href="#">semper</a></li>
|
|
</ul>
|
|
|
|
<h3>Feeds</h3>
|
|
<ul class="list-inline">
|
|
<li>
|
|
<a href="#" rel="alternate" type="">
|
|
Atom
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" rel="alternate" type="">
|
|
RSS
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container tagline">
|
|
<a href="http://preaction.me/statocles">Made with Statocles</a><br/>
|
|
<a href="http://www.perl.org">Powered by Perl</a>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|