Skip to content

Commit 8a27a7c

Browse files
committed
Add basic navigation component
1 parent 7b9eda4 commit 8a27a7c

File tree

13 files changed

+433
-24
lines changed

13 files changed

+433
-24
lines changed

_includes/header.html

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,43 @@
1-
<header role="banner">
2-
{%- assign default_paths = site.pages | map: "path" -%}
3-
{%- assign page_paths = site.header_pages | default: default_paths -%}
4-
<h2><a rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a></h2>
1+
<!-- Skip to button -->
2+
<a class="skip-link" href="#main-content">Skip to content</a>
53

6-
{%- if page_paths -%}
7-
<nav>
8-
<ul>
9-
{%- for path in page_paths -%}
10-
{%- assign my_page = site.pages | where: "path", path | first -%}
11-
{%- if my_page.title -%}
12-
<li><a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a></li>
13-
{%- endif -%}
14-
{%- endfor -%}
15-
</ul>
4+
<header class="nav" role="banner">
5+
<nav class="nav__container container">
6+
7+
{%- assign default_paths = site.pages | map: "path" -%}
8+
{%- assign page_paths = site.header_pages | default: default_paths -%}
9+
10+
<!-- Logo -->
11+
<h1 class="m-0">
12+
<a rel="author" href="{{ "/" | relative_url }}">
13+
{% include logo.html %}
14+
<span class="visually-hidden">{{ site.title | escape }}</span>
15+
</a>
16+
</h1>
17+
18+
<!-- Mobile menu button -->
19+
<button class="nav__menu-trigger" type="button" aria-label="Navigation Menu" aria-expanded="false">
20+
<span class="hamburger">
21+
<span class="hamburger__inner"></span>
22+
</span>
23+
</button>
24+
25+
<!-- Page List -->
26+
{%- if page_paths -%}
27+
<ul class="nav-list list--inline monospace">
28+
{%- for path in page_paths -%}
29+
{%- assign my_page = site.pages | where: "path", path | first -%}
30+
{% assign class = nil %}
31+
{% if page.url == my_page.url %}
32+
{% assign class = 'active' %}
33+
{% endif %}
34+
{%- if my_page.title -%}
35+
<li class="nav-list__item">
36+
<a class="nav-list__link {{ class }}" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
37+
</li>
38+
{%- endif -%}
39+
{%- endfor -%}
40+
</ul>
41+
{%- endif -%}
1642
</nav>
17-
{%- endif -%}
1843
</header>

_includes/js.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<script type="text/javascript" src="{{ "/assets/js/main.js" | relative_url }}"></script>

