Use nicer monospace fonts

public/css/normalize.css

@@ -7,9 +7,12 @@
  */
 
 html {
-  font-family: sans-serif; /* 1 */
+  font-family: sans-serif;
-  -ms-text-size-adjust: 100%; /* 2 */
+  /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
 }
 
 /**
@@ -51,8 +54,10 @@ audio,
 canvas,
 progress,
 video {
-  display: inline-block; /* 1 */
+  display: inline-block;
-  vertical-align: baseline; /* 2 */
+  /* 1 */
+  vertical-align: baseline;
+  /* 2 */
 }
 
 /**
@@ -226,7 +231,6 @@ code,
 kbd,
 pre,
 samp {
-/*  font-family: monospace, monospace;*/
   font-size: 1em;
 }
 
@@ -250,9 +254,12 @@ input,
 optgroup,
 select,
 textarea {
-  color: inherit; /* 1 */
+  color: inherit;
-  font: inherit; /* 2 */
+  /* 1 */
-  margin: 0; /* 3 */
+  font: inherit;
+  /* 2 */
+  margin: 0;
+  /* 3 */
 }
 
 /**
@@ -284,11 +291,14 @@ select {
  */
 
 button,
-html input[type="button"], /* 1 */
+html input[type="button"],
+/* 1 */
 input[type="reset"],
 input[type="submit"] {
-  -webkit-appearance: button; /* 2 */
+  -webkit-appearance: button;
-  cursor: pointer; /* 3 */
+  /* 2 */
+  cursor: pointer;
+  /* 3 */
 }
 
 /**
@@ -329,8 +339,10 @@ input {
 
 input[type="checkbox"],
 input[type="radio"] {
-  box-sizing: border-box; /* 1 */
+  box-sizing: border-box;
-  padding: 0; /* 2 */
+  /* 1 */
+  padding: 0;
+  /* 2 */
 }
 
 /**
@@ -351,9 +363,11 @@ input[type="number"]::-webkit-outer-spin-button {
  */
 
 input[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
+  -webkit-appearance: textfield;
+  /* 1 */
   -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box; /* 2 */
+  -webkit-box-sizing: content-box;
+  /* 2 */
   box-sizing: content-box;
 }
 
