From 830c34855cc3398cce62cc71c8bb6dd1843124a9 Mon Sep 17 00:00:00 2001
From: Andrew <admin@enderman.ch>
Date: Tue, 18 Jun 2024 21:48:50 +0300
Subject: [PATCH] Clean up styles, fix and improve the blog post card layout

---
 assets/styles/main.scss                       | 656 ++++++++----------
 assets/styles/transitions.scss                |  20 +
 components/animations/AClientOnly.vue         |  43 --
 .../content/{OgImage.vue => OgThumbnail.vue}  |   0
 components/ui/Icon.vue                        |  58 --
 pages/blog/[slug].vue                         | 209 +++---
 pages/blog/index.vue                          |  57 +-
 7 files changed, 475 insertions(+), 568 deletions(-)
 delete mode 100644 components/animations/AClientOnly.vue
 rename components/content/{OgImage.vue => OgThumbnail.vue} (100%)
 delete mode 100644 components/ui/Icon.vue

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index de40eb7..68630b5 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -3,6 +3,8 @@
 // Modules.
 @use 'transitions';
 @use 'lists';
+@tailwind base;
+@tailwind components;
 @tailwind utilities;
 
 @font-face {
@@ -85,138 +87,43 @@ body {
   height: 100%;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  @apply font-serif;
-  font-weight: bold;
-}
-
-h1 {
-  font-size: 2.5rem;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-h3 {
-  font-size: 1.75rem;
-}
-
-h4 {
-  font-size: 1.5rem;
-}
-
-h5 {
-  font-size: 1.25rem;
-}
-
-h6 {
-  font-size: 1rem;
-}
-
-small {
-  font-size: 0.75rem;
-}
-
-a {
-  @apply no-underline transition-all;
-
-  color: cornflowerblue;
-
-  &:hover {
-    color: royalblue;
-  }
-}
-
-center {
-  text-align: center;
-  margin: auto;
-}
-
-:not(nav) > ul {
-  list-style-type: disc;
-  padding-left: 1.5em;
-}
-
-:is(section, article, aside).page {
-  :is(div, p):not(:last-child) {
-    @apply mb-4;
+@layer base {
+  h1, h2, h3, h4, h5, h6,
+  .text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6 {
+    @apply font-serif;
+    font-weight: bold;
   }
 
-  :is(h1, h2, h3, h4, h5, h6):not(:last-child) {
-    @apply mb-2;
+  h1, .text-h1 {
+    font-size: 2.5rem;
   }
 
-  :is(ul, ol):not(:last-child) {
-    @apply mb-4;
-  }
-}
-
-iconify-icon {
-   display: inline-block;
-}
-
-// Entry point (Vue mount).
-#ender-app {
-  flex: 1 0 auto;
-  image-rendering: auto;
-}
-
-// Helper classes that don't exist in Bootstrap.
-.overlay {
-  grid-area: 1 / 1;
-}
-
-.pass-through {
-  pointer-events: none;
-
-  > * {
-    pointer-events: auto;
-  }
-}
-
-ruby {
-  ruby-position: under;
-
-  ruby {
-    ruby-position: over;
-  }
-}
-
-rt {
-  ruby-align: space-around;
-}
-
-
-.font-small {
-  font-size: 14px;
-}
-
-.transition-ease {
-  @extend %transition;
-}
-
-// Query-overridable classes.
-.dimensions {
-  width: 100%;
-  min-height: 100%;
-}
-
-.accent-background {
-  background-color: rgb(0 0 0 / 50%);
-}
-
-.accent-overlay-background {
-  background-color: rgb(0 0 0 / 90%);
-}
-
-@responsive {
-  .accent-text {
-    color: white;
+  h2, .text-h2 {
+    font-size: 2rem;
   }
 
-  .link-dark {
-    @apply text-inherit no-underline transition-all;
+  h3, .text-h3 {
+    font-size: 1.75rem;
+  }
+
+  h4, .text-h4 {
+    font-size: 1.5rem;
+  }
+
+  h5, .text-h5 {
+    font-size: 1.25rem;
+  }
+
+  h6, .text-h6 {
+    font-size: 1rem;
+  }
+
+  small {
+    font-size: 0.75rem;
+  }
+
+  a {
+    @apply no-underline transition-all;
 
     color: cornflowerblue;
 
@@ -225,193 +132,45 @@ rt {
     }
   }
 
-  .fade-mask {
-    mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%) 5%, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%));
-  }
-}
-
-.dialog {
-  display: grid;
-
-  min-width: 240px;
-  max-width: 640px;
-
-  background-color: rgb(25 20 40 / 95%);
-  box-shadow: rgb(81 75 89 / 50%) 7px 7px 2em;
-  border-radius: 16px !important;
-
-  > div.background {
-    background-image: url('~/assets/images/textures/aero.png');
-    background-attachment: scroll;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-blend-mode: lighten;
-
-    width: 100%;
-    height: 100%;
-
-    opacity: 0.2;
-
-    box-shadow: azure 0 0 20rem;
-    filter: blur(5px);
+  center {
+    text-align: center;
+    margin: auto;
   }
 
-  > div.content > img.icon-badge {
-    position: fixed;
-    margin-top: -20px;
-    margin-left: -20px;
-    transform: rotate(-25deg);
-    width: 60px;
-    height: 60px;
-  }
-}
-
-%transition {
-  transition: 0.3s ease;
-}
-
-.parallax {
-  transition: all 0.6942s ease-in;
-}
-
-.accent-gradient {
-  background: radial-gradient(
-    circle at left,
-    rgb(255 255 255 / 80%),
-    rgb(255 255 255 / 75%),
-    rgb(255 255 255 / 0%)
-  );
-}
-
-.accent-text-shadow {
-  text-shadow: black 2px 3px 4px;
-}
-
-:where(html.light) {
-  body {
-    color: black;
+  :not(nav) > ul {
+    list-style-type: disc;
+    padding-left: 1.5em;
   }
 
-  .accent-background {
-    background-color: rgb(255 255 255 / 80%);
-  }
-
-  .accent-overlay-background {
-    background-color: rgb(255 255 255 / 90%);
-  }
-
-  a {
-    @apply no-underline transition-all;
-
-    color: royalblue;
-
-    &:hover {
-      color: darkblue;
+  :is(section, article, aside).page {
+    :is(div, p):not(:last-child) {
+      @apply mb-4;
     }
-  }
 
-  .accent-text {
-    color: black;
-  }
-
-  .accent-gradient {
-    background: radial-gradient(
-      circle at left,
-      rgb(0 0 0 / 95%),
-      rgb(0 0 0 / 80%),
-      rgb(0 0 0 / 0%)
-    );
-  }
-
-  .accent-text-shadow {
-    text-shadow: white 1px 2px 3px;
-  }
-}
-
-.post {
-  scroll-snap-type: y mandatory;
-  scroll-snap-stop: normal;
-
-  &::after {
-    content: '';
-    scroll-snap-align: start;
-  }
-
-  &-box {
-    position: relative;
-
-    padding: 0.6942rem 0.6942rem 3rem;
-
-    border: 2px solid rgb(153 153 255 / 60%);
-    background-color: rgb(45 7 110 / 10%);
-
-    transition: 0.3s ease;
-
-    &:hover {
-      border-color: rgb(153 153 255 / 100%);
-      background-color: rgb(45 7 110 / 30%);
-    }
-  }
-
-  &-pocket {
-    background-color: rgb(153 153 255 / 10%);
-
-    border-left: 1px solid rgb(153 153 255 / 60%);
-    border-top: 1px solid rgb(153 153 255 / 60%);
-  }
-
-  &-thumb {
-    height: 100%;
-
-    > img {
-      width: 100%;
-      height: 100%;
-      max-height: 280px;
-      object-fit: cover;
-      border-radius: 4px;
-    }
-  }
-
-  &-tags {
-    > span {
-      padding: 0.35em 0.65em;
-      font-size: 0.85em;
-
-      background-color: rgb(153 153 255 / 10%);
-
-      border: 1px solid rgb(153 153 255 / 60%);
-      border-radius: 1rem;
-    }
-  }
-
-  &-preamble {
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    background-attachment: fixed;
-
-    scroll-snap-align: end;
-
-    iconify-icon {
-      filter: drop-shadow(1px 2px 3px rgb(0 0 0 / 100%));
-    }
-  }
-
-  &-content {
-    scroll-snap-align: start;
-
-    :is(p, li) {
+    :is(h1, h2, h3, h4, h5, h6) {
       a {
         @apply text-inherit no-underline transition-all;
 
-        color: cornflowerblue;
-
         &:hover {
-          color: royalblue;
+          color: indianred;
         }
       }
+      
+      &:not(:last-child) {
+        @apply mb-2;
+      }
+    }
 
+    :is(ul, ol):not(:last-child) {
+      @apply mb-4;
+    }
+
+    :where(p, li) {
       code {
+        &:hover {
+          background-color: rgb(138 71 245 / 20%);
+        }
+
         padding: 0.25em;
 
         border-radius: 0.5em;
@@ -420,29 +179,11 @@ rt {
         background-color: rgb(83 35 162 / 10%);
 
         transition: 0.3s ease;
-
-        &:hover {
-          background-color: rgb(138 71 245 / 20%);
-        }
-      }
-    }
-
-    :is(h1, h2, h3, h4, h5, h6) {
-      font-family: Alexandria, sans-serif;
-      font-weight: 700;
-
-      a {
-        @apply text-inherit no-underline transition-all;
-
-        &:hover {
-          color: indianred;
-        }
       }
     }
 
     img {
-      max-width: 100%;
-      max-height: 400px;
+      @apply max-w-full max-h-[400px];
     }
 
     blockquote {
@@ -528,6 +269,246 @@ rt {
   }
 }
 
+// Entry point (Vue mount).
+#ender-app {
+  flex: 1 0 auto;
+  image-rendering: auto;
+}
+
+// Helper classes that don't exist in Bootstrap.
+.overlay {
+  grid-area: 1 / 1;
+}
+
+.pass-through {
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+}
+
+ruby {
+  ruby-position: under;
+
+  ruby {
+    ruby-position: over;
+  }
+}
+
+rt {
+  ruby-align: space-around;
+}
+
+.font-small {
+  font-size: 14px;
+}
+
+// Query-overridable classes.
+.dimensions {
+  width: 100%;
+  min-height: 100%;
+}
+
+@layer utilities {
+  .accent-background {
+    background-color: rgb(0 0 0 / 50%);
+  }
+
+  .accent-overlay-background {
+    background-color: rgb(0 0 0 / 90%);
+  }
+
+  .accent-text {
+    color: white;
+  }
+
+  .accent-text-shadow {
+    text-shadow: black 2px 3px 4px;
+  }
+
+  .drop-shadow,
+  .accent-drop-shadow {
+    filter: drop-shadow(1px 2px 3px black);
+  }
+
+  .link-dark {
+    @apply text-inherit no-underline transition-all;
+
+    color: cornflowerblue;
+
+    &:hover {
+      color: royalblue;
+    }
+  }
+
+  .accent-fade {
+    background: linear-gradient(
+      to top,
+      black,
+      rgb(0 0 0 / 50%) 75%,
+      transparent
+    );
+  }
+
+  .fade-mask {
+    mask-image: linear-gradient(to bottom, transparent, black 3%, black 97%, transparent);
+  }
+}
+
+.dialog {
+  display: grid;
+
+  min-width: 240px;
+  max-width: 640px;
+
+  background-color: rgb(25 20 40 / 95%);
+  box-shadow: rgb(81 75 89 / 50%) 7px 7px 2em;
+  border-radius: 16px !important;
+
+  > div.background {
+    background-image: url('~/assets/images/textures/aero.png');
+    background-attachment: scroll;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-blend-mode: lighten;
+
+    width: 100%;
+    height: 100%;
+
+    opacity: 0.2;
+
+    box-shadow: azure 0 0 20rem;
+    filter: blur(5px);
+  }
+
+  > div.content > img.icon-badge {
+    position: fixed;
+    margin-top: -20px;
+    margin-left: -20px;
+    transform: rotate(-25deg);
+    width: 60px;
+    height: 60px;
+  }
+}
+
+.accent-gradient {
+  background: radial-gradient(
+    circle at left,
+    rgb(255 255 255 / 80%),
+    rgb(255 255 255 / 75%),
+    rgb(255 255 255 / 0%)
+  );
+}
+
+.post {
+  scroll-snap-type: y mandatory;
+  scroll-snap-stop: normal;
+
+  &::after {
+    content: '';
+    scroll-snap-align: start;
+  }
+
+  &-box {
+    border-color: rgb(153 153 255 / 60%);
+    background-color: rgb(45 7 110 / 10%);
+
+    &:hover {
+      border-color: rgb(153 153 255 / 100%);
+      background-color: rgb(45 7 110 / 30%);
+    }
+  }
+
+  &-pocket {
+    background-color: rgb(153 153 255 / 10%);
+    border-left-color: rgb(153 153 255 / 60%);
+    border-top-color: rgb(153 153 255 / 60%);
+  }
+
+  &-tag {
+    background-color: rgb(153 153 255 / 10%);
+    border-color: rgb(153 153 255 / 60%);
+  }
+}
+
+:where(html.light) {
+  body {
+    color: black;
+  }
+
+  .accent-background {
+    background-color: rgb(255 255 255 / 90%);
+  }
+
+  .accent-overlay-background {
+    background-color: rgb(255 255 255 / 90%);
+  }
+
+  .accent-drop-shadow {
+    filter: drop-shadow(1px 2px 3px white);
+  }
+
+  a {
+    @apply no-underline transition-all;
+
+    color: royalblue;
+
+    &:hover {
+      color: darkblue;
+    }
+  }
+
+  .accent-text {
+    color: black;
+  }
+
+  .accent-gradient {
+    background: radial-gradient(
+      circle at left,
+      rgb(0 0 0 / 95%),
+      rgb(0 0 0 / 80%),
+      transparent
+    );
+  }
+
+  .accent-text-shadow {
+    text-shadow: white 1px 2px 3px;
+  }
+
+  .accent-fade {
+    background: linear-gradient(
+      to top,
+      white,
+      rgb(255 255 255 / 50%) 75%,
+      transparent
+    );
+  }
+
+  .post {
+    &-box {
+      border-color: rgb(123 123 255 / 1000%);
+      background-color: rgb(45 7 110 / 20%);
+
+      &:hover {
+        border-color: rgb(123 123 255 / 80%);
+        background-color: rgb(45 7 110 / 10%);
+      }
+    }
+
+    &-pocket {
+      background-color: rgb(123 123 255 / 10%);
+      border-left-color: rgb(123 123 255 / 80%);
+      border-top-color: rgb(123 123 255 / 80%);
+    }
+
+    &-tag {
+      background-color: rgb(123 123 255 / 10%);
+      border-color: rgb(123 123 255 / 80%);
+    }
+  }
+}
+
 // Dynamic classes.
 @screen lm {
   .dimensions {
@@ -542,13 +523,14 @@ rt {
   }
 
   #ender-app {
-    height: 100%;
+    height: 100dvh;
 
     scrollbar-gutter: stable;
   }
 
   .dimensions {
     width: 90%;
+
     min-height: fit-content;
     max-height: 90%;
   }
@@ -567,42 +549,6 @@ rt {
   html {
     font-size: 18px;
   }
-
-
-  .post {
-    &-box {
-      padding-bottom: 0.6942rem;
-    }
-
-    &-thumb {
-      min-width: 352px;
-      max-height: 198px;
-
-      > img {
-        max-width: 352px;
-      }
-    }
-
-    &-title {
-      display: -webkit-box;
-
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    &-description {
-      display: -webkit-box;
-
-      -webkit-line-clamp: 4;
-      -webkit-box-orient: vertical;
-
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
 }
 
 @screen lg {
diff --git a/assets/styles/transitions.scss b/assets/styles/transitions.scss
index 3b16b85..45024f7 100644
--- a/assets/styles/transitions.scss
+++ b/assets/styles/transitions.scss
@@ -10,3 +10,23 @@
     filter: blur(1em);
   }
 }
+
+.transition {
+  &-ease {
+    transition: all 0.3s ease;
+  }
+  
+  &-portal {
+    transition: all 0.6942s ease-in;
+  }
+}
+
+.button {
+  &-twitter:hover {
+    transform: translateZ(0) scale(1.1) rotate(-10deg);
+  }
+
+  &-back:hover {
+    transform: translateZ(0) scale(0.9);
+  }
+}
\ No newline at end of file
diff --git a/components/animations/AClientOnly.vue b/components/animations/AClientOnly.vue
deleted file mode 100644
index b6b9445..0000000
--- a/components/animations/AClientOnly.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-
-type ModeOptions = 'in-out' | 'out-in' | 'default' | undefined
-
-const props = defineProps({
-  fallback: {
-    type: String,
-    default: '',
-  },
-  appear: {
-    type: Boolean,
-    default: false,
-  },
-  mode: {
-    type: String as PropType<ModeOptions>,
-    default: 'out-in',
-  },
-  enter: {
-    type: String,
-    default: 'animate__fadeIn',
-  },
-  leave: {
-    type: String,
-    default: 'animate__fadeOut',
-  },
-})
-</script>
-
-<template>
-  <ClientOnly>
-    <template #fallback>{{ props.fallback }}</template>
-
-    <Transition
-      :appear="props.appear"
-      :mode="props.mode"
-      :enter-active-class="`animate__animated ${props.enter}`"
-      :leave-active-class="`animate__animated ${props.leave}`"
-    >
-      <slot />
-    </Transition>
-  </ClientOnly>
-</template>
diff --git a/components/content/OgImage.vue b/components/content/OgThumbnail.vue
similarity index 100%
rename from components/content/OgImage.vue
rename to components/content/OgThumbnail.vue
diff --git a/components/ui/Icon.vue b/components/ui/Icon.vue
deleted file mode 100644
index 6dcfe71..0000000
--- a/components/ui/Icon.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import type { IconifyRenderMode } from 'iconify-icon'
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  color: {
-    type: String,
-    default: 'white',
-  },
-  mode: {
-    type: String as PropType<IconifyRenderMode>,
-    default: 'svg',
-  },
-  inline: {
-    type: Boolean,
-    default: false,
-  },
-  width: {
-    type: String,
-    default: '1em',
-  },
-  height: {
-    type: String,
-    default: '1em',
-  },
-  flip: {
-    type: String,
-    default: '',
-  },
-  rotate: {
-    type: [String, Number],
-    default: '',
-  },
-})
-</script>
-
-<template>
-  <iconify-icon
-    class="icon"
-    :icon="props.name"
-    :mode="props.mode"
-    :inline="props.inline"
-    :width="props.width"
-    :height="props.height"
-    :flip="props.flip"
-    :rotate="props.rotate"
-  />
-</template>
-
-<style scoped lang="scss">
-.icon {
-  color: v-bind(color);
-}
-</style>
diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index 1d4a748..97d6422 100644
--- a/pages/blog/[slug].vue
+++ b/pages/blog/[slug].vue
@@ -44,7 +44,7 @@ if (data.value) {
 
   // Generate the article's Open Graph image.
   defineOgImageComponent(
-    'OgImage',
+    'OgThumbnail',
     {
       title: data.value.title,
       description: data.value.description,
@@ -59,55 +59,55 @@ if (data.value) {
   )
 
   // Hydrate the rendered items.
-  // onMounted(() => {
-  //   document.querySelectorAll('pre').forEach((pre) => {
-  //     const icon = document.createElement('iconify-icon')
-  //
-  //     icon.setAttribute('icon', 'mdi:content-copy')
-  //     icon.setAttribute('inline', 'true')
-  //
-  //     icon.classList.add('button')
-  //
-  //     pre.appendChild(icon)
-  //   })
-  //
-  //   document
-  //     .querySelectorAll('code:not(pre *), pre > iconify-icon.button')
-  //     .forEach((code) => {
-  //       if (code instanceof HTMLElement) {
-  //         code.onclick = () => {
-  //           const area = document.createElement('textarea')
-  //
-  //           area.textContent =
-  //             code.nodeName && code.nodeName.toLowerCase() === 'code'
-  //               ? code.textContent
-  //               : code.parentElement!.textContent
-  //
-  //           // It's necessary to create the textarea element every time you copy to get access to the select() method.
-  //           area.setSelectionRange(0, 99999) // An iOS gotcha.
-  //           area.select()
-  //
-  //           // Copy the text inside the textarea.
-  //           navigator.clipboard.writeText(area.value)
-  //
-  //           // TODO: Alert the user text has been successfully copied.
-  //
-  //           // Remove the textarea element.
-  //           area.remove()
-  //         }
-  //       }
-  //     })
-  // })
-  //
-  // onUnmounted(() => {
-  //   document.querySelectorAll('code').forEach((code) => {
-  //     code.onclick = null
-  //   })
-  //
-  //   document.querySelectorAll('pre').forEach((pre) => {
-  //     pre.querySelector('.clipboard')?.remove()
-  //   })
-  // })
+  onMounted(() => {
+    document.querySelectorAll('pre').forEach((pre) => {
+      const icon = document.createElement('iconify-icon')
+
+      icon.setAttribute('icon', 'mdi:content-copy')
+      icon.setAttribute('inline', 'true')
+
+      icon.classList.add('button')
+
+      pre.appendChild(icon)
+    })
+
+    document
+      .querySelectorAll('code:not(pre *), pre > iconify-icon.button')
+      .forEach((code) => {
+        if (code instanceof HTMLElement) {
+          code.onclick = () => {
+            const area = document.createElement('textarea')
+
+            area.textContent =
+              code.nodeName && code.nodeName.toLowerCase() === 'code'
+                ? code.textContent
+                : code.parentElement!.textContent
+
+            // It's necessary to create the textarea element every time you copy to get access to the select() method.
+            area.setSelectionRange(0, 99999) // An iOS gotcha.
+            area.select()
+
+            // Copy the text inside the textarea.
+            navigator.clipboard.writeText(area.value)
+
+            // TODO: Alert the user text has been successfully copied.
+
+            // Remove the textarea element.
+            area.remove()
+          }
+        }
+      })
+  })
+
+  onUnmounted(() => {
+    document.querySelectorAll('code').forEach((code) => {
+      code.onclick = null
+    })
+
+    document.querySelectorAll('pre').forEach((pre) => {
+      pre.querySelector('.clipboard')?.remove()
+    })
+  })
 }
 
 useHead({
@@ -140,56 +140,93 @@ useHead({
   </div>
   <article
     v-else-if="status === 'success' && data"
-    class="flex-grow post fade-mask-sm flex flex-col gap-4 overflow-x-hidden overflow-y-auto sm:py-4 sm:pe-4"
+    class="flex-grow post snap-normal fade-mask-sm flex flex-col gap-4 overflow-x-hidden overflow-y-auto sm:py-4 sm:pe-4"
   >
-    <div
-      class="relative flex flex-col justify-end items-start w-full min-h-[400px] rounded-xl accent-text-shadow post-preamble"
-      :style="{ backgroundImage: 'url(' + thumbnail + ')' }"
-    >
-      <div class="p-2">
-        <h3>{{ data.title }}</h3>
-        <div class="flex flex-row flex-wrap gap-x-2 gap-y-0">
-          <div class="flex flex-row items-center gap-2">
-            <iconify-icon icon="mdi:calendar" />
-            <small class="whitespace-nowrap">
-              <strong>
-                {{ formatDate(data.created, 'LLLL do, y &ndash; HH:mm') }}
-              </strong>
-            </small>
-          </div>
-          <div class="flex flex-row items-center gap-2">
-            <iconify-icon icon="mdi:clock-outline" />
-            <small class="whitespace-nowrap">
-              <strong>
-                {{ data!.readingTime.text.split(' ')[0] + ' minutes to read' }}
-              </strong>
-            </small>
-          </div>
-        </div>
-      </div>
-      <NuxtLink
-        to="/blog"
-        class="absolute top-0 left-0 p-2 text-inherit no-underline"
-      >
+    <div class="grid-thumbnail grid max-w-[768px] snap-end">
+      <img
+        draggable="false"
+        :src="thumbnail!"
+        alt="Thumbnail"
+        class="grid-thumbnail-image object-cover object-center rounded-xl aspect-[16/9] select-none"
+      />
+      <NuxtLink to="/blog" class="grid-thumbnail-start button-back p-2">
         <iconify-icon
           icon="icon-park-solid:back"
           width="2em"
           height="2em"
-          style="color: lavender"
+          class="drop-shadow text-pink-200"
         />
       </NuxtLink>
       <NuxtLink
+        class="grid-thumbnail-end button-twitter p-2"
         :href="`https://twitter.com/share?url=${config.url}/blog/${slug}&text=${data.title}&hashtags=${data.tags.slice(0, 3).join(',').replace(/ /g, '')}`"
         target="_blank"
-        class="absolute top-0 right-0 p-2"
       >
-        <iconify-icon icon="logos:twitter" width="2em" height="2em" />
+        <iconify-icon
+          icon="logos:twitter"
+          width="2em"
+          height="2em"
+          class="drop-shadow"
+        />
       </NuxtLink>
+      <div
+        class="grid-thumbnail-title accent-fade w-full rounded-b-lg p-2 mt-16"
+      >
+        <h3 class="mb-1">{{ data.title }}</h3>
+        <div class="flex flex-row flex-wrap gap-x-2 gap-y-0">
+          <small class="flex flex-row items-center gap-1 whitespace-nowrap">
+            <iconify-icon icon="mdi:calendar" inline />
+            <strong>
+              {{ formatDate(data.created, 'HH:mm • LLLL do, y') }}
+            </strong>
+          </small>
+          <small class="flex flex-row items-center gap-1 whitespace-nowrap">
+            <iconify-icon icon="mdi:clock-outline" inline />
+            <strong>
+              {{ data!.readingTime.text.split(' ')[0] + ' minutes to read' }}
+            </strong>
+          </small>
+        </div>
+      </div>
     </div>
-    <div class="post-content">
-      <hr class="accent-text accent-gradient border-0 h-px" />
+    <section class="page snap-start">
       <ContentRenderer :value="data" />
-    </div>
+    </section>
   </article>
   <NotFound v-else />
 </template>
+
+<style scoped lang="scss">
+.grid-thumbnail {
+  &-image {
+    grid-column: 1;
+    grid-row: 1;
+
+    place-self: start center;
+
+    max-width: clamp(1px, 100%, 768px);
+    min-height: 100%;
+  }
+
+  &-title {
+    grid-column: 1;
+    grid-row: 1;
+
+    place-self: end center;
+  }
+
+  &-start {
+    grid-column: 1;
+    grid-row: 1;
+
+    place-self: start start;
+  }
+
+  &-end {
+    grid-column: 1;
+    grid-row: 1;
+
+    place-self: start end;
+  }
+}
+</style>
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index 59bb5d6..5652198 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -64,43 +64,48 @@ useHead({
             class="text-inherit hover:text-inherit no-underline"
           >
             <article
-              class="post-box flex flex-col md:flex-row gap-4 rounded-xl h-full"
+              class="post-box relative flex flex-col md:flex-row gap-4 p-2 border-2 rounded-xl transition-ease"
             >
-              <div class="post-thumb">
-                <img
-                  draggable="false"
-                  :src="
-                    post.thumbnail ??
-                    `/images/blog/thumbnails/${post._path!.split('/').at(-1)}.png`
-                  "
-                  :alt="post.title"
-                  class="rounded-xl"
-                />
-              </div>
-              <div class="w-full">
-                <h3 class="post-title">{{ post.title }}</h3>
-                <p class="post-description mb-0">{{ post.description }}</p>
+              <img
+                draggable="false"
+                :src="
+                  post.thumbnail ??
+                  `/images/blog/thumbnails/${post._path!.split('/').at(-1)}.png`
+                "
+                :alt="post.title"
+                class="md:flex-grow-[2] md:basis-0 xl:flex-grow-1 object-cover object-center aspect-[16/9] w-fit md:w-0 xl:w-fit h-full max-h-[300px] rounded-xl"
+              />
+              <div class="md:flex-grow-[3] md:basis-0 xl:flex-grow-1 w-full">
+                <h3 class="post-title md:line-clamp-2 md:overflow-ellipsis">
+                  {{ post.title }}
+                </h3>
+                <p
+                  class="post-description mb-0 md:line-clamp-4 md:overflow-ellipsis"
+                >
+                  {{ post.description }}
+                </p>
 
-                <div class="post-tags flex flex-row flex-wrap gap-2 py-2">
-                  <span
+                <div class="flex flex-row flex-wrap gap-2 py-2">
+                  <small
                     v-for="(tag, index) in post.tags.slice(0, 3)"
                     :key="index"
-                    class="whitespace-nowrap"
+                    class="post-tag px-2 py-1 rounded-xl border whitespace-nowrap"
                   >
                     {{ tag }}
-                  </span>
-                  <span v-if="post.tags.length > 3" class="whitespace-nowrap">
+                  </small>
+                  <small
+                    v-if="post.tags.length > 3"
+                    class="post-tag px-2 py-1 rounded-xl border whitespace-nowrap"
+                  >
                     {{ post.tags.length - 3 }} more
-                  </span>
+                  </small>
                 </div>
 
-                <hr class="accent-text accent-gradient border-0 h-px" />
-
                 <div class="post-details py-2">
                   <div class="flex flex-row items-center gap-2">
                     <iconify-icon icon="mdi:calendar" />
                     <small class="whitespace-nowrap">
-                      {{ formatDate(post.created, 'LLLL do, y &ndash; HH:mm') }}
+                      {{ formatDate(post.created, 'HH:mm • LLLL do, y') }}
                     </small>
                   </div>
                   <div
@@ -109,14 +114,14 @@ useHead({
                   >
                     <iconify-icon icon="mdi:pencil" />
                     <small class="whitespace-nowrap">
-                      {{ formatDate(post.updated, 'LLLL do, y &ndash; HH:mm') }}
+                      {{ formatDate(post.updated, 'HH:mm • LLLL do, y') }}
                     </small>
                   </div>
                 </div>
               </div>
 
               <div
-                class="post-pocket absolute bottom-0 right-0 uppercase rounded-tl-xl flex flex-row items-center gap-2 p-2"
+                class="post-pocket border-l border-t absolute bottom-0 right-0 uppercase rounded-tl-xl flex flex-row items-center gap-2 p-2"
               >
                 <iconify-icon icon="mdi:clock-outline" />
                 <small class="whitespace-nowrap font-mono font-small">