Skip to content

Commit 5aeb7fe

Browse files
solarsailersolarsailer
committed
Update example presskit
1 parent b6f1bf9 commit 5aeb7fe

File tree

10 files changed

+137
-12
lines changed

10 files changed

+137
-12
lines changed

‎docs/example/css/master.css

+42
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,48 @@ a:hover {
239239
outline: none;
240240
}
241241

242+
/* ---------------------------------------------------------- *\
243+
* Nav - Hamburger.
244+
\* ---------------------------------------------------------- */
245+
246+
.nav__toggle {
247+
display: none;
248+
249+
margin: 15px 0;
250+
padding: 0 15px;
251+
}
252+
253+
.nav__toggle .button {
254+
display: block;
255+
256+
height: 30px;
257+
}
258+
259+
/* Nav list variant for hamburger feature. */
260+
.nav__list--slider {
261+
overflow-y: hidden;
262+
263+
max-height: 0;
264+
265+
-webkit-transition: max-height 0.5s ease-in-out;
266+
-moz-transition: max-height 0.5s ease-in-out;
267+
-o-transition: max-height 0.5s ease-in-out;
268+
transition: max-height 0.5s ease-in-out;
269+
}
270+
271+
272+
@media (min-width: 800px) {
273+
.nav__toggle {
274+
/* Always hide the button on big screens. */
275+
display: none !important;
276+
}
277+
278+
.nav__list--slider {
279+
/* Always show the list on big screens. So disable slider. */
280+
max-height: unset !important;
281+
}
282+
}
283+
242284
/* ---------------------------------------------------------- *\
243285
* Components - Block.
244286
\* ---------------------------------------------------------- */

‎docs/example/images/images.zip

0 Bytes
Binary file not shown.

‎docs/example/images/logo.zip

0 Bytes
Binary file not shown.

‎docs/example/index.html

+18-5
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66

77
<title>Pizza Burger Studio</title>
88

9-
<link rel="shortcut icon" href="images/favicon.ico?t=1490792441465">
9+
<link rel="shortcut icon" href="images/favicon.ico?t=1532515479769">
1010

1111
<link rel="stylesheet" href="./css/normalize.css">
1212
<link rel="stylesheet" href="./css/master.css">
1313

14-
<!-- Generated by presskit.html 0.6.0 (https://github.com/pixelnest/presskit.html). -->
14+
<!-- Generated by presskit.html 0.7.0 (https://github.com/pixelnest/presskit.html). -->
1515
</head>
1616
<body>
1717
<div class="page grid">
@@ -24,7 +24,18 @@ <h1 class="nav__title">
2424
<a href="https://github.com/pixelnest/presskit.html">github.com/pixelnest/presskit.html</a>
2525
</aside>
2626

27-
<ul class="nav__list">
27+
<div class="nav__toggle" id="hamburger">
28+
<a href="#" class="button" id="hamburger-toggle">
29+
<svg width="10" height="10" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
30+
<g fill="currentColor" fill-rule="nonzero">
31+
<path d="M0 16h19v3H0zM0 8h19v3H0zM0 0h19v3H0z" />
32+
</g>
33+
</svg>
34+
&nbsp;Menu
35+
</a>
36+
</div>
37+
38+
<ul class="nav__list" id="hamburger-target">
2839
<li>
2940
<a class="nav__item" href="#factsheet">Factsheet</a>
3041
</li>
@@ -44,7 +55,7 @@ <h1 class="nav__title">
4455

4556

4657
<li>
47-
<a class="nav__item" href="#trailers">Videos</a>
58+
<a class="nav__item" href="#videos">Videos</a>
4859
</li>
4960

5061
<li>
@@ -61,7 +72,7 @@ <h1 class="nav__title">
6172
</li>
6273

6374
<li>
64-
<a class="nav__item" href="#quotes">Selected Articles</a>
75+
<a class="nav__item" href="#articles">Selected Articles</a>
6576
</li>
6677

6778
<li>
@@ -366,6 +377,8 @@ <h2 id="contact">Contact</h2>
366377
})
367378
</script>
368379

380+
<script src="./js/hamburger.js"></script>
381+
369382
<script>
370383
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
371384
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

