more fixes

mbta · Nov 1, 2024 · 19176f6 · 19176f6
1 parent 237de75
commit 19176f6
Show file tree

Hide file tree

Showing 15 changed files with 182 additions and 184 deletions.
diff --git a/documentation/.eleventy.js b/documentation/.eleventy.js
@@ -17,18 +17,20 @@ import markdownItAttrs from "markdown-it-attrs";
 import markdownItCenterText from "markdown-it-center-text";
 import { statSync } from "fs";
 
+const systemColorKeys = ['redLine','orangeLine','greenLine','blueLine','brandBus','silverLine','ferry','theRide','commuterRail','swa','mbtaDark','darkWinter','midWinter'];
+
 export default function (eleventyConfig) {
   eleventyConfig.addPlugin(svgContents);
   eleventyConfig.addPlugin(embedEverything);
   eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
   eleventyConfig.addPlugin(syntaxHighlight);
 
   eleventyConfig.addFilter("systemColors", function(allColors) {
-    return Object.entries(allColors).filter(([k,v]) => ['redLine','orangeLine','greenLine','blueLine','brandBus','silverLine','ferry','theRide','commuterRail','swa','mbtaDark','darkWinter','midWinter'].includes(k))
+    return Object.entries(allColors).filter(([k,v]) => systemColorKeys.includes(k))
   });
 
   eleventyConfig.addFilter("notSystemColors", function(allColors) {
-    return Object.entries(allColors).filter(([k,v]) => !['redLine','orangeLine','greenLine','blueLine','brandBus','silverLine','ferry','theRide','commuterRail','swa','mbtaDark','darkWinter','midWinter'].includes(k))
+    return Object.entries(allColors).filter(([k,v]) => !systemColorKeys.includes(k))
   });
 
   // Responsive image shortcode

diff --git a/documentation/_includes/assets/css/mbta.css b/documentation/_includes/assets/css/mbta.css
@@ -28,7 +28,7 @@ a {
 .mbta--skip-link {
   background: 0 0;
   left: 0;
-  padding: var(--spacing-sm) var(--background-secondaryspacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
   position: absolute;
   top: -3.8rem;
   transition: .15s ease-in-out;
@@ -46,23 +46,29 @@ a {
 }
 
 nav.mbta--subnav {
+  a {
+    text-decoration: none;;
+  }
+
+  .mbta--logo {
+    color: var(--menu-item-default-text-color);
+  }
+
   background-color: var(--navbar-local-background-color);
   color: var(--menu-item-default-text-color);
   padding-block: var(--spacing-md);
 
   .container {
     align-items: center;
-    display: flex;
     gap: var(--spacing-md); 
   }
 
-  button {
+  .mbta--subnav-button {
     background-color: transparent;
     border: var(--border-width-sm) solid var(--menu-item-default-border-color);
     border-radius: var(--border-radius-default);
-    color: var(--color-white);
-    /* color: var(--menu-item-default-text-color); */
-    padding: var(--spacing-sm) var(--spacing-md);
+    color: var(--menu-item-default-text-color);
+    padding: var(--spacing-xs) var(--spacing-sm);
     font-weight: bold;
 
     + div a {
@@ -71,11 +77,21 @@ nav.mbta--subnav {
     }
   }
 
-  button:hover, button[aria-expanded="true"] {
+  .mbta--subnav-button:hover, .mbta--subnav-button[aria-expanded="true"] {
     background-color: var(--menu-item-active-background-color);
     border-color: var(--menu-item-active-border-color);
     color: var(--menu-item-active-text-color);
   }
+
+  .mbta--subnav-dropdown {
+    background-color: var(--submenu-background-color);
+    border-color: var(--menu-item-active-border-color);
+    color: var(--menu-item-active-text-color);
+
+    a:hover {
+      background-color: var(--submenu-item-hover-background-color);
+    }
+  }
 }
 
 nav.mbta--nav {

diff --git a/documentation/_includes/components/header.njk b/documentation/_includes/components/header.njk
diff --git a/documentation/_includes/layouts/base.njk b/documentation/_includes/layouts/base.njk
@@ -1,5 +1,5 @@
 <!doctype html>
-<html {% if section %} data-current="{{ section }}"{% endif %} lang="en">
+<html lang="en" class="h-full">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -15,45 +15,17 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link href="https://unpkg.com/[email protected]/themes/prism-okaidia.min.css" rel="stylesheet" />
   </head>
-  <body>
+  <body class="flex min-h-full flex-col">
     <section role="banner">
-      <a href="#main-content" class="mbta--skip-link">Skip to main content
+      <a href="#main" class="mbta--skip-link">Skip to main content
       </a>
-      <nav class="mbta--nav">
-        <div class="container mx-auto px-3">
-          <a class="mbta--logo" href="https://www.mbta.com">
-            <img role="img" src="https://cdn.mbta.com/images/mbta-name-and-logo.svg" width="198" height="36" alt="Massachusetts Bay Transportation Authority" />
-            <img role="img" src="https://cdn.mbta.com/images/mbta-logo.svg" width="36"height="36" alt="Massachusetts Bay Transportation Authority" />
-          </a>
-        </div>
-      </nav>
+      {% include "partials/global-nav.njk" %}
     </section>
-
-    <div id="app">
-      {% include "components/header.njk" %}
-      <main id="main" class="container mx-auto px-3">
-        {{ content | safe }} 
-      </main>
-    </div>
-
-    <footer>
-      <nav class="mbta--subnav">
-        <div class="container mx-auto px-3">
-          {{ site.footer | safe }}
-        </div>
-      </nav>
-      <nav class="mbta--nav" aria-label="MBTA system footer">
-        <div class="container mx-auto px-3">
-          <ul class="mbta--nav-actions">
-            <li><a href="https://www.mbta.com/policies/privacy-policy">Privacy</a></li>
-            <li><a href="https://www.mbta.com/policies/terms-use">Terms and conditions</a></li>
-          </ul>
-          <div class="mbta--copyright">© Massachusetts Bay Transportation Authority, all rights reserved.</div>
-          <a class="mbta--logo" href="https://www.mbta.com">
-            <img role="img" src="https://cdn.mbta.com/images/mbta-logo.svg" width="36" height="36" alt="Massachusetts Bay Transportation Authority" />
-          </a>
-        </div>
-      </nav>
-    </footer>
+    {% include "partials/local-nav.njk" %}
+    {% include "partials/breadcrumbs.njk" %}
+    <main id="main" class="container mx-auto px-3 grow">
+      {{ content | safe }} 
+    </main>
+    {% include "partials/footer.njk" %}
   </body>
 </html>
diff --git a/documentation/_includes/partials/breadcrumbs.njk b/documentation/_includes/partials/breadcrumbs.njk
@@ -0,0 +1,11 @@
+<nav label="Breadcrumb" class="py-2 bg-slate-100">
+  {% set bPages = collections.all | eleventyNavigationBreadcrumb(eleventyNavigation.key, { includeSelf: true }) %}
+  <div class="container mx-auto px-3">
+  {%- for entry in bPages %}
+    {%- if not loop.first %}
+    <i class="fa-solid fa-chevron-right px-2" aria-hidden="true"></i>
+    {%- endif %}
+    <a class="underline underline-offset-4 decoration-2 hover:decoration-4" href="{{ entry.url }}">{{ entry.title }}</a>
+  {%- endfor -%}
+  </div>
+</nav>
diff --git a/documentation/_includes/partials/footer.njk b/documentation/_includes/partials/footer.njk
@@ -0,0 +1,20 @@
+
+    <footer>
+      <nav class="mbta--subnav">
+        <div class="container mx-auto px-3">
+          {{ site.footer | safe }}
+        </div>
+      </nav>
+      <nav class="mbta--nav" aria-label="MBTA system footer">
+        <div class="container mx-auto px-3">
+          <ul class="mbta--nav-actions">
+            <li><a href="https://www.mbta.com/policies/privacy-policy">Privacy</a></li>
+            <li><a href="https://www.mbta.com/policies/terms-use">Terms and conditions</a></li>
+          </ul>
+          <div class="mbta--copyright">© Massachusetts Bay Transportation Authority, all rights reserved.</div>
+          <a class="mbta--logo" href="https://www.mbta.com">
+            <img role="img" src="https://cdn.mbta.com/images/mbta-logo.svg" width="36" height="36" alt="Massachusetts Bay Transportation Authority" />
+          </a>
+        </div>
+      </nav>
+    </footer>
diff --git a/documentation/_includes/partials/global-nav.njk b/documentation/_includes/partials/global-nav.njk
@@ -0,0 +1,8 @@
+<nav class="mbta--nav">
+        <div class="container mx-auto px-3">
+          <a class="mbta--logo" href="https://www.mbta.com">
+            <img role="img" src="https://cdn.mbta.com/images/mbta-name-and-logo.svg" width="198" height="36" alt="Massachusetts Bay Transportation Authority" />
+            <img role="img" src="https://cdn.mbta.com/images/mbta-logo.svg" width="36"height="36" alt="Massachusetts Bay Transportation Authority" />
+          </a>
+        </div>
+      </nav>
diff --git a/documentation/_includes/partials/local-nav.njk b/documentation/_includes/partials/local-nav.njk
@@ -0,0 +1,57 @@
+<nav class="mbta--subnav">
+  <div class="container mx-auto px-3">
+    <a class="mbta--logo text-lg no-underline font-bold" href="/">{{ site.name }}</a>
+
+    <div class="block sm:inline-flex gap-1 ml-0 sm:ml-3 justify-center">
+      {% set navPages = collections.all | eleventyNavigation %}
+      {%- for entry in navPages %}
+        {%- if entry.children.length -%}
+          <div class="relative"
+            x-id="['dropdown-button']"
+            x-data="{
+                open: false,
+                toggle() {
+                    if (this.open) { return this.close() }
+                    this.$refs.button.focus()
+                    this.open = true
+                },
+                close(focusAfter) {
+                    if (! this.open) return
+                    this.open = false
+                    focusAfter && focusAfter.focus()
+                }
+            }"
+            x-on:keydown.escape.prevent.stop="close($refs.button)"
+            x-on:focusin.window="! $refs.panel.contains($event.target) && close()">
+              <button x-ref="button"
+                x-on:click="toggle()"
+                :aria-expanded="open"
+                :aria-controls="$id('dropdown-button')"
+                type="button"
+                class="flex items-center gap-2 mbta--subnav-button" href="{{ entry.url }}">
+                {{ entry.title }}
+                <i class="fa-solid fa-chevron-down"></i>
+              </button>
+              <div class="mbta--subnav-dropdown absolute left-0 mt-1 min-w-28  grid grid-cols-1 z-10"
+                style="display: none;"
+                x-ref="panel"
+                x-show="open"
+                x-transition.origin.top.left
+                x-on:click.outside="close($refs.button)"
+                :id="$id('dropdown-button')">
+                {%- for child in entry.children %}
+                  <a class="p-2" href="{{child.url}}">
+                    {{child.title}}
+                  <a>
+                {% endfor -%}
+              </div>
+          </div>
+        {%- else -%}
+          <a class="mbta--subnav-button" href="{{entry.url}}">
+            {{entry.title}}
+          <a>
+        {%- endif -%}
+      {%- endfor -%}
+      </div>
+    </div>
+  </nav>
diff --git a/documentation/_includes/swatch_header.njk b/documentation/_includes/swatch_header.njk
diff --git a/documentation/_includes/swatches.njk b/documentation/_includes/swatches.njk