Skip to content

Commit 0cc8418

Browse files
lwasserlwasser
authored
feat(header): clean up styles so they are more responsive & organized
Freshen up tha header a little
2 parents 8797227 + c9aef39 commit 0cc8418

File tree

6 files changed

+230
-260
lines changed

6 files changed

+230
-260
lines changed

‎_includes/feature_row_pyos

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
{% for f in feature_row %}
99
<div class="cards highlight">
1010
{% if f.image_path %}
11-
<div>
11+
<div class="cards__image">
1212
<img src="{{ f.image_path | relative_url }}"
1313
alt="{% if f.alt %}{{ f.alt }}{% endif %}">
1414
{% if f.image_caption %}

‎_includes/masthead.html

Lines changed: 53 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,61 @@
11
{% capture logo_path %}{{ site.logo }}{% endcapture %}
22

33
<div class="masthead">
4-
<div class="masthead__inner-wrap">
5-
<div class="masthead__menu">
6-
<nav id="site-nav" class="nav__topbar" aria-label="Top Bar">
7-
<!-- More accessible as a screen reader will group the title and image in the same link -->
8-
{% unless logo_path == empty %}
9-
<a class="site-logo" href="{{ '/' | relative_url }}">
10-
<img src="{{ logo_path | relative_url }}" alt="Welcome to the pyOpenSci website. The pyOpenSci logo is a purple flower opening over the O (for open).">
11-
</a>
12-
{% endunless %}
4+
<nav id="site-nav" class="masthead__menu" aria-label="Top Bar">
5+
<!-- More accessible as a screen reader will group the title and image in the same link -->
6+
{% unless logo_path == empty %}
7+
<a class="site-logo" href="{{ '/' | relative_url }}">
8+
<img src="{{ logo_path | relative_url }}" alt="Welcome to the pyOpenSci website. The pyOpenSci logo is a purple flower opening over the O (for open).">
9+
</a>
10+
{% endunless %}
1311

14-
<ul class="nav__links">
15-
{%- for alink in site.data.navigation.main -%}
16-
<!-- If there are sub links drop down nav to display -->
17-
{% if alink.sub-nav %}
18-
<li class="dropdown">
19-
<button class="dropbtn" tabindex="0" aria-expanded="false">{{ alink.title }} <i class="fas fa-caret-down"></i>
20-
</button>
21-
<ul class="dropdown-content">
22-
{% for subnav in alink.sub-nav %}
23-
<li>
24-
<a href="{{ subnav.url | relative_url }}" class="masthead__menu-item hover-underline">{{ subnav.title }}
25-
{% if subnav.icon %} <i class="{{ subnav.icon }}"></i> {% endif %}
26-
</a>
27-
</li>
28-
{% endfor %}
29-
</ul>
30-
</li>
31-
{% else %}
12+
<div class="spacer"></div>
13+
14+
<ul class="nav__links">
15+
{%- for alink in site.data.navigation.main -%}
16+
<!-- If there are sub links drop down nav to display -->
17+
{% if alink.sub-nav %}
18+
<li class="dropdown">
19+
<button class="dropbtn" tabindex="0" aria-expanded="false">
20+
{{ alink.title }} <i class="fas fa-caret-down"></i>
21+
</button>
22+
<ul class="dropdown-content">
23+
{% for subnav in alink.sub-nav %}
3224
<li>
33-
<a href="{{ alink.url | relative_url }}" class="hover-underline">{{ alink.title }}</a>
25+
<a
26+
href="{{ subnav.url | relative_url }}"
27+
class="masthead__menu-item hover-underline"
28+
>{{ subnav.title }}
29+
{% if subnav.icon %}
30+
<i class="{{ subnav.icon }}"></i>
31+
{% endif %}
32+
</a>
3433
</li>
35-
{% endif %}
36-
{% endfor %}
37-
<li>
38-
39-
</li>
40-
</ul>
41-
42-
{% if site.search == true %}
43-
<button class="search__toggle" type="button">
44-
<span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
45-
<i class="fas fa-search"></i>
46-
</button>
47-
{% endif %}
34+
{% endfor %}
35+
</ul>
36+
</li>
37+
{% else %}
38+
<li>
39+
<a href="{{ alink.url | relative_url }}" class="hover-underline">
40+
{{ alink.title }}
41+
</a>
42+
</li>
43+
{% endif %}
44+
{% endfor %}
45+
</ul>
4846

47+
{% if site.search == true %}
48+
<button class="search__toggle" type="button">
49+
<span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
50+
<i class="fas fa-search"></i>
51+
</button>
52+
{% endif %}
4953

