boxdot/article.html

## article.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>partlog</title>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/tomorrow-night-eighties.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<style type="text/css">

body {
    font-family: Georgia, Times;
    width: 40em;
    margin: 2em auto 0 auto;
    font-size: 1.2em;
}

h1, h2, h3, h4, h5 {
    font-family: Georgia, Times;
    font-weight: normal;
}

h2 > a, h2 > a:active, h2 > a:visited, h2 > a:hover {
    display: none;
    position: absolute;
    left: -1em;
    color: LightGray;
    width: 1em;
}

h2 > a:hover {
    display: block;
    position: absolute;
    left: -1em;
}

h2:hover > a {
    display: block;
}

p {
    line-height: 1.6em;
    text-align: justify;
}

.summary {
    font-style: italic;
}


body {
    position: relative;

}

aside, time {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.8em;
}

body > aside {
    position: absolute;
    display: block;
    left: 52em;
    width: 10em;
    margin-top: 0.3em;
}

header {
    position: relative;
}

header > time {
    float: right;
    color: gray;
}

body >:last-child {
    padding-bottom: 2em;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

</style>

<body>

<header>
    <time datetime="2015-20-10">October 20, 2015</time>
</header>

<h1>First Post</h1>
<p class="summary">
    Lorem ipsum dolor sit amet, consectetur adipisicing 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 <a href="#">proident</a>, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<aside class="noselect">Two-dimensional scrolling is possible but rarely desired.</aside>
<p>
    Camera voodoo god plastic pistol order-flow systema wonton soup car hacker free-market spook concrete bicycle range-rover into shoes. Sentient assassin shrine apophenia refrigerator motion Shibuya narrative city tanto systema footage chrome engine digital film into. Pistol shanty town realism shrine 8-bit sunglasses sensory alcohol engine neural. Film 8-bit wristwatch media San Francisco chrome euro-pop towards beef noodles Chiba market. Tower render-farm car boat corporation network vehicle construct. Chiba long-chain hydrocarbons digital youtube otaku vinyl jeans sentient industrial grade physical nodal point media dolphin.
</p>
<h2 id="2"><a href="#2">#</a>Subsection</h2>
<pre><code class="elm">module World where

import Html exposing (..)


main = div [] [ text "Hello, World!" ]
</code></pre>
<p>
    Network Shibuya otaku boat garage euro-pop claymore mine assassin numinous dome singularity. 8-bit table-ware Kowloon order-flow gang sentient. Monofilament alcohol neural rain concrete assault cyber-hotdog sentient singularity fluidity boat weathered denim voodoo god geodesic. City range-rover girl table warehouse semiotics Chiba 8-bit bomb bicycle paranoid render-farm. Tiger-team bicycle youtube physical jeans decay paranoid.
</p>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>partlog</title>

	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/tomorrow-night-eighties.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>

	<style type="text/css">

	body {
	font-family: Georgia, Times;
	width: 40em;
	margin: 2em auto 0 auto;
	font-size: 1.2em;
	}

	h1, h2, h3, h4, h5 {
	font-family: Georgia, Times;
	font-weight: normal;
	}

	h2 > a, h2 > a:active, h2 > a:visited, h2 > a:hover {
	display: none;
	position: absolute;
	left: -1em;
	color: LightGray;
	width: 1em;
	}

	h2 > a:hover {
	display: block;
	position: absolute;
	left: -1em;
	}

	h2:hover > a {
	display: block;
	}

	p {
	line-height: 1.6em;
	text-align: justify;
	}

	.summary {
	font-style: italic;
	}


	body {
	position: relative;

	}

	aside, time {
	font-family: 'PT Sans', sans-serif;
	font-size: 0.8em;
	}

	body > aside {
	position: absolute;
	display: block;
	left: 52em;
	width: 10em;
	margin-top: 0.3em;
	}

	header {
	position: relative;
	}

	header > time {
	float: right;
	color: gray;
	}

	body >:last-child {
	padding-bottom: 2em;
	}

	.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

	</style>

	<body>

	<header>
	<time datetime="2015-20-10">October 20, 2015</time>
	</header>

	<h1>First Post</h1>
	<p class="summary">
	Lorem ipsum dolor sit amet, consectetur adipisicing 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 <a href="#">proident</a>, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<aside class="noselect">Two-dimensional scrolling is possible but rarely desired.</aside>
	<p>
	Camera voodoo god plastic pistol order-flow systema wonton soup car hacker free-market spook concrete bicycle range-rover into shoes. Sentient assassin shrine apophenia refrigerator motion Shibuya narrative city tanto systema footage chrome engine digital film into. Pistol shanty town realism shrine 8-bit sunglasses sensory alcohol engine neural. Film 8-bit wristwatch media San Francisco chrome euro-pop towards beef noodles Chiba market. Tower render-farm car boat corporation network vehicle construct. Chiba long-chain hydrocarbons digital youtube otaku vinyl jeans sentient industrial grade physical nodal point media dolphin.
	</p>
	<h2 id="2"><a href="#2">#</a>Subsection</h2>
	<pre><code class="elm">module World where

	import Html exposing (..)


	main = div [] [ text "Hello, World!" ]
	</code></pre>
	<p>
	Network Shibuya otaku boat garage euro-pop claymore mine assassin numinous dome singularity. 8-bit table-ware Kowloon order-flow gang sentient. Monofilament alcohol neural rain concrete assault cyber-hotdog sentient singularity fluidity boat weathered denim voodoo god geodesic. City range-rover girl table warehouse semiotics Chiba 8-bit bomb bicycle paranoid render-farm. Tiger-team bicycle youtube physical jeans decay paranoid.
	</p>