UI improvements, including centered content on ultrawide screens and …

…branding updates to the landing page and header
raspberrypi · Dec 10, 2024 · 182494f · 182494f
1 parent ec51bb4
commit 182494f
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 49 deletions.
diff --git a/jekyll-assets/_layouts/boxes.html b/jekyll-assets/_layouts/boxes.html
@@ -8,7 +8,7 @@
     {% include header.html %}
 
     <div class="toptitle">
-      <h1><a href="/documentation/">Raspberry Pi Documentation</a></h1>
+      <h1><a href="/documentation/"><b>Raspberry Pi</b> Documentation</a></h1>
       <div id="search-theme-toggle-container">
         <div id="docsearch"></div>
         {% include theme.html %}

diff --git a/jekyll-assets/_layouts/docs.html b/jekyll-assets/_layouts/docs.html
@@ -169,23 +169,24 @@ <h1 id="docs-header-title">
         </div>
       </div>
       <div id="docs-container">
+        <div id="main-window">
+          <section id="content">
+            <h1>{{ page.sub_title | markdownify | remove: '<p>' | remove: '</p>'}}</h1>
+            {{ content }}
+          </section>
 
-        <div id="on-this-page">
-          <div id="on-this-page-inner">
-            <h5>On this page</h5>
-            <div id="toc">
-              {{ page.document | tocify_asciidoc: 3 }}
-            </div>
-            <div id="tocbot">
+          <div id="on-this-page">
+            <div id="on-this-page-inner">
+              <h5>On this page</h5>
+              <div id="toc">
+                {{ page.document | tocify_asciidoc: 3 }}
+              </div>
+              <div id="tocbot">
+              </div>
             </div>
           </div>
         </div>
 
-        <section id="content">
-          <h1>{{ page.sub_title | markdownify | remove: '<p>' | remove: '</p>'}}</h1>
-          {{ content }}
-        </section>
-
         {% include legal.html %}
         {% include footer.html %}
         {% include search.html %}

diff --git a/jekyll-assets/css/style.css b/jekyll-assets/css/style.css
@@ -28,8 +28,8 @@
   --rptl-header-burger-stroke-color: var(--textcolor);
   --rptl-header-subnav-background-color: var(--near-bg);
   --rptl-header-logo-text-fill: var(--textcolor);
-  --rptl-header-logo-leaf-fill: #46af4b;
-  --rptl-header-logo-berry-fill: var(--brand-colour);
+  --rptl-header-logo-leaf-fill: var(--bg);
+  --rptl-header-logo-berry-fill: var(--bg);
   --rptl-cookiebanner-background-color: var(--code-bg-colour);
   --rptl-cookiebanner-text-color: var(--textcolor);
   --rptl-footer-background-color: #0A0B1F;
@@ -150,7 +150,7 @@ code {
 }
 
 .toptitle h1 a {
-  color: var(--accent);
+  color: var(--textcolor);
   text-decoration: none;
 }
 
@@ -206,6 +206,11 @@ div.subtitle p {
   border: 1px solid var(--accent);
 }
 
+#main-window {
+  display: flex;
+  justify-content: center;
+}
+
 /* boxes page, constrain search bar/theme toggle line to a reasonable size */
 body > .toptitle > #search-theme-toggle-container {
   width: 50%;
@@ -382,10 +387,10 @@ input:checked + li span label div .toc-item::before {
 }
 
 #on-this-page {
+  align-self: flex-start; /* otherwise, uses the same height as all other flex items -- including content! */
   position: sticky;
   top: 0;
-  float: right;
-  z-index: 2; /* footer should obscure on-this-page */
+  flex-shrink: 0;
 }
 
 #on-this-page-inner {
@@ -678,6 +683,7 @@ nav#mobile-contents li {
   padding-bottom: 10vh;
   padding-right: 0px;
   padding-left: 19px;
+  flex-grow: 0;
 }
 
 #content h1 {
@@ -1304,9 +1310,6 @@ div.legal {
   background-color: var(--rptl-footer-background-color);
   width: 100%;
   font-size: .7em;
-  /* footer should obscure on-this-page; position required for z-index to work */
-  z-index: 10;
-  position: inherit;
 }
 
 div.legal + div.legal {
@@ -1351,9 +1354,6 @@ p#copyright {
 
 footer {
   margin-top: 30px;
-  /* footer should obscure on-this-page */
-  z-index: 10;
-  position: inherit; /* position required for z-index to function */
 }
 
 @media screen and (max-width: 1350px) {

diff --git a/jekyll-assets/scripts/toc.js b/jekyll-assets/scripts/toc.js
@@ -61,34 +61,38 @@ function initialiseCurrentToc(parentID, parentInputID = null, childID = null) {
 }
 
 function updateCurrentToc(parentID, parentInputID = null, childID = null) {
-    // if a parent input id is specified, but no child, expand the parent element
-    // why no child? because if someone clicks the child within a parent, they don't want the parent section to collapse!
-    if (parentInputID && childID == null) {
-        var newParentInput = document.getElementById(parentInputID);
-        newParentInput.click();
-        currentParentInputID = parentInputID;
-    }
+    if (currentParentID == null && currentChildID == null) {
+        initialiseCurrentToc(parentID, parentInputID, childID)
+    } else {
+        // if a parent input id is specified, but no child, expand the parent element
+        // why no child? because if someone clicks the child within a parent, they don't want the parent section to collapse!
+        if (parentInputID && childID == null) {
+            var newParentInput = document.getElementById(parentInputID);
+            newParentInput.click();
+            currentParentInputID = parentInputID;
+        }
 
-    // if this is a new parent id, de-highlight the old parent and highlight the new one
-    if (currentParentID != parentID) {
-        var oldParent = document.getElementById(currentParentID);
-        oldParent.style.removeProperty('font-weight');
-        var newParent = document.getElementById(parentID);
-        newParent.setAttribute('style', 'font-weight:bold');
-        currentParentID = parentID;
-    }
+        // if this is a new parent id, de-highlight the old parent and highlight the new one
+        if (currentParentID != parentID) {
+            var oldParent = document.getElementById(currentParentID);
+            oldParent.style.removeProperty('font-weight');
+            var newParent = document.getElementById(parentID);
+            newParent.setAttribute('style', 'font-weight:bold');
+            currentParentID = parentID;
+        }
 
-    // if there is an old child highlighted, un-highlight it
-    if (currentChildID) {
-        var oldChild = document.getElementById(currentChildID);
-        oldChild.style.removeProperty('font-weight');
-    }
+        // if there is an old child highlighted, un-highlight it
+        if (currentChildID) {
+            var oldChild = document.getElementById(currentChildID);
+            oldChild.style.removeProperty('font-weight');
+        }
 
-    // if there is a new child, highlight it
-    if (childID != null) {
-        var newChild = document.getElementById(childID);
+        // if there is a new child, highlight it
+        if (childID != null) {
+            var newChild = document.getElementById(childID);
 
-        newChild.setAttribute('style', 'font-weight:bold');
+            newChild.setAttribute('style', 'font-weight:bold');
+        }
+        currentChildID = childID;
     }
-    currentChildID = childID;
 }