Blog slowly looming over

assets/styles/main.scss

@@ -244,6 +244,10 @@ body {
     border-radius: 8px;
     background-color: rgb(255 255 255 / 15%);
   }
+
+  &::-webkit-scrollbar-button {
+    color: white;
+  }
 }
 
 @media (prefers-color-scheme: light) {
@@ -307,6 +311,9 @@ body {
 }
 
 .post {
+  scroll-snap-type: both mandatory;
+  scroll-snap-stop: normal;
+
   &-box {
     position: relative;
 
@@ -363,16 +370,52 @@ body {
     }
   }
 
-  &-details {
-  }
-
   &-preamble {
-    &-thumb {
-      max-width: 800px;
+    display: flex;
+    flex-direction: column;
+
+    justify-content: flex-end;
+    align-items: flex-start;
+
+    position: relative;
+
+    width: 100%;
+    min-height: 400px;
+
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-attachment: fixed;
+
+    border-radius: 1em;
+
+    scroll-snap-align: end;
+
+    text-shadow: black 1px 1px 7px;
+
+    iconify-icon {
+      filter: drop-shadow(1px 2px 3px rgb(0 0 0 / 100%));
+    }
+
+    &-share {
+      position: absolute;
+
+      top: 0;
+      left: 0;
+    }
+
+    &-control {
+      position: absolute;
+
+      top: 0;
+      right: 0;
+
     }
   }
 
   &-content {
+    scroll-snap-align: start;
+
     :is(p, li) {
       a {
         @extend %link;
@@ -383,6 +426,21 @@ body {
           color: royalblue;
         }
       }
+
+      code {
+        padding: 0.25em;
+
+        border-radius: 0.5em;
+
+        cursor: pointer;
+        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) {
@@ -399,8 +457,90 @@ body {
     }
 
     img {
+      max-width: 100%;
       max-height: 400px;
     }
+
+    blockquote {
+      padding: 0.75em 1em;
+
+      border-left: 0.25em solid rgb(153 153 255 / 60%);
+      border-top-right-radius: 0.5em;
+      border-bottom-right-radius: 0.5em;
+
+      background-color: rgb(153 153 255 / 10%);
+
+      transition: 0.3s ease;
+
+      &:hover {
+        border-left-color: rgb(153 153 255 / 100%);
+        background-color: rgb(153 153 255 / 15%);
+      }
+
+      :last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    pre {
+      font-size: 14px;
+      padding: 1em;
+
+      border-radius: 0.5em;
+      background-color: rgb(83 35 162 / 5%);
+
+      position: relative;
+
+      overflow-x: auto;
+
+      code {
+        counter-reset: step;
+        counter-increment: step 0;
+
+        scroll-padding: 0.5em;
+
+        .line::before {
+          content: counter(step);
+          counter-increment: step;
+
+          display: inline-block;
+
+          text-align: right;
+
+          color: rgb(238 246 250 / 40%);
+
+          width: 1rem;
+          margin-right: 1.5rem;
+        }
+      }
+
+      .button {
+        position: absolute;
+
+        top: 0;
+        right: 0;
+
+        margin: 0.5em;
+        padding: 0.5em;
+
+        cursor: pointer;
+
+        background-color: rgb(153 153 255 / 10%);
+
+        border: 1px solid rgb(153 153 255 / 60%);
+        border-radius: 0.5em;
+
+        opacity: 0;
+
+        transition: 0.3s ease;
+      }
+
+      &:hover {
+        .button {
+          opacity: 1;
+        }
+      }
+    }
   }
 }
 
@@ -470,7 +610,7 @@ body {
     &-description {
       display: -webkit-box;
 
-      -webkit-line-clamp: 2;
+      -webkit-line-clamp: 4;
       -webkit-box-orient: vertical;
 
       text-overflow: ellipsis;