_includes/logo.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<svg class="logo {{ include.color }}" role="img" aria-label="Scribd Technology Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 42">
2+
<g fill="none" fill-rule="nonzero">
3+
<!-- Icon -->
4+
<path class="logo__icon" fill="#1E7B85" d="M18.203 13.653l.238.006a4.882 4.882 0 013.93 1.776c.996 1.185 1.494 2.832 1.494 4.941 0 2.91-.916 5.19-2.747 6.842a11.176 11.176 0 01-6.87 2.676c-.466.065-.942.065-1.436.065A17.724 17.724 0 01.959 25.47L0 24.61l3.77-4.464 2.212 1.706L3.888 24.3a14.924 14.924 0 008.953 2.941c3.847 0 6.512-1.459 7.547-4a3.53 3.53 0 00.088-.788c0-.753-.311-1.13-.935-1.13a4.412 4.412 0 00-.841.16c-.346.079-.698.124-1.053.135a3.594 3.594 0 01-2.447-1.03 3.53 3.53 0 01-1.141-2.753 4.118 4.118 0 011.176-2.94 4.206 4.206 0 013.206-1.236zM11.483.588a16.218 16.218 0 0110.44 3.594l1.012.794-3.14 4.483-2.319-1.53 1.671-2.4A13.53 13.53 0 0011.5 3.306a9.459 9.459 0 00-3.912.776 8.935 8.935 0 00-1.135.694c-1.263.91-1.894 1.999-1.894 3.265 0 .753.312 1.13.935 1.13.285-.026.567-.08.841-.16.346-.079.699-.124 1.053-.135.904.02 1.767.379 2.418 1.006a3.53 3.53 0 011.135 2.77 4.118 4.118 0 01-1.176 2.942 4.206 4.206 0 01-3.206 1.235 4.882 4.882 0 01-3.93-1.764c-1-1.183-1.535-2.853-1.54-4.965v-.382c0-5.377 4.276-9.13 10.393-9.13z"/>
5+
<!-- Wordmark -->
6+
<path class="logo__wordmark" fill="#00293F" d="M60.941 7.224a7.994 7.994 0 015.988 2.435l-1.176 1.27a6.676 6.676 0 00-4.824-2.105c-3.4 0-5.947 2.747-5.947 6.317 0 3.57 2.57 6.359 5.947 6.359 2.106 0 3.489-.812 4.953-2.212l1.177 1.118a7.994 7.994 0 01-6.17 2.694c-4.418 0-7.713-3.524-7.713-7.912s3.248-7.964 7.765-7.964zm-18.217.04a8.012 8.012 0 015.394 1.889l-1.012 1.335a6.747 6.747 0 00-4.43-1.664c-2 0-3.264 1.029-3.264 2.5 0 1.47.782 2.282 4.164 3.005 3.418.747 5 1.995 5 4.365 0 2.653-2.194 4.365-5.24 4.365a8.982 8.982 0 01-6.277-2.47l1.047-1.254a7.312 7.312 0 005.294 2.17c2.065 0 3.424-1.076 3.424-2.634 0-1.447-.771-2.26-3.995-2.942-3.529-.764-5.153-2.005-5.153-4.453 0-2.447 2.106-4.211 5.048-4.211zm36.023.224c3.382 0 5.553 1.818 5.553 4.583 0 2.564-1.753 4.058-4.153 4.488l4.706 6.276h-2.13l-4.452-5.964h-4.389v5.97h-1.735V7.488zm14.282-.006v15.353h-1.735V7.482h1.735zm12.983 0c3.023 0 5 1.489 5 3.842a3.718 3.718 0 01-2.436 3.576c1.818.547 3.289 1.57 3.289 3.724 0 2.652-2.212 4.211-5.57 4.211H99.47V7.482zm17.97 0c4.842 0 8.16 3.312 8.16 7.653 0 4.341-3.336 7.7-8.16 7.7h-5.33V7.482zm-17.958 8.4h-4.848v5.4h5.165c2.324 0 3.765-1.058 3.765-2.747 0-1.688-1.406-2.653-4.082-2.653zm17.958-6.8h-3.6v12.153h3.6c3.883 0 6.36-2.63 6.36-6.053s-2.477-6.1-6.36-6.1zm-45.358 0h-4.742v6.212h4.712c2.306 0 3.959-1.259 3.959-3.165 0-1.905-1.453-3.047-3.93-3.047zm27.258-.04h-4.706v5.287h4.577c2.082 0 3.53-.94 3.53-2.764 0-1.536-1.207-2.524-3.4-2.524z"/>
7+
<!-- Subhead -->
8+
<path class="logo__subhead" fill="#57617A" d="M39.884 32.134h-1.918v-.868l1.96-.07.154-1.904h.952v1.904h3.346v.938h-3.346v3.234c0 .308.028.576.084.805.056.229.15.422.28.581.13.159.308.278.532.357.224.08.5.119.826.119.327 0 .62-.028.882-.084a5.05 5.05 0 00.756-.224l.252.84a7.646 7.646 0 01-1.022.287c-.373.08-.747.119-1.12.119-.495 0-.91-.068-1.246-.203a1.949 1.949 0 01-.805-.574 2.296 2.296 0 01-.434-.889 4.616 4.616 0 01-.133-1.148v-3.22zm6.482 2.478c0-.56.098-1.062.294-1.505.196-.443.455-.819.777-1.127a3.471 3.471 0 012.387-.952c.485 0 .92.077 1.302.231.383.154.707.371.973.651s.469.616.609 1.008.21.826.21 1.302c0 .121-.002.24-.007.357a1.725 1.725 0 01-.035.301h-5.32c.01.364.082.69.217.98.135.29.317.537.546.742.229.205.5.364.812.476.313.112.656.168 1.029.168.401 0 .768-.056 1.099-.168.331-.112.656-.266.973-.462l.406.756a5.97 5.97 0 01-1.148.56c-.43.159-.92.238-1.47.238-.504 0-.978-.082-1.421-.245a3.484 3.484 0 01-1.162-.7 3.246 3.246 0 01-.784-1.113c-.191-.439-.287-.938-.287-1.498zm5.488-.56c0-.681-.177-1.204-.532-1.568-.355-.364-.85-.546-1.484-.546-.28 0-.548.047-.805.14a2.137 2.137 0 00-.693.413 2.38 2.38 0 00-.518.665c-.14.261-.233.56-.28.896h4.312zm3.066.56c0-.57.1-1.076.301-1.519.2-.443.474-.819.819-1.127a3.51 3.51 0 011.211-.7c.462-.159.95-.238 1.463-.238.56 0 1.043.098 1.449.294.406.196.749.43 1.029.7l-.574.742a3.716 3.716 0 00-.875-.574 2.326 2.326 0 00-.987-.21c-.392 0-.751.063-1.078.189a2.315 2.315 0 00-.833.539 2.54 2.54 0 00-.539.833c-.13.322-.196.679-.196 1.071 0 .392.063.747.189 1.064.126.317.303.59.532.819.229.229.504.406.826.532.322.126.679.189 1.071.189.42 0 .805-.082 1.155-.245.35-.163.67-.366.959-.609l.504.742a4.227 4.227 0 01-1.253.784c-.462.187-.945.28-1.449.28-.532 0-1.024-.08-1.477-.238a3.443 3.443 0 01-1.183-.693 3.112 3.112 0 01-.784-1.12 3.846 3.846 0 01-.28-1.505zm8.582-6.58h1.148v2.716l-.056 1.61c.364-.383.751-.7 1.162-.952.41-.252.882-.378 1.414-.378.812 0 1.407.231 1.785.693.378.462.567 1.146.567 2.051V38h-1.148v-4.074c0-.644-.121-1.122-.364-1.435-.243-.313-.644-.469-1.204-.469-.205 0-.394.026-.567.077a2.16 2.16 0 00-.511.231c-.168.103-.34.231-.518.385a8.362 8.362 0 00-.56.539V38h-1.148v-9.968zm8.4 3.164h.952l.098 1.162h.056c.355-.383.737-.7 1.148-.952.41-.252.882-.378 1.414-.378.812 0 1.407.231 1.785.693.378.462.567 1.146.567 2.051V38h-1.148v-4.074c0-.644-.121-1.122-.364-1.435-.243-.313-.644-.469-1.204-.469-.205 0-.394.026-.567.077a2.16 2.16 0 00-.511.231c-.168.103-.34.231-.518.385a8.362 8.362 0 00-.56.539V38h-1.148v-6.804zm7.938 3.416c0-.57.091-1.076.273-1.519.182-.443.427-.819.735-1.127a3.088 3.088 0 011.071-.7 3.488 3.488 0 011.281-.238c.448 0 .875.08 1.281.238.406.159.763.392 1.071.7.308.308.553.684.735 1.127.182.443.273.95.273 1.519 0 .56-.091 1.062-.273 1.505a3.316 3.316 0 01-.735 1.12 3.138 3.138 0 01-1.071.693 3.488 3.488 0 01-1.281.238c-.448 0-.875-.08-1.281-.238a3.138 3.138 0 01-1.071-.693 3.316 3.316 0 01-.735-1.12 3.932 3.932 0 01-.273-1.505zm1.19 0c0 .392.051.747.154 1.064.103.317.25.59.441.819.191.229.42.406.686.532.266.126.562.189.889.189.327 0 .623-.063.889-.189s.495-.303.686-.532c.191-.229.338-.502.441-.819.103-.317.154-.672.154-1.064s-.051-.749-.154-1.071c-.103-.322-.25-.6-.441-.833a1.968 1.968 0 00-.686-.539 2.05 2.05 0 00-.889-.189 2.05 2.05 0 00-.889.189 1.968 1.968 0 00-.686.539 2.491 2.491 0 00-.441.833 3.513 3.513 0 00-.154 1.071zm7.504-6.58h3.472v7.77c0 .504.119.866.357 1.085.238.22.562.329.973.329.373 0 .803-.107 1.288-.322l.294.868c-.308.112-.597.208-.868.287-.27.08-.593.119-.966.119-.728 0-1.281-.205-1.659-.616-.378-.41-.567-1.022-.567-1.834V28.97h-2.324v-.938zm8.106 6.58c0-.57.091-1.076.273-1.519.182-.443.427-.819.735-1.127a3.088 3.088 0 011.071-.7 3.488 3.488 0 011.281-.238c.448 0 .875.08 1.281.238.406.159.763.392 1.071.7.308.308.553.684.735 1.127.182.443.273.95.273 1.519 0 .56-.091 1.062-.273 1.505a3.316 3.316 0 01-.735 1.12 3.138 3.138 0 01-1.071.693 3.488 3.488 0 01-1.281.238c-.448 0-.875-.08-1.281-.238a3.138 3.138 0 01-1.071-.693 3.316 3.316 0 01-.735-1.12 3.932 3.932 0 01-.273-1.505zm1.19 0c0 .392.051.747.154 1.064.103.317.25.59.441.819.191.229.42.406.686.532.266.126.562.189.889.189.327 0 .623-.063.889-.189s.495-.303.686-.532c.191-.229.338-.502.441-.819.103-.317.154-.672.154-1.064s-.051-.749-.154-1.071c-.103-.322-.25-.6-.441-.833a1.968 1.968 0 00-.686-.539 2.05 2.05 0 00-.889-.189 2.05 2.05 0 00-.889.189 1.968 1.968 0 00-.686.539 2.491 2.491 0 00-.441.833 3.513 3.513 0 00-.154 1.071zm8.372 4.522c0 .355.189.644.567.868.378.224.931.336 1.659.336.392 0 .747-.04 1.064-.119.317-.08.588-.184.812-.315.224-.13.394-.28.511-.448a.898.898 0 00.175-.518c0-.327-.128-.546-.385-.658-.257-.112-.646-.168-1.169-.168h-1.33c-.196 0-.38-.007-.553-.021a2.216 2.216 0 01-.483-.091c-.327.177-.553.362-.679.553a1.047 1.047 0 00-.189.581zm-.994.112c0-.27.096-.537.287-.798.191-.261.469-.5.833-.714v-.056a1.61 1.61 0 01-.49-.42c-.14-.177-.21-.41-.21-.7 0-.215.07-.436.21-.665.14-.229.34-.432.602-.609v-.056a2.233 2.233 0 01-.595-.707c-.163-.294-.245-.646-.245-1.057a2.283 2.283 0 01.798-1.771 2.67 2.67 0 01.847-.49 2.997 2.997 0 011.029-.175c.373 0 .71.056 1.008.168h2.814v.882h-1.82c.159.168.303.373.434.616.13.243.196.513.196.812 0 .364-.068.69-.203.98-.135.29-.322.534-.56.735-.238.2-.518.355-.84.462a3.233 3.233 0 01-1.029.161c-.177 0-.366-.021-.567-.063a2.819 2.819 0 01-.581-.189c-.355.224-.532.485-.532.784 0 .27.124.469.371.595s.595.189 1.043.189h1.526c.877 0 1.528.121 1.953.364.425.243.637.653.637 1.232 0 .317-.089.62-.266.91-.177.29-.43.541-.756.756a4.237 4.237 0 01-1.19.518c-.467.13-.99.196-1.568.196-.999 0-1.771-.163-2.317-.49-.546-.327-.819-.793-.819-1.4zm3.066-4.172c.439 0 .81-.145 1.113-.434.303-.29.455-.681.455-1.176a1.618 1.618 0 00-.462-1.148 1.574 1.574 0 00-1.106-.448 1.574 1.574 0 00-1.106.448 1.618 1.618 0 00-.462 1.148c0 .495.154.887.462 1.176.308.29.677.434 1.106.434zm5.502 4.802c.093.028.194.051.301.07.107.019.212.028.315.028.476 0 .863-.138 1.162-.413.299-.275.532-.623.7-1.043l.21-.504-3.178-6.818h1.162l1.666 3.766.413.966.427 1.008h.056l.728-1.974 1.484-3.766h1.092l-2.996 7.364c-.13.336-.28.649-.448.938-.168.29-.369.539-.602.749a2.68 2.68 0 01-.805.497 2.751 2.751 0 01-1.029.182c-.336 0-.635-.047-.896-.14l.238-.91z"/>
9+
</g>
10+
</svg>

