portet blog

src/components/PostPreview.svelte

@@ -0,0 +1,46 @@
+<script>
+  import ImageFrame from '../components/ImageFrame.svelte'
+  import PostAttributes from '../components/PostAttributes.svelte'
+
+  export let post
+</script>
+
+<style>
+  a {
+    display: block;
+    margin-bottom: 8em;
+  }
+  a > :global(img) {
+    height: 12em;
+  }
+
+  h2 {
+    margin-top: 0.25em;
+    position: relative;
+    top: 0;
+    transition: var(--animation);
+    background-color: #fff;
+  }
+  a:hover h2 {
+    top: -1em;
+    transform: scale(0.95);
+  }
+
+  a > :global(div) {
+    opacity: 1;
+    transition: var(--animation);
+  }
+  a:hover > :global(div) {
+    opacity: 0;
+  }
+</style>
+
+<a href={`blog/${post.slug}`}>
+  {#if post.featured}
+    <ImageFrame src={post.featured.sizes.medium_large} alt={post.featured.description} />
+  {/if}
+  <PostAttributes {post} />
+  <h2>
+    {@html post.title}
+  </h2>
+</a>