Make images work for hight dpi screens

5 files changed, 21 insertions, 17 deletions

diff --git a/assets/css/style.css b/assets/css/style.css
index 4b25c4a..1c62f08 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -57,7 +57,7 @@ p {
 .nav-bar {
     max-width: 60rem;
     width: 100%;
-    padding: 0.4em 0;
+    padding: 0.6em 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
diff --git a/layouts/_default/home.html b/layouts/_default/home.html
index 9664ee6..2a1ebd9 100644
--- a/layouts/_default/home.html
+++ b/layouts/_default/home.html
@@ -12,7 +12,13 @@
         </div>
         {{ with resources.GetMatch .Site.Params.headshotimg -}}
         <div class="home-faceshot-card">
-          <img class="home-faceshot" src="{{ .Permalink }}" >
+          <picture>
+            {{ $faceshot := .Resize "272x Lanczos" }}
+            {{ $faceshot_x2 := .Resize "544x Lanczos" }}
+            {{ $faceshot_x3 := .Resize "816x Lanczos" }}
+            <source srcset="{{ $faceshot.Permalink }} 1x, {{ $faceshot_x2.Permalink }} 2x, {{ $faceshot_x3.Permalink }} 3x">
+            <img class="home-faceshot" src="{{ $faceshot.Permalink }}" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
+          </picture>
         </div>
         {{ end -}}
       </header>
diff --git a/layouts/_default/li-next.html b/layouts/_default/li-next.html
index 9b0897f..c2f0f43 100644
--- a/layouts/_default/li-next.html
+++ b/layouts/_default/li-next.html
@@ -4,11 +4,11 @@
   <div class="card-img-container">
     <p class="card-img-overlay">Next Article</p>
     <picture>
-      {{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}}
-      <source srcset="{{ .Permalink }}" type="image/webp">
-      {{- end }}
-      <source srcset="{{ .Permalink }}">
-      <img src="{{ .Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
+      {{ $thumbnail := .Resize "400x Lanczos" }}
+      {{ $thumbnail_2 := .Resize "800x Lanczos" }}
+      {{ $thumbnail_3 := .Resize "1200x Lanczos" }}
+      <source srcset="{{ $thumbnail.Permalink }} 1x, {{ $thumbnail_2.Permalink }} 2x, {{ $thumbnail_3.Permalink }} 3x">
+      <img src="{{ $thumbnail.Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
     </picture>
   </div>
   {{ end }}
diff --git a/layouts/_default/li.html b/layouts/_default/li.html
index a672eaf..9ffd735 100644
--- a/layouts/_default/li.html
+++ b/layouts/_default/li.html
@@ -3,11 +3,10 @@
   {{ with .Resources.GetMatch "featuredImage" }}
   <div class="card-img-container">
     <picture>
-      {{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}}
-      <source srcset="{{ .Permalink }}" type="image/webp">
-      {{- end }}
-      {{ $thumbnail := .Fit "800x600 Lanczos" }}
-      <source srcset="{{ $thumbnail.Permalink }}">
+      {{ $thumbnail := .Resize "400x Lanczos" }}
+      {{ $thumbnail_2 := .Resize "800x Lanczos" }}
+      {{ $thumbnail_3 := .Resize "1200x Lanczos" }}
+      <source srcset="{{ $thumbnail.Permalink }} 1x, {{ $thumbnail_2.Permalink }} 2x, {{ $thumbnail_3.Permalink }} 3x">
       <img src="{{ $thumbnail.Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
     </picture>
   </div>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 415fbcb..31280bb 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -11,11 +11,10 @@
         </header>
         {{ with .Resources.GetMatch "featuredImage" -}}
         <picture class="post-figure">
-          {{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}}
-          <source srcset="{{ .Permalink }}" type="image/webp">
-          {{- end }}
-          {{ $featured := .Resize "800x Lanczos" }}
-          <source srcset="{{ $featured.Permalink }}">
+          {{ $featured := .Resize "711x Lanczos" }}
+          {{ $featured_2 := .Resize "1422x Lanczos" }}
+          {{ $featured_3 := .Resize "2133x Lanczos" }}
+          <source srcset="{{ $featured.Permalink }} 1x, {{ $featured_2.Permalink }} 2x, {{ $featured_3.Permalink }} 3x">
           <img src="{{ $featured.Permalink }}" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
         </picture>
         {{ with .Params.attribution -}}