Content: Adjust horizontal spacing to improve readability + small UI touchups (#431)

Author: lamATnginx

assets/css/v2/style.css

@@ -309,7 +309,7 @@ textarea:not([rows]) {
 
   --header-height: 4rem;
 
-  --sidebar-width: min(24rem, 100%);
+  --sidebar-width: min(22rem, 100%);
   --sidebar-item-padding-lr: 0.75rem;
   --sidebar-item-padding-tb: 0.25rem;
   --content-max-width: 88rem;
@@ -442,7 +442,7 @@ ol li:last-child {
     }
   }
   .content {
-    padding: 0 var(--space-l) 2rem;
+    padding: 0 var(--space-xl) 2rem;
   }
 
   .header__logo-small {
@@ -749,7 +749,7 @@ ol li:last-child {
   background: oklch(var(--color-background));
   box-sizing: border-box;
   transform: translateX(0);
-  padding: 0 0 var(--space-s) var(--space-s);
+  padding-inline-start: var(--space-s);
 
   .sidebar__container {
     display: flex;
@@ -1593,6 +1593,7 @@ nav.sidebar.sidebar__mobile-open {
     transition:
       background-color 0.2s ease,
       color 0.2s ease;
+    text-wrap: wrap;
 
     &:hover {
       background-color: oklch(var(--color-brand) / 0.08);
@@ -1857,6 +1858,7 @@ a:hover {
         display: flex;
         flex-direction: row;
         gap: 1rem;
+        word-break: break-word;
         align-items: flex-start;
         color: oklch(var(--color-brand));
 

layouts/partials/banner.html

@@ -10,7 +10,7 @@
       {{- if isset . "md" -}}
           <!-- Show markdown if "md" is provided -->
           {{- $bannerPage := readFile .md -}}
-          <div class="banner{{ if .type }} banner-{{ .type }}{{ end }}" data-grid="first-two-thirds">
+          <div class="banner{{ if .type }} banner-{{ .type }}{{ end }}">
             {{ $bannerPage | markdownify }}
           </div>
       {{- else -}}