Skip to content

Commit

Permalink
now with more
Browse files Browse the repository at this point in the history
  • Loading branch information
@thecristen
thecristen committed Aug 16, 2024
1 parent 1fb01f7 commit dd0f81f
Show file tree
Hide file tree
Showing 11 changed files with 614 additions and 392 deletions.
180 changes: 180 additions & 0 deletions documentation/_includes/assets/css/mbta.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
:root {
--transportation-the-ride: #52bbc5;
--transportation-subway: #494f5c;
--timing-default: 200ms;
--spacing-extra-extra-large: 48px;
--spacing-extra-large: 32px;
--spacing-large: 24px;
--spacing-default: 16px;
--spacing-small: 8px;
--spacing-extra-small: 4px;
--font-size-large: 18px;
--font-size-default: 16px;
--font-size-small: 14px;
--font-stack: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
--blue-800: #0b2f4c;
--blue-500: #165c96;
--blue-400: #5da9e8;
--blue-300: #a1c6ed;
--blue-200: #cee0f4;
--blue-100: #e2ecf9;
--purple-600: #664a8d;
--purple-100: #dcd3e8;
--green-800: #145a06;
--green-100: #dff0d8;
--red-700: #b3000f;
--red-100: #f2dede;
--yellow-700: #d8ac00;
--yellow-500: #ffce0c;
--yellow-400: #ffdd00;
--yellow-300: #ffe372;
--yellow-100: #fffae9;
--neutral-1000: #000000;
--neutral-900: #192026;
--neutral-700: #3e454d;
--neutral-500: #626a73;
--neutral-400: #8a9199;
--neutral-300: #bdbfc1;
--neutral-200: #e5e5e3;
--neutral-100: #f5f4f2;
--neutral-0: #ffffff;
--white: #ffffff;
--action-primary-inverse: var(--neutral-0);
--action-primary-disabled: var(--neutral-500);
--action-primary-active: var(--blue-800);
--action-primary-hover: var(--blue-800);
--action-primary-default: var(--purple-600);
--text-tertiary: var(--neutral-900);
--text-secondary: var(--neutral-900);
--background-tertiary: var(--neutral-200);
--background-secondary: var(--neutral-100);
--background-primary: var(--neutral-0);
--text-primary: var(--neutral-900);
}

body {
font-family: var(--font-stack);
font-size: var(--font-size-default);
color: var(--text-primary);
}

a {
color: var(--action-primary-active);
text-decoration: underline;
}

.mbta--skip-link {
background: 0 0;
left: 0;
padding: 0.5rem 1rem;
position: absolute;
top: -3.8rem;
transition: .15s ease-in-out;
z-index: 100;

&:focus {
background: #fff;
left: 0;
position: absolute;
outline: 0.25rem solid #2491ff;
outline-offset: 0;
top: 0;
transition: .15s ease-in-out;
}
}

nav.mbta--nav {
[role="banner"] &, footer & {
align-items: center;
background-color: var(--blue-800);
color: var(--blue-100);
display: flex;
gap: var(--spacing-default);
font-family: var(--font-stack);
font-size: var(--font-size-small);
padding-block: var(--spacing-small);
padding-inline: clamp(var(--spacing-small), 5%, var(--spacing-extra-extra-large));

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

.mbta--logo {
filter: invert(1);

img {
height: revert-layer;
max-height: calc(var(--spacing-default) + var(--spacing-small));
width: auto;
}
}

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

li {
text-wrap: nowrap;
}
}
}
}

[role="banner"]:has(.mbta--nav) {
.mbta--logo {
container: header-logo / inline-size;
flex-grow: 1;
flex-shrink: 0;
}

[src='https://cdn.mbta.com/images/mbta-logo.svg'] {
display: none;
}
[src='https://cdn.mbta.com/images/mbta-name-and-logo.svg'] {
display: inline-block;
}

.mbta--nav-actions {
margin-left: auto;
}

@container header-logo (width < 130px) {
[src='https://cdn.mbta.com/images/mbta-logo.svg'] {
display: inline-block;
}
[src='https://cdn.mbta.com/images/mbta-name-and-logo.svg'] {
display: none;
}
}
}

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

