Skip to content

Commit

Permalink
semi-polished layout! mobile menu!
Browse files Browse the repository at this point in the history
  • Loading branch information
thecristen committed Nov 1, 2024
1 parent 1890ef2 commit 4ed7120
Show file tree
Hide file tree
Showing 9 changed files with 320 additions and 165 deletions.
152 changes: 105 additions & 47 deletions documentation/_includes/assets/css/mbta.css
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@

body {
background-color: var(--background-secondary);
background-color: var(--background-primary);
color: var(--text-primary);
font-family: var(--font-family-base);
font-size: var(--font-size-base);
color: var(--text-secondary);
font-size: var(--font-size-default);
line-height: var(--line-height-normal);
}

a {
a:not(.mbta--button-primary) {
color: var(--color-action-primary-default);
font-weight: 500;
text-decoration: underline;

&:hover {
Expand All @@ -25,6 +26,40 @@ a {
}
}

.mbta--button-primary, .mbta--button-secondary {
align-items: center;
border-color: var(--color-cobalt-80);
border-style: solid;
border-width: var(--border-width-sm);
border-radius: var(--border-radius-default);
display: flex;
font-weight: bold;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
}

.mbta--button-primary {
background-color: var(--color-cobalt-30);
color: var(--color-white);

&:focus {
outline: calc(var(--border-width-sm) * 2) solid var(--color-cobalt-60);
}

&:active, &:hover, &:focus {

}
}

.mbta--button-secondary {
background-color: var(--color-white);
color: var(--color-cobalt-20);

&:active, &:hover, &:focus {

}
}

.mbta--skip-link {
background: 0 0;
left: 0;
Expand All @@ -46,31 +81,11 @@ 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;
gap: var(--spacing-md);
}

.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(--menu-item-default-text-color);
padding: var(--spacing-xs) var(--spacing-sm);
font-weight: bold;

+ div a {
background-color: var(--submenu-background-color);
color: var(--color-action-primary-default)
Expand All @@ -82,32 +97,60 @@ nav.mbta--subnav {
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);
.mbta--submenu, [x-show="mobileExpanded"] {
background-color: var(--color-cobalt-90);
border-radius: var(--border-radius-default);
box-shadow: 0 7px 14px hsla(223, 11%, 12%, 0.2);
color: var(--color-action-primary-default);
font-weight: 500;

a {
text-decoration: none;

a:hover {
background-color: var(--submenu-item-hover-background-color);
&:visited {
color: inherit;
}
}
}

.mbta--submenu {
margin-top: var(--spacing-xs);
min-width: min-content;

a {
padding-block: var(--spacing-sm);
padding-inline: var(--spacing-lg);

&:hover, &:active {
background-color: var(--color-cobalt-20);
border-radius: var(--border-radius-default);
color: var(--color-white);
}
}
}

[x-show="mobileExpanded"] {
li {
padding-block: var(--spacing-xs);
padding-inline: var(--spacing-lg);

&:hover, &:has(a.active) {
background-color: var(--color-cobalt-20);
border-radius: var(--border-radius-default);
color: var(--color-white);
}
}
}

nav.mbta--nav {
[role="banner"] &, footer & {
background-color: var(--navbar-global-background-color);
padding: var(--spacing-sm);

.container {
align-items: center;
display: flex;
gap: var(--spacing-md);
}
padding: var(--spacing-sm) 0;

.mbta--logo, .mbta--nav-actions {
display: inherit;
gap: inherit;
}

.mbta--logo {
Expand All @@ -121,13 +164,8 @@ nav.mbta--nav {
}

.mbta--nav-actions {
list-style: none;
padding-inline: 0;
margin: 0;

li {
text-wrap: nowrap;
}
display: flex;
gap: var(--spacing-md);
}
}
}
Expand All @@ -146,6 +184,12 @@ nav.mbta--nav {
display: inline-block;
}

.container {
align-items: center;
display: flex;
gap: var(--spacing-md);
}

.mbta--nav-actions {
margin-left: auto;
}
Expand All @@ -160,13 +204,27 @@ nav.mbta--nav {
}
}

nav[label="Breadcrumb"] {
background-color: var(--background-secondary);
color: var(--text-secondary);
}

footer:has(.mbta--nav[aria-label^="MBTA system"]) {
background-color: var(--footer-global-background-color);
container: footer-nav / inline-size;
color: var(--footer-global-text-color);
color: var(--color-white);

a {
color: var(--color-action-primary-default);
color: var(--color-cobalt-80);
}

.mbta--subnav {
background-color: var(--color-cobalt-90);
color: var(--text-primary);

a {
color: var(--color-cobalt-30);
}
}

.mbta--nav-actions {
Expand Down
1 change: 1 addition & 0 deletions documentation/_includes/layouts/base.njk
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<link rel="stylesheet" href="/variables-light.css" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" href="/variables-dark.css" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" href="/_includes/assets/css/mbta.css" />
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<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" />
Expand Down
8 changes: 5 additions & 3 deletions documentation/_includes/layouts/page.njk
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@
layout: layouts/base.njk
section: page
---
<div class="flex gap-1 mt-3 justify-end text-xs">
<div class="flex gap-3 mt-3 justify-end text-xs">
<div>
<i class="fa-solid fa-hourglass-start"></i>
Created {% createdDate %}</div>
Created {% createdDate %}
</div>
<div>
<i class="fa-solid fa-user-pen"></i>
Last Updated {% modifiedDate %}</div>
Last Updated {% modifiedDate %}
</div>
</div>
<article class="mb-6 pb-4">
<h1>{{ title }}</h1>
Expand Down
4 changes: 2 additions & 2 deletions documentation/_includes/partials/breadcrumbs.njk
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<nav label="Breadcrumb" class="py-2 bg-slate-100">
<nav label="Breadcrumb" class="py-2">
{% 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>
<a class="hover:decoration-4" href="{{ entry.url }}">{{ entry.title }}</a>
{%- endfor -%}
</div>
</nav>
6 changes: 3 additions & 3 deletions documentation/_includes/partials/footer.njk
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
</div>
</nav>
<nav class="mbta--nav" aria-label="MBTA system footer">
<div class="container mx-auto px-3">
<div class="container mx-auto px-3 flex flex-col sm:flex-row sm:items-center gap-4">
<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>
<li><a href="https://www.mbta.com/policies/privacy-policy">Privacy Policy</a></li>
<li><a href="https://www.mbta.com/policies/terms-use">Terms of Use</a></li>
</ul>
<div class="mbta--copyright">© Massachusetts Bay Transportation Authority, all rights reserved.</div>
<a class="mbta--logo" href="https://www.mbta.com">
Expand Down
14 changes: 7 additions & 7 deletions documentation/_includes/partials/global-nav.njk
Original file line number Diff line number Diff line change
@@ -1,8 +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>
<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>
21 changes: 21 additions & 0 deletions documentation/_includes/partials/local-nav-mobile-menu.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{% set navPages = collections.all | eleventyNavigation %}
<ul class="py-3">
{%- for entry in navPages -%}
{%- if entry.children.length -%}
<li class="mt-2 font-heading !font-bold text-lg text-black">
<a class="{{ 'active' if entry.url == page.url }}" href="{{entry.url}}">{{entry.title}}</a>
</li>
<ul>
{%- for child in entry.children -%}
<li>
<a class="{{ 'active' if child.url == page.url }}" href="{{child.url}}">{{child.title}}</a>
</li>
{%- endfor -%}
</ul>
{%- else -%}
<li>
<a class="{{ 'active' if entry.url == page.url }}" href="{{entry.url}}">{{entry.title}}</a>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
Loading

0 comments on commit 4ed7120

Please sign in to comment.