‎docs/example/js/hamburger.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
'use strict'
2+
3+
;(function () {
4+
// Preamble: this code is very specific, and clearly made for then
5+
// main nav.
6+
// Currently, this functionality is not need elsewhere, so we didn't
7+
// bother to generalized this.
8+
// No guards too.
9+
10+
// To disable this feature, just remove the script tag.
11+
12+
window.addEventListener('DOMContentLoaded', function () {
13+
var container = document.querySelector('#hamburger')
14+
var button = document.querySelector('#hamburger-toggle')
15+
var target = document.querySelector('#hamburger-target')
16+
17+
// Show hamburger (hidden by default if no js or hamburger disabled).
18+
container.style.display = 'block'
19+
20+
// Get target height.
21+
var baseHeight = getElementHeight(target)
22+
23+
// Do that after the height calculation!
24+
target.className += ' nav__list--slider'
25+
26+
button.addEventListener('click', function (e) {
27+
e.preventDefault()
28+
e.stopPropagation()
29+
30+
var currentMaxHeight = parseInt(target.style.maxHeight, 10)
31+
32+
// If not set or 0, toggle to full height.
33+
// Otherwise, hide.
34+
if (!currentMaxHeight || currentMaxHeight === 0) {
35+
target.style.cssText = 'max-height: ' + baseHeight + 'px'
36+
} else {
37+
target.style.cssText = 'max-height: 0px'
38+
}
39+
})
40+
})
41+
42+
// Clone an element outside the screen to safely get its height, then destroy it.
43+
function getElementHeight (element) {
44+
var clone = element.cloneNode(true)
45+
clone.style.cssText = 'visibility: hidden; display: block; margin: -999px 0'
46+
47+
var height = (element.parentNode.appendChild(clone)).clientHeight
48+
element.parentNode.removeChild(clone)
49+
50+
return height
51+
}
52+
})()

‎docs/example/product/images/images.zip

0 Bytes
Binary file not shown.

‎docs/example/product/images/logo.zip

491 Bytes
Binary file not shown.

‎docs/example/product/images/logo.png ‎docs/example/product/images/logo01.png

File renamed without changes.

‎docs/example/product/images/logo02.png

375 Bytes
Loading

‎docs/example/product/index.html

+25-7
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66

77
<title>My Super Game - Pizza Burger Studio</title>
88

9-
<link rel="shortcut icon" href="images/favicon.ico?t=1490792441311">
9+
<link rel="shortcut icon" href="images/favicon.ico?t=1532515479651">
1010

1111
<link rel="stylesheet" href="../css/normalize.css">
1212
<link rel="stylesheet" href="../css/master.css">
1313

14-
<!-- Generated by presskit.html 0.6.0 (https://github.com/pixelnest/presskit.html). -->
14+
<!-- Generated by presskit.html 0.7.0 (https://github.com/pixelnest/presskit.html). -->
1515
</head>
1616
<body>
1717
<div class="page grid">
@@ -24,7 +24,18 @@ <h1 class="nav__title">
2424
<a href="..">press kit</a>
2525
</aside>
2626

27-
<ul class="nav__list">
27+
<div class="nav__toggle" id="hamburger">
28+
<a href="#" class="button" id="hamburger-toggle">
29+
<svg width="10" height="10" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
30+
<g fill="currentColor" fill-rule="nonzero">
31+
<path d="M0 16h19v3H0zM0 8h19v3H0zM0 0h19v3H0z" />
32+
</g>
33+
</svg>
34+
&nbsp;Menu
35+
</a>
36+
</div>
37+
38+
<ul class="nav__list" id="hamburger-target">
2839
<li>
2940
<a class="nav__item" href="#factsheet">Factsheet</a>
3041
</li>
@@ -41,7 +52,7 @@ <h1 class="nav__title">
4152

4253

4354
<li>
44-
<a class="nav__item" href="#trailers">Videos</a>
55+
<a class="nav__item" href="#videos">Videos</a>
4556
</li>
4657

4758
<li>
@@ -61,7 +72,7 @@ <h1 class="nav__title">
6172
</li>
6273

6374
<li>
64-
<a class="nav__item" href="#quotes">Selected Articles</a>
75+
<a class="nav__item" href="#articles">Selected Articles</a>
6576
</li>
6677

6778
<li>
@@ -122,6 +133,8 @@ <h2 id="factsheet" class="factsheet__title">Factsheet</h2>
122133
<dd>USD 20</dd>
123134
<dd>GBP 16</dd>
124135
<dd>JPY 2300</dd>
136+
137+
125138
</dl>
126139

127140
<p class="press">
@@ -234,8 +247,11 @@ <h2 id="logo">Logo & Icon</h2>
234247
</a>
235248
</aside>
236249

237-
<a href="images/logo.png">
238-
<img src="images/logo.png" alt="logo" class="logo">
250+
<a href="images/logo01.png">
251+
<img src="images/logo01.png" alt="logo01" class="logo">
252+
</a>
253+
<a href="images/logo02.png">
254+
<img src="images/logo02.png" alt="logo02" class="logo">
239255
</a>
240256
</section>
241257
<section class="block">
@@ -423,6 +439,8 @@ <h2 id="contact">Contact</h2>
423439
})
424440
</script>
425441

442+
<script src="../js/hamburger.js"></script>
443+
426444
<script>
427445
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
428446
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

0 commit comments

Comments
 (0)