fix(docs): improve docs layout

Author: iamgio

quarkdown-html/src/main/resources/render/theme/components/_viewport.scss

@@ -116,7 +116,7 @@ body.quarkdown {
       --aside-width: 20vw;
       --aside-outer-margin: 32px;
 
-      padding-left: 16px;
+      padding-left: 20px;
 
       &:first-child {
         margin-left: 0;

quarkdown-html/src/main/resources/render/theme/global.scss

@@ -36,6 +36,7 @@
   // Colors
   --qd-background-color: inherit; // Background color
   --qd-main-color: inherit; // Main text color
+  --qd-main-color-muted: color-mix(in srgb, var(--qd-main-color) 20%, transparent); // Muted main text color
   --qd-primary-color: var(--qd-main-color); // Primary/accent color
   --qd-color-on-primary: var(--qd-background-color); // Text color on primary background color
   --qd-heading-color: var(--qd-main-color); // Heading (titles) color

quarkdown-html/src/main/resources/render/theme/layout/hyperlegible.scss

@@ -2,8 +2,8 @@
 @use "util/progressive-heading-margins" as *;
 @use "util/gh-tables" as *;
 @use "util/minimal-toc" as *;
-//@use "util/docs-navigation" as docs-navigation;
-//@use "util/docs-headings-border" as *;
+@use "util/docs-navigation" as docs-navigation;
+@use "util/docs-headings-border" as *;
 @use "../components/util/location-selectors" as location-selectors;
 
 :root {
@@ -22,12 +22,16 @@
   @include progressive-heading-margins($multiplier: 1.1, $bottomAddition: 0.4em);
   @include gh-tables;
   @include minimal-toc;
-  //@include docs-headings-border;
+  @include docs-headings-border;
 
   h4, h5 {
     font-weight: 600;
   }
 
+  a:hover {
+    text-decoration: underline;
+  }
+
   blockquote {
     border-left: 2px solid;
     padding-left: 1.5em;
@@ -41,6 +45,10 @@
     }
   }
 
+  pre {
+    --qd-block-margin: 3em;
+  }
+
   .box > header > h4 {
     gap: 0.4em;
   }

quarkdown-html/src/main/resources/render/theme/layout/util/_gh-tables.scss

@@ -9,7 +9,7 @@
 
     th, td {
       padding: 8px 14px;
-      border: 1px solid color-mix(in srgb, var(--qd-main-color) 20%, transparent) !important;
+      border: 1px solid var(--qd-main-color-muted) !important;
     }
 
     th {