1 files changed, 85 insertions, 28 deletions

diff --git a/themes/hugo-book/assets/_main.scss b/themes/hugo-book/assets/_main.scss
index 8b4e687..8c21806 100644
--- a/themes/hugo-book/assets/_main.scss
+++ b/themes/hugo-book/assets/_main.scss
@@ -10,29 +10,27 @@ body {
   color: var(--body-font-color);
   background: var(--body-background);
 
-  // letter-spacing: 0.33px;
   font-weight: $body-font-weight;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  box-sizing: border-box;
-  * {
-    box-sizing: inherit;
-  }
 }
 
 h1,
 h2,
 h3,
 h4,
-h5 {
+h5,
+h6 {
   font-weight: $body-font-weight;
 }
 
 a {
   text-decoration: none;
-  color: var(--color-link);
+
+  &[href] {
+    color: var(--color-link);
+  }
 }
 
 img {
@@ -43,17 +41,17 @@ img {
   @include outline;
 }
 
-aside nav ul {
+nav ul {
   padding: 0;
   margin: 0;
   list-style: none;
 
   li {
-    margin: 1em 0;
     position: relative;
   }
 
-  a {
+  a, span {
+    padding: .5em 0;
     display: block;
   }
 
@@ -89,7 +87,6 @@ ul.pagination {
 a .book-icon {
   height: 1em;
   width: 1em;
-  margin-inline-end: .5em;
 }
 
 .book-brand {
@@ -136,10 +133,12 @@ a .book-icon {
 
   input.toggle + label::after {
     content: "▸";
+    align-self: center;
+    transition: transform 0.1s ease-in-out;
   }
 
   input.toggle:checked + label::after {
-    content: "▾";
+    transform: rotate(90deg);
   }
 }
 
@@ -150,12 +149,12 @@ body[dir="rtl"] .book-menu {
   }
 
   input.toggle:checked + label::after {
-    content: "▾";
+    transform: rotate(-90deg);
   }
 }
 
 .book-section-flat {
-  margin: $padding-16 * 2 0;
+  margin: $padding-16 0;
 
   > a,
   > span,
@@ -175,7 +174,7 @@ body[dir="rtl"] .book-menu {
 }
 
 .book-post {
-  margin-bottom: $padding-16 * 2;
+  margin-bottom: $padding-16 * 4;
 
   .book-post-date img {
     height: 1em;
@@ -183,9 +182,19 @@ body[dir="rtl"] .book-menu {
     margin-inline-end: .5em;
   }
 
-  .book-post-content > :first-child {
+  .book-post-content {
     margin-top: $padding-16;
   }
+
+  .book-post-thumbnail {
+    flex: 0 0 34%;
+
+    img {
+      width: 100%;
+      aspect-ratio: 4 / 3;
+      object-fit: cover;
+    }
+  }
 }
 
 .book-header {
@@ -208,9 +217,36 @@ body[dir="rtl"] .book-menu {
   }
 }
 
+.book-layout-landing .book-header {
+  display: block;
+  position: relative;
+  z-index: 1;
+
+  nav > ul {
+    display: flex;
+    gap: $padding-16;
+    justify-content: end;
+
+    > li {
+      display: block;
+      white-space: nowrap;
+
+      > ul {
+        display: none;
+        position: absolute;
+        padding: 0;
+      }
+
+      &:hover > ul {
+        display: block;
+      }
+    }
+  }
+}
+
 .book-search {
   position: relative;
-  margin: $padding-16 0;
+  margin: $padding-8 0;
   border-bottom: 1px solid transparent;
 
   input {
@@ -244,6 +280,10 @@ body[dir="rtl"] .book-menu {
     @include spin(1s);
   }
 
+  ul a {
+    padding-bottom: 0;
+  }
+
   small {
     opacity: 0.5;
   }
@@ -273,6 +313,14 @@ body[dir="rtl"] .book-menu {
 .book-footer {
   padding-top: $padding-16;
   font-size: $font-size-14;
+
+  a {
+    margin: $padding-8 0;
+  }
+
+  a.flex {
+    gap: $padding-8;
+  }
 }
 
 .book-comments {
@@ -280,30 +328,30 @@ body[dir="rtl"] .book-menu {
 }
 
 .book-languages {
-  margin-block-end: $padding-16 * 2;
+  margin-bottom: $padding-16;
+
+  span {
+    padding: 0;
+  }
 
   ul {
     padding-inline-start: 1.5em;
   }
+
+  a.flex {
+    gap: 0.5em;
+  }
 }
 
 // Responsive styles
 .book-menu-content,
-.book-toc-content,
-.book-page,
-.book-header aside,
-.markdown {
+.book-toc-content {
   transition: 0.2s ease-in-out;
   transition-property: transform, margin, opacity, visibility;
   will-change: transform, margin, opacity;
 }
 
 @media screen and (max-width: $mobile-breakpoint) {
-  #menu-control,
-  #toc-control {
-    display: inline;
-  }
-
   .book-menu {
     visibility: hidden;
     margin-inline-start: -$menu-width;
@@ -318,6 +366,15 @@ body[dir="rtl"] .book-menu {
     display: block;
   }
 
+  .book-post-container {
+    flex-direction: column-reverse;
+  }
+
+  #menu-control,
+  #toc-control {
+    display: inline;
+  }
+
   #menu-control:focus ~ main label[for="menu-control"] {
     @include outline;
   }