Switch to Roboto Mono for code

content/content-management/shortcodes.md

@@ -108,8 +108,6 @@ Bloggers often want to include GitHub gists when writing posts. Let's suppose we
 https://gist.github.com/spf13/7896402
 ```
 
-###
-
 We can embed the gist in our content via username and gist ID pulled from the URL:
 
 ```golang

layouts/shortcodes/output.html

@@ -2,5 +2,7 @@
 {{$icon := index (split $file ".") 1 }}
 <div class="code-copy" id="{{$file | urlize}}">
 	<div class="code-copy-header output"><div class="action-buttons"></div><span class="filename" title="{{$file}}">{{$file}}</span><i class="icon-{{$icon}}"></i></div>
+	<div class="code-copy-content output-content">
 	{{- .Inner -}}
+	</div>
 </div>

static/css/style.min.css

@@ -1 +1 @@
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box;border-radius:0px !important;outline:none}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html,body{margin:0px;padding:0px;outline:none;border:none;font-size:18px;font-family:"muli","Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;color:#222;line-height:1.6;font-weight:300;overflow-x:hidden}body{font-size:90%;overflow-x:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media only screen and (min-width: 760px){body{font-size:95%}}@media only screen and (min-width: 960px){body{font-size:100%}}strong{font-weight:600;color:#222}p{margin-top:0px;margin-bottom:1.5em;line-height:1.6}@font-face{font-family:'fontello';src:url("/fonts/fontello/fontello.eot");src:url("/fonts/fontello/fontello.woff2") format("woff2"),url("/fonts/fontello/fontello.woff") format("woff"),url("/fonts/fontello/fontello.ttf") format("truetype"),url("/fonts/fontello/fontello.svg?78165468#fontello") format("svg");font-weight:normal;font-style:normal}[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"fontello";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-alert:before{content:'\e810'}.icon-angle-double-right:before{content:'\f101'}.icon-attach:before{content:'\e820'}.icon-attention:before{content:'\e80f'}.icon-bash:before{content:'\e804'}.icon-bell:before{content:'\e80d'}.icon-cancel:before{content:'\e81e'}.icon-caution:before{content:'\e80f'}.icon-chrome:before{content:'\e841'}.icon-clipboard:before{content:'\e817'}.icon-code:before{content:'\f121'}.icon-cog-alt:before{content:'\e814'}.icon-css3:before{content:'\f13c'}.icon-docs:before{content:'\f15c'}.icon-download:before{content:'\e815'}.icon-facebook-official:before{content:'\f230'}.icon-firefox:before{content:'\e840'}.icon-flag:before{content:'\e813'}.icon-forum:before{content:'\f03d';margin-right:.3em}.icon-github:before{content:'\f09b'}.icon-gitter:before{content:'\e819'}.icon-go:before{content:'\e801'}.icon-golang:before{content:'\e801'}.icon-heart:before{content:'\e81d'}.icon-help:before{content:'\e81b'}.icon-home:before{content:'\e812'}.icon-html.input:before{content:'\e81f'}.icon-html5:before{content:'\e800'}.icon-html:before{content:'\e800'}.icon-hugo:before{content:'\e81f'}.icon-ie:before{content:'\e843'}.icon-info:before{content:'\e811'}.icon-instagram:before{content:'\f32d'}.icon-javascript:before{content:'\e802'}.icon-js:before{content:'\e802'}.icon-json:before{content:'\e81c'}.icon-link:before{content:'\e816'}.icon-linkedin:before{content:'\f30c'}.icon-love:before{content:'\e81d'}.icon-mail:before{content:'\e821'}.icon-markdown:before{content:'\e80e'}.icon-md:before{content:'\e80e'}.icon-note:before{content:'\e80d'}.icon-opera:before{content:'\e842'}.icon-pdf:before{content:'\f1c1'}.icon-pencil:before{content:'\e80c'}.icon-picture:before{content:'\e808'}.icon-quLine truncated
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box;border-radius:0px !important;outline:none}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html,body{margin:0px;padding:0px;outline:none;border:none;font-size:18px;font-family:"muli","Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;color:#222;line-height:1.6;font-weight:300;overflow-x:hidden}body{font-size:93%;overflow-x:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media only screen and (min-width: 760px){body{font-size:97%}}@media only screen and (min-width: 960px){body{font-size:100%}}strong{font-weight:600;color:#222}p{margin-top:0px;margin-bottom:1.5em;line-height:1.6}@font-face{font-family:'fontello';src:url("/fonts/fontello/fontello.eot");src:url("/fonts/fontello/fontello.woff2") format("woff2"),url("/fonts/fontello/fontello.woff") format("woff"),url("/fonts/fontello/fontello.ttf") format("truetype"),url("/fonts/fontello/fontello.svg?78165468#fontello") format("svg");font-weight:normal;font-style:normal}[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"fontello";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-alert:before{content:'\e810'}.icon-angle-double-right:before{content:'\f101'}.icon-attach:before{content:'\e820'}.icon-attention:before{content:'\e80f'}.icon-bash:before{content:'\e804'}.icon-bell:before{content:'\e80d'}.icon-cancel:before{content:'\e81e'}.icon-caution:before{content:'\e80f'}.icon-chrome:before{content:'\e841'}.icon-clipboard:before{content:'\e817'}.icon-code:before{content:'\f121'}.icon-cog-alt:before{content:'\e814'}.icon-css3:before{content:'\f13c'}.icon-docs:before{content:'\f15c'}.icon-download:before{content:'\e815'}.icon-facebook-official:before{content:'\f230'}.icon-firefox:before{content:'\e840'}.icon-flag:before{content:'\e813'}.icon-forum:before{content:'\f03d';margin-right:.3em}.icon-github:before{content:'\f09b'}.icon-gitter:before{content:'\e819'}.icon-go:before{content:'\e801'}.icon-golang:before{content:'\e801'}.icon-heart:before{content:'\e81d'}.icon-help:before{content:'\e81b'}.icon-home:before{content:'\e812'}.icon-html.input:before{content:'\e81f'}.icon-html5:before{content:'\e800'}.icon-html:before{content:'\e800'}.icon-hugo:before{content:'\e81f'}.icon-ie:before{content:'\e843'}.icon-info:before{content:'\e811'}.icon-instagram:before{content:'\f32d'}.icon-javascript:before{content:'\e802'}.icon-js:before{content:'\e802'}.icon-json:before{content:'\e81c'}.icon-link:before{content:'\e816'}.icon-linkedin:before{content:'\f30c'}.icon-love:before{content:'\e81d'}.icon-mail:before{content:'\e821'}.icon-markdown:before{content:'\e80e'}.icon-md:before{content:'\e80e'}.icon-note:before{content:'\e80d'}.icon-opera:before{content:'\e842'}.icon-pdf:before{content:'\f1c1'}.icon-pencil:before{content:'\e80c'}.icon-picture:before{content:'\e808'}.icon-quLine truncated

themes/hugodocs/pipeline/scss/_variables.scss

@@ -35,30 +35,23 @@ $output-example-color:$hugo-blue;
 $body-bg-color:$hugo-white;
 //Typography
 $base-font-size: 18px;
-$base-font-family: 'muli',
-$helvetica;
-$heading-font-family: $base-font-family;
 $base-font-color: #222222;
 $base-line-height-content: 1.6;
+$base-font-bold-color: $base-font-color;
+$systemfonts: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbols";
+// Font Families
+$base-font-family: 'muli',$helvetica;
+$heading-font-family: $base-font-family;
+$code-font-family:'robotomono',courier,monospace;
+
+// Font Weights
 $base-font-weight: 300;
 $base-font-bold-weight: 600;
-$base-font-bold-color: $base-font-color;
+$heading-font-weight: 600;
-$heading-font-weight: 800;
+$code-font-base-weight: $base-font-weight;
-$systemfonts: -apple-system,
+$code-font-bold-weight: 500;
-BlinkMacSystemFont,
+
-"Segoe UI",
+
-Roboto,
-Oxygen,
-Ubuntu,
-Cantarell,
-"Fira Sans",
-"Droid Sans",
-"Helvetica Neue",
-Arial,
-sans-serif,
-"Apple Color Emoji",
-"Segoe UI Emoji",
-"Segoe UI Symbols";
 //Anchors (in body copy)
 $default-anchor-color:$base-font-color;
 $default-anchor-underline-color:$hugo-pink;
@@ -69,9 +62,9 @@ $base-button-color: $hugo-blue;
 $base-button-text-color: $hugo-white;
 $button-border-radius: .25em;
 //Codeblocks
-$code-font-family:'courierprime',
+// $code-font-family:'courierprime',courier,monospace;
-courier,
+
-monospace;
+
 $code-tooltip-bg-color: $hugo-pink;
 $code-block-base-font-color: #ffffff;
 $code-block-background-color: $hugo-black;

themes/hugodocs/pipeline/scss/base/_base.scss

@@ -23,10 +23,10 @@ body {
 }
 
 body {
-  font-size: 90%;
+  font-size: 93%;
    overflow-x:hidden;
   @include MQ(M) {
-    font-size: 95%;
+    font-size: 97%;
   }
   @include MQ(L) {
     font-size: 100%;

themes/hugodocs/pipeline/scss/base/_typography.scss

@@ -1,15 +1,17 @@
 @include fonts('muli', $weights: 100 300 400 600 700 800, $italic: true);
-@include fonts('courierprime', $weights: 400 700, $italic: true);
+@include fonts('robotomono', $weights: 200 300 400 500 700, $italic: false);
-
 h1,
 h2,
 h3,
-h4 {
+h4,
+h5,
+h6 {
+  font-family: $heading-font-family;
   font-weight: $heading-font-weight;
   margin: 0px;
   line-height: 1.4;
   position: relative;
-  > code {
+  > code, > a {
     font-weight: $heading-font-weight;
   }
 }
@@ -35,8 +37,9 @@ h1.page-title {
     margin-left: -.15em;
     margin-right: .15em;
   }
-  &.commands,&.functions {
+  &.commands,
-    font-family:$code-font-family;
+  &.functions {
+    font-family: $code-font-family;
   }
 }
 
@@ -71,13 +74,14 @@ h4 {
 
 h5 {
   font-size: 1em;
-  font-weight: bold;
+  font-weight: $heading-font-weight;
   margin-bottom: 1em;
-  color:$base-font-color;
+  color: $base-font-color;
 }
 
 //used throughout the "functions" section to render titles in the base code font family
-.functions, .commands {
+.functions,
+.commands {
   font-family: $code-font-family;
   font-weight: $base-font-weight;
   color: inherit;
@@ -85,7 +89,8 @@ h5 {
 
 //just for function section page titles that include the word "and":
 //in templates, a conditional statement checks for section=functions, and if so, replaces "and" in title/linktitle with <em>and</em>
-.functions, .commands {
+.functions,
+.commands {
   > em {
     font-style: normal;
     font-family: $base-font-family;

themes/hugodocs/pipeline/scss/components/_anchors.scss

@@ -1,6 +1,6 @@
 a {
   color: $default-anchor-underline-color;
-  font-weight: $default-anchor-weight;
+  font-weight: inherit;
   @include on-event($self: true) {
     text-decoration: none;
     cursor: pointer;

themes/hugodocs/pipeline/scss/components/_code.scss

@@ -3,7 +3,8 @@ code,
 pre {
   font-family: $code-font-family;
   margin: 0px;
-  color: $inline-code-text-color;
+  font-weight:$code-font-base-weight;
+  color:inherit;
 }
 
 .body-copy > pre {
@@ -31,23 +32,27 @@ pre {
   td,
   li {
     code {
-      font-size: .9em;
+      font-size: .85em;
       display: inline-block;
-      color: $inline-code-text-color;
+      color: inherit;
-      font-family: $code-font-family;
+      font-family: "robotomono", courier, monospace;
       padding-left: .25em;
       padding-right: .25em;
       text-transform: none;
       line-height: 1.2;
       margin-bottom: .15em;
       margin-top: 0px;
-      padding-top: .1em;
+      padding-top: 3px;
-      vertical-align: bottom;
+      vertical-align: middle;
-      //darken code background color for non-retina displays
+      background-color: #ededed;
-      background-color: darken($inline-code-background-color, 5%);
       border: none;
       outline: none;
       z-index: -1;
+      padding-bottom: 3px;
+      border: none;
+      outline: none;
+      z-index: -1;
+      background-color: darken($inline-code-background-color, 5%);
       @include MQ(retina) {
         //lighten code background color for retina displays
         background-color: $inline-code-background-color;
@@ -91,6 +96,12 @@ div.code-copy {
   &.input {
     padding-bottom: 24px;
   }
+  .code-copy-content {
+    padding-top:.5em;
+    &.output-content {
+      padding-bottom:.5em;
+    }
+  }
 }
 
 p + .code-copy {
@@ -118,7 +129,7 @@ button.download-button {
   height: 1.5em;
   border-width: 0px;
   border-radius: 0px;
-  font-weight: bold;
+  font-weight: $code-font-bold-weight;
   color: $code-copy-button-text-color;
   font-size: 14px;
   width: 80px;
@@ -137,6 +148,13 @@ button.download-button {
     position: absolute;
   }
 }
+h1,h2,h3,h4,h5,h6 {
+  code {
+    font-weight: $code-font-bold-weight;
+    font-size:.95em;
+  }
+}
+
 //hide copy button on iPad and iPhone
 button.copy-button {
   @include MQ(retinaPortrait) {
@@ -203,8 +221,6 @@ button.copy-button {
   }
 }
 
-
-
 div.code-copy {
   position: relative;
   @include card(3);