_layouts/default.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,13 @@
44
{%- include head.html -%}
55

66
<body>
7-
87
{%- include header.html -%}
98

10-
<main aria-label="Content">
9+
<main id="main-content" aria-label="Content">
1110
{{ content }}
1211
</main>
1312

1413
{%- include footer.html -%}
15-
14+
{% include js.html %}
1615
</body>
17-
1816
</html>

assets/_sass/base/_additional-defaults.scss

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,13 @@ html {
22
scroll-behavior: smooth; // smooth anchor link scrolling
33
}
44

5-
65
body {
76
overflow-x: hidden; // for animation transforms
87
}
98

109
img {
11-
max-width: 100%;
12-
height: auto;
10+
max-width: 100%;
11+
height: auto;
1312
}
1413

1514
// Global box-sizing
@@ -23,6 +22,5 @@ img {
2322

2423
// Remove tap highlight on mobile
2524
a {
26-
-webkit-tap-highlight-color: transparent;
27-
-webkit-tap-highlight-color: transparent; /* For some Androids */
25+
-webkit-tap-highlight-color: transparent;
2826
}

assets/_sass/base/_helpers.scss

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
////////////////////
2+
// List
3+
////////////////////
4+
5+
.list--inline {
6+
list-style-type: none;
7+
margin: 0;
8+
padding: 0;
9+
10+
> li {
11+
display: inline;
12+
}
13+
}
14+
15+
.list--plain {
16+
list-style: none;
17+
margin: 0;
18+
padding: 0;
19+
}
20+
21+
////////////////////
22+
// Visibility
23+
////////////////////
24+
25+
// Hide visually and from screen readers
26+
.hidden {
27+
display: none !important;
28+
}
29+
30+
// Hide only visually, but have it available for screen readers:
31+
// https://a11yproject.com/posts/how-to-hide-content/
32+
.visually-hidden:not(:focus):not(:active) {
33+
position: absolute !important;
34+
height: 1px;
35+
width: 1px;
36+
overflow: hidden;
37+
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
38+
clip: rect(1px, 1px, 1px, 1px);
39+
white-space: nowrap; /* added line */
40+
}
41+
42+
////////////////////
43+
// Spacing
44+
////////////////////
45+
46+
.m-0 {
47+
margin: 0 !important;
48+
}
49+
50+
////////////////////
51+
// Logo
52+
////////////////////
53+
54+
.logo {
55+
vertical-align: middle;
56+
width: 100%;
57+
max-width: 130px;
58+
}
59+
60+
// Dark version of logo
61+
.logo.dark {
62+
.logo__icon { fill: $seafoam-light; }
63+
.logo__wordmark { fill: $white; }
64+
.logo__subhead { fill: rgba($white, .70) }
65+
}

assets/_sass/base/_layout.scss

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
////////////////////
2+
// Layout Variables
3+
////////////////////
4+
5+
// Container padding
6+
$cp-sm: 15px;
7+
$cp-md: 5%;
8+
$cp-lg: 75px;
9+
10+
// Max site width
11+
$max-width: 1440px;
12+
13+
// Breakpoints
14+
$bp-sm: 600px;
15+
$bp-md: 800px;
16+
$bp-lg: 1000px;
17+
$bp-xl: $max-width;
18+
19+
////////////////////
20+
// Container
21+
////////////////////
22+
23+
.container {
24+
width: 100%;
25+
max-width: $max-width;
26+
margin: auto;
27+
padding-left: $cp-sm;
28+
padding-right: $cp-sm;
29+
30+
@media screen and (min-width: $bp-md) {
31+
padding-left: $cp-md;
32+
padding-right: $cp-md;
33+
}
34+
35+
@media screen and (min-width: $bp-xl) {
36+
padding-left: $cp-lg;
37+
padding-right: $cp-lg;
38+
}
39+
}

assets/_sass/base/_typography.scss

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
////////////////////
2+
// Font Imports
3+
////////////////////
4+
5+
// Source Sans Pro + Source Code Pro
6+
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Source+Sans+Pro:400,400i,700&display=swap');
7+
8+
////////////////////
9+
// Available Weights
10+
////////////////////
11+
12+
// Source Sans Pro
13+
// Regular: 400
14+
// Regular Italic: 400i
15+
// Bold: 700
16+
17+
// Source Code Pro
18+
// Regular: 400
19+
// Bold: 700
20+
21+
.sans-serif {
22+
font-family: 'Source Sans Pro', sans-serif;
23+
}
24+
25+
.monospace {
26+
font-family: 'Source Code Pro', monospace;
27+
}
28+
29+
////////////////////
30+
// Body
31+
////////////////////
32+
33+
body {
34+
@extend .sans-serif;
35+
font-size: 100%;
36+
font-weight: 400;
37+
color: $slate-800;
38+
}
39+
40+
////////////////////
41+
// Links
42+
////////////////////
43+
44+
a {
45+
color: $teal;
46+
text-decoration: underline;
47+
text-underline-offset: 2px;
48+
text-decoration-color: transparent;
49+
transition: 0.2s all ease-in-out;
50+
transition-property: color, text-decoration;
51+
}
52+
53+
a:hover,
54+
a:focus {
55+
text-decoration-color: currentColor;
56+
}

assets/_sass/component/_buttons.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.btn-reset {
2+
padding: 0;
3+
border: none;
4+
font: inherit;
5+
color: inherit;
6+
background-color: transparent;
7+
cursor: pointer;
8+
}
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
////////////////////
2+
// Variables
3+
////////////////////
4+
5+
$width: 20px;
6+
$height: 2px;
7+
8+
////////////////////
9+
// Hamburger Button
10+
////////////////////
11+
12+
.hamburger {
13+
position: relative;
14+
width: $width;
15+
}
16+
17+
.hamburger:before,
18+
.hamburger:after,
19+
.hamburger__inner {
20+
content: '';
21+
position: absolute;
22+
display: block;
23+
right: 0;
24+
width: $width - 3px;
25+
height: $height;
26+
background-color: $teal;
27+
border-radius: $height;
28+
transition: all 0.2s ease-in-out;
29+
}
30+
31+
.hamburger:before,
32+
.hamburger:after {
33+
width: 100%;
34+
transform-origin: left;
35+
}
36+
37+
.hamburger:before {
38+
top: -7px;
39+
}
40+
41+
.hamburger:after {
42+
top: 7px;
43+
}
44+
45+
.active .hamburger:before {
46+
transform: translateX(3px) rotate(45deg);
47+
}
48+
49+
.active .hamburger__inner {
50+
opacity: 0;
51+
}
52+
53+
.active .hamburger:after {
54+
transform: translateX(3px) rotate(-45deg);
55+
}

0 commit comments

Comments
 (0)