Code highlighting, font adjustments, desktop fixes

src/assets/highlightjs-dracula.css

@@ -0,0 +1,79 @@
+/* Dracula Theme v1.2.5
+ *
+ * https://github.com/dracula/highlightjs
+ *
+ * Copyright 2016-present, All rights reserved
+ *
+ * Code licensed under the MIT license
+ *
+ * @author Denis Ciccale <dciccale@gmail.com>
+ * @author Zeno Rocha <hi@zenorocha.com>
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #282a36;
+}
+
+.hljs-built_in,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-link {
+  color: #8be9fd;
+}
+
+.hljs-keyword {
+  color: #ff79c6;
+}
+
+.hljs,
+.hljs-subst {
+  color: #f8f8f2;
+}
+
+.hljs-title {
+  color: #50fa7b;
+}
+
+.hljs-string,
+.hljs-meta,
+.hljs-name,
+.hljs-type,
+.hljs-attr,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #f1fa8c;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion {
+  color: #6272a4;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-title,
+.hljs-section,
+.hljs-doctag,
+.hljs-type,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-literal,
+.hljs-number {
+  color: #bd93f9;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}

src/assets/stylesheet.css

@@ -1,7 +1,12 @@
 html, body {
   padding: 0;
   margin: 0;
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 15pt;
+}
+
+code {
+  font-family: 'Source Code Pro', monospace;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -22,6 +27,11 @@ h1 {
   padding-bottom: 20px;
 }
 
+.-container {
+  max-width: 40rem;
+  margin: 0 auto;
+}
+
 .interior-header {
   background: #15202C;
 }
@@ -31,12 +41,15 @@ h1 {
 }
 
 .interior-headline {
-  line-height: 1em;
-  margin: 0;
   background: linear-gradient(90deg, rgba(235, 181, 242, .3), rgba(128, 95, 132, .3));
   color: white;
 }
 
+.interior-headline h1 {
+  line-height: 1em;
+  margin: 0 auto;
+}
+
 .interior-content h1:first-child {
   display: none;
   speak: none;
@@ -46,8 +59,10 @@ h1 {
   margin-top: 0;
 }
 
-.interior-content code {
+.interior-content pre code {
+  border-radius: 3px;
   max-width: 100%;
+  max-height: 6em;
   display: block;
   overflow: auto;
 }

src/templates/interior.hbs

@@ -4,7 +4,8 @@
   <title>Wroten - {{name}}</title>
 
   <link href="./assets/stylesheet.css" rel="stylesheet" type="text/css">
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300|Slabo+27px" rel="stylesheet"> 
+  <link href="./assets/highlightjs-dracula.css" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Slabo+27px|Source+Code+Pro|Source+Sans+Pro:300" rel="stylesheet"> 
 
   <meta charset="UTF-8">
   <meta name="author" content="Joe Wroten">
@@ -17,10 +18,15 @@
     <div class="interior-topbar -pad-h -pad-v">
       ...
     </div>
-    <h1 class="interior-headline -pad-h -pad-v">{{name}}</h1>
+    <div class="interior-headline -pad-h -pad-v">
+      <h1 class="-container">{{name}}</h1>
+    </div>
   </header>
-  <main class="interior-content -pad-h -pad-v">
+  <main class="interior-content -container -pad-h -pad-v">
     {{{readme.html}}}
   </main>
+
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+  <script>hljs.initHighlightingOnLoad();</script>
 </body>
 </html>