329 lines
6.6 KiB
CSS
329 lines
6.6 KiB
CSS
/* Global Header
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.gh-head {
|
|
padding: 3vmin 4vmin;
|
|
font-size: 1.6rem;
|
|
line-height: 1.3em;
|
|
background: inherit;
|
|
}
|
|
|
|
.gh-head a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.gh-head-inner {
|
|
display: grid;
|
|
grid-gap: 40px;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
grid-auto-flow: row dense;
|
|
}
|
|
|
|
|
|
/* Brand
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.gh-head-brand {
|
|
grid-column-start: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
max-width: 200px;
|
|
text-align: center;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.gh-head-logo {
|
|
display: block;
|
|
padding: 10px 0;
|
|
font-weight: 600;
|
|
font-size: 2.2rem;
|
|
line-height: 1.2em;
|
|
}
|
|
|
|
.gh-head-logo img {
|
|
max-height: 40px;
|
|
}
|
|
|
|
|
|
/* Primary Navigation
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.gh-head-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.gh-head-menu .nav {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
list-style: none;
|
|
}
|
|
|
|
.gh-head-menu .nav li {
|
|
margin: 0 1.5vmin 0 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.gh-head-menu .nav a {
|
|
display: inline-block;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.gh-head-menu .nav-current a {
|
|
box-shadow: 0 -1px 0 0 currentcolor inset;
|
|
}
|
|
|
|
|
|
/* Secondary Navigation
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.gh-head-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
list-style: none;
|
|
text-align: right;
|
|
}
|
|
|
|
.gh-head-actions-list {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.gh-head-actions-list a:not([class]) {
|
|
display: inline-block;
|
|
margin: 0 0 0 1.5vmin;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
|
|
/* Mobile Menu Trigger
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.gh-burger {
|
|
position: relative;
|
|
display: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gh-burger-box {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 33px;
|
|
height: 33px;
|
|
}
|
|
|
|
.gh-burger-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.gh-burger-box::before {
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
content: '';
|
|
width: 100%;
|
|
height: 1px;
|
|
background: currentcolor;
|
|
transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
|
|
will-change: transform, width;
|
|
}
|
|
|
|
.gh-burger-inner::before,
|
|
.gh-burger-inner::after {
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
content: '';
|
|
width: 100%;
|
|
height: 1px;
|
|
background: currentcolor;
|
|
transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
|
|
will-change: transform, width;
|
|
}
|
|
|
|
.gh-burger-inner::before {
|
|
transform: translatey(-6px);
|
|
}
|
|
.gh-burger-inner::after {
|
|
transform: translatey(6px);
|
|
}
|
|
|
|
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
|
|
transform: translatey(-8px);
|
|
}
|
|
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
|
transform: translatey(8px);
|
|
}
|
|
|
|
.gh-head-open .gh-burger-box::before {
|
|
width: 0;
|
|
transform: translatex(19px);
|
|
transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
|
|
}
|
|
|
|
.gh-head-open .gh-burger-inner::before {
|
|
width: 26px;
|
|
transform: translatex(6px) rotate(135deg);
|
|
}
|
|
|
|
.gh-head-open .gh-burger-inner::after {
|
|
width: 26px;
|
|
transform: translatex(6px) rotate(-135deg);
|
|
}
|
|
|
|
|
|
/* Layout Variants
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.gh-head-brandnavactions .gh-head-brand {
|
|
grid-column-start: 1;
|
|
}
|
|
|
|
.gh-head-brandnav .gh-container {
|
|
grid-gap: 0;
|
|
grid-template-columns: auto max-content max-content;
|
|
}
|
|
.gh-head-brandnav .gh-head-brand {
|
|
grid-column-start: 1;
|
|
}
|
|
.gh-head-brandnav .gh-head-menu {
|
|
margin-left: 40px;
|
|
}
|
|
.gh-head-brandnav .gh-head-menu .nav li {
|
|
margin: 0 0 0 1.5vmin;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Center Stacked */
|
|
.gh-head-stacked .gh-container {
|
|
grid-template-columns: 1fr;
|
|
grid-gap: 2vmin;
|
|
}
|
|
.gh-head-stacked .gh-head-brand {
|
|
grid-column-start: 1;
|
|
width: 100%;
|
|
max-width: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
.gh-head-stacked .gh-head-menu,
|
|
.gh-head-stacked .gh-head-actions,
|
|
.gh-head-stacked .gh-head-actions-list {
|
|
justify-content: center;
|
|
}
|
|
.gh-head-stacked .gh-head-actions a:first-child svg {
|
|
margin-left: 0;
|
|
}
|
|
|
|
|
|
/* Mobile Menu
|
|
/* ---------------------------------------------------------- */
|
|
/* IDs needed to ensure sufficient specificity */
|
|
|
|
@media (max-width: 900px) {
|
|
.gh-burger {
|
|
display: inline-block;
|
|
}
|
|
#gh-head {
|
|
transition: all 0.4s ease-out;
|
|
overflow: hidden;
|
|
}
|
|
#gh-head .gh-head-inner {
|
|
height: 100%;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
#gh-head .gh-head-brand {
|
|
position: relative;
|
|
z-index: 10;
|
|
grid-column-start: auto;
|
|
max-width: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
user-select: none;
|
|
}
|
|
#gh-head .gh-head-logo {
|
|
font-size: 2.2rem;
|
|
}
|
|
#gh-head .gh-head-logo img {
|
|
max-height: 40px;
|
|
}
|
|
#gh-head .gh-head-menu {
|
|
align-self: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin: 0 0 10vh 0;
|
|
font-weight: 300;
|
|
font-size: 3.6rem;
|
|
line-height: 1.1em;
|
|
}
|
|
#gh-head .gh-head-menu .nav li {
|
|
margin: 5px 0;
|
|
}
|
|
#gh-head .gh-head-menu .nav a {
|
|
padding: 8px 0;
|
|
}
|
|
#gh-head .gh-head-menu .nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
#gh-head .gh-head-actions {
|
|
padding: 20px 0;
|
|
justify-content: center;
|
|
text-align: left;
|
|
}
|
|
#gh-head .gh-head-actions a {
|
|
margin: 0 10px;
|
|
}
|
|
/* Hide collapsed content */
|
|
#gh-head .gh-head-actions,
|
|
#gh-head .gh-head-menu {
|
|
display: none;
|
|
}
|
|
/* Open the menu */
|
|
.gh-head-open {
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
}
|
|
.gh-head-open #gh-head {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 900;
|
|
overflow-y: scroll;
|
|
}
|
|
.gh-head-open #gh-head .gh-head-inner {
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
.gh-head-open #gh-head .gh-head-actions,
|
|
.gh-head-open #gh-head .gh-head-menu {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
#gh-head .gh-head-menu {
|
|
font-size: 6vmin;
|
|
}
|
|
}
|