fix(front): adds styles and html for post hero image fallback (#704)

closes #677
dgrebb · Sep 28, 2023 · c62d724 · c62d724
1 parent 918dc56
commit c62d724
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/front/src/lib/components/posts/PostHero.svelte b/front/src/lib/components/posts/PostHero.svelte
@@ -19,5 +19,12 @@
       style={heroThumb &&
         `background-image: url('${heroThumb}'); background-position: ${position};`}
     />
+    <noscript>
+      <div
+        class="hero noscript"
+        style={heroImage &&
+          `background-image: url('${heroImage}'); background-position: ${position};`}
+      />
+    </noscript>
   </div>
 {/if}
diff --git a/front/src/lib/styles/pages/post.css b/front/src/lib/styles/pages/post.css
@@ -98,6 +98,9 @@
       &.loaded {
         z-index: 18;
       }
+      noscript .noscript {
+        display: none;
+      }
     }
   }
   h1.post-title,

diff --git a/front/static/styles/noscript.css b/front/static/styles/noscript.css
@@ -22,3 +22,9 @@ body .footer {
     display: none;
   }
 }
+.post .hero-wrap .hero.hero-thumbnail {
+  display: none;
+}
+.post .hero-wrap noscript .hero.noscript {
+  display: block;
+}