1 files changed, 52 insertions, 21 deletions

diff --git a/documentation/themes/beastie/assets/styles/documentation.scss b/documentation/themes/beastie/assets/styles/documentation.scss
index 63fb4e03a9..678e3c4cbc 100644
--- a/documentation/themes/beastie/assets/styles/documentation.scss
+++ b/documentation/themes/beastie/assets/styles/documentation.scss
@@ -1,6 +1,6 @@
 /*
- * Copyright (c) 2001-2022, The FreeBSD Documentation Project
- * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
+ * Copyright (c) 1994-2023, The FreeBSD Documentation Project
+ * Copyright (c) 2021-2023, Sergio Carlavilla <carlavilla@FreeBSD.org>
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -26,7 +26,7 @@
  *
  */
 
-.articles-books-list {
+.documents-list {
   list-style: none;
   padding-left: 10px;
 
@@ -47,7 +47,11 @@
 
 .main-wrapper-article {
   display: flex;
-  margin-top: var(--header-height);
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--max-width);
+  width: 100%;
 
   .article {
     flex-grow: 1;
@@ -60,12 +64,20 @@
     padding-left: 1.5rem;
     padding-right: 1.5rem;
     transition: .2s ease-in-out;
+
+    h1 {
+      margin: .8rem 0;
+    }
   }
 }
 
 .main-wrapper-book {
   display: flex;
-  margin-top: var(--header-height);
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--max-width);
+  width: 100%;
 
   .book-menu {
     flex: 0 0 16rem;
@@ -84,8 +96,21 @@
 
       h3 {
         margin: 1rem 0;
-        border-bottom: none;
         padding-left: .5rem;
+        border-bottom: none;
+      }
+
+      #search-book {
+        margin-top: 1.5rem;
+        margin-bottom: .75rem;
+        border: 1px solid #CCC;
+        border-radius: 4px;
+        box-shadow: inset 0 1px 3px #DDD;
+        box-sizing: border-box;
+        background-color: #FCFCFD;
+        color: #444;
+        width: 95%;
+        margin-left: .5rem;
       }
 
       input.toggle ~ .icon::after {
@@ -113,11 +138,13 @@
       #MenuContents {
         position: sticky;
         overflow: auto;
-        max-height: calc(90vh);
+        max-height: calc(100vh - 8rem);
+        line-height: 2;
 
         ul {
-          margin: 0 0 0 .75rem;
+          margin: 0;
           padding: 0;
+          padding-left: .5rem;
 
           li {
             list-style: none;
@@ -126,12 +153,15 @@
             label {
               position: absolute;
               cursor: pointer;
+              font-size: 0.875rem;
             }
 
             a {
               color: var(--global-font-color);
               display: block;
               padding-left: 1rem;
+              padding-right: .5rem;
+              font-size: 0.875rem;
             }
           }
         }
@@ -144,8 +174,7 @@
     padding: var(--documentation-padding);
     width: 90vw;
     min-width: 20rem;
-    margin-left: auto;
-    margin-right: auto;
+    max-width: var(--max-width);
     padding-left: 1.5rem;
     padding-right: 1.5rem;
     transition-duration: 0.2s;
@@ -173,6 +202,10 @@
 
     .buttons {
       display: flex;
+      align-content: center;
+      align-items: center;
+      justify-content: center;
+      flex-direction: row;
 
       .prev, .home, .next {
         display: flex;
@@ -185,16 +218,15 @@
       }
 
       .home {
+        margin-left: auto;
+        margin-right: auto;
+
         i {
           padding-left: .2rem;
           padding-right: .2rem;
         }
       }
 
-      .home, .next {
-        margin-left: auto;
-      }
-
       .container {
         display: flex;
         flex-direction: column;
@@ -238,21 +270,19 @@
 
         li {
           margin: 0;
+          margin-bottom: .5rem;
           list-style: none;
 
           a {
             color: var(--global-font-color);
             display: inline-block;
-            padding: .25rem 0 .25rem .5rem;
+            padding: .25rem .5rem .25rem .5rem;
             margin-left: .5rem;
+            font-size: 0.875rem;
             text-decoration: none;
 
-            i {
-              margin-right: .5rem;
-            }
-
             &:hover {
-              font-weight: 500;
+              text-decoration: underline;
             }
           }
         }
@@ -275,7 +305,8 @@
           a {
             color: var(--global-font-color);
             display: inline-block;
-            padding: .25rem 0 .25rem .5rem;
+            padding: .25rem .5rem .25rem .5rem;
+            font-size: 0.875rem;
           }
 
           i {