Merge pull request #3 from chrystalchern/master

home page description

Author: claudioperez

source/_static/css/custom.css

@@ -32,4 +32,37 @@ dl.py-parameter-list .param-type {
 .version-changed    { background: #e7f1fb; color: #1c5d99; }
 .version-deprecated { background: #fdf3e0; color: #9a6b00; }
 .version-removed    { background: #fbe9e9; color: #a32020; }
-.version-fixed      { background: #ece9fb; color: #5b3da3; }
+.version-fixed      { background: #ece9fb; color: #5b3da3; }
+
+/* Home button: 𝜒ara, chi matching the favicon and homepage title */
+.navbar-brand .brand-chi {
+    font-size: 1.5rem;
+    line-height: 1;
+    color: var(--pst-color-text-base);
+}
+
+.navbar-brand:hover .brand-chi {
+    color: var(--pst-color-link-hover);
+}
+
+/* Dark-mode dark panels for sphinx-tabs */
+html[data-theme="dark"] .sphinx-tabs-panel {
+    color: var(--pst-color-text-base);
+    background: rgb(50, 50, 50);
+    border-color: #4a4a4a;
+}
+
+html[data-theme="dark"] .sphinx-tabs-tab {
+    color: var(--pst-color-link);
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+html[data-theme="dark"] .sphinx-tabs-tab[aria-selected="true"] {
+    border-color: #4a4a4a;
+    border-bottom: 1px solid rgb(50, 50, 50);
+    background-color: rgb(50, 50, 50);
+}
+
+html[data-theme="dark"] [role="tablist"] {
+    border-bottom-color: #4a4a4a;
+}

source/_static/css/home-css/home.css

@@ -17,4 +17,64 @@ h2 {
     line-height: 1.5;
     padding: .5rem .75rem;
     position: relative;
-}  
+}
+
+/* Header nav: all links inline (no "More" dropdown), wrapping if needed;
+   stacked vertically in the mobile (hamburger) menu */
+.bd-navbar-elements {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+}
+
+@media (max-width: 1023px) {
+    .bd-navbar-elements {
+        flex-direction: column;
+    }
+}
+
+/* Open the "More" dropdown as an overlay instead of pushing content down
+   (theme CSS sets .dropdown-menu to position: static) */
+.bd-navbar-elements .nav-item.dropdown {
+    position: relative;
+}
+
+.bd-navbar-elements .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+}
+
+.bd-footer a:visited {
+    color: #6f42c1;
+}
+
+.bd-footer a:hover,
+.bd-footer a:visited:hover {
+    color: var(--colorPrimaryLight);
+}
+
+.bd-footer h5 {
+    font-weight: 700;
+    margin-bottom: 1rem;
+}
+
+/* enlarge GitHub icon: Bulma's .icon caps it at 1.5rem */
+.bd-footer .social-media-icons svg.icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    transition: fill .15s ease-in-out;
+}
+
+.bd-footer .social-media-icons svg.icon:hover {
+    fill: var(--colorPrimaryLight);
+}
+
+/* Pull the icon column left (one grid column = 8.3333%) */
+@media (min-width: 992px) {
+    .bd-footer .xara-footer {
+        margin-left: -5%;
+    }
+}

source/_templates/home.html

@@ -38,6 +38,8 @@
     document.documentElement.dataset.theme = "light"; // localStorage.getItem("theme") || "light";
   </script>
   <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
+  <!-- theme's Bootstrap bundle: makes the "More" nav dropdown work -->
+  <script src="{{ pathto('_static/scripts/bootstrap.js', 1) }}" defer></script>
 
   <link rel="canonical" href="https://xara.so" >
   <link rel="icon" type="image/x-icon" href="_static/images/favicon.ico">
@@ -89,9 +91,6 @@
 
     <div class="container is-max-widescreen">
       <div class=navbar-brand>
-        <a class=navbar-item href="/"><img alt="xara branding" class="navbar-logo" src="{{ pathto('_static/images/peer-black-100.png', 1) }}" >
-          <div class=navbar-logo-text></div>
-        </a>
         <a role=button class="navbar-burger" aria-label="menu" aria-expanded=false
           data-target="navbar-menu"><span aria-hidden="true"></span>
           <span aria-hidden=true></span>
@@ -103,7 +102,7 @@
           <a href="/install.html" class="navbar-item is-secondary">Install</a>
           <a href=https://numpy.org/doc/stable class="navbar-item is-secondary">Documentation</a>
           {% endif %}
-          <ul class="navbar-item bd-navbar-elements " style="display: flex; flex-direction: row;">
+          <ul class="navbar-item bd-navbar-elements">
             {{ generate_header_nav_html(n_links_before_dropdown=theme_header_links_before_dropdown) }}
           </ul>
         </div>
@@ -200,7 +199,7 @@ <h2 class="">Gallery</h2>
       <h2>Pacific Earthquake Engineering Center</h2>
       <div class="col-md-8 mx-auto text-center">
         <p>
-          <em><strong>xara</strong></em> is a free tool developed at the University of California, Berkeley and published by the Pacific Earthquake Engineering Research center.
+          <em><strong>xara</strong></em> is a free tool developed at the University of California, Berkeley and published by the Pacific Earthquake Engineering Research center (PEER). More free tools from PEER:
         </p>
         <hr class="my-4">
         <div class="row g-3">
@@ -256,10 +255,9 @@ <h2>Partners</h2>
     <div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary">
       <div class="row">
         <div class="col-lg-3 mb-3">
-          <a class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none" href="/" aria-label="STAIRlab">
-            <a href="https://stairlab.berkeley.edu">
-              <img id=footer-logo style="max-width: 50;" src="{{ pathto('_static/images', 1) }}/peer-black-100.png"
-              alt="STAIRLab logo."></a>
+          <a class="d-inline-flex align-items-center mb-3 text-body-emphasis text-decoration-none" href="https://stairlab.berkeley.edu" aria-label="STAIRlab">
+            <img id=footer-logo class="me-2" style="max-width: 50;" src="{{ pathto('_static/images', 1) }}/peer-black-100.png"
+              alt="STAIRLab logo.">
             <span class="fs-5">STAIRLab</span>
           </a>
           <ul class="list-unstyled small">
@@ -302,5 +300,17 @@ <h5>Projects</h5>
       </div>
     </div>
   </footer>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      document.querySelectorAll('.navbar-burger').forEach(burger => {
+        burger.addEventListener('click', () => {
+          const target = document.getElementById(burger.dataset.target);
+          burger.classList.toggle('is-active');
+          if (target) target.classList.toggle('is-active');
+        });
+      });
+    });
+  </script>
 </body>
 </html>

source/conf.py

@@ -187,7 +187,7 @@
 #         "image_light": html_logo,
 #         "image_dark": "_static/logo-dark.png",
           "link": html_baseurl, # "index.html",
-          "text": f'<span class="lead display-3">{project}</span>',
+          "text": '<span class="brand-chi">𝜒ara</span>',
 #         "alt_text": "xara docs - Home",
         }
     }