@@ -384,8 +398,10 @@ fieldset {
  */
 
 legend {
-  border: 0; /* 1 */
+  border: 0;
-  padding: 0; /* 2 */
+  /* 1 */
+  padding: 0;
+  /* 2 */
 }
 
 /**

public/css/style.css

@@ -460,7 +460,12 @@ ul.audio audio {
 
 pre {
   background-color: #eaeaea;
-  padding: 0.5rem;
+  padding: 0.5rem 1rem;
+}
+
+code,
+pre {
+  font-family: 'Fira Code', 'JetBrains Mono', 'Meslo LG M', 'Inconsolata', 'Menlo', 'Courier New', monospace;
 }
 
 pre.line-numbers {
@@ -494,5 +499,5 @@ pre.line-numbers {
 .gist {
   font-size: 0.8rem;
   line-height: 1.2rem;
-  font-family: 'Menlo', 'Courier New', monospace;
+  font-family: 'Fira Code', 'JetBrains Mono', 'Meslo LG M', 'Inconsolata', 'Menlo', 'Courier New', monospace;
 }

public/css/typocode.css

@@ -1,47 +1,166 @@
 /* Syntax highlighting */
 .typocode_ruby .normal {}
-.typocode_ruby .comment { color: #005; font-style: italic; }
+
-.typocode_ruby .keyword { color: #A00; font-weight: bold; }
+.typocode_ruby .comment {
-.typocode_ruby .method { color: #077; }
+    color: #005;
-.typocode_ruby .class { color: #074; }
+    font-style: italic;
-.typocode_ruby .module { color: #050; }
+}
-.typocode_ruby .punct { color: #447; font-weight: bold; }
+
-.typocode_ruby .symbol { color: #099; }
+.typocode_ruby .keyword {
-.typocode_ruby .string { color: #944; background: #FFE; }
+    color: #A00;
-.typocode_ruby .char { color: #F07; }
+    font-weight: bold;
-.typocode_ruby .ident { color: #004; }
+}
-.typocode_ruby .constant { color: #07F; }
+
-.typocode_ruby .regex { color: #B66; background: #FEF; }
+.typocode_ruby .method {
-.typocode_ruby .number { color: #F99; }
+    color: #077;
-.typocode_ruby .attribute { color: #7BB; }
+}
-.typocode_ruby .global { color: #7FB; }
+
-.typocode_ruby .expr { color: #227; }
+.typocode_ruby .class {
-.typocode_ruby .escape { color: #277; }
+    color: #074;
+}
+
+.typocode_ruby .module {
+    color: #050;
+}
+
+.typocode_ruby .punct {
+    color: #447;
+    font-weight: bold;
+}
+
+.typocode_ruby .symbol {
+    color: #099;
+}
+
+.typocode_ruby .string {
+    color: #944;
+    background: #FFE;
+}
+
+.typocode_ruby .char {
+    color: #F07;
+}
+
+.typocode_ruby .ident {
+    color: #004;
+}
+
+.typocode_ruby .constant {
+    color: #07F;
+}
+
+.typocode_ruby .regex {
+    color: #B66;
+    background: #FEF;
+}
+
+.typocode_ruby .number {
+    color: #F99;
+}
+
+.typocode_ruby .attribute {
+    color: #7BB;
+}
+
+.typocode_ruby .global {
+    color: #7FB;
+}
+
+.typocode_ruby .expr {
+    color: #227;
+}
+
+.typocode_ruby .escape {
+    color: #277;
+}
+
 .typocode_xml .normal {}
-.typocode_xml .namespace { color: #B66; font-weight: bold; }
+
-.typocode_xml .tag { color: #F88; }
+.typocode_xml .namespace {
-.typocode_xml .comment { color: #005; font-style: italic; }
+    color: #B66;
-.typocode_xml .punct { color: #447; font-weight: bold; }
+    font-weight: bold;
-.typocode_xml .string { color: #944; }
+}
-.typocode_xml .number { color: #F99; }
+
-.typocode_xml .attribute { color: #BB7; }
+.typocode_xml .tag {
+    color: #F88;
+}
+
+.typocode_xml .comment {
+    color: #005;
+    font-style: italic;
+}
+
+.typocode_xml .punct {
+    color: #447;
+    font-weight: bold;
+}
+
+.typocode_xml .string {
+    color: #944;
+}
+
+.typocode_xml .number {
+    color: #F99;
+}
+
+.typocode_xml .attribute {
+    color: #BB7;
+}
+
 .typocode_yaml .normal {}
-.typocode_yaml .document { font-weight: bold; color: #07F; }
+
-.typocode_yaml .type { font-weight: bold; color: #05C; }
+.typocode_yaml .document {
-.typocode_yaml .key { color: #F88; }
+    font-weight: bold;
-.typocode_yaml .comment { color: #005; font-style: italic; }
+    color: #07F;
-.typocode_yaml .punct { color: #447; font-weight: bold; }
+}
-.typocode_yaml .string { color: #944; }
+
-.typocode_yaml .number { color: #F99; }
+.typocode_yaml .type {
-.typocode_yaml .time { color: #F99; }
+    font-weight: bold;
-.typocode_yaml .date { color: #F99; }
+    color: #05C;
-.typocode_yaml .ref { color: #944; }
+}
-.typocode_yaml .anchor { color: #944; }
+
+.typocode_yaml .key {
+    color: #F88;
+}
+
+.typocode_yaml .comment {
+    color: #005;
+    font-style: italic;
+}
+
+.typocode_yaml .punct {
+    color: #447;
+    font-weight: bold;
+}
+
+.typocode_yaml .string {
+    color: #944;
+}
+
+.typocode_yaml .number {
+    color: #F99;
+}
+
+.typocode_yaml .time {
+    color: #F99;
+}
+
+.typocode_yaml .date {
+    color: #F99;
+}
+
+.typocode_yaml .ref {
+    color: #944;
+}
+
+.typocode_yaml .anchor {
+    color: #944;
+}
 
 .typocode {
-    background-color:#eee;
+    background-color: #eee;
-    padding:2px;
+    padding: 2px;
-    margin:5px;
+    margin: 5px;
 }
 
 .typocode pre {
@@ -49,14 +168,14 @@
     margin: 0;
     border: none;
     background: transparent;
-    font-family: monospace;
+    font-family: 'Fira Code', 'JetBrains Mono', 'Meslo LG M', 'Inconsolata', 'Menlo', 'Courier New', monospace;
-    overflow:auto;
+    overflow: auto;
 }
 
 
 .typocode .lineno {
     text-align: right;
     color: #B00;
-    font-family: monospace;
+    font-family: 'Fira Code', 'JetBrains Mono', 'Meslo LG M', 'Inconsolata', 'Menlo', 'Courier New', monospace;
     padding-right: 1rem;
 }