switch to Roboto web font (#22)

for now, at least. tired of waiting on Chromium to fix system fonts on Catalina.... https://bugs.chromium.org/p/chromium/issues/detail?id=1005969

Roboto seems closest to San Francisco.

assets/sass/abstracts/_functions.scss

@@ -11,3 +11,21 @@
   // Return non-gradient linear-gradient():
   @return linear-gradient($color-opaque, $color-opaque);
 }
+
+// Web fonts (see components/_webfonts.scss)
+@mixin font-face($family, $src-local, $src-local-alt, $src,
+                 $style: normal, $weight: normal,
+                 $range: U+000-5FF, $display: swap) {
+	@font-face {
+    font-family: $family;
+    font-style: $style;
+    font-weight: $weight;
+    font-display: $display;
+    src: local('#{$src-local}'), local('#{$src-local-alt}'),
+         url('#{$src}.woff2') format('woff2'),
+         url('#{$src}.woff') format('woff');
+    //   url('#{$src}.ttf') format('truetype'),
+    //   url('#{$src}.eot') format('embedded-opentype');
+    unicode-range: $range;
+  }
+}

assets/sass/abstracts/_variables.scss

@@ -1,13 +1,15 @@
 @charset "UTF-8";
 
-// System Fonts
+// System fonts and web fonts
 // https://markdotto.com/2018/02/07/github-system-fonts/
 $system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
                "Droid Sans", "Helvetica Neue", sans-serif,
                "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$system-fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
                "Menlo", "Courier", monospace;
+$webfont-roboto: "Roboto", sans-serif;
 
 // Misc Settings
 $responsive-width: 890px;

assets/sass/components/_footer.scss

@@ -72,7 +72,7 @@ footer {
 
       &#copyright,
       &#poweredby {
-        line-height: 1.8;
+        line-height: 1.9;
         width: 50%;
       }
 

assets/sass/components/_global.scss

@@ -7,7 +7,7 @@ body {
   margin: 0 auto;
   background-color: $color-gray-background;   // really just the color of header & footer
   color: $color-text;
-  font-family: $system-fonts;
+  font-family: $webfont-roboto, $system-fonts-emoji;
   line-height: 1.5;
   box-sizing: border-box;
 }

assets/sass/components/_webfonts.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+@include font-face('Roboto', 'Roboto', 'Roboto-Regular', './fonts/roboto-latin-regular', normal, 400);
+@include font-face('Roboto', 'Roboto Medium', 'Roboto-Medium', './fonts/roboto-latin-medium', normal, 500);
+@include font-face('Roboto', 'Roboto Bold', 'Roboto-Bold', './fonts/roboto-latin-bold', normal, 700);

assets/sass/main.scss

@@ -7,6 +7,7 @@
 @import 'abstracts/functions';
 
 // Global Styles
+@import 'components/webfonts';
 @import 'components/global';
 @import 'components/header';
 @import 'components/footer';

assets/sass/pages/_home.scss

@@ -2,15 +2,14 @@
 
 // Home Styles
 main#home {
-  font-size: 1.4em;
+  font-size: 1.3em;
-  font-weight: 300;
   max-width: 980px;
   padding: 1.5em 1.75em 0.5em 1.75em;
   margin: 0 auto;
 
   h2 {
     margin: 0 0 0.6em 0;
-    font-size: 1.4em;
+    font-size: 1.6em;
     font-weight: 500;
     line-height: 1.2;
 
@@ -25,7 +24,7 @@ main#home {
 
   h3 {
     margin: 0.6em 0;
-    font-size: 1.2em;
+    font-size: 1.3em;
     font-weight: 400;
     line-height: 1.4;
   }
@@ -98,6 +97,16 @@ main#home {
     line-height: 1.6;
     padding: 1.2em 1.2em 0.2em 1.2em;
 
+    h2 {
+      font-size: 1.3em;
+      line-height: 1.4;
+    }
+
+    h3 {
+      font-size: 1.1em;
+      line-height: 1.4;
+    }
+
     img#me {
       width: 85px;
       height: 85px;

assets/sass/pages/_single.scss

@@ -152,12 +152,17 @@ main#single {
         color: $color-medium;
         font-size: 0.85em;
         line-height: 1.5;
-        letter-spacing: 0.08em;
+        letter-spacing: 0.075em;
 
         a {
           color: inherit;
         }
 
+        span.dot {
+          margin: 0 0.1em;
+          font-weight: 700;
+        }
+
         ul#tags {
           margin-top: 0.5em;
           padding: 0;
@@ -165,7 +170,7 @@ main#single {
 
           li {
             display: inline;
-            margin: 0 0.7em;
+            margin: 0 0.8em;
             text-transform: uppercase;
             letter-spacing: 0.15em;
           }
@@ -182,8 +187,22 @@ main#single {
     padding: 0.8em 1.5em;
 
     article {
-      div#meta h1 {
+      div#meta{
-        font-size: 1.7em;
+        h1 {
+          font-size: 1.8em;
+        }
+
+        div#byline {
+          // hide "Improve Post" link on mobile
+          span#edit {
+            display: none;
+          }
+
+          // less space between tags
+          ul#tags li {
+            margin: 0 0.5em;
+          }
+        }
       }
     }
   }

