bring AMP styles up to speed

.github/workflows/ci.yml

@@ -10,22 +10,19 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, '[skip ci]')"
+    env:
+      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
     steps:
-    - uses: actions/setup-node@v1
-      with:
-        node-version: '12.x'
-    - name: Install netlify-cli
-      run: npm install -g netlify-cli
     - name: Wait for Netlify
-      run: netlify watch
+      run: npx netlify-cli watch
-      env:
-        NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
-        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
 
   lighthouse:
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, '[skip ci]')"
     needs: deploy
+    env:
+      LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
     steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v1
@@ -41,8 +38,6 @@ jobs:
           --collect.url=https://deploy-preview-${{ github.event.number }}--jakejarvis.netlify.com/ \
           --collect.url=https://deploy-preview-${{ github.event.number }}--jakejarvis.netlify.com/notes/how-to-pull-request-fork-github/ \
           --collect.url=https://deploy-preview-${{ github.event.number }}--jakejarvis.netlify.com/notes/how-to-pull-request-fork-github/amp.html
-      env:
-        LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
     - name: Audit jarv.is
       if: github.event_name == 'push' && github.ref == 'refs/heads/master'
       continue-on-error: true
@@ -51,8 +46,6 @@ jobs:
           --collect.url=https://jarv.is/ \
           --collect.url=https://jarv.is/notes/how-to-pull-request-fork-github/ \
           --collect.url=https://jarv.is/notes/how-to-pull-request-fork-github/amp.html
-      env:
-        LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
     - name: Upload results as artifact
       uses: actions/upload-artifact@v1
       with:
@@ -98,6 +91,8 @@ jobs:
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, '[skip ci]')"
     needs: build
+    env:
+      PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
     steps:
     - uses: actions/download-artifact@v1
       with:
@@ -105,5 +100,3 @@ jobs:
     - uses: percy/snapshot-action@v0.1.0
       with:
         flags: --config public/.percy.yml
-      env:
-        PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

assets/sass/components/_content.scss

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 div#content {
-  font-size: 0.95em;
+  font-size: 0.935em;   // ~15px
   letter-spacing: -0.008em;
   line-height: 1.7;
 
@@ -37,7 +37,7 @@ div#content {
 
     // image captions
     figcaption {
-      font-size: 0.9em;
+      font-size: 0.95em;
       color: $color-medium;
       text-align: center;
     }

assets/sass/pages/_single.scss

@@ -25,7 +25,7 @@ main#single {
   h1#title {
     margin-top: 0.3em;
     margin-bottom: 0.5em;
-    font-size: 2.3em;
+    font-size: 2.2em;
     line-height: 1.25;
     font-weight: 700;
 

layouts/_default/single.amp.html

@@ -60,12 +60,12 @@
              url("{{ "fonts/hack-regular-subset.woff" | absURL }}") format("woff");
       }
 
-
       body {
         font-family: "Inter", sans-serif;
         font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
         font-kerning: normal;
         font-variant-ligatures: normal;
+        font-size: 0.92em;
         letter-spacing: -0.011em;
         background: #ffffff;
         color: #222222;
@@ -122,14 +122,14 @@
       }
       header {
         width: 100%;
-        background-color: #f9f9f9;
+        background-color: #fbfbfb;
-        border-bottom: 1px solid #d2d2d2;
+        border-bottom: 1px solid #e3e3e3;
       }
       nav {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 10px 30px;
+        padding: 5px 20px;
       }
       nav a {
         text-decoration: none;
@@ -165,7 +165,7 @@
         display: flex;
         justify-content: space-between;
         padding: 20px;
-        border-top: 1px solid #bbbbbb;
+        border-top: 1px solid #e3e3e3;
         color: #555;
         line-height: 1.8;
       }
@@ -184,7 +184,7 @@
       }
       div.highlight, code {
         font-family: "Hack", monospace;
-        background: #f4f4f4;
+        background: #fbfbfb;
         font-size: 0.95em;
         letter-spacing: 0;
         page-break-inside: avoid;
@@ -208,14 +208,14 @@
       }
       div.highlight span.k, div.highlight span.kc, div.highlight span.kd, div.highlight span.kp, div.highlight span.kr, div.highlight span.kt, div.highlight span.no { color: #03748a; }
       div.highlight span.n, div.highlight span.bp, div.highlight span.nb, div.highlight span.ni, div.highlight span.fm, div.highlight span.nl, div.highlight span.nn, div.highlight span.py, div.highlight span.nv, div.highlight span.vc, div.highlight span.vg, div.highlight span.vi, div.highlight span.vm, div.highlight span.p { color: #111111; }
-      div.highlight span.na, div.highlight span.nc, div.highlight span.nd, div.highlight span.ne, div.highlight span.nf, div.highlight span.nx { color: #489c44; }
+      div.highlight span.na, div.highlight span.nc, div.highlight span.nd, div.highlight span.ne, div.highlight span.nf, div.highlight span.nx { color: #068200; }
       div.highlight span.err, div.highlight span.nt, div.highlight span.o, div.highlight span.ow, div.highlight span.kn { color: #e8003d; }
       div.highlight span.l, div.highlight span.se, div.highlight span.m, div.highlight span.mb, div.highlight span.mf, div.highlight span.mh, div.highlight span.mi, div.highlight span.il, div.highlight span.mo { color: #8145ec; }
-      div.highlight span.ld, div.highlight span.s, div.highlight span.sa, div.highlight span.sb, div.highlight span.sc, div.highlight span.dl, div.highlight span.sd, div.highlight span.s2, div.highlight span.sh, div.highlight span.si, div.highlight span.sx, div.highlight span.sr, div.highlight span.s1, div.highlight span.ss { color: #c17005; }
+      div.highlight span.ld, div.highlight span.s, div.highlight span.sa, div.highlight span.sb, div.highlight span.sc, div.highlight span.dl, div.highlight span.sd, div.highlight span.s2, div.highlight span.sh, div.highlight span.si, div.highlight span.sx, div.highlight span.sr, div.highlight span.s1, div.highlight span.ss { color: #b35c00; }
       div.highlight span.c, div.highlight span.ch, div.highlight span.cm, div.highlight span.c1, div.highlight span.cs, div.highlight span.cp, div.highlight span.cpf { color: #6b6859; }
       div.highlight span.ge { font-style: italic; }
       div.highlight span.gs { font-weight: bold; }
-      div.highlight span.lnt { color: #999999; }
+      div.highlight span.lnt { color: #999999; user-select: none; }
 
       {{/* Page-specific styles set via page-css shortcode */}}
       {{- with .Page.Scratch.Get "css" }}