fix mobile image spacing

ographiesresearch · Feb 29, 2024 · 82e5b5d · 82e5b5d
1 parent 6a27e26
commit 82e5b5d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/components/ImageBox.astro b/src/components/ImageBox.astro
@@ -12,16 +12,14 @@ import { Image } from 'astro:assets';
 const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
 ---
 
-<figure class="image">
+<figure class="image tile-image">
     <Image src={images[photopath]()} alt={alt} />
 </figure>
 
-
-<style>
+<style type="scss">
     img {
         -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
         filter: grayscale(100%);
         mix-blend-mode: screen;
-        padding-right: 1em;
     }
 </style>
diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -9,4 +9,12 @@ $dark: rgba(255, 255, 255, 0);
 
 #content {
     min-height: 60vh;
-  }
+  }
+
+
+
+@include tablet {
+    .tile-image > img {
+        padding-right: 1em;
+    }
+}