layouts/_default/single.html

@@ -4,15 +4,13 @@
     <div id="meta">
       <h1><a href="{{ .Permalink }}" class="no-underline">{{ .Title }}</a></h1>
       <div id="byline">
-        by <a class="no-underline" href="{{ .Site.BaseURL }}" rel="me author">{{ .Site.Author.name }}</a>
+        <span id="author">by <a class="no-underline" href="{{ .Site.BaseURL }}" rel="me author">{{ .Site.Author.name }}</a></span>
-        &middot; <a class="no-underline" href="{{ .Permalink }}" title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}">{{ .Date.Format "January 2, 2006" }}</a>
+        <span id="date"><span class="dot">&middot;</span> <a class="no-underline" href="{{ .Permalink }}" title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}">{{ .Date.Format "January 2, 2006" }}</a></span>
-        {{ with .Site.Params.gitRepo }}&middot; <a class="no-underline" href="{{ . }}/blob/master/content/{{ $.File.Path }}" title="Edit this page on GitHub" target="_blank" rel="noopener">Improve Post</a>{{ end }}
+        {{ with .Site.Params.gitRepo }}<span id="edit"><span class="dot">&middot;</span> <a class="no-underline" href="{{ . }}/blob/master/content/{{ $.File.Path }}" title="Edit this page on GitHub" target="_blank" rel="noopener">Improve Post</a></span>{{ end }}
         <ul id="tags">
-        {{- with .Params.tags }}
+        {{- with .Params.tags }}{{ range . }}
-        {{- range . }}
           <li>{{ . }}</li>
-        {{- end }}
+        {{- end }}{{ end }}
-        {{- end }}
         </ul>
       </div>
     </div>

layouts/index.headers

@@ -1,17 +1,18 @@
 # Sensible default security headers
 #  - More info: https://scotthelme.co.uk/hardening-your-http-response-headers/
 #  - Test website: https://securityheaders.com/
-
 /*
   Referrer-Policy: strict-origin-when-cross-origin
   X-Content-Type-Options: nosniff
   X-Frame-Options: sameorigin
   X-XSS-Protection: 1; mode=block
 
+# Super long cache for web fonts (one year)
+/fonts/*
+  Cache-Control: max-age=31536000, public, immutable, no-transform
 
 # Recommended MIME type for PWA manifests
 # https://github.com/w3c/manifest/issues/689
-
 /manifest.json
   Content-Type: application/manifest+json; charset=UTF-8
 /*.webmanifest

layouts/partials/head.html

@@ -9,6 +9,9 @@
 <meta name="apple-mobile-web-app-status-bar-style" content="default">
 <meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}">
 <meta name="theme-color" content="#0e6dc2">
+<link rel="preload" href="{{ "fonts/roboto-latin-regular.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ "fonts/roboto-latin-medium.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ "fonts/roboto-latin-bold.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
 {{ $style := resources.Get "sass/main.scss" | resources.ToCSS (dict "targetPath" "style.css") }}
 <link rel="stylesheet" href="{{ $style.Permalink }}">
 <link rel="apple-touch-icon" href="{{ "apple-touch-icon.png" | absURL }}">

netlify.toml

@@ -25,6 +25,9 @@
 [context.deploy-preview]
   command = "yarn build:preview"
 
+[context.branch-deploy]
+  command = "yarn build:preview"
+
 
 # The most important headers and redirects are specified in the _headers and
 # _redirects files generated by Hugo. These are additional custom rules.