Skip to content

Commit b3c1510

Browse files
tannewttannewt
authored
Merge pull request #363 from jwcooper/new-design
Updated Design - header, mobile menu and landing page
2 parents bccc892 + 9cf7abd commit b3c1510

17 files changed

+499
-121
lines changed

‎_includes/head.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@
1111
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
1212
<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
1313
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
14+
<script src="{{ "/assets/javascript/header_mobile.js" | relative_url }}"></script>
1415
</head>

‎_includes/header.html

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,16 @@
11
<header id="site-header">
2+
{% assign current = page.url | downcase | split: '/' %}
3+
<div class="top-navigation">
4+
<div>
5+
<div class="navigation">
6+
<a {% if current[1] == 'contributing' %}class='active'{% endif %} href="{{ "/contributing" | relative_url }}">Contributing</a>
7+
<a href="https://blog.adafruit.com/category/circuitpython">News</a>
8+
<a {% if current[1] == 'awesome' %}class='active'{% endif %} href="{{ "/awesome" | relative_url }}">Awesome</a>
9+
<a href="https://forums.adafruit.com/viewforum.php?f=60">Help</a>
10+
<a href="https://adafru.it/discord"><i class="fab fa-discord"></i></a>
11+
</div>
12+
</div>
13+
</div>
214
<div class="wrapper">
315
<div class="content">
416
<div class="site-brand">
@@ -12,17 +24,14 @@
1224
height="60" width="136">
1325
</a>
1426
</div>
15-
</div>
16-
17-
<div class="site-navigation">
18-
<a href="{{ "/downloads" | relative_url }}">DOWNLOADS</a>
19-
<a href="{{ "/libraries" | relative_url }}">LIBRARIES</a>
20-
<a href="{{ "/contributing" | relative_url }}">CONTRIBUTING</a>
21-
<a href="{{ "/blinka" | relative_url }}">BLINKA</a>
22-
<a href="https://blog.adafruit.com/category/circuitpython">NEWS</a>
23-
<a href="https://adafru.it/discord">DISCORD</a>
24-
<a href="{{ "/awesome" | relative_url }}">AWESOME</a>
25-
<a href="https://learn.adafruit.com/welcome-to-circuitpython">HELP</a>
27+
<div class="site-navigation">
28+
<a {% if current[1] == 'downloads' %}class='active'{% endif %} href="{{ "/downloads" | relative_url }}">Downloads</a>
29+
<a {% if current[1] == 'libraries' %}class='active'{% endif %} href="{{ "/libraries" | relative_url }}">Libraries</a>
30+
<a {% if current[1] == 'blinka' %}class='active'{% endif %} href="{{ "/blinka" | relative_url }}">Blinka</a>
31+
</div>
32+
<div class="get-started">
33+
<a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a>
34+
</div>
2635
</div>
2736
</div>
2837
</div>

‎_includes/header_mobile.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<header id="mobile-header">
2+
<div class="header-contents">
3+
<div class="site-logo">
4+
<a href="{{ "/" | relative_url }}">
5+
<img src="{{ "/assets/images/logo.png" | relative_url }}"
6+
srcset="{{ "/assets/images/logo.png" | relative_url }} 1x,
7+
{{ "/assets/images/[email protected]" | relative_url }} 2x,
8+
{{ "/assets/images/[email protected]" | relative_url }} 3x"
9+
alt="CircuitPython Logo"
10+
height="60" width="136">
11+
</a>
12+
</div>
13+
<div id="mobile-menu">
14+
<div class="menu-toggle">
15+
<a href="#" id="mobile-menu-button">
16+
<span class="sr-only">Open Mobile Menu</span>
17+
<i class="fa fa-bars" aria-hidden='true'></i>
18+
</a>
19+
</div>
20+
</div>
21+
<div class="clear"></div>
22+
<nav id="mobile-menu-contents" role="navigation" class="hidden"
23+
aria-expanded='false' aria-label='Mobile Menu'>
24+
<ul>
25+
<li><a {% if current[1] == 'downloads' %}class='active'{% endif %}
26+
href="{{ "/downloads" | relative_url }}">Downloads</a></li>
27+
<li><a {% if current[1] == 'libraries' %}class='active'{% endif %}
28+
href="{{ "/libraries" | relative_url }}">Libraries</a></li>
29+
<li><a {% if current[1] == 'blinka' %}class='active'{% endif %}
30+
href="{{ "/blinka" | relative_url }}">Blinka</a></li>
31+
<li><a {% if current[1] == 'contributing' %}class='active'{% endif %}
32+
href="{{ "/contributing" | relative_url }}">Contributing</a></li>
33+
<li><a href="https://blog.adafruit.com/category/circuitpython">News</a></li>
34+
<li><a {% if current[1] == 'awesome' %}class='active'{% endif %}
35+
href="{{ "/awesome" | relative_url }}">Awesome</a></li>
36+
<li><a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a></li>
37+
<li><a href="https://forums.adafruit.com/viewforum.php?f=60">Help</a></li>
38+
<li><a href="https://adafru.it/discord">Discord</a></li>
39+
</ul>
40+
</nav>
41+
</div>
42+
<div class="bottom-bar"></div>
43+
</header>
44+

