Font-swap on font-awesome and image compression

assets/css/style.css

@@ -29,6 +29,11 @@ html, body {
   word-wrap: break-word;
 }
 
+a {
+  padding-top: 8px; /* Increase tap target */
+  padding-bottom: 8px; /* Increase tap target */
+}
+
 a .fa, a .fas, a .fab {
   color: var(--acent-color);
 }

layouts/blog/single.amp.html

@@ -8,7 +8,10 @@
     <h1 class='title p-name'>{{ .Title }}</h1>
     <a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
     <div style="display: none;" rel="author" class="h-card p-author">
-      <img class="u-photo" src="{{ .Site.BaseURL }}img/avatar.jpg"/>
+      {{ $profile_image := resources.Get (printf "img/%s" .Site.Params.avatar) }}
+      {{ $profile_width := 75 }}
+      {{ $profile_image := $profile_image.Resize (printf "%dx webp q75" $profile_width) }}
+      <img class="u-photo" width="{{ $profile_width }}" height="{{ $profile_width }}" src="{{ $profile_image.RelPermalink }}"/>
       <span > {{ .Site.Params.Author }}</span>
     </div>
     {{ .Scratch.Set "beforeDateString" "Published on "}}

layouts/blog/single.html

@@ -8,7 +8,10 @@
     <h1 class='title p-name'>{{ .Title }}</h1>
     <a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
     <div style="display: none;" rel="author" class="h-card p-author">
-      <img class="u-photo" src="{{ .Site.BaseURL }}img/avatar.jpg"/>
+      {{ $profile_image := resources.Get (printf "img/%s" .Site.Params.avatar) }}
+      {{ $profile_width := 75 }}
+      {{ $profile_image := $profile_image.Resize (printf "%dx webp q75" $profile_width) }}
+      <img class="u-photo" width="{{ $profile_width }}" height="{{ $profile_width }}" src="{{ $profile_image.RelPermalink }}"/>
       <span > {{ .Site.Params.Author }}</span>
     </div>
     {{ .Scratch.Set "beforeDateString" "Published on "}}

layouts/index.html

@@ -8,8 +8,8 @@
       <div class="avatar">
         {{ $profile_image := resources.Get (printf "img/%s" .Site.Params.avatar) }}
         {{ $profile_width := 250 }}
-        {{ $profile_image := $profile_image.Resize (printf "%dx" $profile_width) }}
+        {{ $profile_image := $profile_image.Resize (printf "%dx webp q75" $profile_width) }}
-        <img class="avatarMask u-photo" width="{{ $profile_width }}" src="{{ $profile_image.RelPermalink }}" alt="Photo of {{ .Site.Params.Author }}">
+        <img class="avatarMask u-photo" width="{{ $profile_width }}" height="{{ $profile_width }}" src="{{ $profile_image.RelPermalink }}" alt="Photo of {{ .Site.Params.Author }}">
         <!-- <img src="{{ .Site.BaseURL }}img/avatar-border.svg" alt="Photo of {{ .Site.Params.Author }}"> -->
       </div>
       <!-- author -->

layouts/paper/single.html

@@ -8,7 +8,10 @@
     <h1 class='title p-name'>{{ .Title }}</h1>
     <a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
     <div style="display: none;" rel="author" class="h-card p-author">
-      <img class="u-photo" src="{{ .Site.BaseURL }}img/avatar.jpg"/>
+      {{ $profile_image := resources.Get (printf "img/%s" .Site.Params.avatar) }}
+      {{ $profile_width := 75 }}
+      {{ $profile_image := $profile_image.Resize (printf "%dx webp q75" $profile_width) }}
+      <img class="u-photo" width="{{ $profile_width }}" height="{{ $profile_width }}" src="{{ $profile_image.RelPermalink }}"/>
       <span > {{ .Site.Params.Author }}</span>
     </div>
     <!-- content -->

layouts/partials/head.html

@@ -64,15 +64,5 @@
   <!-- {{- template "_internal/twitter_cards.html" . -}} -->
   {{- partial "external/twitter_cards.html" . -}}
 
-  <script src="https://polyfill.io/v3/polyfill.js"></script>
-
-  <!-- MathJax -->
-  {{- if or .Params.math .Site.Params.math -}}
-    {{ partial "mathjax_support.html" . }}
-  {{- end -}}
-
   {{ partial "citation.html" . }}
-
-  {{- $script := resources.Get "js/script.js" -}}
-  <script src="{{ $script.Permalink }}" async></script>
 </head>

layouts/partials/header.html

@@ -27,8 +27,8 @@
     <h2 class="p-name"><a class="author u-url" rel="me" href="{{ .Site.BaseURL }}">{{ .Site.Params.Author }}</a></h2>
     {{ $profile_image := resources.Get (printf "img/%s" .Site.Params.avatar) }}
     {{ $profile_width := 75 }}
-    {{ $profile_image := $profile_image.Resize (printf "%dx" $profile_width) }}
+    {{ $profile_image := $profile_image.Resize (printf "%dx webp q75" $profile_width) }}
-    <img class="avatarMask u-photo" width="{{ $profile_width }}" src="{{ $profile_image.RelPermalink }}" alt="Photo of {{ .Site.Params.Author }}">
+    <img class="avatarMask u-photo" width="{{ $profile_width }}" height="{{ $profile_width }}" src="{{ $profile_image.RelPermalink }}" alt="Photo of {{ .Site.Params.Author }}">
     <div style="display: none">
         <!-- email / description (for h-card) -->
         <a class="u-email" href="mailto://{{ .Site.Params.email }}"></a>

layouts/tracks/single.html

@@ -8,7 +8,10 @@
     <h1 class='title p-name'>{{ .Title }}</h1>
     <a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
     <div style="display: none;" rel="author" class="h-card p-author">
-      <img class="u-photo" src="{{ .Site.BaseURL }}img/avatar.jpg"/>
+      {{ $profile_image := resources.Get (printf "img/%s" .Site.Params.avatar) }}
+      {{ $profile_width := 75 }}
+      {{ $profile_image := $profile_image.Resize (printf "%dx webp q75" $profile_width) }}
+      <img class="u-photo" width="{{ $profile_width }}" height="{{ $profile_width }}" src="{{ $profile_image.RelPermalink }}"/>
       <span > {{ .Site.Params.Author }}</span>
     </div>
     {{ .Scratch.Set "beforeDateString" "Published on "}}