Created blog page, many improvements

assets/styles/main.scss

@@ -20,6 +20,10 @@
   --animate-duration: 1s;
   --animate-delay: 0.75s;
   --animate-repeat: 1;
+  --bs-font-sans-serif: 'Lato', 'Times New Roman';
+  --bs-font-monospace: 'JetBrains Mono', 'Courier New';
+  --bs-body-font-size: 18px;
+  --bs-body-line-height: 1.5;
 }
 
 // The HTML page.
@@ -47,9 +51,6 @@ body {
 
   color: white;
 
-  font-family: Lato, sans-serif;
-  font-size: 18px;
-
   height: 100%;
 }
 
@@ -106,6 +107,11 @@ body {
   font-weight: 700;
 }
 
+.pre-wrap {
+  white-space: pre-wrap;
+  word-break: keep-all;
+}
+
 // Query-overridable classes.
 .background {
   background-color: rgb(0 0 0 / 50%);
@@ -271,6 +277,73 @@ body {
   margin: auto;
 }
 
+.post {
+  &-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 {
+    position: absolute;
+
+    bottom: 0;
+    right: 0;
+
+    padding: 0.5rem;
+
+    text-transform: uppercase;
+    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%);
+
+    border-top-left-radius: var(--bs-border-radius-xl);
+    border-bottom-right-radius: var(--bs-border-radius-xl);
+  }
+
+  &-thumb {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 100%;
+
+    > img {
+      width: 100%;
+      height: 280px;
+      object-fit: cover;
+      border-radius: 4px;
+    }
+  }
+
+  &-preamble {
+    &-thumb {
+      max-width: 800px;
+    }
+  }
+
+  &-content {
+    a {
+      @extend %link;
+
+
+      padding-left: 0.5rem;
+
+    }
+  }
+}
+
 // Dynamic classes.
 @include bootstrap.media-breakpoint-up(sm) {
   #ender-app {
@@ -282,7 +355,7 @@ body {
   }
 
   .dimensions {
-    width: 80%;
+    width: 90%;
     min-height: fit-content;
     max-height: 90%;
   }
@@ -310,23 +383,56 @@ body {
 }
 
 @include bootstrap.media-breakpoint-up(md) {
-  /* TODO: Fill it up :) */
+  .post {
+    &-box {
+      padding-bottom: 0.6942rem;
+    }
+
+    &-thumb {
+      min-width: 352px;
+
+      > img {
+        max-width: 352px;
+        height: 198px;
+      }
+    }
+
+    &-title {
+      display: -webkit-box;
+
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &-description {
+      display: -webkit-box;
+
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
 }
 
 @include bootstrap.media-breakpoint-up(lg) {
   .dimensions {
-    width: 70%;
+    width: 75%;
   }
 }
 
 @include bootstrap.media-breakpoint-up(xl) {
   .dimensions {
-    width: 40%;
+    width: 60%;
   }
 }
 
 @include bootstrap.media-breakpoint-up(xxl) {
   .dimensions {
-    width: 30%;
+    width: 50%;
   }
 }

assets/styles/vuetify.scss

@@ -0,0 +1,6 @@
+@use 'vuetify/settings' with (
+  $utilities: false,
+  $color-pack: false,
+
+  $button-banner-actions-padding: 0 69px,
+);