Skip to content

Commit fa667b1

Browse files
timmywiltimmywil
committed
fix(base): add a mobile nav; add footer
1 parent 761a2f5 commit fa667b1

4 files changed

Lines changed: 143 additions & 37 deletions

File tree

‎.editorconfig‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# EditorConfig is awesome: editorconfig.org
2+
3+
# top-most EditorConfig file
4+
root = true
5+
6+
[*]
7+
end_of_line = lf
8+
insert_final_newline = true
9+
charset = utf-8
10+
indent_size = 2
11+
indent_style = space

‎_includes/layouts/base.njk‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,22 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>{{ title or metadata.title }}</title>
77
<meta name="description" content="{{ description or metadata.description }}">
8-
{% favicon './favicon.svg' %}
8+
{% favicon './public/favicon.svg' %}
99
{# Atom and JSON feeds included by default #}
10-
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}"/>
11-
<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}"/>
10+
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}" />
11+
<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}" />
1212
{#
1313
CSS bundles are provided via the `eleventy-plugin-bundle` plugin:
1414
1. You can add to them using `{% css %}`
1515
2. You can get from them using `{% getBundle "css" %}` or `{% getBundleFileUrl "css" %}`
16-
3. You can do the same for JS: {% js %}{% endjs %} and
17-
<script>{% getBundle "js" %}</script>
16+
3. You can do the same for JS: {% js %}{% endjs %} and <script>{% getBundle "js" %}</script>
1817
4. Learn more: https://github.com/11ty/eleventy-plugin-bundle
1918
#}
2019
{#
2120
Hot reload isn't working with the bundle plugin on windows
2221
See https://github.com/11ty/eleventy/issues/2807
2322
#}
24-
<link rel="stylesheet" href="/css/index.css"/>
23+
<link rel="stylesheet" href="/css/index.css" />
2524
{# Add the contents of a file to the bundle #}
2625
{%- css %}{% include "public/css/ticket.css" %}{% endcss %}
2726
{# Add an arbitrary string to the bundle #}
@@ -39,9 +38,15 @@
3938
<header class="flex-column">
4039
<div class="flex-row flex-between-start">
4140
<a id="jq-siteLogo" href="https://jquery.com/" title="jQuery Home">
42-
<img src="/img/logo.png" width="215" height="53" alt="jQuery: Write Less, Do More."/>
41+
<img src="/img/logo.png" width="215" height="53" alt="jQuery: Write Less, Do More." />
4342
</a>
44-
<div>
43+
<input class="hamburger-toggle visually-hidden" id="jq-menutoggle" type="checkbox" />
44+
<label aria-label="Toggle Menu" for="jq-menutoggle" class="hamburger-lines flex-column flex-between-center">
45+
<span class="hamburger-line"></span>
46+
<span class="hamburger-line"></span>
47+
<span class="hamburger-line"></span>
48+
</label>
49+
<div id="jq-menus">
4550
<nav id="jq-primaryNavigation">
4651
<h2 class="visually-hidden">jQuery sites navigation menu</h2>
4752
<ul class="nav">
@@ -103,7 +108,7 @@
103108
</nav>
104109
</div>
105110
</div>
106-
<div id="bug-tracker-form" class="flex-row flex-between-center">
111+
<div id="bug-tracker-form" class="flex-column flex-between-center">
107112
<h1>Bug Tracker</h1>
108113
<form class="flex-row flex-start-center" action="/search" method="get">
109114
<label for="jq-primarySearch">Search Tickets</label>
@@ -117,8 +122,11 @@
117122
<main id="skip">
118123
{{ content | safe }}
119124
</main>
120-
<footer></footer>
125+
<footer>
126+
Copyright &copy; {% currentYear %}
127+
<a href="https://openjsf.org">The OpenJS Foundation</a>
128+
</footer>
121129
</div>
122130
<!-- Current page: {{ page.url | htmlBaseUrl }} -->
123131
</body>
124-
</html>
132+
</html>

‎eleventy.config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ module.exports = function (eleventyConfig) {
3131
eleventyConfig.addPlugin(pluginImages)
3232

3333
// Official plugins
34+
eleventyConfig.addPlugin(pluginFavicon)
3435
eleventyConfig.addPlugin(pluginRss)
3536
eleventyConfig.addPlugin(pluginSyntaxHighlight, {
3637
preAttributes: { tabindex: 0 }
@@ -48,7 +49,6 @@ module.exports = function (eleventyConfig) {
4849
}
4950
]
5051
})
51-
eleventyConfig.addPlugin(pluginFavicon)
5252

5353
// Filters
5454
eleventyConfig.addFilter('readableDate', (dateObj, format, zone) => {
@@ -109,6 +109,11 @@ module.exports = function (eleventyConfig) {
109109
})
110110
})
111111

112+
// Shortcodes
113+
eleventyConfig.addShortcode('currentYear', () => {
114+
return DateTime.local().toFormat('yyyy')
115+
})
116+
112117
// Features to make your build faster (when you need them)
113118

114119
// If your passthrough copy gets heavy and cumbersome, add this line

‎public/css/index.css‎

Lines changed: 107 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
--background-color: #39414a;
1515
--nav-background-color: #192839;
1616
--secondary-nav-background-color: var(--secondary-color);
17+
--content-background-color: #181c21;
1718

1819
--text-color: white;
1920
--text-color-link: #5DB0E6;
@@ -106,17 +107,6 @@ main :first-child {
106107
margin-top: 0;
107108
}
108109

109-
header {
110-
position: relative;
111-
height: 186px;
112-
padding: 0 40px;
113-
}
114-
header:after {
115-
content: '';
116-
display: table;
117-
clear: both;
118-
}
119-
120110
table {
121111
margin: 1em 0;
122112
}
@@ -150,8 +140,11 @@ code {
150140

151141
/* Header */
152142
header {
143+
position: relative;
144+
height: 186px;
153145
display: flex;
154146
flex-wrap: wrap;
147+
padding: 0 40px;
155148
}
156149
header h1 {
157150
font-size: 1.25rem;
@@ -161,20 +154,21 @@ header h1 {
161154
/* Nav */
162155
.nav {
163156
display: flex;
164-
flex-direction: row;
157+
flex-direction: column;
165158
padding: 0;
166159
margin: 0;
167160
list-style: none;
168161
}
169162
.nav a {
170163
display: flex;
171164
align-items: center;
172-
height: 27px;
165+
height: 35px;
173166
font-size: 0.75rem;
174167
padding: 0 1em;
175168
text-decoration: none;
176169
border-bottom: 1px dotted var(--nav-text-color);
177170
white-space: nowrap;
171+
width: 100%;
178172
}
179173
.nav li:not(.active) a:hover,
180174
.nav li:not(.active) a:active {
@@ -189,9 +183,8 @@ header h1 {
189183
.nav .active a {
190184
border-bottom: 2px solid var(--nav-active-color);
191185
}
192-
193186
#jq-siteLogo {
194-
margin-top: 59px;
187+
margin-top: 1em;
195188
}
196189
#jq-primaryNavigation {
197190
padding: 0 0.75em;
@@ -200,28 +193,57 @@ header h1 {
200193
#jq-secondaryNavigation {
201194
padding: 0 0.75em;
202195
background-color: var(--secondary-nav-background-color);
203-
border-radius: var(--border-radius);
204-
margin-top: 2em;
205196
}
206197
#jq-secondaryNavigation a {
207-
height: 35px;
208198
font-size: 0.8125rem;
209199
}
210200
#bug-tracker-form {
211-
position: absolute;
212-
bottom: 15px;
213-
left: 0;
214-
right: 0;
201+
position: relative;
202+
width: 100%;
203+
gap: 16px;
204+
margin-top: 25px;
205+
}
206+
#bug-tracker-form form {
207+
position: relative;
208+
padding-right: 22px;
215209
}
216210
#jq-searchButton {
217211
position: absolute;
218-
right: -20px;
219-
top: -1px;
212+
right: 0;
213+
top: -4px;
220214
width: 35px;
221215
height: 35px;
222216
background: url(/img/icon-search.png) 0 0 no-repeat;
223217
}
224218

219+
/* Hamburger Icon */
220+
.hamburger-lines {
221+
position: relative;
222+
width: 18px;
223+
height: 14px;
224+
align-self: center;
225+
}
226+
.hamburger-line {
227+
width: 100%;
228+
height: 2px;
229+
background-color: white;
230+
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
231+
}
232+
.hamburger-toggle:checked + .hamburger-lines span:first-of-type {
233+
transform: rotateZ(45deg) translate(4px, 4.5px) scaleX(1.2);
234+
}
235+
.hamburger-toggle:checked + .hamburger-lines span:nth-of-type(2) {
236+
transform: rotateZ(135deg) scaleX(1.2);
237+
}
238+
.hamburger-toggle:checked + .hamburger-lines span:last-of-type {
239+
transform: translateY(-8px) scale(0);
240+
opacity: 0;
241+
}
242+
.hamburger-toggle:checked ~ #jq-menus {
243+
transform: none;
244+
opacity: 1;
245+
}
246+
225247
/* Forms */
226248
form {
227249
gap: 0.5em;
@@ -240,6 +262,17 @@ button {
240262
border: 0;
241263
cursor: pointer;
242264
}
265+
main {
266+
background-color: var(--content-background-color);
267+
padding: 20px;
268+
}
269+
270+
/* Footer */
271+
footer {
272+
background-color: var(--nav-background-color);
273+
padding: 2.5em 40px;
274+
margin-bottom: 30px;
275+
}
243276

244277
/* Flex classes */
245278
.flex-row {
@@ -263,8 +296,57 @@ button {
263296
align-items: center;
264297
}
265298

299+
@media(max-width: 919px) {
300+
#jq-menus {
301+
position: absolute;
302+
top: 80px;
303+
height: calc(100vh - 80px);
304+
left: 0;
305+
right: 0;
306+
background-color: var(--nav-background-color);
307+
z-index: 1;
308+
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
309+
transform: translateX(100%);
310+
opacity: 0;
311+
display: flex;
312+
flex-direction: column-reverse;
313+
justify-content: flex-end;
314+
}
315+
}
316+
266317
@media(min-width: 920px) {
318+
.nav {
319+
flex-direction: row;
320+
}
321+
.nav a {
322+
width: auto;
323+
}
324+
#jq-primaryNavigation a {
325+
height: 27px;
326+
}
327+
#jq-secondaryNavigation {
328+
border-radius: var(--border-radius);
329+
margin-top: 2em;
330+
}
331+
#jq-siteLogo {
332+
margin-top: 59px;
333+
}
334+
#bug-tracker-form {
335+
flex-direction: row;
336+
gap: 0;
337+
position: absolute;
338+
bottom: 15px;
339+
left: 0;
340+
right: 0;
341+
padding: 0 40px 0 60px;
342+
}
267343
#jq-primarySearch {
268344
width: 286px;
269345
}
270-
}
346+
.hamburger-lines {
347+
display: none;
348+
}
349+
main {
350+
padding: 40px;
351+
}
352+
}

0 commit comments

Comments
 (0)