_static/css/custom.css

-.wy-side-nav-search > a img.logo {
+.wy-side-nav-search>a img.logo {
     width: 340px;
     height: 66px;
 }
 
-.rst-content div.figure, .rst-content figure {
+.rst-content div.figure,
+.rst-content figure {
     text-align: center;
 }
 
@@ -36,7 +37,7 @@
     background-color: #25282b;
 }
 
-.wy-nav-top{
+.wy-nav-top {
     background-color: #25282b;
     background-color: #25282b;
 }
@@ -74,10 +75,68 @@ span.strike {
     overflow: auto;
 }
 
+/* Site horizontal spacing */
 .bd-main .bd-content .bd-article-container {
-    max-width: 100%;  /* default is 60em */
+    max-width: 120em;
+    /* default is 60em */
 }
 
+.bd-page-width {
+    max-width: 120rem;
+    /* default is 88rem */
+}
+
+/* Figure headerlink */
+
 figure a.headerlink {
     position: static;
-}
\ No newline at end of file
+}
+
+/* Primary sidebar toggle button */
+#pst-primary-sidebar.collapsed {
+    overflow: hidden;
+    padding: 0;
+    width: 0; /* Collapse the sidebar */
+    transition: none;
+}
+
+#pst-secondary-sidebar.collapsed {
+    overflow: hidden;
+    padding: 0;
+    width: 0; /* Collapse the sidebar */
+    transition: none;
+}
+
+#pst-secondary-sidebar {
+    padding-left: 0px;
+}
+
+/* Toggle button styles */
+.sidebar-toggle-btn {
+    margin-top: 44px; /* Space between sidebar and button */
+    padding: 7px; /* Set padding for the button, horizontally more */
+    background-color: #F16321; /* Button background color */
+    color: white; /* Text color */
+    border: none; /* Remove border */
+    cursor: pointer; /* Pointer cursor on hover */
+    display: block; /* Ensure the button is block-level */
+    font-size: 20px; /* Adjust font size */
+    font-weight: bold; /* Bold text */
+    height: 40px; /* Set a fixed height for the button */
+    width: auto; /* Width based on content */
+    line-height: 20px; /* Vertically center the text */
+}
+
+#toggle-primary-sidebar.sidebar-toggle-btn{
+    border-radius: 0 5px 5px 0; /* Rounded corners */
+}
+
+#toggle-secondary-sidebar.sidebar-toggle-btn{
+    border-radius: 5px 0 0 5px; /* Rounded corners */
+}
+
+/* Optional: Adding a hover effect */
+.sidebar-toggle-btn:hover {
+    background-color: #C7480D; /* Slightly darker blue on hover */
+}
+

_templates/404.html

@@ -3,124 +3,119 @@
 {% block extrahead %}
 
 <script>
-    // The redirect_folders dictionary is passed from html_context
-    const redirectFolders = JSON.parse('{{ redirect_folders | tojson | safe }}');
-
-    // Get the current URL
-    let currentUrl = window.location.href;
-
-    // Iterate over the redirect_folders key-value pairs
-    let redirectFound = false;
-    for (const [key, value] of Object.entries(redirectFolders)) {
-        if (currentUrl.includes("/" + key)) {
-            // Determine the replacement value
-            let replacement = value === "" ? "" : "/" + value;
-
-            // Create a new URL by replacing "/key" with the replacement value
-            let newUrl = currentUrl.replace("/" + key, replacement);
-
-            // Make an HTTP request to check if the new URL exists
-            fetch(newUrl, { method: "HEAD" })
-                .then(response => {
-                    if (response.ok) {
-                        // Redirect is found
-                        redirectFound = true;
-
-                        // Update the heading with the correct information
-                        const headingElement = document.getElementById('pageHeading');
-                        if (headingElement) {
-                            headingElement.textContent = "Page Moved!";
-                        }
+    document.addEventListener("DOMContentLoaded", function () {
+        // The redirect_folders dictionary is passed from html_context
+        const redirectFolders = JSON.parse('{{ redirect_folders | tojson | safe }}');
 
-                        // Update the message with the correct link
-                        const redirectMessageElement = document.getElementById('redirectMessage');
-                        if (redirectMessageElement) {
-                            redirectMessageElement.innerHTML = `We found the correct page you are looking for <a href="${newUrl}" id="correctPageLink">here</a>.`;
-                        }
+        // Get the current URL
+        let currentUrl = window.location.href;
 
-                        document.getElementById('redirectInfo').style.display = "block";
+        // Flag to check if valid redirect is found
+        let redirectFound = false;
 
-                        // If the response is OK, show the modal and initiate the countdown
-                        const redirectModal = new bootstrap.Modal(document.getElementById('redirectModal'), {
-                            backdrop: 'static',  // Prevents closing the modal by clicking outside
-                            keyboard: false      // Disables closing the modal with the keyboard
-                        });
-                        redirectModal.show();
+        // Iterate over the redirect_folders key-value pairs
+        for (const [key, value] of Object.entries(redirectFolders)) {
+            if (currentUrl.includes("/" + key)) {
 
-                        let countdownValue = 5;
-                        const countdownElement = document.getElementById('countdownNumber');
-                        if (countdownElement) {
-                            countdownElement.textContent = countdownValue;
-                        }
+                // Determine the replacement value
+                let replacement = value === "" ? "" : "/" + value;
 
-                        // Variable to track if countdown should continue
-                        let countdownActive = true;
+                // Create a new URL by replacing "/key" with the replacement value
+                let newUrl = currentUrl.replace("/" + key, replacement);
 
-                        // Countdown from 5 to 1
-                        const countdownInterval = setInterval(() => {
-                            if (!countdownActive) {
-                                clearInterval(countdownInterval);
-                                return;
+                // Make an HTTP request to check if the new URL exists
+                fetch(newUrl, { method: "HEAD" })
+                    .then(response => {
+                        if (response.ok) {
+                            // Valid redirect is found
+                            redirectFound = true;
+
+                            // Update the heading with the correct information
+                            const headingElement = document.getElementById('pageHeading');
+                            if (headingElement) {
+                                headingElement.textContent = "Page Moved!";
                             }
-                            countdownValue--;
+
+                            // Update the message with the correct link
+                            const redirectMessageElement = document.getElementById('redirectMessage');
+                            if (redirectMessageElement) {
+                                redirectMessageElement.innerHTML = `We found the correct page you are looking for <a href="${newUrl}" id="correctPageLink">here</a>.`;
+                            }
+
+                            document.getElementById('redirectInfo').style.display = "block";
+
+                            // If the response is OK, show the modal and initiate the countdown
+                            const redirectModal = new bootstrap.Modal(document.getElementById('redirectModal'), {
+                                backdrop: 'static',  // Prevents closing the modal by clicking outside
+                                keyboard: false      // Disables closing the modal with the keyboard
+                            });
+                            redirectModal.show();
+
+                            let countdownValue = 5;
+                            const countdownElement = document.getElementById('countdownNumber');
                             if (countdownElement) {
                                 countdownElement.textContent = countdownValue;
                             }
 
-                            // When countdown reaches 1, redirect
-                            if (countdownValue <= 1) {
-                                clearInterval(countdownInterval);
+                            // Variable to track if countdown should continue
+                            let countdownActive = true;
+
+                            // Countdown from 5 to 1
+                            const countdownInterval = setInterval(() => {
+                                if (!countdownActive) {
+                                    clearInterval(countdownInterval);
+                                    return;
+                                }
+                                countdownValue--;
+                                if (countdownElement) {
+                                    countdownElement.textContent = countdownValue;
+                                }
+
+                                // When countdown reaches 1, redirect
+                                if (countdownValue <= 1) {
+                                    clearInterval(countdownInterval);
+                                    window.location.href = newUrl;
+                                }
+                            }, 1000);
+
+                            // Event listener for "Redirect Now" button
+                            document.getElementById('redirectNow').addEventListener('click', () => {
                                 window.location.href = newUrl;
-                            }
-                        }, 1000);
-
-                        // Event listener for "Redirect Now" button
-                        document.getElementById('redirectNow').addEventListener('click', () => {
-                            window.location.href = newUrl;
-                        });
-
-                        // Event listener for "Cancel" button
-                        document.getElementById('cancelRedirect').addEventListener('click', () => {
-                            countdownActive = false;
-                            clearInterval(countdownInterval);
-                        });
-
-                        // Event listener for "Close" button in the modal header
-                        document.getElementById('closeRedirect').addEventListener('click', () => {
-                            countdownActive = false;
-                            clearInterval(countdownInterval);
-                        });
-                    } else if (!redirectFound) {
-                        const headingElement = document.getElementById('pageHeading');
-                        if (headingElement) {
-                            headingElement.textContent = "Page Not Found (404)";
+                            });
+
+                            // Event listener for "Cancel" button
+                            document.getElementById('cancelRedirect').addEventListener('click', () => {
+                                countdownActive = false;
+                                clearInterval(countdownInterval);
+                            });
+
+                            // Event listener for "Close" button in the modal header
+                            document.getElementById('closeRedirect').addEventListener('click', () => {
+                                countdownActive = false;
+                                clearInterval(countdownInterval);
+                            });
+                        } else {
+                            // If the response is not OK, proceed to check other redirects
+                            console.log(`No valid page found at ${newUrl}`);
                         }
-                        document.getElementById('redirectInfo').style.display = "block";
-                    }
-                })
-                .catch(error => {
-                    console.error("Error checking the URL:", error);
-                    // In case of an error, ensure the title is properly set                
-                    const headingElement = document.getElementById('pageHeading');
-                    if (headingElement) {
-                        headingElement.textContent = "Page Not Found (404)";
-                    }
-                    document.getElementById('redirectInfo').style.display = "block";
-                });
-
-            // Stop after the first successful replacement check
-            break;
+                    })
+                    .catch(error => {
+                        console.error("Error checking the URL:", error);
+                    });
+                break;
+            }
         }
-    }
 
-    // If no potential redirect match is found after iteration
-    if (!redirectFound) {
-        const headingElement = document.getElementById('pageHeading');
-        if (headingElement) {
-            headingElement.textContent = "Page Not Found (404)";
+
+        if (!redirectFound) {
+            // In case the link test doesn't include redirectFolders
+            const headingElement = document.getElementById('pageHeading');
+            if (headingElement) {
+                headingElement.textContent = "Page Not Found (404)";
+            }
+            document.getElementById('redirectInfo').style.display = "block";
         }
-        document.getElementById('redirectInfo').style.display = "block";
-    }
+    });
 </script>
 
 {{ super() }}

_templates/layout.html

@@ -4,36 +4,7 @@
 
     <!-- Top version and announcement message -->
     <script>
-
-    // Function to check for the next div and clear it or create it if not available
-    function getBannerDiv() {
-        // Get the first element with the class 'search-button__wrapper'
-        const sbw = document.getElementsByClassName('search-button__wrapper');
         
-        // Ensure the collection is not empty to avoid errors
-        if (sbw.length > 0) {
-            const sbwElement = sbw[0];
-            const nextElement = sbwElement.nextElementSibling;
-            
-            // Check if the next element exists and has the class 'pst-async-banner-revealer'
-            if (nextElement && nextElement.classList.contains('pst-async-banner-revealer')) {
-                // Clear the content of the next element
-                nextElement.innerHTML = '';
-            } else {
-                // Create a new div with the required class and style if it doesn't exist
-                const newDiv = document.createElement('div');
-                newDiv.className = 'pst-async-banner-revealer';
-                newDiv.style.height = 'auto';
-                sbwElement.insertAdjacentElement('afterend', newDiv);
-                return newDiv; // Return the newly created div
-            }
-            return nextElement; // Return the existing element
-        } else {
-            console.error("No elements with the class 'search-button__wrapper' found.");
-            return null;
-        }
-    }
-    
     // Function to generate version and announcement banner HTML
     function getBannerHTML() {
         return `
@@ -65,8 +36,8 @@
     }
     
     // Get the target element where the banners will be added
-    const bannerDiv = getBannerDiv();
-    
+    const bannerDiv = document.getElementsByClassName('pst-async-banner-revealer')[0];
+
     // Add version banner and announcement banner if bannerDiv is valid
     if (bannerDiv) {
         bannerDiv.innerHTML = getBannerHTML();
@@ -77,3 +48,119 @@
     {{ super() }}
 
 {% endblock docs_navbar %}
+
+{% block docs_main %}
+<script>
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Add primary sidebar toggle button
+    const primarySidebar = document.getElementById('pst-primary-sidebar');
+    if (primarySidebar) {
+        addSidebarToggleButton(
+            primarySidebar,
+            'primary',
+            'sidebar-toggle-btn',
+            '<i class="fa-solid fa-caret-left"></i>',
+            '<i class="fa-solid fa-caret-right"></i>',
+            'after'
+        );
+    }
+
+    // Add secondary sidebar toggle button
+    const secondarySidebar = document.getElementById('pst-secondary-sidebar');
+    if (secondarySidebar) {
+        addSidebarToggleButton(
+            secondarySidebar,
+            'secondary',
+            'sidebar-toggle-btn',
+            '<i class="fa-solid fa-caret-right"></i>',
+            '<i class="fa-solid fa-caret-left"></i>',
+            'before'
+        );
+    }
+
+    /**
+     * Adds a toggle button for a sidebar with visibility and state management.
+     * @param {HTMLElement} sidebar - The sidebar element to toggle.
+     * @param {string} key - A unique key for localStorage and button id.
+     * @param {string} buttonClass - CSS class for the toggle button.
+     * @param {string} collapseHTML - HTML for the button when the sidebar is collapsed.
+     * @param {string} expandHTML - HTML for the button when the sidebar is expanded.
+     * @param {string} position - Position to insert the button ('before' or 'after').
+     */
+    function addSidebarToggleButton(sidebar, key, buttonClass, collapseHTML, expandHTML, position) {
+        const toggleButton = document.createElement('button');
+        toggleButton.id = `toggle-${key}-sidebar`;
+        toggleButton.innerHTML = sidebar.classList.contains('collapsed') ? expandHTML : collapseHTML;
+        toggleButton.className = buttonClass;
+
+        // Insert the toggle button
+        if (position === 'before') {
+            sidebar.parentNode.insertBefore(toggleButton, sidebar);
+        } else if (position === 'after') {
+            sidebar.parentNode.insertBefore(toggleButton, sidebar.nextSibling);
+        }
+
+        // Restore collapsed state from localStorage
+        const collapsedState = localStorage.getItem(`${key}SidebarCollapsed`) === 'true';
+        if (collapsedState) {
+            sidebar.classList.add('collapsed');
+            toggleButton.innerHTML = expandHTML;
+        }
+
+        // Handle toggle button click
+        toggleButton.addEventListener('click', () => {
+            sidebar.classList.toggle('collapsed');
+
+            // Update button content and save state
+            if (sidebar.classList.contains('collapsed')) {
+                toggleButton.innerHTML = expandHTML;
+                localStorage.setItem(`${key}SidebarCollapsed`, 'true');
+            } else {
+                toggleButton.innerHTML = collapseHTML;
+                localStorage.setItem(`${key}SidebarCollapsed`, 'false');
+            }
+        });
+
+        // Check visibility of the toggle button
+        function checkToggleVisibility() {
+            const existingToggleButton = document.querySelector(
+                `.pst-navbar-icon.sidebar-toggle.${key}-toggle`
+            );
+            if (existingToggleButton && existingToggleButton.offsetParent !== null) {
+                toggleButton.style.display = 'none'; // Hide custom toggle button
+            } else {
+                toggleButton.style.display = 'block'; // Show custom toggle button
+            }
+        }
+
+        // Update button visibility if the sidebar is removed
+        function updateButtonVisibility() {
+            if (window.getComputedStyle(sidebar).display === 'none') {
+                toggleButton.remove(); // Remove button if sidebar is hidden
+            } else if (!document.querySelector(`#toggle-${key}-sidebar`)) {
+                // Re-add the button if missing
+                if (position === 'before') {
+                    sidebar.parentNode.insertBefore(toggleButton, sidebar);
+                } else if (position === 'after') {
+                    sidebar.parentNode.insertBefore(toggleButton, sidebar.nextSibling);
+                }
+            }
+        }
+
+        // Initial visibility check
+        checkToggleVisibility();
+        updateButtonVisibility();
+
+        // Monitor window resize for dynamic button visibility updates
+        window.addEventListener('resize', () => {
+            checkToggleVisibility();
+            updateButtonVisibility();
+        });
+    }
+});
+
+</script>
+{{ super() }}
+
+{% endblock docs_main %}
\ No newline at end of file

_templates/mission.html

-<div class="card bg-light mt-4 text-center">
-    <div class="card-header bg-primary text-light fw-bold" data-bs-toggle="collapse" href="#collapseWhy" role="button" aria-expanded="false" aria-controls="collapseWhy">
+<div class="card mb-3">
+    <div class="card-header bg-primary text-light fw-bold">
         Why are we doing this?
     </div>
-    <div id="collapseWhy" class="collapse">
-        <div class="card-body">
-            <p class="card-text text-dark">
-                We believe in making computers open again to democratize technology and empower individuals and organizations to explore, experiment, and create without the constraints of proprietary systems.
-            </p>
-        </div>
+    <div class="card-body">
+        <p class="card-text text-dark">
+            We believe in making computers open again to democratize technology and empower individuals and organizations to explore, experiment, and create without the constraints of proprietary systems.
+        </p>
     </div>
 </div>
 
-<div class="card bg-light mt-4 text-center">
-    <div class="card-header bg-warning text-dark fw-bold" data-bs-toggle="collapse" href="#collapseWhat" role="button" aria-expanded="false" aria-controls="collapseWhat">
+<div class="card mb-3">
+    <div class="card-header bg-warning text-dark fw-bold">
         What are we doing?
     </div>
-    <div id="collapseWhat" class="collapse">
-        <div class="card-body">
-            <p class="card-text text-dark">
-                We design versatile and affordable single-board computers to provide developers, hobbyists, and educators with a platform for prototyping, experimentation, and production of embedded systems. Our comprehensive documentation, tutorials, and vibrant online community support users in their projects and foster knowledge sharing.
-            </p>
-        </div>
+    <div class="card-body">
+        <p class="card-text text-dark">
+            We design versatile and affordable single-board computers to provide developers, hobbyists, and educators with a platform for prototyping, experimentation, and production of embedded systems. Our comprehensive documentation, tutorials, and vibrant online community support users in their projects and foster knowledge sharing.
+        </p>
     </div>
 </div>
 
-<div class="card bg-light mt-4 text-center">
-    <div class="card-header bg-success text-light fw-bold" data-bs-toggle="collapse" href="#collapseHow" role="button" aria-expanded="false" aria-controls="collapseHow">
+<div class="card mb-3">
+    <div class="card-header bg-success text-light fw-bold">
         How are we doing it?
     </div>
-    <div id="collapseHow" class="collapse">
-        <div class="card-body">
-            <p class="card-text text-dark">
-                Through open-source hardware designs, diverse software support, and active community engagement, we enable users to customize, innovate, and collaborate effortlessly in embedded computing.
-            </p>
-        </div>
+    <div class="card-body">
+        <p class="card-text text-dark">
+            Through open-source hardware designs, diverse software support, and active community engagement, we enable users to customize, innovate, and collaborate effortlessly in embedded computing.
+        </p>
     </div>
 </div>
 
-<div class="card bg-light mt-4 text-center">
-    <div class="card-header bg-dark text-light fw-bold" data-bs-toggle="collapse" href="#collapseSupport" role="button" aria-expanded="false" aria-controls="collapseSupport">
+<div class="card mb-3">
+    <div class="card-header bg-dark text-light fw-bold">
         Support us <i class="fa-solid fa-hand-holding-dollar"></i>
     </div>
-    <div id="collapseSupport" class="collapse">
-        <div class="card-body">
-            <p class="card-text text-dark">
-                The BeagleBoard.org Foundation is a Michigan, USA-based 501(c)(3) non-profit corporation existing to provide education in and collaboration around the design and use of open-source software and hardware in embedded computing.
-            </p>
-        </div>
-        <div class="card-footer d-grid gap-2">
-            <a href="https://patreon.com/beagleboard" class="btn btn-danger text-light"><i class="fa-brands fa-patreon"></i> Become a Patreon</a>
-            <a href="https://github.com/sponsors/beagleboard" class="btn btn-dark text-light"><i class="fa-brands fa-github"></i> Sponsor on GitHub</a>
-        </div>
+    <div class="card-body">
+        <p class="card-text text-dark">
+            The BeagleBoard.org Foundation is a Michigan, USA-based 501(c)(3) non-profit corporation existing to provide education in and collaboration around the design and use of open-source software and hardware in embedded computing.
+        </p>
+    </div>
+    <div class="card-footer d-grid gap-2">
+        <a href="https://patreon.com/beagleboard" class="btn btn-danger text-light"><i class="fa-brands fa-patreon"></i> Become a Patreon</a>
+        <a href="https://github.com/sponsors/beagleboard" class="btn btn-dark text-light"><i class="fa-brands fa-github"></i> Sponsor on GitHub</a>
     </div>
 </div>