+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+/*** End reset.css ***/
+
+
body {
background: url(blackstars.png);
background-color: #111;
color: #fefefe;
font-family: monospace;
padding: 16px;
+ margin: 8px;
}
-header {
- width: 700px;
+
+main {
+ max-width: 700px;
margin: 0 auto;
}
+a {
+ color: #f771fc;
+}
+
+a, p, h1, h2, h3, li {
+ background-color: #111111;
+}
+
+em {
+ font-style: italic;
+}
+
+em > em {
+ font-style: normal;
+ font-weight: bold;
+}
+
+
+/** Header **/
+
header h1 {
font-size: 2em;
+ font-weight: bold;
margin: 0;
}
-header > div > a {
- color:inherit;
- text-decoration:none;
+header h1 a {
+ color: inherit;
+ text-decoration: none;
}
header nav {
- display:flex;
- flex-direction:column;
- width: 400px;
+ padding: 16px 0px 16px 0px;
+ line-height: 2em;
}
header nav ul {
- display:flex;
- flex-direction:row;
- padding: 0;
- margin: 0;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
}
header nav ul li {
- display:inline-block;
- text-align:center;
- height:50px;
+ display: inline-block;
+ text-align: center;
margin-right: 24px;
- font-size:1.25em;
- line-height:50px;
+ font-size: 1.25em;
background-color: inherit;
}
-a {
- color: #f771fc;
-}
-
header nav ul li::before {
font-size: .75em;
line-height: .1em;
}
header nav ul li a:link, header nav ul li a:visited {
- text-decoration:none;
- color:inherit;
+ text-decoration: none;
+ color: inherit;
}
-header nav ul li a:hover, header nav ul li a.selected {
- text-decoration:underline;
+header nav ul li a:hover {
+ text-decoration: underline;
}
-article {
- width: 700px;
- margin: 0 auto;
-}
+/** End Header **/
+
+
+/** Article **/
article h2 {
+ margin: 1em 0 1em 0;
font-size: 1.2em;
+ font-weight: bold;
}
-em {
- font-style:italic;
+article p {
+ margin: 1em 0 1em 0;
+ line-height: 1.25em;
}
-em > em {
- font-style:normal;
- font-weight:bold;
+article h3 {
+ display: inline-flex;
+ width: 95%;
+ margin: 8px 0px 8px 0px;
+ font-weight: bold;
+ padding: 0;
+ font-size: 1em;
}
-
-article p {
- line-height: 1.25em;
+article h3 em {
+ text-align: right;
+ flex-grow: 1;
}
-article div {
+article section {
margin: 16px 0px 16px 0px;
}
-article div ul li {
- margin: 8px 0px 8px 0px;
+article section ul, article section ol {
+ padding-left: 40px;
}
-article div ol li {
+article section li {
margin: 8px 0px 8px 0px;
+ line-height: 1.25em;
}
-a, p, h1, h2, li, summary {
- background-color: #111111;
+article section ul li {
+ list-style-type: disc;
}
-article details summary {
- margin: 8px 0px 8px 0px;
- font-weight: bold;
- display: flex;
+article section ol li {
+ list-style-type: decimal;
}
-article details summary em {
- text-align: right;
- flex-grow: 1;
-}
+/** End Article **/