From 84b077e12b98feac26417b051c2b9bbc97f78899 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Thu, 2 Apr 2020 10:04:17 -0400 Subject: [PATCH] bring AMP styles up to speed --- .github/workflows/ci.yml | 23 ++++++++--------------- assets/sass/components/_content.scss | 4 ++-- assets/sass/pages/_single.scss | 2 +- layouts/_default/single.amp.html | 18 +++++++++--------- 4 files changed, 20 insertions(+), 27 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 31f8c362..3bf91505 100644 --- a/.github/workflows/ci.yml +++ b/.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 - env: - NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} - NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} + run: npx netlify-cli watch 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 }} diff --git a/assets/sass/components/_content.scss b/assets/sass/components/_content.scss index fbf7a8a3..753993d4 100644 --- a/assets/sass/components/_content.scss +++ b/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; } diff --git a/assets/sass/pages/_single.scss b/assets/sass/pages/_single.scss index 52e79526..c7d9a0db 100644 --- a/assets/sass/pages/_single.scss +++ b/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; diff --git a/layouts/_default/single.amp.html b/layouts/_default/single.amp.html index 6f7d9d1f..2285284e 100644 --- a/layouts/_default/single.amp.html +++ b/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; - border-bottom: 1px solid #d2d2d2; + background-color: #fbfbfb; + 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" }}