temp

docs/assets/css/style.scss

@@ -1,65 +1,230 @@
 ---
 ---
+// Adapted from:
+// https://github.com/pages-themes/minimal/blob/master/_sass/jekyll-theme-minimal.scss
 
-$section-headings-color: #0086b3;
 
-@import "{{ site.theme }}";
 
-/*** Unset all header navbar styling done by the theme ***/
-// This corresponds to:
-// https://github.com/pages-themes/minimal/blob/master/_sass/jekyll-theme-minimal.scss#L114-L172
+//$section-headings-color: #0086b3;
 
-header ul {
-  list-style:unset;
-  height:unset;
-  padding:unset;
-  background:unset;
-  border-radius:unset;
-  border:unset;
-  width:unset;
+//@import "{{ site.theme }}";
+
+@import "fonts";
+@import "rouge-github";
+
+body {
+  background-color: #fff;
+  padding:50px;
+  font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color:#727272;
+  font-weight:400;
 }
-header li {
-  width:unset;
-  float:unset;
-  border-right:unset;
-  height:unset;
-} 
-header li:first-child a {
-  border-radius:unset;
+
+h1, h2, h3, h4, h5, h6 {
+  color:#222;
+  margin:0 0 20px;
 }
-header li:last-child a {
-  border-radius:unset;
+
+p, ul, ol, table, pre, dl {
+  margin:0 0 20px;
 }
-header ul a {
-  line-height:unset;
-  font-size:unset;
-  color:unset;
-  display:unset;
-  text-align:unset;
-  padding-top:unset;
-  height:unset;
+
+h1, h2, h3 {
+  line-height:1.1;
 }
-header ul a:hover, header ul a:focus {
-  color:unset;
-  font-weight:unset;
+
+h1 {
+  font-size:28px;
 }
-header ul a:active {
-  background-color:unset;
+
+h2 {
+  color:#393939;
 }
-strong {
-  color:unset;
-  font-weight:unset;
+
+h3, h4, h5, h6 {
+  color:#494949;
 }
-header ul li + li + li {
-  border-right:unset;
-  width:unset;
+
+a {
+  color:#267CB9;
+  text-decoration:none;
 }
-header ul a strong {
-  font-size:unset;
-  display:unset;
-  color:unset;
+
+a:hover, a:focus {
+  color:#069;
+  font-weight: bold;
 }
 
+a small {
+  font-size:11px;
+  color:#777;
+  margin-top:-0.3em;
+  display:block;
+}
+
+a:hover small {
+  color:#777;
+}
+
+.wrapper {
+  width:860px;
+  margin:0 auto;
+}
+
+blockquote {
+  border-left:1px solid #e5e5e5;
+  margin:0;
+  padding:0 0 0 20px;
+  font-style:italic;
+}
+
+code, pre {
+  font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
+  color:#333;
+}
+
+pre {
+  padding:8px 15px;
+  background: #f8f8f8;
+  border-radius:5px;
+  border:1px solid #e5e5e5;
+  overflow-x: auto;
+}
+
+table {
+  width:100%;
+  border-collapse:collapse;
+}
+
+th, td {
+  text-align:left;
+  padding:5px 10px;
+  border-bottom:1px solid #e5e5e5;
+}
+
+dt {
+  color:#444;
+  font-weight:700;
+}
+
+th {
+  color:#444;
+}
+
+img {
+  max-width:100%;
+}
+
+header {
+  width:270px;
+  float:left;
+  position:fixed;
+  -webkit-font-smoothing:subpixel-antialiased;
+}
+
+
+
+section {
+  width:500px;
+  float:right;
+  padding-bottom:50px;
+}
+
+small {
+  font-size:11px;
+}
+
+hr {
+  border:0;
+  background:#e5e5e5;
+  height:1px;
+  margin:0 0 20px;
+}
+
+footer {
+  width:270px;
+  float:left;
+  position:fixed;
+  bottom:50px;
+  -webkit-font-smoothing:subpixel-antialiased;
+}
+
+@media print, screen and (max-width: 960px) {
+
+  div.wrapper {
+    width:auto;
+    margin:0;
+  }
+
+  header, section, footer {
+    float:none;
+    position:static;
+    width:auto;
+  }
+
+  header {
+    padding-right:320px;
+  }
+
+  section {
+    border:1px solid #e5e5e5;
+    border-width:1px 0;
+    padding:20px 0;
+    margin:0 0 20px;
+  }
+
+  header a small {
+    display:inline;
+  }
+
+  header ul {
+    position:absolute;
+    right:50px;
+    top:52px;
+  }
+}
+
+@media print, screen and (max-width: 720px) {
+  body {
+    word-wrap:break-word;
+  }
+
+  header {
+    padding:0;
+  }
+
+  header ul, header p.view {
+    position:static;
+  }
+
+  pre, code {
+    word-wrap:normal;
+  }
+}
+
+@media print, screen and (max-width: 480px) {
+  body {
+    padding:15px;
+  }
+
+  header ul {
+    width:99%;
+  }
+
+  header li, header ul li + li + li {
+    width:33%;
+  }
+}
+
+@media print {
+  body {
+    padding:0.4in;
+    font-size:12pt;
+    color:#444;
+  }
+}
+
+
 
 
 
@@ -72,7 +237,7 @@ header ul a strong {
 section {
     /* align-content: center; */
     padding-left: 270px;
-    width: 700px;
+    width: 500px;
     float: none;
 }
 
@@ -100,13 +265,16 @@ a:hover, a:focus {
 
 header > ul {
   list-style:none;
-  padding-right: 20px;
+  display: inline;
+  padding: unset;
   //padding:0;
   //width:240px;
   //height:240px;
 }
 
 header > ul ul {
+  list-style: none;
+  display: contents;
   margin:0;
   margin-bottom:12px;
 }
@@ -115,7 +283,7 @@ header > ul ul {
 // selector which has higher specifity than this one so we
 // we need the "important" keywords for some properties.
 header li {
-  width:100% !important;
+  //width:100% !important;
   //float:left;
   //border-bottom:1px solid #e0e0e0;
   border:none !important;
@@ -153,15 +321,47 @@ header ul p {
     background-color: #00000034;
 }
 
-/*
-header li:first-child a {
+header > ul li:first-child a {
   border-radius:5px 5px 0 0;
 }
 
-header li:last-child a {
+header > ul li:last-child a {
   border-radius:0 0 5px 5px;
 }
 
+@media print, screen and (max-width: 960px) {
+  header {
+    padding-right: unset;
+  }
+  header ul {
+    position: unset;
+    //right: 50px;
+    //top: 52px;
+    //height: 40px;
+    //display: inline;
+    //float: left;
+    //width: unset;
+  }
+  header ul ul li {
+    float: left;
+    width: unset !important;
+  }
+  header > ul {
+    //width: 500px;
+    width: 100%;
+  }
+  header > ul p {
+    //width: 50px;
+  }
+  header > ul ul {
+    //float: left;
+    //display: inline;
+    //width: 50px;
+  }
+}
+
+/*
+
 header ul a {
   background: #f4f4f4;
   border:1px solid #e0e0e0;