@@ -224,8 +224,8 @@
 #           {"title": "Interoperability", "link": f"{g}/examples/cablestayed/",  "image": "../_static/images/gallery/CableStayed02-576x324.webp", "description": "Coming soon."},
     ],
     "features": [
-        {"title": "Fast", "body": "Core components have been refactored to leverage modern C++ features, which has furnished substantial performance improvements over the alternative serial OpenSees interpreters."},
-        {"title": "Free", "body": "All source code contributed to xara is licensed under a <em>pure</em> BSD."},
+        {"title": "Fast", "body": "Core components have been refactored to leverage modern C++ features, furnishing substantial performance improvements over the alternative serial OpenSees interpreters."},
+        {"title": "Free", "body": "All source code contributed to xara is licensed under pure BSD."},
         {"title": "Robust", "body": '<em>xara</em> is designed from the ground up for use in production environments like <a href="https://structures.live">structures.live</a>'},
     ],
     "home_image": "_static/images/CableStayed02.png"
@@ -239,8 +239,6 @@
     'css/home-css/'+str(file.name) for file in (Path(__file__).parents[0]/"_static/css/home-css/").glob("vars*.css")
 ] + [
      'css/css/'+str(file.name) for file in (Path(__file__).parents[0]/"_static/css/css/").glob("*.css")
-] + [
-    "css/veux.css",
 ]
 
 html_secnum_suffix = " "