1 files changed, 188 insertions, 10 deletions

diff --git a/themes/hugo-book/assets/_shortcodes.scss b/themes/hugo-book/assets/_shortcodes.scss
index 41a8e3e..5a09eba 100644
--- a/themes/hugo-book/assets/_shortcodes.scss
+++ b/themes/hugo-book/assets/_shortcodes.scss
@@ -1,4 +1,5 @@
 .markdown {
+
   // {{< expand "Label" "icon" >}}
   .book-expand {
     margin-top: $padding-16;
@@ -20,7 +21,7 @@
       padding: $padding-16;
     }
 
-    input[type="checkbox"]:checked + .book-expand-content {
+    input[type="checkbox"]:checked+.book-expand-content {
       display: block;
     }
   }
@@ -53,31 +54,44 @@
       display: none;
     }
 
-    input[type="radio"]:checked + label {
+    input[type="radio"]:checked+label {
       border-bottom: $padding-1 solid var(--color-link);
     }
-    input[type="radio"]:checked + label + .book-tabs-content {
+
+    input[type="radio"]:checked+label+.book-tabs-content {
       display: block;
     }
-    input[type="radio"]:focus + label {
+
+    input[type="radio"]:focus+label {
       @include outline;
     }
   }
 
   // {{< columns >}}
   .book-columns {
-    margin-left: -$padding-16;
-    margin-right: -$padding-16;
+    gap: $padding-16;
 
-    > div {
+    >div {
       margin: $padding-16 0;
       min-width: $body-min-width * 0.66;
-      padding: 0 $padding-16;
+    }
+
+    >ul {
+      list-style: none;
+      display: flex;
+      padding: 0;
+      flex-wrap: wrap;
+      gap: $padding-16;
+
+      >li {
+        flex: 1 1;
+        min-width: $body-min-width * 0.66;
+      }
     }
   }
 
   // {{< button >}}
-  a.book-btn {
+  a.book-btn[href] {
     display: inline-block;
     font-size: $font-size-14;
     color: var(--color-link);
@@ -101,4 +115,168 @@
       }
     }
   }
-}
+
+  // {{< badge >}}
+  .book-badge {
+    display: inline-block;
+    font-size: $font-size-14;
+    font-weight: $body-font-weight;
+    vertical-align: middle;
+    border-radius: $border-radius;
+    overflow: hidden;
+    text-wrap: nowrap;
+    color: var(--body-font-color);
+
+    span {
+      display: inline-block;
+      padding: 0 $padding-8;
+    }
+
+    span.book-badge-title {
+      --background-opacity: 0.1;
+    }
+
+    span.book-badge-value {
+      --background-opacity: 1;
+      color: var(--body-background);
+    }
+
+    @each $name, $color in $hint-colors {
+      &.#{$name} span {
+        background-color: rgba($color, var(--background-opacity));
+      }
+    }
+  }
+
+  // {{< steps >}}
+  .book-steps {
+    position: relative;
+
+    >ol {
+      counter-reset: steps;
+      list-style: none;
+      padding-inline-start: $padding-16 + $padding-4;
+      margin-top: $padding-16 * 2;
+
+      >li::before {
+        content: counter(steps);
+        counter-increment: steps;
+
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        left: $padding-8;
+
+        height: $padding-16 * 1.5;
+        width: $padding-16 * 1.5;
+        padding: $padding-4;
+        border-radius: $padding-8;
+
+        white-space: nowrap;
+        line-height: $padding-16;
+
+        color: var(--body-background);
+        background: var(--gray-500);
+        outline: $padding-4 solid var(--body-background);
+      }
+
+      >li {
+        @extend .markdown-inner;
+        border-inline-start: $padding-1 solid var(--gray-500);
+        padding-inline-start: $padding-16 * 3;
+        
+        padding-bottom: $padding-16 * 2;
+      }
+
+      >li:last-child {
+        border: 0;
+      }
+    }
+  }
+
+  // {{< card >}}, {{< figure >}}
+  .book-card, figure {
+    display: block;
+    overflow: hidden;
+    height: 100%;
+    border-radius: $border-radius;
+    border: $padding-1 solid var(--gray-200);
+    
+    &[href], &[href]:visited {
+      color: var(--body-font-color);
+    }
+    &[href]:hover {
+      text-decoration: none;
+      background: var(--gray-100);
+    }
+
+    > img {
+      width: 100%;
+      display: block;
+      aspect-ratio: 4 / 3;
+      object-fit: cover;
+    }
+
+    .markdown-inner {
+      padding: $padding-16;
+    }
+
+    figcaption {
+      @extend .markdown-inner;
+      padding: $padding-16;
+    }
+  }
+
+  .book-image {
+    input + img {
+      cursor: zoom-in;
+      transition: transform 0.2s ease-in-out;
+    }
+
+    input:checked + img {
+      position: fixed;
+
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      
+      background: var(--body-background);
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+      
+      z-index: 1;
+      cursor: zoom-out;
+      padding: $padding-16;
+    }
+  }
+
+  .book-hero {
+    min-height: $padding-16 * 24;
+    align-content: center;
+
+    h1 {
+      font-size: 3em;
+    }
+  }
+
+  .book-codeblock-filename {
+    background: var(--gray-200);
+    font-size: $font-size-14;
+    margin-top: $padding-16;
+    padding: $padding-4 $padding-16;
+    border-start-start-radius: $border-radius;
+    border-start-end-radius: $border-radius;
+
+    a {
+      color: var(--body-font-color);
+    }
+
+    + .highlight pre {
+      margin-top: 0;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+  }
+}
\ No newline at end of file