‎_layouts/contributing.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,16 @@ <h2>Current Status for {{ site.data.libraries.updated_at | date: "%a, %b %d, %Y"
2828
{% assign current = page.url | downcase | split: '/' %}
2929
<ul class='tabbed-navigation'>
3030
<li>
31-
<a href="/contributing" {% if current[3] ==
31+
<a href="/contributing" {% if current[2] ==
3232
nil %}class='active'{% endif %}>Pull Requests</a>
3333
</li>
3434
<li>
35-
<a href="/contributing/open-issues" {% if current[3] ==
35+
<a href="/contributing/open-issues" {% if current[2] ==
3636
'open-issues' %}class='active'{% endif %}>Open Issues</a>
3737
</li>
3838
<li>
3939
<a href="/contributing/library-infrastructure-issues" {% if
40-
current[3] ==
40+
current[2] ==
4141
'library-infrastructure-issues' %}class='active'{% endif %}>Library Infrastructure Issues</a>
4242
</li>
4343
</ul>

‎_layouts/default.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
<body>
77
{% include header.html %}
8+
{% include header_mobile.html %}
89
<div class="wrapper">
910
{{ content }}
1011
</div>

‎assets/css/main.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@
77
@import 'base/variables';
88
@import 'base/typography';
99
@import 'base/base';
10+
@import 'base/mixins';
1011

1112
@import 'layout/grid';
1213
@import 'layout/header';
14+
@import 'layout/header_mobile';
1315

1416
@import 'pages/home';
1517
@import 'pages/downloads';

‎assets/images/CircuitPython_Boards.jpg

451 KB
Loading

‎assets/images/CircuitPython_Hero.jpg

75.1 KB
Loading

‎assets/images/[email protected]

174 KB
Loading

‎assets/images/CircuitPython_Pinball.jpg

238 KB
Loading

‎assets/images/sensors_IMG_0101.jpg

477 KB
Loading

‎assets/javascript/header_mobile.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
document.addEventListener('DOMContentLoaded', function() {
2+
document.getElementById('mobile-menu-button').addEventListener('click', handleMobileToggle);
3+
});
4+
5+
function handleMobileToggle(event) {
6+
event.preventDefault();
7+
8+
var menuContainer = document.getElementById('mobile-menu-contents');
9+
10+
menuContainer.classList.toggle('hidden');
11+
12+
var menuIcon = document.querySelector('#mobile-menu-button > i');
13+
if (menuContainer.classList.contains('hidden')) {
14+
menuIcon.classList.replace('fa-times', 'fa-bars');
15+
} else {
16+
menuIcon.classList.replace('fa-bars', 'fa-times');
17+
}
18+
}

‎assets/sass/base/_mixins.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@mixin readable-content {
2+
display: grid;
3+
grid-template-columns:
4+
[full-start] minmax(15px, 1fr)
5+
[main-start] minmax(0, 1300px) [main-end]
6+
minmax(15px, 1fr) [full-end];
7+
8+
&> * {
9+
grid-column: main;
10+
}
11+
}
12+
13+
@mixin rounded-button {
14+
display: inline-block;
15+
font-size: 18px;
16+
padding: 7px 50px 7px 50px;
17+
color: #fff;
18+
font-weight: 500;
19+
border-radius: 50px;
20+
border: 3px solid #fff;
21+
22+
&:hover {
23+
color: #000;
24+
background-color: #fff;
25+
}
26+
}

‎assets/sass/layout/_header.scss

Lines changed: 46 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
#site-header {
22
display: grid;
3-
grid-template-rows: 1fr 3px;
3+
grid-template-rows: 40px 1fr 3px;
44
grid-column: full;
55

66
&> * {
@@ -23,20 +23,43 @@
2323

2424
.content {
2525
display: grid;
26-
grid-template-columns: 2fr 1fr;
2726
padding-bottom: 20px;
2827
}
28+
29+
a.active {
30+
color: #fff;
31+
}
32+
}
33+
34+
.top-navigation {
35+
background-color: #151515;
36+
padding-top: 10px;
37+
38+
.navigation {
39+
display: flex;
40+
align-items: flex-end;
41+
justify-content: flex-end;
42+
43+
a {
44+
margin-left: 40px;
45+
font-size: 16px;
46+
color: #999999;
47+
48+
&:hover {
49+
color: #fff;
50+
}
51+
}
52+
}
2953
}
3054

3155
.site-brand {
56+
width: 100%;
3257
display: flex;
3358
flex-direction: row;
3459
align-items: flex-end;
3560
}
3661

3762
.site-logo {
38-
position: absolute;
39-
top: 20px;
4063
}
4164

4265
.site-banner {
@@ -48,38 +71,35 @@
4871
}
4972
}
5073

51-
.site-navigation {
52-
display:flex;
53-
align-items: flex-end;
54-
justify-content: flex-end;
74+
.get-started {
75+
margin-left: auto;
76+
padding-bottom: 10px;
5577

5678
a {
57-
color: #fff;
58-
margin-left: 10px;
79+
@include rounded-button;
5980
}
6081
}
6182

62-
.bottom-bar {
63-
background-color: #e90e8b;
64-
}
83+
.site-navigation {
84+
padding: 0 0 10px 0;
85+
font-size: 18px;
6586

66-
@media (max-width: $screen-xs-max) {
67-
#site-header {
68-
.wrapper {
69-
height: auto;
70-
}
87+
a {
88+
margin-left: 40px;
89+
color: #999999;
7190

72-
.content {
73-
padding-bottom: 10px;
91+
&:hover {
92+
color: #fff;
7493
}
7594
}
95+
}
7696

77-
.site-navigation {
78-
margin-top: 10px;
79-
flex-wrap: wrap;
97+
.bottom-bar {
98+
background-color: #e71c8c;
99+
}
80100

81-
a {
82-
padding: 2px;
83-
}
101+
@media (max-width: $screen-xs-max) {
102+
#site-header {
103+
display: none !important;
84104
}
85105
}

‎assets/sass/layout/_header_mobile.scss

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
#mobile-header {
2+
background-color: #333;
3+
4+
.header-contents {
5+
padding: 9px 5px 5px 8px;
6+
}
7+
8+
/* screen reader only */
9+
.sr-only {
10+
position: absolute;
11+
width: 1px;
12+
height: 1px;
13+
padding: 0;
14+
margin: -1px;
15+
overflow: hidden;
16+
clip: rect(0,0,0,0);
17+
border: 0;
18+
}
19+
20+
.site-logo {
21+
float: left;
22+
}
23+
24+
#mobile-menu {
25+
float: right;
26+
27+
.menu-toggle {
28+
font-size: 34px;
29+
padding: 10px 20px 10px 0;
30+
31+
a {
32+
color: #fff;
33+
outline: none;
34+
}
35+
}
36+
}
37+
38+
#mobile-menu-contents {
39+
&.hidden {
40+
display: none;
41+
}
42+
43+
ul {
44+
list-style: none;
45+
padding-left: 20px;
46+
font-size: 20px;
47+
48+
li {
49+
padding: 5px 0 5px 0;
50+
51+
a {
52+
color: #fff;
53+
}
54+
}
55+
}
56+
}
57+
58+
.bottom-bar {
59+
height: 3px;
60+
}
61+
}
62+
63+
@media (min-width: $screen-xs-max) {
64+
#mobile-header {
65+
display: none !important;
66+
}
67+
}
68+

0 commit comments

Comments
 (0)