Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update to use Ghost’s user-editable navigation #7

Merged
merged 15 commits into from
Sep 2, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions .content-overrides/settings/routes.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# For preview deployment only… maybe?
routes:
/:
data: page.home
template: home

collections:
/blog/:
permalink: /blog/{slug}/
template: index
/:
permalink: /{slug}/
template: home

taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
2 changes: 2 additions & 0 deletions .github/workflows/preview-theme.yml
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ jobs:
run: rm -rf themenamehere/.git
- name: mv theme
run: mv themenamehere ghost-on-heroku/content/themes
- name: copy content overrides
run: cp -Rv ghost-on-heroku/content/themes/themenamehere/.content-overrides/* ghost-on-heroku/content
- name: hack .gitignore
working-directory: ghost-on-heroku
run: sed -i 's/content\/themes\/\*//' .gitignore
Expand Down
67 changes: 48 additions & 19 deletions assets/css/header.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@
grid-column-gap: 1rem;
}
}
.page-template .header, .blog-template .header, .post-template .header {
background-color: rgba(34,34,34,0.9);
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
margin-bottom: 50px;
}
.active {
background-color: rgba(34, 34, 34, 0.8);
}
Expand Down Expand Up @@ -116,7 +121,7 @@
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.donate-button {
.header nav ul.nav .nav-donate a {
margin-right: 0px;
display: inline-block;
font-size: 25px;
Expand All @@ -131,15 +136,14 @@
}

@media screen and (min-width: 768px) {
.donate-button {
.nav-donate a {
margin-right: 50px;
font-size: 25px;
}
}

.header .menu {
.header .nav {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.header .menu-icon {
Expand Down Expand Up @@ -178,11 +182,6 @@
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
text-align: center;
max-height: 240px;
margin-bottom: 20px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
Expand All @@ -196,28 +195,53 @@
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
@media screen and (max-width: 768px) {
.header .nav {
max-height: 0;
}
.header .nav li {
width: 100%;
}
.header .menu-btn:checked ~ .nav {
clear: both;
text-align: center;
max-height: 240px;
margin-bottom: 20px;
}
.home-template .header .menu-btn:checked ~ .nav:after {
background-color: rgba(34, 34, 34, 0.8);
position: absolute;
top: 0;
bottom: 1em;
left: 0;
right: 0;
z-index: -1;
content: '';
}
}
@media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
margin: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}

.nav-hover {
.header nav ul.nav {
display: flex;
align-items: center;
text-transform: uppercase;
}

.header nav ul.nav a {
/*font-size: 36px;*/
/*font-weight: bold;*/
text-decoration: none;
color: black;
color: white;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(65%, transparent), color-stop(0, #fcf113));
background-image: linear-gradient(180deg, transparent 65%, white 0);
background-repeat: no-repeat;
Expand All @@ -226,17 +250,22 @@
transition: background-size .2s ease;
}

.nav-hover:hover {
.header nav ul.nav a:hover {
background-size: 100% 130%;
}

.nav-current {
.header nav ul.nav .nav-current a {
/*font-size: 36px;*/
/*font-weight: bold;*/
text-decoration: none;
color: black;
color: white;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(65%, transparent), color-stop(0, #fcf113));
background-image: linear-gradient(180deg, transparent 65%, white 0);
background-repeat: no-repeat;
background-size: 100% 130%;
}

.header nav ul.nav .nav-donate a:hover, .header nav ul.nav .nav-donate.nav-current a {
background-size: 0 130%;
}

20 changes: 3 additions & 17 deletions default.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -33,23 +33,9 @@
{{ghost_head}}
</head>

<body class="{{body_class}}">


{{!-- Navigation bar --}}
<header class="header" style="background-color: rgba(34,34,34,0.9);
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); margin-bottom: 50px;">
<nav>
<a href="/"> {{> logo}} </a> <input class="menu-btn" type="checkbox" id="menu-btn" /> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a class="nav-hover" href="/#mission" >MISSION</a></li>
<li><a class="nav-hover" href="/resources">RESOURCES</a></li>
<li ><a class="nav-current" href="/blog">BLOG</a></li>
<li><a class="nav-hover" href="/contact">CONTACT</a></li>
<li> <a href="/donate"><button type="button" class="donate-button">DONATE</button> </a></li>
</ul>
</nav>
</header>
<body class="{{body_class}} {{#is "blog"}}blog-template{{/is}}">

{{> nav}}

<!--<section><h3>Recent posts from the blog</h3><ul><li> <a href="/blog/the-most-recent-post-so-far">The most recent post so far</a></li><li> <a href="/blog/a-simple-post">A simple blog post</a></li><li> <a href="/blog/another-post">Another post</a></li></ul></section>-->

Expand Down
21 changes: 1 addition & 20 deletions home.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -37,19 +37,7 @@
<body class="{{body_class}}">


{{!-- Navigation bar --}}
<header class="header" id="myHeader">
<nav>
{{> logo}} <input onclick="myFunction()" class="menu-btn" type="checkbox" id="menu-btn" /> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li ><a class="nav-current" href="/#mission" data-current="current page">MISSION</a></li>
<li><a class="nav-hover" href="/resources">RESOURCES</a></li>
<li><a class="nav-hover" href="/blog">BLOG</a></li>
<li><a class="nav-hover" href="/contact">CONTACT</a></li>
<li> <a href="/donate"><button type="button" class="donate-button">DONATE</button> </a></li>
</ul>
</nav>
</header>
{{> nav}}

<div class="hero2">
<div class="text-heading">
Expand Down Expand Up @@ -168,13 +156,6 @@
<script src="{{asset "js/bootstrap.min.js"}}"></script>
<script src="{{asset "js/main.js"}}"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script type="text/javascript">

function myFunction() {
var element = document.getElementById("myHeader");
element.classList.add("active");
}
</script>
<script>
AOS.init({
once: true
Expand Down
14 changes: 1 addition & 13 deletions page-blog.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -34,19 +34,7 @@
<body class="{{body_class}}">


{{!-- Navigation bar --}}
<header class="header">
<nav>
{{> logo}} <input class="menu-btn" type="checkbox" id="menu-btn" /> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="/">MISSION</a></li>
<li><a href="/resources">RESdfsdfOURCES</a></li>
<li style="text-decoration-line: underline;" data-current="current page"><a href="/blog">BLOG</a></li>
<li><a href="/contact">CONTACT</a></li>
<li><button type="button" class="donate-button">DONATE</button></li>
</ul>
</nav>
</header>
{{> nav}}

<div class="hero">
<div class="text-heading">
Expand Down
15 changes: 1 addition & 14 deletions page-contact.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -36,20 +36,7 @@
<body class="{{body_class}}">


{{!-- Navigation bar --}}
<header class="header" style="background-color: rgba(34,34,34,0.9);
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); margin-bottom: 50px;">
<nav>
<a href="/"> {{> logo}} </a> <input class="menu-btn" type="checkbox" id="menu-btn" /> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a class="nav-hover" href="/#mission">MISSION</a></li>
<li><a class="nav-hover" href="/resources">RESOURCES</a></li>
<li><a class="nav-hover" href="/blog">BLOG</a></li>
<li><a class="nav-current" href="/contact">CONTACT</a></li>
<li> <a href="/donate"><button type="button" class="donate-button">DONATE</button> </a></li>
</ul>
</nav>
</header>
{{> nav}}


<div class="hero">
Expand Down
15 changes: 1 addition & 14 deletions page-donate.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -36,20 +36,7 @@
<body class="{{body_class}}">


{{!-- Navigation bar --}}
<header class="header" style="background-color: rgba(34,34,34,0.9);
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); margin-bottom: 50px;">
<nav>
<a href="/"> {{> logo}} </a> <input class="menu-btn" type="checkbox" id="menu-btn" /> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a class="nav-hover" href="/#mission">MISSION</a></li>
<li ><a class="nav-hover" href="/resources" data-current="current page">RESOURCES</a></li>
<li><a class="nav-hover" href="/blog">BLOG</a></li>
<li><a class="nav-hover" href="/contact">CONTACT</a></li>
<li > <a href="/donate"><button type="button" class="donate-button ">DONATE</button> </a></li>
</ul>
</nav>
</header>
{{> nav}}


<div id="mission" class="section-1">
Expand Down
15 changes: 1 addition & 14 deletions page-resources.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -36,20 +36,7 @@
<body class="{{body_class}}">


{{!-- Navigation bar --}}
<header class="header" style="background-color: rgba(34,34,34,0.9);
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); margin-bottom: 50px;">
<nav>
<a href="/"> {{> logo}} </a> <input class="menu-btn" type="checkbox" id="menu-btn" /> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a class="nav-hover" href="/#mission">MISSION</a></li>
<li><a class="nav-current" href="/resources">RESOURCES</a></li>
<li><a class="nav-hover" href="/blog">BLOG</a></li>
<li><a class="nav-hover" href="/contact">CONTACT</a></li>
<li> <a href="/donate"><button type="button" class="donate-button">DONATE</button> </a></li>
</ul>
</nav>
</header>
{{> nav}}


<div id="mission" data-aos="fade-up" class="section-1">
Expand Down
1 change: 0 additions & 1 deletion partials/logo.hbs

This file was deleted.

16 changes: 16 additions & 0 deletions partials/nav.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<header class="header">
<nav>
<a href="/">
<img class="header-logo" src="{{asset "images/logo.png"}}" />
</a>

<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>

{{#if @site.navigation}}
{{navigation}}
{{/if}}
</nav>
</header>