peterkrzyzek/ghost_leaders_theme
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity

Icons and ting

Browse source
This commit is contained in:
John O'Nolan 2019-11-07 17:52:59 +07:00
parent 70e61e9fa1
commit 839d6c3224
10 changed files with 135 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

126
assets/css/components/header.css
View file

@ -1,8 +1,11 @@
/* Global Header
/* ---------------------------------------------------------- */
.gh-head {
padding: 20px 4vw;
padding: 3vw 4vw;
font-size: 1.6rem;
line-height: 1.3em;
background: inherit;
}
.gh-head a {
@ -17,6 +20,35 @@
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;
@ -43,26 +75,9 @@
box-shadow: 0 -1px 0 0 currentcolor inset;
}
.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;
}
/* Secondary Navigation
/* ---------------------------------------------------------- */
.gh-head-actions {
display: flex;
@ -86,7 +101,7 @@
}
/* Menu
/* Mobile Menu Trigger
/* ---------------------------------------------------------- */
.gh-burger {
@ -119,7 +134,7 @@
content: '';
width: 100%;
height: 1px;
background: #fff;
background: currentcolor;
transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
will-change: transform, width;
}
@ -135,7 +150,7 @@
content: '';
width: 100%;
height: 1px;
background: #fff;
background: currentcolor;
transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
will-change: transform, width;
}
@ -171,19 +186,50 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
}
/* 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.5vw;
padding: 0;
}
/* Mobile Menu
/* ---------------------------------------------------------- */
/* IDs needed to ensure sufficient specificity */
@media (max-width: 900px) {
.gh-burger {
display: inline-block;
}
.gh-head {
#gh-head {
transition: all 0.4s ease-out;
overflow: hidden;
}
.gh-head .gh-container {
#gh-head .gh-container {
height: 100%;
grid-template-columns: 1fr;
}
.gh-head-brand {
#gh-head .gh-head-brand {
position: relative;
z-index: 10;
grid-column-start: auto;
@ -193,39 +239,39 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
justify-content: space-between;
user-select: none;
}
.gh-head-menu {
#gh-head .gh-head-menu {
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0 0 10vh;
margin: 0 0 10vh 0;
font-weight: 300;
font-size: 3.6rem;
line-height: 1.1em;
}
.gh-head-menu .nav li {
#gh-head .gh-head-menu .nav li {
margin: 5px 0;
}
.gh-head-menu .nav a {
#gh-head .gh-head-menu .nav a {
padding: 8px 0;
}
.gh-head-menu .nav {
#gh-head .gh-head-menu .nav {
display: flex;
flex-direction: column;
align-items: center;
}
.gh-head-actions {
#gh-head .gh-head-actions {
padding: 20px 0;
justify-content: center;
text-align: left;
}
.gh-head-actions a {
#gh-head .gh-head-actions a {
margin: 0 10px;
}
/* Hide collapsed content */
.gh-head-actions,
.gh-head-menu {
#gh-head .gh-head-actions,
#gh-head .gh-head-menu {
display: none;
}
/* Open the menu */
@ -233,7 +279,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
overflow: hidden;
height: 100vh;
}
.gh-head-open .gh-head {
.gh-head-open #gh-head {
position: fixed;
top: 0;
right: 0;
@ -241,16 +287,16 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
left: 0;
overflow-y: scroll;
}
.gh-head-open .gh-head .gh-container {
.gh-head-open #gh-head .gh-container {
grid-template-rows: auto 1fr auto;
}
.gh-head-open .gh-head-actions,
.gh-head-open .gh-head-menu {
.gh-head-open #gh-head .gh-head-actions,
.gh-head-open #gh-head .gh-head-menu {
display: flex;
}
}
@media (max-width: 600px) {
.gh-head-menu {
#gh-head .gh-head-menu {
font-size: 6vmin;
}
}

26
assets/css/screen.css
View file

@ -25,6 +25,11 @@ production stylesheet in assets/built/screen.css using: gulp dev
/* Main - Your styles here! Edit below
/* ---------------------------------------------------------- */
html,
.gh-viewport {
background: #fff;
}
/* Global */
.gh-container {
width: 100%;
@ -37,6 +42,27 @@ production stylesheet in assets/built/screen.css using: gulp dev
}
.gh-head-actions a {
display: inline-flex;
align-items: center;
margin: 0;
padding: 10px;
}
.gh-head-actions a svg {
height: 1.8rem;
fill: currentcolor;
}
.gh-head-actions a:first-child svg {
margin-left: 20px;
}
.gh-head-actions a:last-child svg {
height: 2rem;
}
/* Footer
/* ---------------------------------------------------------- */
.gh-foot {