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

Simplify

This commit is contained in:
John O'Nolan 2019-11-07 15:39:22 +07:00
parent 4c2ba87b06
commit cb772ce363
5 changed files with 268 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

256
assets/css/components/header.css Normal file
View File

@ -0,0 +1,256 @@
.gh-head {
padding: 20px 4vw;
font-size: 1.6rem;
line-height: 1.3em;
}
.gh-head a {
color: inherit;
text-decoration: none;
}
.gh-head .gh-container {
display: grid;
grid-gap: 40px;
grid-template-columns: 1fr auto 1fr;
grid-auto-flow: row dense;
}
.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.5vw 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;
}
.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;
}
.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 {
display: inline-block;
margin: 0 0 0 1.5vw;
padding: 5px 0;
}
/* Menu
/* ---------------------------------------------------------- */
.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: #fff;
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: #fff;
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);
}
@media (max-width: 900px) {
.gh-burger {
display: inline-block;
}
.gh-head {
transition: all 0.4s ease-out;
overflow: hidden;
}
.gh-head .gh-container {
height: 100%;
grid-template-columns: 1fr;
}
.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-menu {
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0 0 10vh;
font-weight: 300;
font-size: 3.6rem;
line-height: 1.1em;
}
.gh-head-menu .nav li {
margin: 5px 0;
}
.gh-head-menu .nav a {
padding: 8px 0;
}
.gh-head-menu .nav {
display: flex;
flex-direction: column;
align-items: center;
}
.gh-head-actions {
padding: 20px 0;
justify-content: center;
text-align: left;
}
.gh-head-actions a {
margin: 0 10px;
}
/* Hide collapsed content */
.gh-head-actions,
.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;
overflow-y: scroll;
}
.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 {
display: flex;
}
}
@media (max-width: 600px) {
.gh-head-menu {
font-size: 6vmin;
}
}

272
assets/css/screen.css
View File

@ -13,6 +13,7 @@ production stylesheet in assets/built/screen.css using: gulp dev
@import "components/global.css";
/* Ghost components */
@import "components/header.css";
@import "components/content.css";
@import "components/members.css";
@ -35,277 +36,20 @@ production stylesheet in assets/built/screen.css using: gulp dev
padding: 0 4vw;
}
/* Header */
.gh-head {
padding: 20px 4vw;
color: #fff;
font-size: 1.5rem;
line-height: 1.3em;
background: var(--color-base);
}
.gh-head a {
color: #fff;
text-decoration: none;
}
.gh-head .gh-container {
display: grid;
grid-gap: 40px;
grid-template-columns: 1fr auto 1fr;
grid-auto-flow: row dense;
}
.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.5vw 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 #fff 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;
}
.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 {
display: inline-block;
margin: 0 0 0 1.5vw;
padding: 5px 0;
}
/* Menu
/* ---------------------------------------------------------- */
.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: #fff;
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: #fff;
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);
}
@media (max-width: 900px) {
.gh-burger {
display: inline-block;
}
.gh-head {
transition: all 0.4s ease-out;
overflow: hidden;
}
.gh-head .gh-container {
height: 100%;
grid-template-columns: 1fr;
}
.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-menu {
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0 0 10vh;
font-weight: 300;
font-size: 3.6rem;
line-height: 1.1em;
}
.gh-head-menu .nav li {
margin: 5px 0;
}
.gh-head-menu .nav a {
padding: 8px 0;
}
.gh-head-menu .nav {
display: flex;
flex-direction: column;
align-items: center;
}
.gh-head-actions {
padding: 20px 0;
justify-content: center;
text-align: left;
}
.gh-head-actions a {
margin: 0 10px;
}
/* Hide collapsed content */
.gh-head-actions,
.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;
overflow-y: scroll;
}
.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 {
display: flex;
}
}
@media (max-width: 600px) {
.gh-head-menu {
font-size: 6vmin;
}
}
/* Footer
/* ---------------------------------------------------------- */
.gh-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 4vw;
color: #fff;
background: var(--color-base);
justify-content: center;
padding: 4vw;
}
.gh-foot .gh-container {
width: auto;
}
.gh-foot a {
color: #fff;
color: inherit;
}

3
default.hbs
View File

@ -50,8 +50,10 @@
</header>
<main class="gh-main">
{{{body}}}
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
</main>
<footer class="gh-foot">
@ -80,7 +82,6 @@ $(document).ready(function () {
});
</script>
{{{block "scripts"}}}
{{!-- The #block helper will pull in data from the #contentFor other template files --}}