Some web style updates for pre and code tags with some new fonts. No code changes. (0.42.2)

web/_sass/_base.scss

@@ -93,62 +93,6 @@ blockquote {
   }
 }
 
-pre {
-  background: $grey-color-dark;
-  /*background-image: -webkit-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
-  background-image: -moz-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
-  background-image: -ms-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
-  background-image: -o-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
-  background-image: linear-gradient($grey-color-dark 50%, $grey-color-light 50%);*/
-  background-position: 0 0;
-  background-repeat: repeat;
-  background-size: 2.8em 2.8em;
-  border: 0px $grey-color solid;
-  border-radius: 8px;
-  counter-reset: line-numbering;
-  font-family: $base-font-family;
-  font-size: $base-font-size;
-  // https://stackoverflow.com/questions/5840328/styling-each-line-inside-pre-with-css
-  line-height: 1.4em;
-  margin: 0 0 0 0;
-  overflow: auto;
-  overflow-x: auto;
-  padding: 8px;
-  tab-size: 2;
-  -moz-tab-size: 2;
-}
-
-
-
-/*pre::before {
-    content: counter(linex);
-    counter-increment: linex;
-    padding-right: 1em;
-    width: 1.5em;
-    text-align: right;
-    opacity: 0.5;
-}*/
-
-/*pre > code {
-  font-family: $base-font-family;
-  font-size: $base-font-size;
-  counter-increment: line;
-  margin: 0 0 0 0;
-  padding: 0 0 0 0;
-}*/
-
-/**pre > code:before{
-  content: counter(line);
-  display: inline-block;
-  width: 2.0em;
-  border-right: 1px solid $grey-color;
-  padding-right: .7em;
-  margin-right: .7em;
-  color: #bc6c21;
-  -webkit-user-select: none;
-  text-align: right;
-}**/
-
 audio {
   height: 24px;
   width: 100%;

web/_sass/_code.scss

@@ -0,0 +1,26 @@
+code {
+  //-moz-tab-size: 2;
+  //tab-size: 2;
+  //border-radius: 12px;
+  font-family: "CourierPrimeSans";
+  font-size: $base-font-size;
+  //margin: 0 0 0 0;
+  //padding: 0 0 0 0;
+  //border: 1px $grey-color solid;
+  //line-height: 1.2em;
+  //background: $grey-color-dark;
+  //background-image: -webkit-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
+  //background-image: -moz-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
+  //background-image: -ms-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
+  //background-image: -o-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
+  //background-image: linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
+  //background-position: 0 0;
+  //background-repeat: repeat;
+  //background-size: 2.8em 2.8em;
+  //white-space: pre-wrap;
+  //white-space: -moz-pre-wrap;
+  //white-space: -o-pre-wrap;
+  //word-wrap: break-word;
+  //width: 100%;
+}
+

web/_sass/_fonts.scss

@@ -7,3 +7,38 @@
   font-family: "MDI";
   src: url("../fonts/materialdesignicons-webfont.woff2") format("woff2");
 }
+
+@font-face {
+  font-family: 'OpenSans-Regular';
+  src: url('/fonts/OpenSans-Regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'MDI';
+  src: url('/fonts/materialdesignicons-webfont.woff2') format('woff2');
+}
+
+.mdi:before,
+.mdi-set {
+  display: inline-block;
+  font: normal normal normal 24px/1 "MDI";
+  font-size: inherit;
+  text-rendering: auto;
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.mdi-hamburger::before {
+  content: "\F0685";
+}
+
+@font-face {
+  font-family: 'Graph-35-pix';
+  src: url('/fonts/Graph-35-pix.ttf');
+}
+
+@font-face {
+  font-family: 'CourierPrimeSans';
+  src: url('/fonts/Courier-Prime-Sans.ttf');
+}

web/_sass/_pre.scss

@@ -0,0 +1,45 @@
+pre {
+  //counter-reset: line;
+  -moz-tab-size: 2;
+  tab-size: 2;
+  border-radius: 12px;
+  //color: #363c3e;
+  font-family: "CourierPrimeSans";
+  //font-weight: bold;
+  font-size: $base-font-size;
+  margin: 0 0 0 0;
+  padding: 0 0 0 0.5em;
+  border: 1px $grey-color solid;
+  //overflow: auto;
+  overflow-x:auto;
+  line-height: 1.2em;
+  // https://stackoverflow.com/questions/5840328/styling-each-line-inside-pre-with-css
+  background: $grey-color-dark;
+  background-image: -webkit-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
+  background-image: -moz-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
+  background-image: -ms-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
+  background-image: -o-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
+  background-image: linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
+  background-position: 0 0;
+  background-repeat: repeat;
+  background-size: 2.4em 2.4em;
+  white-space: pre;
+}
+
+//pre > code {
+//  margin: 0 0 0 0;
+//  padding: 0 0 0 0;
+//}
+
+/*pre.highlight > code:before{
+  content: counter(line);
+  display: inline-block;
+  width: 2.0em;
+  border-right: 1px solid $grey-color;
+  padding-right: .7em;
+  margin-right: .7em;
+  color: #bc6c21;
+  -webkit-user-select: none;
+  text-align: right;
+}*/
+

web/css/main.scss

@@ -31,4 +31,4 @@ $on-laptop:             1024px;
         @content;
     }
 }
-@import "base", "fonts", "forms", "highlight", "isso", "layout", "links", "toc";
+@import "base", "code", "fonts", "forms", "highlight", "isso", "layout", "links", "pre", "toc";