Use fonts from golang styleguide

docs/layouts/_default/baseof.html

@@ -11,7 +11,7 @@
 
  	<title>{{ if not .IsHome }}{{ .Title }} &mdash;{{ end }} {{ .Site.Title }}</title>
 
-		<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700|Space+Mono|VT323" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i|Source+Code+Pro:400,700|Work+Sans:600,700|VT323" rel="stylesheet">
 	<link rel="stylesheet" href="{{ .Site.BaseURL }}main.css" type="text/css"/>
 	<link rel="stylesheet" href="{{ .Site.BaseURL }}syntax.css" type="text/css"/>
 
@@ -24,6 +24,7 @@
 
 		gtag('config', 'UA-116208894-2');
 	</script>
+	<script src="{{ .Site.BaseURL }}main.js" async></script>
 
 </head>
 

docs/static/main.css

@@ -42,10 +42,9 @@ table {
 }
 
 body {
-    font-family: 'Quicksand', sans-serif;
+    font-family: 'Roboto', sans-serif;
     font-size: 15px;
-    line-height: 1.5em;
-    padding-bottom: -5px;
+    line-height: 1.55em;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
@@ -92,13 +91,19 @@ footer {
     color: #222;
 }
 
+h1,h2,h3,h4,h5,h6 {
+    font-family: 'Work Sans', sans-serif;
+}
+
 h1 {
     font-size: 25px;
-    font-weight: bold;
-    margin: 10px 0;
+    font-weight: 700;
+    margin: 15px 0 10px 0;
+    position: relative;
 }
 
 .description {
+    font-family: 'Work Sans', sans-serif;
     font-size: 18px;
     color: #555;
 }
@@ -108,15 +113,17 @@ h1 {
 }
 
 h2 {
+    margin-top: 2em;
     margin-bottom: 1em;
     font-size: 19px;
-    font-weight: bold;
+    font-weight: 700;
 }
 
 h3 {
+    margin-top: 1.5em;
     margin-bottom: 1em;
-    font-size: 17px;
-    font-weight: bold;
+    font-size: 16px;
+    font-weight: 500;
 }
 
 p {
@@ -130,6 +137,7 @@ nav {
 }
 
 .menu {
+    font-family: 'Work Sans', sans-serif;
     font-weight: 700;
 }
 
@@ -183,10 +191,31 @@ ul.menu li:hover {
 
 code {
     padding:2px;
-    font-family: 'Space Mono', monospace;
+    font-family: 'Source Code Pro', monospace;
+    font-weight: 500;
     color: #996666;
 }
 
 strong {
     font-weight: 700;
 }
+
+.anchor-link {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.anchor-link:hover {
+    border-bottom: none;
+}
+
+.anchor-icon {
+    fill: #DDD;
+    display: inline-block;
+    vertical-align: middle;
+    padding: 5px;
+}
+
+.anchor-icon:hover {
+    fill: #666;
+}

docs/static/main.js

@@ -0,0 +1,32 @@
+var anchorForId = function (id) {
+    var anchor = document.createElement("a");
+    anchor.className = "anchor-link";
+    anchor.href      = "#" + id;
+    anchor.innerHTML = '  <svg class="anchor-icon" height="22px" viewBox="0 0 24 24" width="17px" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>';
+    return anchor;
+};
+
+var linkifyAnchors = function (level, containingElement) {
+    var headers = containingElement.getElementsByTagName("h" + level);
+    for (var h = 0; h < headers.length; h++) {
+        var header = headers[h];
+
+        if (typeof header.id !== "undefined" && header.id !== "") {
+            header.appendChild(anchorForId(header.id));
+
+        }
+    }
+};
+
+
+document.onreadystatechange = function () {
+    if (this.readyState === "complete") {
+        var contentBlock = document.getElementsByTagName("body")[0]
+        if (!contentBlock) {
+            return;
+        }
+        for (var level = 2; level <= 4; level++) {
+            linkifyAnchors(level, contentBlock);
+        }
+    }
+};

docs/static/syntax.css

@@ -62,7 +62,7 @@
     background-color: #e7edef;
     padding: 5px;
     margin-bottom: 1em;
-    font-family: 'Space Mono', monospace;
-    font-size: 14px;
+    font-family: 'Source Code Pro', monospace;
+    font-size: 13px;
     color: #445;
 }