From 211f83e52e7ee41d46fee19ef33e8f79fd10b2d4 Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sat, 8 Apr 2023 19:23:34 +0200
Subject: [PATCH 01/15] link color

---
 zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index 65bb65f..d983fa1 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -67,7 +67,7 @@ $box-title-padding: 0 2em 0 1.5em;
 $box-header-color: #c5cec2;
 $box-background-color: #f8f9f0;
 
-$hyperlink-color: #990000;
+$hyperlink-color: #f00000;
 $keyword-color: #480717;
 $keyword-background-color: #f2f2f2;
 

From 84c3299970ed166269d1384d4542b2b1e70b9666 Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sat, 8 Apr 2023 19:26:34 +0200
Subject: [PATCH 02/15] remove content and sidebar border and lighten general
 border style color

---
 zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index d983fa1..8942670 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -49,8 +49,8 @@ $legacy-background-color: #fcffc0;
 $warning-background-color: #fcf0f6;
 $deepalchemy-background-color: #f6e8fd;
 $versionchanged-background-color: #f9f9d9;
-$border-style: 1px solid #ccc;
-$divider-line-style: 1px solid #ccc;
+$border-style: 1px solid #f1f1f1;
+$divider-line-style: 1px solid #f1f1f1;
 
 $box-shadow-style: 2px 2px 3px #dfdfdf;
 $box-top-margin: 10px;