50-
<ul class="hidden-links hidden"></ul>
51-
<!-- Burger button - span class for screen readers-->
52-
<button class="hamburger__btn-toggle" type="button" count="1" aria-expanded="false">
53-
<span class="visually-hidden">Toggle top navigation menu</span> <!--screen readers-->
54-
<div class="burger__icon"></div>
55-
</button>
56-
</nav>
57-
</div>
58-
</div>
59-
</div>
54+
<ul class="hidden-links hidden"></ul>
55+
<!-- Burger button - span class for screen readers-->
56+
<button class="hamburger__btn-toggle" type="button" count="1" aria-expanded="false">
57+
<span class="visually-hidden">Toggle top navigation menu</span> <!--screen readers-->
58+
<div class="burger__icon"></div>
59+
</button>
60+
</nav>
61+
</div>

‎_sass/minimal-mistakes/_masthead.scss

Lines changed: 56 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
/* ==========================================================================
2-
MASTHEAD
3-
========================================================================== */
1+
/*
2+
==========================================================================
3+
MASTHEAD
4+
5+
Layout of the top-level items within the masthead.
6+
For styling of menu contents, see _pyos-dropdown.scss
7+
==========================================================================
8+
*/
49

510
.masthead {
611
position: relative;
@@ -11,36 +16,65 @@
1116
animation-delay: 0.15s;
1217
z-index: 20;
1318

14-
&__inner-wrap {
19+
20+
&__menu {
1521
@include clearfix;
16-
margin-left: auto;
17-
margin-right: auto;
18-
padding: 1em;
22+
margin: auto;
23+
padding: 0 1em;
1924
max-width: 100%;
20-
display: -webkit-box;
21-
display: -ms-flexbox;
25+
height: 3rem;
2226
display: flex;
23-
-webkit-box-pack: justify;
24-
-ms-flex-pack: justify;
2527
justify-content: space-between;
2628
font-family: $sans-serif-narrow;
29+
position: relative;
30+
align-items: stretch;
31+
min-height: 2em;
32+
background: #fff;
2733

28-
@include breakpoint($x-large) {
29-
max-width: $max-width;
30-
}
31-
32-
nav {
33-
z-index: 10;
34+
& > * {
35+
margin: auto;
3436
}
3537

3638
a {
3739
text-decoration: none;
3840
}
41+
42+
@include breakpoint($x-large) {
43+
max-width: $max-width;
44+
}
45+
46+
.spacer {
47+
flex-grow: 1;
48+
}
3949
}
4050
}
4151

42-
.site-logo img {
43-
max-height: 2rem;
52+
.site-logo {
53+
height: 8em;
54+
width: 8.5em;
55+
top: -2.5em;
56+
left: -2em;
57+
position:relative;
58+
background-color: $background-color;
59+
border: 1px solid $border-color;
60+
box-shadow: 3px 3px;
61+
border-radius: 50%;
62+
display: flex;
63+
justify-content: center;
64+
65+
&::after {
66+
padding-bottom: 100%;
67+
}
68+
69+
img {
70+
object-fit: contain;
71+
height: 4em;
72+
width: 75%;
73+
margin: 0 auto 1.25em auto;
74+
display: block;
75+
box-shadow: none;
76+
align-self: end;
77+
}
4478
}
4579

4680
.site-title {
@@ -50,44 +84,11 @@
5084
-ms-flex-item-align: center;
5185
align-self: center;
5286
font-weight: bold;
53-
// z-index: 20;
5487
}
5588

5689
.site-subtitle {
5790
display: block;
58-
font-size: $type-size-8;
59-
}
60-
61-
.masthead__menu {
62-
float: left;
63-
margin-left: 0;
64-
margin-right: 0;
65-
width: 100%;
66-
clear: both;
67-
68-
.site-nav {
69-
margin-left: 0;
70-
71-
@include breakpoint($small) {
72-
float: right;
73-
}
74-
}
75-
76-
ul {
77-
margin: 0;
78-
padding: 0;
79-
clear: both;
80-
list-style-type: none;
81-
}
82-
}
83-
84-
.masthead__menu-item {
85-
display: block;
86-
list-style-type: none;
87-
white-space: nowrap;
88-
89-
&--lg {
90-
padding-right: 2em;
91-
font-weight: 700;
92-
}
91+
font-weight: 400;
92+
font-size: .8em;
93+
color: $nav-font-color;
9394
}

0 commit comments

Comments
 (0)