fix: incorrect sizing for home banner image

praveenpuglia · May 18, 2024 · 8dc55d4 · 8dc55d4
1 parent 2047fe1
commit 8dc55d4
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 3 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,6 +6,6 @@
     "**/CVS": true,
     "**/.DS_Store": true,
     "**/Thumbs.db": true,
-    "_site": false
+    "_site": true
   }
 }
diff --git a/static/home-banner.avif → src/assets/images/home-banner-desktop.avif b/static/home-banner.avif → src/assets/images/home-banner-desktop.avif
diff --git a/src/assets/images/home-banner-mobile.avif b/src/assets/images/home-banner-mobile.avif
diff --git a/src/assets/images/home-banner-tablet.avif b/src/assets/images/home-banner-tablet.avif
diff --git a/src/index.md b/src/index.md
@@ -3,7 +3,11 @@ layout: base
 title: Home
 ---
 
-<img class="hero-banner" decoding="async" loading="lazy" src="home-banner.avif" alt="Praveen at VueDay, 2019" fetchpriority="high"/>
+<picture class="hero-banner">
+  <source media="(max-width: 480px)" srcset="/assets/images/home-banner-mobile.avif" />
+  <source media="(max-width: 767px)" srcset="/assets/images/home-banner-tablet.avif" />
+  <img src="/assets/images/home-banner-desktop.avif" alt="Speaking at VueDay, Bengaluru, 2019" fetchpriority="high" />
+</picture>
 
 ## Hello!
 

diff --git a/static/css/header.css b/static/css/header.css
@@ -29,6 +29,7 @@
 }
 .navigation-links {
   list-style: none;
+  font-size: 1.25rem;
   margin: 0;
   padding: 0;
   display: flex;

diff --git a/static/css/home.css b/static/css/home.css
@@ -1,8 +1,13 @@
-.hero-banner img {
+.hero-banner {
   display: block;
   margin: auto;
   margin-bottom: 3rem;
   max-width: calc(100% - 2rem);
   transform: translateX(-1rem);
   box-shadow: 1rem 1rem rgba(0, 0, 0, 0.1), 2rem 2rem rgba(0, 0, 0, 0.1);
 }
+.hero-banner img {
+  width: 100%;
+  margin: auto;
+  display: block;
+}