build(front): adds margin to posts summary paragraphs

dgrebb · Oct 28, 2023 · 4386a45 · 4386a45
1 parent ff76a0e
commit 4386a45
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 23 deletions.
diff --git a/front/src/lib/components/Image.svelte b/front/src/lib/components/Image.svelte
@@ -30,27 +30,31 @@
   });
 </script>
 
-{#if loaded}
-  <img
-    {src}
-    {alt}
-    {title}
-    {width}
-    {height}
-    class={classes}
-    aria-hidden={ariaHidden}
-  />
-{:else if failed}
-  <p>That image was lost. Poor thing.</p>
-  <script>
-    Sentry.captureMessage('Image Not Found', {
-      image: src,
-      page: document.location.pathname,
-      hostname: document.location.hostname,
-    });
-  </script>
-{:else if loading}
-  <div class="image-loader" style={`height: ${height}px; width: ${width}px`}>
+<div
+  class="image-loader"
+  class:loaded
+  style={`height: ${height}px; width: ${width}px`}
+>
+  {#if loaded}
+    <img
+      {src}
+      {alt}
+      {title}
+      {width}
+      {height}
+      class={classes}
+      aria-hidden={ariaHidden}
+    />
+  {:else if failed}
+    <p>That image was lost. Poor thing.</p>
+    <script>
+      Sentry.captureMessage('Image Not Found', {
+        image: src,
+        page: document.location.pathname,
+        hostname: document.location.hostname,
+      });
+    </script>
+  {:else if loading}
     <Loading />
-  </div>
-{/if}
+  {/if}
+</div>
diff --git a/front/src/lib/styles/global.css b/front/src/lib/styles/global.css
@@ -127,7 +127,14 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
+  opacity: 0;
+  transition-duration: var(--transition-duration);
+  transition-property: opacity;
+  transition-timing-function: var(--transition-timing-function);
   margin: auto;
+  &.loaded {
+    opacity: 1;
+  }
 }
 
 .scroll-top {

diff --git a/front/src/lib/styles/pages/home.css b/front/src/lib/styles/pages/home.css
@@ -12,6 +12,14 @@
   transition-property: max-width;
   padding-right: 1rem;
   padding-left: 1rem;
+  .image-loader {
+    margin: 0.5rem 0;
+  }
+  @media screen and (min-width: 480px) {
+    .image-loader {
+      margin: 0;
+    }
+  }
   .bio-picture {
     position: relative;
     z-index: 5;

diff --git a/front/static/styles/noscript.css b/front/static/styles/noscript.css
@@ -13,6 +13,7 @@ body .footer {
 }
 .image-loader {
   display: none;
+  opacity: 1;
 }
 .syntax-highlighter {
   .language {