NG: Theme modernization, last inches

CHANGES.rst

@@ -5,6 +5,8 @@ CHANGES
 
 Unreleased
 ----------
+- Switch to modern responsive 3-column layout theme ``sphinx-basic-ng``.
+  Thanks, @pradyunsg.
 
 2024/07/04 0.33.1
 -----------------
@@ -202,8 +204,6 @@ Unreleased
 - Remove external links indicator
 - Improve visual appearance of admonition components
 - Add new ``cloud-docs`` documentation project
-- Switch to modern responsive 3-column layout theme ``sphinx-basic-ng``.
-  Thanks, @pradyunsg.
 
 
 2023/05/15 0.27.1

src/crate/theme/rtd/conf/__init__.py

@@ -163,9 +163,12 @@
 
 # Configure linkchecker
 linkcheck_ignore = [
+    # Well.
+    "https://example.org/.*",
     # Breaks accessibility via JS ¯\_(ツ)_/¯
     "https://www.iso.org/obp/ui/.*",
-    "https://example.org/.*",
+    # 403 Client Error: Forbidden for url
+    "https://unsplash.com/.*",
 ]
 linkcheck_retries = 3
 linkcheck_timeout = 15

src/crate/theme/rtd/crate/static/css/components.css

@@ -58,12 +58,6 @@ figcaption {
   margin-top: 5px;
   text-align: center;
 }
