fix docs layout and link bugs [Fixes #14436] (#14439)

using cdnfonts import instead

fix mobile menu layout

fix mobile content positioning/sizing

fix desktop content widths

prevent header links from wrapping

update desktop positioning

fix backdrop-filter

move to .unified-header::before

feat: independent scrolling for content and menu

docs/_static/css/custom.css

@@ -16,6 +16,9 @@
 
     --navHeight: 4.5rem;
     --sideWidth: 300px;
+    --maxWidth: 80rem;
+    --desktopInlinePadding: 2rem;
+    --mobileInlinePadding: 1rem;
     --currentVersionHeight: 45px;
 
     text-rendering: geometricPrecision;
@@ -57,7 +60,6 @@ html,
 body,
 .wy-grid-for-nav {
     background-color: var(--color-f) !important;
-    position: relative;
 }
 
 body {
@@ -68,6 +70,10 @@ a {
     color: var(--color-c);
 }
 
+a, section {
+    scroll-margin-top: calc(var(--navHeight) + 2rem);
+}
+
 hr {
     margin-block: 2rem;
     border-color: var(--color-d) !important;
@@ -328,7 +334,6 @@ ul.current ul,
 
 .wy-breadcrumbs-aside a,
 .wy-breadcrumbs-aside a:visited,
-/* .wy-breadcrumbs-aside a:not(:visited), */
 a.fa.fa-github,
 a.fa.fa-github:visited,
 a.fa.fa-github:not(:visited),
@@ -362,10 +367,11 @@ footer .rst-footer-buttons {
 
 /* Site wrapper, and two children: header and rest */
 .unified-wrapper {
-    position: fixed;
+    position: relative;
+    display: flex;
+    flex-direction: column;
     inset: 0;
-    top: var(--navHeight);
+    max-width: var(--maxWidth);
-    max-width: 80rem;
     margin-inline: auto;
 }
 
@@ -378,17 +384,16 @@ footer .rst-footer-buttons {
     display: flex;
     align-items: center;
     box-shadow: var(--shadow);
-    backdrop-filter: blur(3px);
 }
 
 .unified-header .inner-header {
     display: flex;
     margin-inline: auto;
     width: 100%;
-    max-width: 80rem;
+    max-width: var(--maxWidth);
     align-items: center;
     justify-content: space-between;
-    padding-inline: 2rem;
+    padding-inline: var(--desktopInlinePadding);
     padding-block: 1rem;
 }
 
@@ -399,6 +404,7 @@ footer .rst-footer-buttons {
     opacity: 95%;
     background: var(--color-f);
     z-index: -1;
+    backdrop-filter: blur(3px);
 }
 
 .unified-header .home-link {
@@ -445,6 +451,7 @@ footer .rst-footer-buttons {
     font-weight: 400;
     box-sizing: content-box;
     border-bottom: 1px solid transparent;
+    white-space: nowrap;
 }
 
 .unified-header .nav-link.active {
@@ -456,34 +463,36 @@ footer .rst-footer-buttons {
     border-bottom: 1px solid var(--color-c);
 }
 
-/* Rest: Grid, with two children: side bar, and content */
+/* Rest: Flex-row, with two children: side bar, and content */
 .unified-wrapper .wy-grid-for-nav {
     position: relative !important;
-    display: grid !important;
+    display: flex;
-    grid-template-columns: var(--sideWidth) 1fr;
+    margin-inline: auto;
-    gap: 1rem;
 }
 
 /* First child: Side bar */
 .unified-wrapper .wy-grid-for-nav nav.wy-nav-side {
-    position: relative;
+    position: fixed;
     display: flex;
     flex-direction: column;
     background: var(--color-f);
     color: var(--color-a);
-    top: 0;
-    bottom: 0;
-    left: 0;
     padding-bottom: unset !important;
-    min-height: unset !important;
     z-index: 10 !important;
-    max-width: var(--sideWidth) !important;
+    min-height: unset !important;
+    width: var(--sideWidth) !important;
+    top: var(--navHeight);
+    bottom: 0;
+    left: auto;
+    overflow: auto;
 }
 
 .unified-wrapper .wy-grid-for-nav nav.wy-nav-side .wy-side-scroll {
-    position: relative !important;
+    position: static !important;
-    width: fit-content !important;
+    width: unset !important;
+    overflow: unset !important;
     height: unset !important;
+    padding-bottom: 2rem;
 }
 
 .unified-wrapper .wy-grid-for-nav nav.wy-nav-side .wy-side-scroll .wy-side-nav-search {
@@ -517,15 +526,15 @@ footer .rst-footer-buttons {
 
 /* Second child: Content */
 .unified-wrapper .wy-grid-for-nav .wy-nav-content {
-    position: relative !important;
-    overflow-y: scroll !important;
     width: 100%;
-    max-width: 100vw !important;
+    max-width: unset !important; /* override */
-    padding-inline: 2rem;
+    padding-inline: var(--desktopInlinePadding);
+    margin-inline-start: var(--sideWidth);
+    margin-top: var(--navHeight);
 }
 
 .unified-wrapper .wy-grid-for-nav .wy-nav-content .rst-content {
-    max-width: 70ch;
+    max-width: min(70ch, calc(100vw -  2 * var(--desktopInlinePadding) - var(--sideWidth)));
     margin-inline: auto;
 }
 
@@ -566,29 +575,15 @@ footer .rst-footer-buttons {
     }
 
     .unified-header .inner-header {
-        padding-inline: 1rem;
+        padding-inline: var(--mobileInlinePadding);
-    }
-
-    .unified-wrapper .wy-grid-for-nav {
-        grid-template-columns: 1fr;
     }
 
     .unified-wrapper .wy-grid-for-nav nav.wy-nav-side {
-        position: absolute;
-        inset-block: 0;
-        inset-inline-start: 0;
-        width: var(--sideWidth);
-        overflow-y: scroll;
         transform: translateX(-100%);
         transition: transform 200ms ease-in-out;
     }
 
     /* Menu open styles */
-    .unified-wrapper .wy-grid-for-nav nav.wy-nav-side {
-        position: absolute;
-
-    }
-
     .unified-wrapper.menu-open nav.wy-nav-side {
         transform: translateX(0);
         transition: transform 200ms ease-in-out;
@@ -613,6 +608,18 @@ footer .rst-footer-buttons {
     a.skip-to-content {
         display: none;
     }
+
+    .wy-nav-content {
+        margin-inline-start: 0 !important;
+    }
+
+    .rst-content {
+        max-width: 100% !important;
+    }
+
+    .wy-side-scroll {
+        padding-bottom: 0 !important;
+    }
 }
 
 ul.search .context {
@@ -781,9 +788,8 @@ button.mobile-menu-button {
     font-family: 'Overpass Mono', monospace;
 }
 
-.wy-breadcrumbs-aside {
+.wy-breadcrumbs>li {
-    display: block;
+    padding-top: 8px;
-    padding-top: 0;
 }
 
 .wy-breadcrumbs-aside a {
@@ -804,8 +810,9 @@ a.skip-to-content {
     padding: 2px 4px;
     font-size: 14px;
     margin-inline-end: auto;
-    margin-inline-start: 2rem;
+    margin-inline-start: 1.5rem;
     color: var(--color-a);
+    white-space: nowrap;
 }
 
 a.skip-to-content:focus {

docs/_static/js/initialize.js

@@ -63,7 +63,7 @@ function buildHeader() {
   const skipToContent = document.createElement("a");
   skipToContent.classList.add("skip-to-content");
   skipToContent.href = "#content";
-  skipToContent.innerText = "{ skip to content }";
+  skipToContent.innerText = "{skip to content}";
   innerHeader.appendChild(skipToContent);
 
   const navBar = document.createElement("nav");
@@ -157,22 +157,6 @@ function updateGitHubEditPath() {
 }
 
 function initialize() {
-  // Preload fonts
-  const fonts = [
-    "overpass-regular.otf",
-    "overpass-bold.otf",
-    "overpass-mono-regular.otf",
-    "overpass-mono-bold.otf",
-  ];
-  fonts.forEach((filename) => {
-    const link = document.createElement("link");
-    link.rel = "preload";
-    link.as = "font";
-    link.href = `https://solidity-docs-dev.readthedocs.io/en/latest/_static/fonts/${filename}`;
-    link.crossOrigin = "";
-    document.head.appendChild(link);
-  });
-
   // Rearrange DOM elements for styling
   rearrangeDom();
 

docs/conf.py

@@ -169,7 +169,7 @@ html_js_files = ["js/constants.js", "js/initialize.js", "js/toggle.js"]
 # Add any extra paths that contain custom files (such as robots.txt or
 # .htaccess) here, relative to this directory. These files are copied
 # directly to the root of the documentation.
-html_extra_path = ["_static/css", "_static/fonts"]
+html_extra_path = ["_static/css"]
 
 # List of templates of static files to be included in the HTML output.
 # Keys represent paths to input files and values are dicts containing: