Merge pull request #304 from AR21SM/footer

Footer with Dark/Light Mode | Responsive & Accessible Redesign (#201)

Author: aterrel

DISCOVER/_config.yml

@@ -3,7 +3,7 @@
 
 title: DISCOVER
 author: Community
-logo: _static/logo-light.png
+logo: _static/images/logo-light.png
 
 # Force re-execution of notebooks on each build.
 # See https://jupyterbook.org/content/execute.html
@@ -22,9 +22,12 @@ html:
   use_issues_button: true
   use_repository_button: true
   html_in_header:
-    - '<script src="_static/logo-switcher.js"></script>'
+    - '<script src="_static/js/logo-switcher.js"></script>'
+    - '<script src="_static/js/footer.js"></script>'
+
+
   extra_css:
-    - _static/mainLogo.css
+    - _static/css/mainLogo.css
 
 # config sphinx tags extension
 sphinx:

DISCOVER/_static/css/mainLogo.css

@@ -0,0 +1,121 @@
+/* Image styling for content area */
+html[data-theme=dark] .bd-content img:not(.only-dark,.dark-light) {    
+    background: transparent !important;
+    border-radius: .25rem;
+}
+
+html .bd-content img:not(.only-dark,.dark-light) {
+    padding: 1rem 0;
+}
+
+/* Custom footer styles */
+
+.bd-footer-content_inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem 0;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.footer-logo {
+  flex: 0 0 auto;
+  margin-left: 1rem;
+  margin-right: 2rem;
+}
+
+.numfocus-logo {
+
+  max-width: 120px;
+  height: auto;
+}
+
+.footer-links {
+  display: flex;
+  gap: 1.5rem;
+  flex: 1;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.footer-links a {
+  color:#48566b;
+  text-decoration: none;
+  font-size: 0.9rem;
+  white-space: nowrap;
+  transition: color 0.2s ease;
+}
+
+.footer-links a:hover {
+  color:#222832;
+  text-decoration: underline;
+}
+
+.copyright {
+  color: #777;
+  font-size: 0.85rem;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.social-links {
+  display: flex;
+  gap: 1rem;
+  margin-left: auto;
+}
+
+.social-links a {
+  color:#48566b;
+  transition: color 0.2s ease;
+}
+
+.social-links a:hover {
+  color: #222832;
+}
+
+.social-links svg {
+  width: 20px;
+  height: 20px;
+}
+
+html[data-theme=dark] .footer-links a {
+  color: #bbb;
+}
+
+html[data-theme=dark] .footer-links a:hover {
+  color: #fff;
+}
+
+html[data-theme=dark] .copyright {
+  color: #999;
+}
+
+html[data-theme=dark] .social-links a {
+  color: #aaa;
+}
+
+html[data-theme=dark] .social-links a:hover {
+  color: #fff;
+}
+
+@media (max-width: 768px) {
+  .bd-footer-content_inner {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .footer-logo {
+    margin-right: 0;
+  }
+  
+  .footer-links {
+    justify-content: center;
+    margin: 0.5rem 0;
+  }
+  
+  .social-links {
+    margin: 1rem 0 0 0;
+  }
+}

DISCOVER/_static/images/Numfocus-logo-dark.png

@@ -0,0 +1,61 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const existingFooter = document.querySelector('.bd-footer-content');
+  
+  if (existingFooter) {
+    existingFooter.innerHTML = '';
+    
+    const footerContent = document.createElement('div');
+    footerContent.className = 'bd-footer-content_inner container';
+    footerContent.innerHTML = `
+      <div class="footer-logo">
+        <a href="https://numfocus.org" target="_blank" rel="noopener">
+          <img src="_static/images/Numfocus-logo-dark.png" alt="NumFOCUS" class="numfocus-logo light-mode-only">
+          <img src="_static/images/Numfocus-logo-light.png" alt="NumFOCUS" class="numfocus-logo dark-mode-only">
+        </a>
+      </div>
+
+      <div class="footer-links">
+        <a href="https://numfocus.org/privacy-policy" target="_blank" rel="noopener">Privacy Policy</a>
+        <a href="https://numfocus.org/code-of-conduct" target="_blank" rel="noopener">Code of Conduct</a>
+        <a href="https://numfocus.org/support" target="_blank" rel="noopener">Support</a>
+        <a href="https://numfocus.org/donate" target="_blank" rel="noopener">Donate</a>
+        <span class="copyright">© Copyright 2023</span>
+      </div>
+
+      <div class="social-links">
+        <a href="https://github.com/numfocus" target="_blank" rel="noopener" aria-label="GitHub">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.113.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
+        </a>
+        <a href="https://x.com/NumFOCUS" target="_blank" rel="noopener" aria-label="X (Twitter)">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
+        </a>
+        <a href="https://www.linkedin.com/company/numfocus/" target="_blank" rel="noopener" aria-label="LinkedIn">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
+        </a>
+      </div>
+    `;
+    
+    const styleElement = document.createElement('style');
+    styleElement.textContent = `
+      /* Theme-specific logo visibility */
+      .light-mode-only {
+        display: block;
+      }
+      
+      .dark-mode-only {
+        display: none;
+      }
+      
+      html[data-theme="dark"] .light-mode-only {
+        display: none;
+      }
+      
+      html[data-theme="dark"] .dark-mode-only {
+        display: block;
+      }
+    `;
+    document.head.appendChild(styleElement);
+    
+    existingFooter.appendChild(footerContent);
+  }
+});

DISCOVER/_static/images/Numfocus-logo-light.png

@@ -3,9 +3,9 @@ document.addEventListener('DOMContentLoaded', () => {
   const isTagsFolder = window.location.pathname.includes('/_tags/');
   logos.forEach(logo => {
     if (logo.classList.contains('only-light')) {
-      logo.src = isTagsFolder ? '../_static/logo-light.png' : '_static/logo-light.png';// Replacing with the light logo
+      logo.src = isTagsFolder ? '../_static/images/logo-light.png' : '_static/images/logo-light.png';// Replacing with the light logo
     } else if (logo.classList.contains('only-dark')) {
-      logo.src = isTagsFolder ? '../_static/logo-dark.png' : '_static/logo-dark.png';// Replacing with the dark logo
+      logo.src = isTagsFolder ? '../_static/images/logo-dark.png' : '_static/images/logo-dark.png';// Replacing with the dark logo
     }
   });
 
@@ -14,7 +14,7 @@ document.addEventListener('DOMContentLoaded', () => {
     let isDarkMode = document.documentElement.getAttribute("data-theme") === "dark"; // Check theme
 
     if (mainLogo) {
-        mainLogo.src = isDarkMode ? "_static/logo-dark.png" : "_static/logo-light.png"; // Change image source
+        mainLogo.src = isDarkMode ? "_static/images/logo-dark.png" : "_static/images/logo-light.png"; // Change image source
     }
   }