-ul,
-ol {
-  margin-top: 0px;
-  margin-bottom: 10px;
-  padding-left: 40px;
-}
 .w-list-unstyled {
   padding-left: 0;
   list-style: none;

src/crate/theme/rtd/crate/static/css/crateio-rtd.css

@@ -32,27 +32,25 @@ blockquote p:last-child {
     margin-bottom: 0;
 }
 
-
-
 /** Admonitions: Regular style **/
 div.admonition:not(.hero) p {
     padding: 0.5em 0;
     margin: 0;
 }
+
 div.admonition:not(.hero) {
-    padding-left: 3em;
+    padding: .8em .8em .8em 3em;
     font-size: smaller;
     background-position: top 1.1em left 1em;
     background-size: 1.25em;
     border-left-width: 2px;
 }
 
-
 /** Admonitions: Hero style **/
 div.admonition.hero {
     padding: 15px 15px 15px 95px;
     margin: 20px 0;
-    background-position: top 25px left 25px;
+    background-position: top 20px left 25px;
     background-size: 3em;
     border-left-width: 4px;
 }
@@ -61,11 +59,16 @@ div.admonition.hero p {
     margin: 0;
 }
 
-
 /** Admonitions: General **/
 div.admonition {
     border-left-style: solid;
+    margin-bottom: 1.2em;
+}
+
+div.admonition p.admonition-title {
+    padding-top: 0 !important;
 }
+
 div.admonition a {
   color: black;
   text-decoration: underline;
@@ -87,6 +90,14 @@ div.note {
     border-color: var(--primary-color);
 }
 
+.cr-docs-sql-99 div.note {
+    background: url("../images/admonition/note-sql-99.svg") no-repeat;
+    background-color: #fff9e9;
+    border-left: 4px solid #ed8826;
+    background-size: 1.25em;
+    background-position: top 1.1em left 1em;
+  }
+
 div.seealso {
     background: url(../images/admonition/icon-docs-seealso.svg) no-repeat;
     background-color: #f4f4f4;
@@ -134,11 +145,6 @@ div.danger {
 }
 
 /** MENUE **/
-
-.bs-docs-sidenav .toctree li {
-    line-height: 16px;
-}
-
 .bs-docs-sidenav .toctree li.border-top {
     border-top: 1px solid #e7e7e7;
     padding-top: 16px;
@@ -148,12 +154,18 @@ div.danger {
 .bs-docs-sidenav .toctree li a {
     text-decoration: none;
     font-size: 14px;
-    line-height: 16px;
+    line-height: 1.2;
     color: black;
     padding: 4px 0px;
     display: block;
 }
 
+@media all and (max-width: 540px) {
+    .bs-docs-sidenav .toctree li a {
+        line-height: 1.3;
+    }
+}
+
 .bs-docs-sidenav .toctree li.current > a,
 .bs-docs-sidenav .toctree li.active > a,
 .bs-docs-sidenav .toctree li.current > a code,
@@ -166,8 +178,12 @@ div.danger {
     display: block;
 }
 
-.bs-docs-sidenav ul {
-    margin-bottom: 0px;
+@media all and (min-width: 768px) {
+    .bs-docs-sidenav ol, 
+    .bs-docs-sidenav ul {
+        margin-top: 1px !important;
+        margin-bottom: 2px;
+    }
 }
 
 .bs-docs-sidenav .toctree ul ul ul {

src/crate/theme/rtd/crate/static/css/crateio.css

@@ -7,35 +7,6 @@
   color: #111;
 }
 
-.sub-menu {
-  list-style-type: none;
-  padding-left: 0;
-  top: 50px;
-  background-color: #fff;
-  position: absolute;
-  min-width: 180px;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  z-index: 1;
-}
-
-.sub-menu li a {
-  display: block;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  padding-left: 10px;
-}
-
-.sub-menu li a:hover {
-  background-color: #f1f1f1;
-}
-.menu-item-has-children .sub-menu {
-  display: none;
-}
-
-.menu-item-has-children:hover .sub-menu {
-  display: block;
-}
-
 html {
   height: 100%;
 }
@@ -80,56 +51,47 @@ h1 {
 
 h2 {
   font-size: 30px;
-  line-height: 36px; /*           this heading font-size * 1.2  */
-  margin-top: 0px; /*           this heading font-size        */
-  margin-bottom: 15px; /*           this heading font-size * 0.5  */
-  padding-top: 30px;
+  line-height: 36px;
+  margin-top: -10px;
+  margin-bottom: 15px;
+  padding-top: 20px;
 }
 
 h3 {
-  font-size: 27px; /* round(previous heading font-size * 0.9) */
-  line-height: 32px; /* round(    this heading font-size * 1.2) */
-  margin-top: 0px; /*           this heading font-size        */
-  margin-bottom: 14px; /* round(    this heading font-size * 0.5) */
-  padding-top: 27px;
+  font-size: 26px;
+  line-height: 32px;
+  margin-top: -10px;
+  margin-bottom: 14px;
+  padding-top: 16px;
 }
 
 h4 {
-  font-size: 24px; /* round(previous heading font-size * 0.9) */
-  line-height: 29px; /* round(    this heading font-size * 1.2) */
-  margin-top: 0; /*           this heading font-size        */
-  margin-bottom: 12px; /* round(    this heading font-size * 0.5) */
-  padding-top: 24px;
-}
-
-h5 {
-  font-size: 22px; /* round(previous heading font-size * 0.9) */
-  line-height: 26px; /* round(    this heading font-size * 1.2) */
-  margin-top: 0; /*           this heading font-size        */
-  margin-bottom: 11px; /* round(    this heading font-size * 0.5) */
-  padding-top: 22px;
+  font-size: 24px;
+  line-height: 29px;
+  margin-top: -10px;
+  margin-bottom: 14px;
+  padding-top: 16px;
 }
 
 h5 {
-  font-size: 20px; /* round(previous heading font-size * 0.9) */
-  line-height: 24px; /* round(    this heading font-size * 1.2) */
-  margin-top: 0; /*           this heading font-size        */
-  margin-bottom: 10px; /* round(    this heading font-size * 0.5) */
+  font-size: 20px;
+  line-height: 24px;
+  margin-top: -10px;
+  margin-bottom: 10px;
   padding-top: 20px;
 }
 
 h6 {
-  font-size: 18px; /* round(previous heading font-size * 0.9) */
-  line-height: 22px; /* round(    this heading font-size * 1.2) */
-  margin-top: 0; /*           this heading font-size        */
-  margin-bottom: 9px; /* round(    this heading font-size * 0.5) */
+  font-size: 18px;
+  line-height: 22px;
+  margin-top: -9px;
+  margin-bottom: 9px;
   padding-top: 18px;
 }
 
 p {
-  margin-top: 0;
-  margin-bottom: 16px;
-  line-height: 1.5em;
+  margin-bottom: .75rem;
+  margin-top: .5rem;
 }
 
 a {
@@ -142,12 +104,6 @@ a:hover {
   color: var(--secondary-color);
 }
 
-ul {
-  margin-top: 0px;
-  margin-bottom: 10px;
-  padding-left: 1em;
-}
-
 blockquote {
   margin-bottom: 16px;
   padding: 10px 20px;
@@ -580,13 +536,6 @@ pre code {
   font-size: 14px !important;
 }
 
-.note {
-  margin-bottom: 16px;
-  padding: 16px;
-  border-left: 4px solid var(--primary-color);
-  background-color: #e9fbff;
-}
-
 .align-left {
   text-align: left !important;
 }