Ensure page is responsive on narrow displays

[jkinsey.net.git] / res / style.css

diff --git a/res/style.css b/res/style.css
index 803443d98e1f55d4854d1f247c86acc3db824691..08aa894a139227a5570c058b8c7a2a1ee15cea93 100644 (file)
--- a/res/style.css
+++ b/res/style.css
@@ -1,53 +1,120 @@
+/* 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;
@@ -55,60 +122,63 @@ header nav ul li::before {
 }
 
 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 **/