Skip to content

Commit

Permalink
feat(header): clean up styles so they are more responsive & organized
Browse files Browse the repository at this point in the history 
Freshen up tha header a little
  • Loading branch information
@lwasser
lwasser authored Aug 2, 2024
2 parents 8797227 + c9aef39 commit 0cc8418
Show file tree
Hide file tree
Showing 6 changed files with 230 additions and 260 deletions.
2 changes: 1 addition & 1 deletion _includes/feature_row_pyos
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{% for f in feature_row %}
<div class="cards highlight">
{% if f.image_path %}
<div>
<div class="cards__image">
<img src="{{ f.image_path | relative_url }}"
alt="{% if f.alt %}{{ f.alt }}{% endif %}">
{% if f.image_caption %}
Expand Down
104 changes: 53 additions & 51 deletions _includes/masthead.html
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,61 @@
{% capture logo_path %}{{ site.logo }}{% endcapture %}

<div class="masthead">
<div class="masthead__inner-wrap">
<div class="masthead__menu">
<nav id="site-nav" class="nav__topbar" aria-label="Top Bar">
<!-- More accessible as a screen reader will group the title and image in the same link -->
{% unless logo_path == empty %}
<a class="site-logo" href="{{ '/' | relative_url }}">
<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).">
</a>
{% endunless %}
<nav id="site-nav" class="masthead__menu" aria-label="Top Bar">
<!-- More accessible as a screen reader will group the title and image in the same link -->
{% unless logo_path == empty %}
<a class="site-logo" href="{{ '/' | relative_url }}">
<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).">
</a>
{% endunless %}

<ul class="nav__links">
{%- for alink in site.data.navigation.main -%}
<!-- If there are sub links drop down nav to display -->
{% if alink.sub-nav %}
<li class="dropdown">
<button class="dropbtn" tabindex="0" aria-expanded="false">{{ alink.title }} <i class="fas fa-caret-down"></i>
</button>
<ul class="dropdown-content">
{% for subnav in alink.sub-nav %}
<li>
<a href="{{ subnav.url | relative_url }}" class="masthead__menu-item hover-underline">{{ subnav.title }}
{% if subnav.icon %} <i class="{{ subnav.icon }}"></i> {% endif %}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<div class="spacer"></div>

<ul class="nav__links">
{%- for alink in site.data.navigation.main -%}
<!-- If there are sub links drop down nav to display -->
{% if alink.sub-nav %}
<li class="dropdown">
<button class="dropbtn" tabindex="0" aria-expanded="false">
{{ alink.title }} <i class="fas fa-caret-down"></i>
</button>
<ul class="dropdown-content">
{% for subnav in alink.sub-nav %}
<li>
<a href="{{ alink.url | relative_url }}" class="hover-underline">{{ alink.title }}</a>
<a
href="{{ subnav.url | relative_url }}"
class="masthead__menu-item hover-underline"
>{{ subnav.title }}
{% if subnav.icon %}
<i class="{{ subnav.icon }}"></i>
{% endif %}
</a>
</li>
{% endif %}
{% endfor %}
<li>

</li>
</ul>

{% if site.search == true %}
<button class="search__toggle" type="button">
<span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
<i class="fas fa-search"></i>
</button>
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li>
<a href="{{ alink.url | relative_url }}" class="hover-underline">
{{ alink.title }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>

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

<ul class="hidden-links hidden"></ul>
<!-- Burger button - span class for screen readers-->
<button class="hamburger__btn-toggle" type="button" count="1" aria-expanded="false">
<span class="visually-hidden">Toggle top navigation menu</span> <!--screen readers-->
<div class="burger__icon"></div>
</button>
</nav>
</div>
</div>
</div>
<ul class="hidden-links hidden"></ul>
<!-- Burger button - span class for screen readers-->
<button class="hamburger__btn-toggle" type="button" count="1" aria-expanded="false">
<span class="visually-hidden">Toggle top navigation menu</span> <!--screen readers-->
<div class="burger__icon"></div>
</button>
</nav>
</div>
111 changes: 56 additions & 55 deletions _sass/minimal-mistakes/_masthead.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
/* ==========================================================================
MASTHEAD
========================================================================== */
/*
==========================================================================
MASTHEAD
Layout of the top-level items within the masthead.
For styling of menu contents, see _pyos-dropdown.scss
==========================================================================
*/

.masthead {
position: relative;
Expand All @@ -11,36 +16,65 @@
animation-delay: 0.15s;
z-index: 20;

&__inner-wrap {

&__menu {
@include clearfix;
margin-left: auto;
margin-right: auto;
padding: 1em;
margin: auto;
padding: 0 1em;
max-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
height: 3rem;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-family: $sans-serif-narrow;
position: relative;
align-items: stretch;
min-height: 2em;
background: #fff;

@include breakpoint($x-large) {
max-width: $max-width;
}

nav {
z-index: 10;
& > * {
margin: auto;
}

a {
text-decoration: none;
}

@include breakpoint($x-large) {
max-width: $max-width;
}

.spacer {
flex-grow: 1;
}
}
}

.site-logo img {
max-height: 2rem;
.site-logo {
height: 8em;
width: 8.5em;
top: -2.5em;
left: -2em;
position:relative;
background-color: $background-color;
border: 1px solid $border-color;
box-shadow: 3px 3px;
border-radius: 50%;
display: flex;
justify-content: center;

&::after {
padding-bottom: 100%;
}

img {
object-fit: contain;
height: 4em;
width: 75%;
margin: 0 auto 1.25em auto;
display: block;
box-shadow: none;
align-self: end;
}
}

.site-title {
Expand All @@ -50,44 +84,11 @@
-ms-flex-item-align: center;
align-self: center;
font-weight: bold;
// z-index: 20;
}

.site-subtitle {
display: block;
font-size: $type-size-8;
}

.masthead__menu {
float: left;
margin-left: 0;
margin-right: 0;
width: 100%;
clear: both;

.site-nav {
margin-left: 0;

@include breakpoint($small) {
float: right;
}
}

ul {
margin: 0;
padding: 0;
clear: both;
list-style-type: none;
}
}

.masthead__menu-item {
display: block;
list-style-type: none;
white-space: nowrap;

&--lg {
padding-right: 2em;
font-weight: 700;
}
font-weight: 400;
font-size: .8em;
color: $nav-font-color;
}
Loading

0 comments on commit 0cc8418

Please sign in to comment.