a {
color: var(--blue-400);
}

.mbta--nav-actions {
flex-grow: 1;
}

.mbta--copyright,
.mbta--logo {
margin-left: auto;
}

@container footer-nav (width < 56ch) {
.mbta--nav[aria-label^="MBTA system"] {
align-items: flex-start;
flex-direction: column;
}

.mbta--copyright,
.mbta--logo {
margin-left: unset;
}
}
}
5 changes: 2 additions & 3 deletions documentation/_includes/components/head.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ renderData.title or title or site.name }}</title>
<meta name="description" content="{{ metaDescription or renderData.metaDescription or site.description }}">
<link rel="stylesheet" href="/style.css?v={% version %}"/>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>{{ site.emoji }}</text></svg>">

<link rel="stylesheet" href="/style.css?v={% version %}" />
<link rel="stylesheet" href="/_includes/assets/css/mbta.css" />
{% set js %}
{% include "assets/js/inline.js" %}
{% include "assets/js/search.js" %}
Expand Down
4 changes: 2 additions & 2 deletions documentation/_includes/components/header.njk
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="fixed w-full top-0 left-0 z-10 ">
<nav class="flex h-16 md:h-20 items-center bg-white dark:bg-gray-900 z-20 fixed top-0 left-0 right-0 border-b border-gray-100 px-0 py-2 dark:bg-dark dark:border-gray-800 transition-colors duration-200">
<div class="w-full left-0 z-10">
<nav class="flex h-16 md:h-20 items-center bg-white dark:bg-gray-900 z-20 border-b border-gray-100 px-0 py-2 dark:bg-dark dark:border-gray-800 transition-colors duration-200">
<div class="hidden md:block space-y-4 w-full p-4">
<a class="no-underline text-gray-600 hover:text-gray-800 font-bold dark:text-gray-500 items-center" href="/">
<span class="text-xl">{{ site.name }}</span>
Expand Down
39 changes: 30 additions & 9 deletions documentation/_includes/layouts/base.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,20 @@
<html {% if section %} data-current="{{ section }}"{% endif %} lang="en">
{% include "components/head.njk" %}
<body>
<div id="app" class="h-screen bg-white dark:bg-gray-900">
<section role="banner">
<a href="#main-content" class="mbta--skip-link">Skip to main content
</a>
<nav class="mbta--nav">
<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>
</nav>
</section>

<div id="app" class="bg-white dark:bg-gray-900">
{% include "components/header.njk" %}

<nav id="navigation" class="fixed inset-y-0 overflow-x-hidden overflow-y-auto hidden w:64 lg:w-72 mt-20 md:block dark:bg-gray-900 flex-none top-0 p-4 w-64 md:border-r border-b border-gray-100 dark:border-gray-800">
<nav id="navigation" class="fixed inset-y-0 overflow-x-hidden overflow-y-auto hidden w:64 lg:w-72 md:block dark:bg-gray-900 flex-none top-20 p-4 w-64 md:border-r border-b border-gray-100 dark:border-gray-800" style="margin-top: 8rem">
<div class=" clear-right">
<a href="/">
<div class="block md:hidden pt-4 font-semibold text-gray-500">{{ site.name }}</div>
Expand All @@ -14,12 +24,23 @@
</div>
{% include "components/nav.njk" %}
</nav>
<main id="main" class="dark:bg-gray-900 pt-16 sm:pt-18 md:pt-20 md:pl-64 lg:pl-72">


{{ layoutContent | safe }}
{% include "components/footer.njk" %}
</main>
<main id="main" class="dark:bg-gray-900 md:pl-64 lg:pl-72">
{{ layoutContent | safe }}
{% include "components/footer.njk" %}
</main>
</div>

<footer>
<nav class="mbta--nav" aria-label="MBTA system footer">
<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>
</nav>
</footer>
</body>
</html>
Loading

0 comments on commit dd0f81f

Please sign in to comment.