Introduce landing page and card shortcode

assets/_defaults.scss

@@ -28,9 +28,9 @@ $hint-colors: (
   warning: #f59e42,
   danger: #d84747,
 
-  note: #64748b,
+  note: #4486dd,
   tip: #3bad3b,
-  important: #4486dd,
+  important: #8144dd,
   caution: #d84747
 ) !default;
 

assets/_main.scss

@@ -217,6 +217,22 @@ body[dir="rtl"] .book-menu {
     height: 1.5em;
     width: 1.5em;
   }
+
+  > ul {
+    margin: 0;
+    padding: 0 $padding-16;
+    display: flex;
+    gap: $padding-16;
+    justify-content: end;
+
+    li {
+      display: inline-block;
+    }
+  }
+}
+
+.book-kind-home .book-header {
+  display: block;
 }
 
 .book-search {
@@ -338,7 +354,7 @@ body[dir="rtl"] .book-menu {
   }
 
   .book-header {
-    display: block;
+    display: block !important;
   }
 
   #menu-control:focus ~ main label[for="menu-control"] {

assets/_shortcodes.scss

@@ -132,17 +132,17 @@
     }
 
     span.book-badge-title {
-      background-color: var(--body-background);
-      opacity: 0.9;
+      --background-opacity: 0.1;
     }
 
     span.book-badge-value {
+      --background-opacity: 1;
       color: var(--body-background);
     }
 
     @each $name, $color in $hint-colors {
-      &.#{$name} {
-        background-color: $color;
+      &.#{$name} span {
+        background-color: rgba($color, var(--background-opacity));
       }
     }
   }
@@ -192,4 +192,41 @@
       }
     }
   }
+
+  // {{< card >}}
+  .book-card {
+    display: block;
+    overflow: hidden;
+    height: 100%;
+    border-radius: $border-radius;
+    border: $padding-1 solid var(--gray-200);
+    
+    &[href]:hover {
+      text-decoration: none;
+      background: var(--gray-100);
+    }
+    &[href]:visited {
+      color: var(--body-font-color);
+    }
+
+    img {
+      display: block;
+      object-fit: contain;
+      aspect-ratio: 4 / 3;
+      object-fit: cover;
+    }
+
+    .markdown-inner {
+      padding: $padding-16;
+    }
+  }
+
+  .book-hero {
+    min-height: $padding-16 * 24;
+    align-content: center;
+
+    h1 {
+      font-size: 3em;
+    }
+  }
 }