@@ -349,7 +349,6 @@ a.headerlink:hover {
 
     font-size: 0.85em;
 
-    border: $border-style;
     background-color: $sidebar-color;
 
     > ul {
@@ -456,7 +455,6 @@ a.headerlink:hover {
     background-color: #ffffff;
     padding: 1px 10px 10px 10px;
 
-    border: $border-style;
     margin-top: 10px;
 }
 

From 809c765e64fb6b8dd4c8b151174b0aa503676142 Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sat, 8 Apr 2023 19:29:29 +0200
Subject: [PATCH 03/15] remove box shadows

---
 zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index 8942670..ac4132d 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -52,7 +52,6 @@ $versionchanged-background-color: #f9f9d9;
 $border-style: 1px solid #f1f1f1;
 $divider-line-style: 1px solid #f1f1f1;
 
-$box-shadow-style: 2px 2px 3px #dfdfdf;
 $box-top-margin: 10px;
 $box-margin: $box-top-margin 10px 20px 0px;
 
@@ -587,7 +586,6 @@ a.headerlink:hover {
         font-size: .85rem;
         background-color: #f0f0f0;
         border: $border-style;
-        box-shadow: $box-shadow-style;
         padding: 10px;
         margin: $box-margin;
         overflow: auto;
@@ -808,7 +806,6 @@ div {
         padding: 0 20px 0 20px;
         background-color: $box-background-color;
         border: $border-style;
-        box-shadow: $box-shadow-style;
 
         margin: $box-margin;
     }
@@ -911,7 +908,6 @@ div.legacy {
 
 div.class-bases, div.class-members {
     border: $border-style;
-    box-shadow: $box-shadow-style;
     padding: 5px 5px;
 
     padding: $box-padding;
@@ -928,7 +924,6 @@ div.class-members {
 
 div.inherited-member {
     border: $border-style;
-    box-shadow: $box-shadow-style;
     padding: 5px 5px;
     font-size: 0.9em;
     background-color: #eefbfb;
@@ -950,7 +945,6 @@ dl.method > dt,
 dl.class > dt,
 dl.exception > dt {
     border: $border-style;
-    box-shadow: $box-shadow-style;
     background-color: $code-sig-background-color;
     margin: 25px -10px 10px 10px;
     padding: 8px 10px;
@@ -961,7 +955,6 @@ dl.field-list {
     border-left: $border-style;
     border-right: $border-style;
     border-bottom: $border-style;
-    box-shadow: $box-shadow-style;
     margin: $box-top-margin 10px 0 0;
 
     li > p {

From d2bb773545e1c13399c8d1273661f334d4568b6a Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sat, 8 Apr 2023 22:45:37 +0200
Subject: [PATCH 04/15] pre box borders

---
 zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index ac4132d..ce571fa 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -49,8 +49,8 @@ $legacy-background-color: #fcffc0;
 $warning-background-color: #fcf0f6;
 $deepalchemy-background-color: #f6e8fd;
 $versionchanged-background-color: #f9f9d9;
-$border-style: 1px solid #f1f1f1;
-$divider-line-style: 1px solid #f1f1f1;
+$border-style: 1px solid #e6e9ec;
+$divider-line-style: 1px solid #e6e9ec;
 
 $box-top-margin: 10px;
 $box-margin: $box-top-margin 10px 20px 0px;
@@ -64,7 +64,8 @@ $box-padding: 1rem 1em 2px 1rem;
 
 $box-title-padding: 0 2em 0 1.5em;
 $box-header-color: #c5cec2;
-$box-background-color: #f8f9f0;
+$box-background-color: #F8F9FA;
+$box-border-radius: 4px;
 
 $hyperlink-color: #f00000;
 $keyword-color: #480717;
@@ -584,7 +585,8 @@ a.headerlink:hover {
 #docs-container {
     pre {
         font-size: .85rem;
-        background-color: #f0f0f0;
+        background-color: #F8F9FA;
+        border-radius: $box-border-radius;
         border: $border-style;
         padding: 10px;
         margin: $box-margin;

From e7134cb5fe6e6ce065fd86001c8139f0c2a87ca6 Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sat, 8 Apr 2023 22:55:32 +0200
Subject: [PATCH 05/15] box title remove hard borders

---
 zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index ce571fa..28c8088 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -790,15 +790,11 @@ div {
         .admonition-title,
         .sidebar-title,
         .topic-title {
-            background-color: $box-header-color;
             padding: $box-title-padding;
 
-            margin: 0 -20px 20px -20px;
+            margin: 10px -20px 20px -20px;
 
             font-weight: bold;
-            border-left: $border-style;
-            border-right: $border-style;
-            border-bottom: $border-style;
         }
 
         > p {

From 6345cdf53d3dba8ae98a93613046bd30c4c0da23 Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sat, 8 Apr 2023 22:56:16 +0200
Subject: [PATCH 06/15] uniform border radius on card lines with other elements

---
 zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index 28c8088..06c9478 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -1198,7 +1198,7 @@ div#dialect-documentation {
     box-shadow: 0px 0px 2px #ccc;
     padding-top: 1px;
     padding-bottom: 1px;
-    border-radius: 10px;
+    border-radius: $box-border-radius;
 
     h2 {
         border-top: none;

From 1cf5dfb504ae1e5ef50e80d55374015db809e638 Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sun, 9 Apr 2023 00:26:20 +0200
Subject: [PATCH 07/15] sidebar styles, lighten colors to move focus on content

---
 zzzeeksphinx/themes/zsbase/layout.mako        |  5 +-
 .../themes/zzzeeksphinx/static/docs.scss      | 70 ++++++++++++-------
 2 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/zzzeeksphinx/themes/zsbase/layout.mako b/zzzeeksphinx/themes/zsbase/layout.mako
index 969b6df..6aac8e5 100644
--- a/zzzeeksphinx/themes/zsbase/layout.mako
+++ b/zzzeeksphinx/themes/zsbase/layout.mako
@@ -90,6 +90,8 @@ withsidebar = bool(toc) and (
 
 <div id="docs-top-navigation-container" class="body-background">
 <div id="docs-header">
+    <h1><a href="${pathto('index')}">${docstitle|h}</a></h1>
+
     <div id="docs-version-header">
         Release: <span class="version-num">${release}</span>
 
@@ -111,8 +113,6 @@ withsidebar = bool(toc) and (
 
     </div>
 
-    <h1><a href="${pathto('index')}">${docstitle|h}</a></h1>
-
 </div>
 </div>
 
@@ -146,7 +146,6 @@ withsidebar = bool(toc) and (
     % if withsidebar:
 
         <div id="docs-sidebar-popout">
-            <h3><a href="${pathto('index')}">${docstitle|h}</a></h3>
             % if is_beta_version:
                 <p id="sidebar-beta">beta release</p>
             % elif is_prerelease_version:
diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index 06c9478..1801145 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -39,7 +39,7 @@ $narrow-max-screen-width: 980px;
 $primary-background-color: #fdfbfc;
 $topmost-header-color: #ebebee;
 $popout-color: #fbfbee;
-$sidebar-color: #efefef;
+$sidebar-border-color: #e9eaeb;
 $sidebar-header-background-color: #dddddd;
 $sidebar-header-color: #222222;
 $notebox-background-color: #eeffef;
@@ -71,7 +71,7 @@ $hyperlink-color: #f00000;
 $keyword-color: #480717;
 $keyword-background-color: #f2f2f2;
 
-$highlighted-nav-link-background-color: #ddd;
+$highlighted-nav-link-background-color: #e8e8e8;
 $orm-background-color: #e2f3f4;
 $core-background-color: #aecaf7;
 
@@ -161,20 +161,28 @@ a.headerlink:hover {
 #docs-header {
     font-family: $primary-font-family;
 
-    font-size: 0.9em;
+    font-size: 0.75em;
     position: relative;
 
     background-color: $topmost-header-color;
     border: $border-style;
-    height: 75px;
+    padding: 10px;
 
     display: flex;
     align-items: center;
 
     h1 {
-        font-size: 20px;
-        color: #222222;
-        margin-left: 10px;
+        &, a {
+            margin: 0;
+            font-size: 1em;
+            color: #222222;
+            font-weight: bold;
+        }
+    }
+
+    #docs-version-header {
+        order: 2;
+        margin-left: auto;
     }
 }
 
@@ -183,9 +191,14 @@ a.headerlink:hover {
 #index-nav,
 #narrow-index-nav {
     font-family: $sidebar-font-family;
+    font-size: 0.8em;
+}
+
+#docs-bottom-navigation,
+#index-nav,
+#narrow-index-nav {
     background-color: $popout-color;
     border: $border-style;
-    font-size: 0.8em;
 }
 
 #docs-bottom-navigation,
@@ -193,12 +206,6 @@ a.headerlink:hover {
     padding: 10px;
 }
 
-#docs-version-header {
-    position: absolute;
-    right: 8px;
-    bottom: 8px;
-}
-
 .docs-navigation-links {
     font-family: $primary-font-family;
 }
@@ -280,21 +287,18 @@ a.headerlink:hover {
     left: 10px;
 }
 
-#sidebar-topnav {
-}
-
 #sidebar-search {
     margin: 10px 0px 10px 0px;
 }
 
 #docs-sidebar {
-    top: $sidebar-popout-height + 18px;
+    top: $sidebar-popout-height;
     width: $fixed-sidebar-width;
+    padding-top: 18px;
     bottom: 0;
     min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
-    margin-top: 5px;
     margin-right: 5px;
     z-index: 3;
 }
@@ -349,7 +353,7 @@ a.headerlink:hover {
 
     font-size: 0.85em;
 
-    background-color: $sidebar-color;
+    border-right: 1px solid $sidebar-border-color;
 
     > ul {
         font-size: 0.85em;
@@ -370,17 +374,17 @@ a.headerlink:hover {
     h3,
     h4,
     h5 {
-        background-color: $sidebar-header-background-color;
         color: $sidebar-header-color;
         font-family: $sidebar-font-family;
-        font-size: 1.1em;
-        font-weight: normal;
-        margin: 10px 0 0 -15px;
+        font-size: 0.9em;
+        text-transform: uppercase;
+        font-weight: bold;
+        margin: 15px 0 0 -15px;
         padding: 5px 10px 5px 15px;
-        text-shadow: 1px 1px 0 white;
-
+        
         a {
             color: $sidebar-header-color;
+            font-weight: bold;
         }
     }
 
@@ -399,6 +403,10 @@ a.headerlink:hover {
             margin-left: 20px;
         }
     }
+
+    a {
+        color: inherit;
+    }
 }
 
 #docs-sidebar-popout {
@@ -418,6 +426,15 @@ a.headerlink:hover {
 
     h3 {
         margin: 0 0 10px 0;
+        &, a {
+            color: inherit;
+        }
+    }
+
+    #sidebar-topnav {
+        font-size: 0.75rem;
+        font-weight: bold;
+        text-transform: uppercase;
     }
 }
 
@@ -518,7 +535,6 @@ a.headerlink:hover {
 
 #docs-narrow-top-navigation {
     border: $border-style;
-    background-color: $sidebar-color;
     font-family: $sidebar-font-family;
     font-size: 0.85rem;
 

From cd2d331bf1c66ada2f9b1fa8bb6a62305505d9df Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sun, 9 Apr 2023 01:32:27 +0200
Subject: [PATCH 08/15] search box style

---
 zzzeeksphinx/themes/zsbase/layout.mako        |  9 ------
 .../themes/zzzeeksphinx/static/docs.scss      | 28 +++++++++++++++++--
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/zzzeeksphinx/themes/zsbase/layout.mako b/zzzeeksphinx/themes/zsbase/layout.mako
index 6aac8e5..3af7f3b 100644
--- a/zzzeeksphinx/themes/zsbase/layout.mako
+++ b/zzzeeksphinx/themes/zsbase/layout.mako
@@ -146,15 +146,6 @@ withsidebar = bool(toc) and (
     % if withsidebar:
 
         <div id="docs-sidebar-popout">
-            % if is_beta_version:
-                <p id="sidebar-beta">beta release</p>
-            % elif is_prerelease_version:
-                <p id="sidebar-prerelease">${"in development" if not release_date else "pre release"}</p>
-            % elif is_legacy_version:
-                <p id="sidebar-legacy">legacy version</p>
-            % elif is_current_version:
-                <p id="sidebar-current">current release</p>
-            % endif
             <p id="sidebar-topnav">
                 <a href="${pathto('index')}">Home</a>
                 % if zip_url:
diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index 1801145..69d6678 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -49,7 +49,8 @@ $legacy-background-color: #fcffc0;
 $warning-background-color: #fcf0f6;
 $deepalchemy-background-color: #f6e8fd;
 $versionchanged-background-color: #f9f9d9;
-$border-style: 1px solid #e6e9ec;
+$border-color: #e6e9ec;
+$border-style: 1px solid $border-color;
 $divider-line-style: 1px solid #e6e9ec;
 
 $box-top-margin: 10px;
@@ -57,7 +58,7 @@ $box-margin: $box-top-margin 10px 20px 0px;
 
 // this is optimized for the site.  with the vanilla docs, the
 // vertical padding is too much.   not sure how to fix
-$box-padding: 1rem 1em 2px 1rem;
+$box-padding: 1rem;
 
 // looks better with vanilla docs but not w/ the site
 // $box-padding: 0 1em 0 1rem;
@@ -176,6 +177,8 @@ a.headerlink:hover {
             margin: 0;
             font-size: 1em;
             color: #222222;
+            font-family: $header-font-family;
+            font-weight: normal;
             font-weight: bold;
         }
     }
@@ -289,6 +292,23 @@ a.headerlink:hover {
 
 #sidebar-search {
     margin: 10px 0px 10px 0px;
+
+    input {
+        display: block;
+        width: 100%;
+        height: calc(1.5em + .75rem + 2px);
+        font-size: 0.75rem;
+        font-weight: 400;
+        line-height: 1.5;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #ced4da;
+        border-radius: .25rem;
+        border-top-right-radius: 0.25rem;
+        border-bottom-right-radius: 0.25rem;
+        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+        box-sizing: border-box;
+    }
 }
 
 #docs-sidebar {
@@ -840,6 +860,10 @@ div.versionmodified {
     padding: $box-padding;
 
     margin: $box-margin;
+     
+    p {
+        margin: 0;
+    }
 }
 
 div .versionwarning,

From 3773b7f0a620d880b0b8bd12b4c6b05f2ecf902c Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sun, 9 Apr 2023 21:21:51 +0200
Subject: [PATCH 09/15] fixup sidebar styles

---
 .../themes/zzzeeksphinx/static/docs.scss      | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index 69d6678..121a244 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -76,11 +76,11 @@ $highlighted-nav-link-background-color: #e8e8e8;
 $orm-background-color: #e2f3f4;
 $core-background-color: #aecaf7;
 
-$sidebar-popout-height: 160px;
+$sidebar-popout-height: 130px;
 
 $max-container-width: 100em; // 100 * 16 == 1600px;
 $fixed-sidebar-width: 328px;
-$docs-body-sidebar-left: 338px;
+$docs-body-sidebar-left: 348px;
 
 /* global */
 
@@ -293,6 +293,10 @@ a.headerlink:hover {
 #sidebar-search {
     margin: 10px 0px 10px 0px;
 
+    form, label {
+        width: 100%;
+    }
+
     input {
         display: block;
         width: 100%;
@@ -314,18 +318,18 @@ a.headerlink:hover {
 #docs-sidebar {
     top: $sidebar-popout-height;
     width: $fixed-sidebar-width;
-    padding-top: 18px;
     bottom: 0;
     min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
     margin-right: 5px;
     z-index: 3;
+    line-height: 1.2em;
 }
 
-#sidebar-banner {
-    margin: 0px;
-    padding: 0px;
+/* targeting the internal div plays nicely with adblockers */
+#sidebar-banner > div {
+    margin: 0px $box-padding 30px 0;
 }
 
 #sidebar-prerelease,
@@ -367,14 +371,13 @@ a.headerlink:hover {
 
 #docs-sidebar-inner {
     padding-left: 10px;
+    padding-right: 10px;
     /*width:212px;*/
 
     font-family: $sidebar-font-family;
 
     font-size: 0.85em;
 
-    border-right: 1px solid $sidebar-border-color;
-
     > ul {
         font-size: 0.85em;
     }
@@ -383,8 +386,8 @@ a.headerlink:hover {
         display: block;
         margin-left: -100px;
         padding-left: 100px;
-        padding-top: 3px;
-        padding-bottom: 3px;
+        padding-top: 5px;
+        padding-bottom: 5px;
     }
 
     li.current > span.link-container {
@@ -426,6 +429,8 @@ a.headerlink:hover {
 
     a {
         color: inherit;
+        /* improve link reachability, with inline block the whole box can be clicked*/
+        display: inline-block;
     }
 }
 
@@ -461,6 +466,9 @@ a.headerlink:hover {
 #fixed-sidebar {
     position: relative;
     box-sizing: border-box;
+
+    border-right: 1px solid $sidebar-border-color;
+    padding-right: $box-padding;
 }
 
 
@@ -490,9 +498,7 @@ a.headerlink:hover {
 
 #docs-body {
     background-color: #ffffff;
-    padding: 1px 10px 10px 10px;
-
-    margin-top: 10px;
+    padding-left: 15px;
 }
 
 #docs-body.withsidebar {

From 20a67501d4221877907bc7a33bc61b1695287fab Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sun, 9 Apr 2023 21:26:23 +0200
Subject: [PATCH 10/15] improve pre and boxes styles margins bgcolor and sizes

---
 .../themes/zzzeeksphinx/static/docs.scss      | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index 121a244..a379b47 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -34,6 +34,7 @@ $header-font-family: "Libre Franklin", Arial, sans-serif;
 $top-header-font-family: "Libre Franklin", Arial, sans-serif;
 $sidebar-font-family: "Libre Franklin", Verdana, sans-serif;
 
+$mobile-max-screen-width: 480px;
 $narrow-max-screen-width: 980px;
 
 $primary-background-color: #fdfbfc;
@@ -53,8 +54,8 @@ $border-color: #e6e9ec;
 $border-style: 1px solid $border-color;
 $divider-line-style: 1px solid #e6e9ec;
 
-$box-top-margin: 10px;
-$box-margin: $box-top-margin 10px 20px 0px;
+$box-top-margin: 30px;
+$box-margin: $box-top-margin 0px 30px 0px;
 
 // this is optimized for the site.  with the vanilla docs, the
 // vertical padding is too much.   not sure how to fix
@@ -65,7 +66,7 @@ $box-padding: 1rem;
 
 $box-title-padding: 0 2em 0 1.5em;
 $box-header-color: #c5cec2;
-$box-background-color: #F8F9FA;
+$box-background-color: #f8f9f0;
 $box-border-radius: 4px;
 
 $hyperlink-color: #f00000;
@@ -151,7 +152,6 @@ a.headerlink:hover {
 
 #docs-container {
     max-width: $max-container-width;
-    margin: 10px auto;
     position: relative;
     font-size: 120%;
     line-height: 1.4em;
@@ -643,6 +643,11 @@ a.headerlink:hover {
         }
     }
 
+    @media only screen and (max-width: ($mobile-max-screen-width + 1)) {
+        pre {
+            font-size: .8rem;
+        }
+    }
     /* python annotation key */
     div.code-annotations-key, div.code-non-annotations-key {
         position:absolute;
@@ -906,7 +911,7 @@ div.deepalchemy {
     }
     background-image: url("deepalchemy.png");
     background-size: auto 100px;
-    background-position: 6px 9px;
+    background-position: 10px 29px;
     background-repeat: no-repeat;
     background-color: $deepalchemy-background-color;
     clear: right;
@@ -1038,9 +1043,11 @@ span.highlight {
 */
 button.copybtn {
     top: 1em;
-    right: 1.8em;
+    right: 1em;
     width: 2.5em;
     height: 2.5em;
+    display: grid;
+    place-content: center;
 
     svg {
         width: 2em;

From 3ac44391950c0619137446df1b58b19a50c03192 Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sun, 9 Apr 2023 21:28:18 +0200
Subject: [PATCH 11/15] improve footer nex/prev page navigation

remove colored box from the copyright to avoid dragging attention there
---
 zzzeeksphinx/themes/zsbase/layout.mako        |  6 ++++++
 .../themes/zzzeeksphinx/static/docs.scss      | 19 +++++++++++++------
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/zzzeeksphinx/themes/zsbase/layout.mako b/zzzeeksphinx/themes/zsbase/layout.mako
index 3af7f3b..d4ba687 100644
--- a/zzzeeksphinx/themes/zsbase/layout.mako
+++ b/zzzeeksphinx/themes/zsbase/layout.mako
@@ -274,14 +274,20 @@ withsidebar = bool(toc) and (
 </div>
 
 <div id="docs-bottom-navigation" class="docs-navigation-links${', withsidebar' if withsidebar else ''}">
+    <div class="docs-bottom-navigation--nextprev">
     % if prevtopic:
+            <div>
         Previous:
         <a href="${prevtopic['link']|h}" title="${_('previous chapter')}">${prevtopic['title']}</a>
+            </div>
     % endif
     % if nexttopic:
+            <div>
         Next:
         <a href="${nexttopic['link']|h}" title="${_('next chapter')}">${nexttopic['title']}</a>
+            </div>
     % endif
+    </div>
 
     <div id="docs-copyright">
     % if hasdoc('copyright'):
diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index a379b47..9a35761 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -197,14 +197,13 @@ a.headerlink:hover {
     font-size: 0.8em;
 }
 
-#docs-bottom-navigation,
 #index-nav,
+.docs-bottom-navigation--nextprev,
 #narrow-index-nav {
     background-color: $popout-color;
     border: $border-style;
 }
 
-#docs-bottom-navigation,
 #index-nav {
     padding: 10px;
 }
@@ -213,17 +212,25 @@ a.headerlink:hover {
     font-family: $primary-font-family;
 }
 
-#docs-bottom-navigation {
-    margin: 1em 0 1em 0;
+#docs-bottom-navigation.withsidebar {
+    margin-left: $docs-body-sidebar-left + 15px;
 }
 
-#docs-bottom-navigation.withsidebar {
-    margin-left: $docs-body-sidebar-left;
+.docs-bottom-navigation--nextprev {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5em 1em;
+    margin-bottom: $box-top-margin;
+    font-weight: bold;
+    font-size: 0.9em;
+    border-radius: $box-border-radius;
 }
 
 #docs-copyright {
     font-size: 0.85em;
     padding: 5px 0px;
+    margin-top: $box-top-margin;
 }
 
 #docs-header h1,

From 33ff3141370f6dfebe29c04c17d7b249d3e947dc Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sun, 9 Apr 2023 21:29:10 +0200
Subject: [PATCH 12/15] improve hedaer spaces and element positions

---
 zzzeeksphinx/themes/zsbase/layout.mako        | 55 ++++++++++---------
 .../themes/zzzeeksphinx/static/docs.scss      |  8 ++-
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/zzzeeksphinx/themes/zsbase/layout.mako b/zzzeeksphinx/themes/zsbase/layout.mako
index d4ba687..66fa51a 100644
--- a/zzzeeksphinx/themes/zsbase/layout.mako
+++ b/zzzeeksphinx/themes/zsbase/layout.mako
@@ -88,29 +88,32 @@ withsidebar = bool(toc) and (
 </%block>
 
 
-<div id="docs-top-navigation-container" class="body-background">
+<div id="docs-top-navigation-container" class="body-background row">
 <div id="docs-header">
     <h1><a href="${pathto('index')}">${docstitle|h}</a></h1>
 
     <div id="docs-version-header">
-        Release: <span class="version-num">${release}</span>
-
-        % if is_beta_version:
-            <span id="sidebar-beta">beta release</span>
-        % elif is_prerelease_version:
-            <span id="sidebar-prerelease">${"in development" if not release_date else "pre release"}</span>
-        % elif is_legacy_version:
-            <span id="sidebar-legacy">legacy version</span>
-        % elif is_current_version:
-            <span id="sidebar-current">current release</span>
-        % endif
-
-        % if release_date:
-        | Release Date: ${release_date}
-        % else:
-        | Release Date: <b>not released yet</b>
-        % endif
+        <div>
+            Release: <span class="version-num">${release}</span>
+
+            % if is_beta_version:
+                <span id="sidebar-beta">beta release</span>
+            % elif is_prerelease_version:
+                <span id="sidebar-prerelease">${"in development" if not release_date else "pre release"}</span>
+            % elif is_legacy_version:
+                <span id="sidebar-legacy">legacy version</span>
+            % elif is_current_version:
+                <span id="sidebar-current">current release</span>
+            % endif
+        </div>
 
+        <div>
+            % if release_date:
+            | Release Date: ${release_date}
+            % else:
+            | Release Date: <b>not released yet</b>
+            % endif
+        </div>
     </div>
 
 </div>
@@ -275,18 +278,18 @@ withsidebar = bool(toc) and (
 
 <div id="docs-bottom-navigation" class="docs-navigation-links${', withsidebar' if withsidebar else ''}">
     <div class="docs-bottom-navigation--nextprev">
-    % if prevtopic:
+        % if prevtopic:
             <div>
-        Previous:
-        <a href="${prevtopic['link']|h}" title="${_('previous chapter')}">${prevtopic['title']}</a>
+                Previous:
+                <a href="${prevtopic['link']|h}" title="${_('previous chapter')}">${prevtopic['title']}</a>
             </div>
-    % endif
-    % if nexttopic:
+        % endif
+        % if nexttopic:
             <div>
-        Next:
-        <a href="${nexttopic['link']|h}" title="${_('next chapter')}">${nexttopic['title']}</a>
+                Next:
+                <a href="${nexttopic['link']|h}" title="${_('next chapter')}">${nexttopic['title']}</a>
             </div>
-    % endif
+        % endif
     </div>
 
     <div id="docs-copyright">
diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index 9a35761..6d161be 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -167,7 +167,7 @@ a.headerlink:hover {
 
     background-color: $topmost-header-color;
     border: $border-style;
-    padding: 10px;
+    padding: 10px 20px;
 
     display: flex;
     align-items: center;
@@ -186,6 +186,8 @@ a.headerlink:hover {
     #docs-version-header {
         order: 2;
         margin-left: auto;
+        display: flex;
+        flex-wrap: wrap;
     }
 }
 
@@ -259,6 +261,10 @@ a.headerlink:hover {
     font-weight: bold;
 }
 
+#docs-top-navigation-container {
+    margin-bottom: $box-padding;
+}
+
 /* content container, sidebar */
 
 #docs-body-container {

From e1f924db624826ada0d4b0fe39d14b1e9442af0f Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sun, 9 Apr 2023 21:29:39 +0200
Subject: [PATCH 13/15] improve title spaces and sizes

---
 zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index 6d161be..77df413 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -553,6 +553,7 @@ a.headerlink:hover {
     #docs-narrow-top-navigation {
         display: block;
     }
+
     #docs-top-navigation-container h1 {
         position: absolute;
         top: 10px;
@@ -595,6 +596,13 @@ a.headerlink:hover {
     font-family: $header-font-family;
     font-weight: bold;
     /* don't put a clear:both here. use less floats */
+    margin-top: 2em;
+    margin-bottom: 1.45em;
+}
+
+#docs-body h1 {
+    margin-top: 0;
+    padding-top: 2em;
 }
 
 #docs-body {
@@ -611,7 +619,7 @@ a.headerlink:hover {
     h2 {
         font-size: 1.6rem;
         border-top: $divider-line-style;
-        padding-top: 20px;
+        padding-top: 2em;
     }
 
     #sqlalchemy-documentation h2 {
@@ -637,7 +645,7 @@ a.headerlink:hover {
     background: none;
 }
 
-#docs-container {
+main.docs #docs-container {
     pre {
         font-size: .85rem;
         background-color: #F8F9FA;

From 711633584ba0b2d806113654d21e92ada51b32f3 Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sat, 22 Apr 2023 15:31:54 +0200
Subject: [PATCH 14/15] refined spacings and various issues

---
 zzzeeksphinx/themes/zsbase/layout.mako        |   4 +-
 .../themes/zzzeeksphinx/static/docs.scss      | 233 +++++++++++++-----
 2 files changed, 167 insertions(+), 70 deletions(-)

diff --git a/zzzeeksphinx/themes/zsbase/layout.mako b/zzzeeksphinx/themes/zsbase/layout.mako
index 66fa51a..f25fa0a 100644
--- a/zzzeeksphinx/themes/zsbase/layout.mako
+++ b/zzzeeksphinx/themes/zsbase/layout.mako
@@ -109,9 +109,9 @@ withsidebar = bool(toc) and (
 
         <div>
             % if release_date:
-            | Release Date: ${release_date}
+            Release Date: ${release_date}
             % else:
-            | Release Date: <b>not released yet</b>
+            Release Date: <b>not released yet</b>
             % endif
         </div>
     </div>
diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index 77df413..f6dde7c 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -28,6 +28,9 @@
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
         U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+:root {
+    --bs-gutter-x: 1.5rem;
+}
 
 $primary-font-family: "Libre Franklin", sans-serif;
 $header-font-family: "Libre Franklin", Arial, sans-serif;
@@ -36,8 +39,12 @@ $sidebar-font-family: "Libre Franklin", Verdana, sans-serif;
 
 $mobile-max-screen-width: 480px;
 $narrow-max-screen-width: 980px;
+$large-min-screen-width: 1024px;
+$xl-min-screen-width: 1400px;
+$xxl-min-screen-width: 1600px;
 
 $primary-background-color: #fdfbfc;
+$body-background-color: #fff;
 $topmost-header-color: #ebebee;
 $popout-color: #fbfbee;
 $sidebar-border-color: #e9eaeb;
@@ -54,8 +61,8 @@ $border-color: #e6e9ec;
 $border-style: 1px solid $border-color;
 $divider-line-style: 1px solid #e6e9ec;
 
-$box-top-margin: 30px;
-$box-margin: $box-top-margin 0px 30px 0px;
+$box-top-margin: 50px;
+$box-margin: $box-top-margin 0px 50px 0px;
 
 // this is optimized for the site.  with the vanilla docs, the
 // vertical padding is too much.   not sure how to fix
@@ -86,7 +93,7 @@ $docs-body-sidebar-left: 348px;
 /* global */
 
 .body-background {
-    background-color: $primary-background-color;
+    background-color: $body-background-color;
 }
 
 body {
@@ -121,7 +128,6 @@ a:active {
 }
 a:hover {
     color: #ff0000;
-    text-decoration: underline;
 }
 
 /* paragraph links after sections.
@@ -143,7 +149,6 @@ a.headerlink {
 }
 
 a.headerlink:hover {
-    background-color: #00f;
     /*background-color: #990000;*/
     color: white;
 }
@@ -170,6 +175,8 @@ a.headerlink:hover {
     padding: 10px 20px;
 
     display: flex;
+    flex-wrap: wrap;
+    gap: 10px 20px;
     align-items: center;
 
     h1 {
@@ -188,6 +195,15 @@ a.headerlink:hover {
         margin-left: auto;
         display: flex;
         flex-wrap: wrap;
+        justify-content: flex-end;
+
+        gap: 4px;
+
+        @media (min-width: $large-min-screen-width) {
+            div:last-child {
+                border-left: 1px solid inherit;
+            }
+        }
     }
 }
 
@@ -215,7 +231,7 @@ a.headerlink:hover {
 }
 
 #docs-bottom-navigation.withsidebar {
-    margin-left: $docs-body-sidebar-left + 15px;
+    margin-left: $docs-body-sidebar-left;
 }
 
 .docs-bottom-navigation--nextprev {
@@ -233,6 +249,7 @@ a.headerlink:hover {
     font-size: 0.85em;
     padding: 5px 0px;
     margin-top: $box-top-margin;
+    margin-bottom: $box-top-margin;
 }
 
 #docs-header h1,
@@ -284,17 +301,62 @@ a.headerlink:hover {
 
 #docs-body {
     min-height: 700px;
+    &.withsidebar {
+        @media (min-width: $large-min-screen-width) {
+            /* double padding on desktop */
+            padding: 10px var(--bs-gutter-x);
+        }
+
+        @media (min-width: $xl-min-screen-width) {
+            /* *4 padding on xl */
+            padding: 10px calc(var(--bs-gutter-x) * 2);
+        }
+
+        @media (min-width: $xxl-min-screen-width) {
+            /* *4 padding on xl */
+            padding: 40px calc(var(--bs-gutter-x) * 4);
+        }
+    }
+}
+
+
+#docs-copyright,
+.docs-bottom-navigation--nextprev {
+    @media (min-width: $large-min-screen-width) {
+        /* double padding on desktop */
+        margin-left: var(--bs-gutter-x);
+        margin-right: var(--bs-gutter-x);
+    }
+
+    @media (min-width: $xl-min-screen-width) {
+        /* *4 padding on xl */
+
+        margin-left: calc(var(--bs-gutter-x) * 2);
+        margin-right: calc(var(--bs-gutter-x) * 2);
+    }
+
+    @media (min-width: $xxl-min-screen-width) {
+        /* *8 padding on xxl */
+
+        margin-left: calc(var(--bs-gutter-x) * 4);
+        margin-right: calc(var(--bs-gutter-x) * 4);
+    }
 }
 
 #index-nav {
     position: relative;
-    margin-top: 10px;
-    padding: 10px 10px 25px 10px;
-}
+    margin-top: $box-top-margin;
+    padding: 10px var(--bs-gutter-x);
+    margin-left: calc(-1 * var(--bs-gutter-x) * 0.5);
+    margin-right: calc(-1 * var(--bs-gutter-x) * 0.5);
+ 
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
 
-#index-nav form {
-    padding-top: 10px;
-    float: right;
+    p {
+        margin: auto 0;
+    }
 }
 
 #sidebar-paginate {
@@ -359,26 +421,27 @@ a.headerlink:hover {
 
 #sidebar-prerelease,
 #sidebar-legacy {
-    background: #f11;
-    color: #bbb;
+    background: #ae3737;
+    color: #ebe4e4;
 }
 
 #sidebar-beta {
-    background: #ffff80;
-    color: #555;
+    background: #dfdf70;
+    color: #4f4f25;
 }
 
 #sidebar-current {
-    background: #4c4;
-    color: #555;
+    background: #3bc53b;
+    color: #203f24;
 }
 
 #docs-version-header {
     #sidebar-prerelease,
     #sidebar-legacy,
     #sidebar-current {
-        width: 14em;
         font-size: 1em;
+        padding: 3px 4px;
+        border-radius: 2px;
     }
 }
 
@@ -401,6 +464,11 @@ a.headerlink:hover {
         padding-left: 100px;
         padding-top: 5px;
         padding-bottom: 5px;
+
+        a:not(.paramlink) {
+            /* improve link reachability, with inline block the whole box can be clicked*/
+            display: block;
+        }
     }
 
     li.current > span.link-container {
@@ -442,7 +510,6 @@ a.headerlink:hover {
 
     a {
         color: inherit;
-        /* improve link reachability, with inline block the whole box can be clicked*/
         display: inline-block;
     }
 }
@@ -479,9 +546,6 @@ a.headerlink:hover {
 #fixed-sidebar {
     position: relative;
     box-sizing: border-box;
-
-    border-right: 1px solid $sidebar-border-color;
-    padding-right: $box-padding;
 }
 
 
@@ -493,6 +557,8 @@ a.headerlink:hover {
     width: $fixed-sidebar-width;
     top: 0;
     bottom: 0;
+    border-right: 1px solid $sidebar-border-color;
+    padding-right: calc(var(--bs-gutter-x) * .5);
 }
 
 #fixed-sidebar #docs-sidebar {
@@ -509,11 +575,6 @@ a.headerlink:hover {
     position: fixed;
 }
 
-#docs-body {
-    background-color: #ffffff;
-    padding-left: 15px;
-}
-
 #docs-body.withsidebar {
     margin-left: $docs-body-sidebar-left;
 
@@ -540,7 +601,7 @@ a.headerlink:hover {
     #narrow-index-nav {
         display: block;
         padding: 1rem;
-        margin: 10px 0 10px 0;
+        margin: 20px 0 20px 0;
     }
 
     #docs-body.withsidebar {
@@ -555,21 +616,13 @@ a.headerlink:hover {
     }
 
     #docs-top-navigation-container h1 {
-        position: absolute;
-        top: 10px;
-        margin: 0;
         padding: 0;
-        left: 8px;
+        margin: 0;
     }
 
-    #docs-header {
-        height: 124px;
-    }
-    #docs-version-header {
-        position: absolute;
-        left: 8px;
-        right: 0;
-        bottom: 8px;
+    #docs-header #docs-version-header {
+        justify-content: flex-start;
+        margin-left: 0;
     }
 }
 
@@ -596,7 +649,7 @@ a.headerlink:hover {
     font-family: $header-font-family;
     font-weight: bold;
     /* don't put a clear:both here. use less floats */
-    margin-top: 2em;
+    margin-top: 1.45em;
     margin-bottom: 1.45em;
 }
 
@@ -619,7 +672,6 @@ a.headerlink:hover {
     h2 {
         font-size: 1.6rem;
         border-top: $divider-line-style;
-        padding-top: 2em;
     }
 
     #sqlalchemy-documentation h2 {
@@ -637,6 +689,10 @@ a.headerlink:hover {
     h5 {
         font-size: 1.05rem;
     }
+
+    a {
+        border-bottom: 1px dashed rgba($hyperlink-color, 0.4);
+    }
 }
 
 /* SQL popup, code styles */
@@ -651,7 +707,7 @@ main.docs #docs-container {
         background-color: #F8F9FA;
         border-radius: $box-border-radius;
         border: $border-style;
-        padding: 10px;
+        padding: var(--bs-gutter-x);
         margin: $box-margin;
         overflow: auto;
         line-height: 1.3em;
@@ -724,8 +780,8 @@ main.docs #docs-container {
 .show_sql,
 .show_sql_print {
     padding: 5px 10px;
-    margin: 10px -5px 10px -5px;
-    border: 1px dashed;
+    margin: 30px 0 10px 0;
+    border: 1px dashed darken(#fbfbee, 50%);
 }
 .popup_sql,
 .show_sql {
@@ -743,6 +799,21 @@ main.docs #docs-container {
     overflow: auto;
 }
 
+#docs-body.index {
+    margin-left: calc(-1 * var(--bs-gutter-x) * 0.5);
+    margin-right: calc(-1 * var(--bs-gutter-x) * 0.5);
+    margin-top: $box-top-margin;
+}
+
+#docs-body.index .docutils.leftmost {
+    padding-left: var(--bs-gutter-x);
+    padding-right: var(--bs-gutter-x);
+}
+
+#docs-body:not(.index) .docutils.container {
+    margin: $box-margin;
+}
+
 .section > table.docutils,
 .sliding-table > table.docutils,
 section > table.docutils {
@@ -874,6 +945,10 @@ div {
         border: $border-style;
 
         margin: $box-margin;
+
+        &:first-child {
+            margin-top: 0;
+        }
     }
 }
 
@@ -1164,10 +1239,6 @@ div#tutorials {
 
 /* new index layout thing */
 
-#docs-body.index {
-    padding: 0;
-}
-
 div.left-right-container {
     display: flex;
     border-bottom: $divider-line-style;
@@ -1272,7 +1343,6 @@ div#dialect-documentation {
     box-shadow: 0px 0px 2px #ccc;
     padding-top: 1px;
     padding-bottom: 1px;
-    border-radius: $box-border-radius;
 
     h2 {
         border-top: none;
@@ -1289,45 +1359,72 @@ div#dialect-documentation {
         }
     }
 
-    div.orm-header, section.orm-header {
-        @include card-line-style();
-        border-left: 2.2em solid $orm-background-color;
+    div.orm-header, section.orm-header,
+    div.core-header, section.core-header {
+        border-right: 0.6em solid $core-background-color;
 
         padding-left: 1em;
         padding-right: 1em;
         margin-bottom: 2em;
 
-        > h2,
-        > h3 {
-            border: none;
-            padding-top: 0;
+        @media (min-width: $large-min-screen-width) {
+            padding-left: 2em;
+            padding-right: 2em;
         }
-    }
-
-    div.core-header, section.core-header {
-        @include card-line-style();
-        border-right: 2.2em solid $core-background-color;
 
-        padding-left: 1em;
-        padding-right: 1em;
-        margin-bottom: 2em;
+        @media (min-width: $xl-min-screen-width) {
+            margin-bottom: 4em;
+        }
 
         > h2,
         > h3 {
             border: none;
+        }
+
+        & > h1:first-child,
+        & > h2:first-child,
+        & > h3:first-child {
             padding-top: 0;
+            margin-top: 1em;
         }
     }
 
+    
+    div.orm-header, section.orm-header {
+        border-left: 0.6em solid $orm-background-color;
+        border-right: none;
+    }
+    
+    
+    div.core-header:not(.orm-header), section.core-header:not(.orm-header) {
+        padding-left: 0;
+    }
+    
+    div.orm-header:not(.core-header), section.orm-header:not(.core-header) {
+        padding-right: 0;
+    }
+
     div.orm-dependency, section.orm-dependency {
         border-left: .6em solid $orm-background-color;
     }
 
     div.orm-addin, section.orm-addin {
-        @include card-line-style();
         border-left: .6em solid $orm-background-color;
 
-        padding-left: 10px;
         margin: 10px 0 10px 0;
+
+        padding-left: 1em;
+
+        @media (min-width: $large-min-screen-width) {
+            padding-left: 2em;
+        }
     }
 }
+
+#next-steps > h2 {
+    padding-top: 1.4em;
+}
+
+#footer {
+    background: $body-background-color;
+}
\ No newline at end of file

From 99d5e5492a2120d48551cb26ca0d7388c04852ce Mon Sep 17 00:00:00 2001
From: DRC <davide@licheni.net>
Date: Sun, 23 Apr 2023 10:22:42 +0200
Subject: [PATCH 15/15] fix left padding for core-header.orm-dependency

---
 zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index f6dde7c..6ad5878 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -1396,7 +1396,7 @@ div#dialect-documentation {
     }
     
     
-    div.core-header:not(.orm-header), section.core-header:not(.orm-header) {
+    div.core-header:not(.orm-header):not(.orm-dependency), section.core-header:not(.orm-header):not(.orm-dependency) {
         padding-left: 0;
     }