update icon image size

royalfig · Jul 14, 2023 · 7450c97 · 7450c97
1 parent f64c7fe
commit 7450c97
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/assets/css/layout/navbar.css b/assets/css/layout/navbar.css
@@ -9,6 +9,11 @@
   border-radius: var(--radius);
 }
 
+.sm-navbar-left picture {
+  display: flex;
+  align-items: center;
+}
+
 .sm-site-icon {
   width: 1rem;
   height: 1rem;

diff --git a/partials/navbar.hbs b/partials/navbar.hbs
@@ -3,7 +3,54 @@
   <header class='sm-navbar sm-flex-h'>
     <div class='sm-navbar-left sm-flex-h'>
       {{#if @site.icon}}
-        <img class='sm-site-icon' src='{{img_url @site.icon}}' alt='' />
+        <picture>
+          <source 
+            srcset="
+          {{img_url @site.icon size="48" format="avif"}} 48w,
+          {{img_url @site.icon size="80" format="avif"}} 80w,
+          {{img_url @site.icon size="160" format="avif"}} 160w,
+          {{img_url @site.icon size="240" format="avif"}} 240w,
+          {{img_url @site.icon size="528" format="avif"}} 528w,
+          {{img_url @site.icon size="800" format="avif"}} 800w,
+          {{img_url @site.icon size="1200" format="avif"}} 1200w,
+          {{img_url @site.icon size="1600" format="avif"}} 1600w,
+          {{img_url @site.icon size="1920" format="avif"}} 1920w,
+          {{img_url @site.icon size="2000" format="avif"}} 2000w"
+            sizes="1rem" 
+            type="image/avif"
+          >
+          <source 
+            srcset="
+          {{img_url @site.icon size="48" format="webp"}} 48w,
+          {{img_url @site.icon size="80" format="webp"}} 80w,
+          {{img_url @site.icon size="160" format="webp"}} 160w,
+          {{img_url @site.icon size="240" format="webp"}} 240w,
+          {{img_url @site.icon size="528" format="webp"}} 528w,
+          {{img_url @site.icon size="800" format="webp"}} 800w,
+          {{img_url @site.icon size="1200" format="webp"}} 1200w,
+          {{img_url @site.icon size="1600" format="webp"}} 1600w,
+          {{img_url @site.icon size="1920" format="webp"}} 1920w,
+          {{img_url @site.icon size="2000" format="webp"}} 2000w"
+            sizes="1rem" 
+            type="image/webp"
+          >
+          <img
+            srcset="
+          {{img_url @site.icon size="48"}} 48w,
+          {{img_url @site.icon size="80"}} 80w,
+          {{img_url @site.icon size="160"}} 160w,
+          {{img_url @site.icon size="240"}} 240w,
+          {{img_url @site.icon size="528"}} 528w,
+          {{img_url @site.icon size="800"}} 800w,
+          {{img_url @site.icon size="1200"}} 1200w,
+          {{img_url @site.icon size="1600"}} 1600w,
+          {{img_url @site.icon size="1920"}} 1920w,
+          {{img_url @site.icon size="2000"}} 2000w"
+            sizes="1rem" 
+            src="{{img_url @site.ico size="48"}}"
+            alt=""
+          >
+        </picture>
       {{/if}}
       {{#is 'home'}}
         <h1 class='sm-site-title'><a