diff --git a/web/_sass/_base.scss b/web/_sass/_base.scss
index 2f5dbad..791ab08 100644
--- a/web/_sass/_base.scss
+++ b/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%;
diff --git a/web/_sass/_code.scss b/web/_sass/_code.scss
new file mode 100644
index 0000000..a41a767
--- /dev/null
+++ b/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%;
+}
+
diff --git a/web/_sass/_fonts.scss b/web/_sass/_fonts.scss
index 148e724..48539b5 100644
--- a/web/_sass/_fonts.scss
+++ b/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');
+}
diff --git a/web/_sass/_pre.scss b/web/_sass/_pre.scss
new file mode 100644
index 0000000..099023f
--- /dev/null
+++ b/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;
+}*/
+
diff --git a/web/css/main.scss b/web/css/main.scss
index 3b44318..89356b1 100644
--- a/web/css/main.scss
+++ b/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";
diff --git a/web/fonts/Glass_TTY_VT220.ttf b/web/fonts/Glass_TTY_VT220.ttf
new file mode 100644
index 0000000..ed8fd85
Binary files /dev/null and b/web/fonts/Glass_TTY_VT220.ttf differ
diff --git a/web/fonts/Graph-35-pix.ttf b/web/fonts/Graph-35-pix.ttf
new file mode 100644
index 0000000..a11772c
Binary files /dev/null and b/web/fonts/Graph-35-pix.ttf differ
diff --git a/web/fonts/OpenSans-Regular.woff b/web/fonts/OpenSans-Regular.woff
new file mode 100644
index 0000000..6e098c8
Binary files /dev/null and b/web/fonts/OpenSans-Regular.woff differ
diff --git a/web/fonts/Vollkorn-Black.woff b/web/fonts/Vollkorn-Black.woff
new file mode 100644
index 0000000..3158b36
Binary files /dev/null and b/web/fonts/Vollkorn-Black.woff differ
diff --git a/web/fonts/Vollkorn-BlackItalic.woff b/web/fonts/Vollkorn-BlackItalic.woff
new file mode 100644
index 0000000..915c46a
Binary files /dev/null and b/web/fonts/Vollkorn-BlackItalic.woff differ
diff --git a/web/fonts/Vollkorn-Bold.woff b/web/fonts/Vollkorn-Bold.woff
new file mode 100644
index 0000000..0390ca3
Binary files /dev/null and b/web/fonts/Vollkorn-Bold.woff differ
diff --git a/web/fonts/Vollkorn-BoldItalic.woff b/web/fonts/Vollkorn-BoldItalic.woff
new file mode 100644
index 0000000..c435eea
Binary files /dev/null and b/web/fonts/Vollkorn-BoldItalic.woff differ
diff --git a/web/fonts/Vollkorn-ExtraBold.woff b/web/fonts/Vollkorn-ExtraBold.woff
new file mode 100644
index 0000000..7bd2792
Binary files /dev/null and b/web/fonts/Vollkorn-ExtraBold.woff differ
diff --git a/web/fonts/Vollkorn-ExtraBoldItalic.woff b/web/fonts/Vollkorn-ExtraBoldItalic.woff
new file mode 100644
index 0000000..cd3a484
Binary files /dev/null and b/web/fonts/Vollkorn-ExtraBoldItalic.woff differ
diff --git a/web/fonts/Vollkorn-Italic.woff b/web/fonts/Vollkorn-Italic.woff
new file mode 100644
index 0000000..eb99b61
Binary files /dev/null and b/web/fonts/Vollkorn-Italic.woff differ
diff --git a/web/fonts/Vollkorn-Medium.woff b/web/fonts/Vollkorn-Medium.woff
new file mode 100644
index 0000000..b3c515e
Binary files /dev/null and b/web/fonts/Vollkorn-Medium.woff differ
diff --git a/web/fonts/Vollkorn-MediumItalic.woff b/web/fonts/Vollkorn-MediumItalic.woff
new file mode 100644
index 0000000..1ab52f6
Binary files /dev/null and b/web/fonts/Vollkorn-MediumItalic.woff differ
diff --git a/web/fonts/Vollkorn-Regular.woff b/web/fonts/Vollkorn-Regular.woff
new file mode 100644
index 0000000..75d0eeb
Binary files /dev/null and b/web/fonts/Vollkorn-Regular.woff differ
diff --git a/web/fonts/Vollkorn-SemiBold.woff b/web/fonts/Vollkorn-SemiBold.woff
new file mode 100644
index 0000000..3779799
Binary files /dev/null and b/web/fonts/Vollkorn-SemiBold.woff differ
diff --git a/web/fonts/Vollkorn-SemiBoldItalic.woff b/web/fonts/Vollkorn-SemiBoldItalic.woff
new file mode 100644
index 0000000..7915156
Binary files /dev/null and b/web/fonts/Vollkorn-SemiBoldItalic.woff differ