439 lines
10 KiB
Plaintext
439 lines
10 KiB
Plaintext
---
|
|
import { twitter, facebook } from "@matthiesenxyz/astro-ghostcms/api";
|
|
import type { Settings } from "@matthiesenxyz/astro-ghostcms/api";
|
|
export type Props = {
|
|
settings: Settings;
|
|
};
|
|
const { settings } = Astro.props as Props;
|
|
---
|
|
|
|
<header
|
|
id="gh-head"
|
|
class={`gh-head ${settings.cover_image ? "has-cover" : ""} js-header`}
|
|
>
|
|
<nav class="gh-head-inner inner gh-container">
|
|
<div class="gh-head-brand">
|
|
<a class="gh-head-logo" href="/">
|
|
{settings.logo && <img src={settings.logo} alt={settings.title} />}
|
|
{!settings.logo && settings.title}
|
|
</a>
|
|
<a class="gh-burger" role="button">
|
|
<div class="gh-burger-box">
|
|
<div class="gh-burger-inner"></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="gh-head-menu">
|
|
<ul class="nav">
|
|
{settings.navigation.map(({ label, url }) => (
|
|
<li class="nav__item">
|
|
<a href={url}>{label}</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div class="gh-head-actions">
|
|
<div class="gh-social">
|
|
{settings.facebook && (
|
|
<a
|
|
class="gh-social-facebook"
|
|
href={facebook(settings.facebook)}
|
|
title="Facebook"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm5.204 4.911h-3.546c-2.103 0-4.443.885-4.443 3.934.01 1.062 0 2.08 0 3.225h-2.433v3.872h2.509v11.147h4.61v-11.22h3.042l.275-3.81h-3.397s.007-1.695 0-2.187c0-1.205 1.253-1.136 1.329-1.136h2.054V4.911z" />
|
|
</svg>
|
|
</a>
|
|
)}
|
|
{settings.twitter && (
|
|
<a
|
|
class="gh-social-twitter"
|
|
href={twitter(settings.twitter)}
|
|
title="Twitter"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
|
<path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z" />
|
|
</svg>
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<style lang="scss" is:global>
|
|
.gh-head {
|
|
padding: 1vmin 4vmin;
|
|
font-size: 1.6rem;
|
|
line-height: 1.3em;
|
|
color: #fff;
|
|
background: var(--ghost-accent-color);
|
|
}
|
|
|
|
.gh-head a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.gh-head-inner {
|
|
display: grid;
|
|
grid-gap: 2.5vmin;
|
|
grid-template-columns: auto auto 1fr;
|
|
grid-auto-flow: row dense;
|
|
}
|
|
|
|
/* Brand
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.gh-head-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 40px;
|
|
max-width: 200px;
|
|
text-align: center;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.gh-head-logo {
|
|
display: block;
|
|
padding: 10px 0;
|
|
font-weight: 700;
|
|
font-size: 2rem;
|
|
line-height: 1.2em;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.gh-head-logo img {
|
|
max-height: 26px;
|
|
}
|
|
|
|
/* Primary Navigation
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.gh-head-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.gh-head-menu .nav {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.gh-head-menu .nav li {
|
|
margin: 0 2.5vmin 0 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.gh-head-menu .nav a {
|
|
display: inline-block;
|
|
padding: 5px 0;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.gh-head-menu .nav a:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.gh-social {
|
|
margin: 0 1.5vmin 0 0;
|
|
}
|
|
|
|
.gh-social a {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.gh-social a + a {
|
|
margin-left: 0.8rem;
|
|
}
|
|
|
|
.gh-social a:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.gh-social svg {
|
|
height: 22px;
|
|
width: 22px;
|
|
fill: #fff;
|
|
}
|
|
|
|
.gh-social-facebook svg {
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
|
|
a.gh-head-button {
|
|
display: block;
|
|
padding: 8px 15px;
|
|
color: var(--color-darkgrey);
|
|
font-weight: 500;
|
|
letter-spacing: -0.015em;
|
|
font-size: 1.5rem;
|
|
line-height: 1em;
|
|
background: #fff;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
/* 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(0.2, 0.6, 0.3, 1),
|
|
width 300ms cubic-bezier(0.2, 0.6, 0.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(0.2, 0.7, 0.3, 1),
|
|
width 250ms cubic-bezier(0.2, 0.7, 0.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(0.2, 0.7, 0.3, 1),
|
|
width 200ms cubic-bezier(0.2, 0.7, 0.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);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
.home-template #gh-head .gh-head-brand {
|
|
justify-content: flex-end;
|
|
}
|
|
#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: 3999999;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.home-template .gh-head {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.home-template .gh-head.has-cover {
|
|
background: transparent;
|
|
}
|
|
|
|
.home-template.gh-head-open .gh-head {
|
|
background: var(--ghost-accent-color);
|
|
}
|
|
|
|
.home-template .gh-head-logo {
|
|
display: none;
|
|
}
|
|
.home-template .gh-head-menu {
|
|
margin-left: -2.5vmin;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
if (!window.handleMenu) {
|
|
window.handleMenu = () => {
|
|
// menu
|
|
const burgerButton = document.querySelector(".gh-burger");
|
|
if (burgerButton) {
|
|
burgerButton.addEventListener("click", () => {
|
|
const body = document.querySelector("body");
|
|
body.classList.toggle("gh-head-open");
|
|
});
|
|
}
|
|
};
|
|
|
|
const callback = () => {
|
|
window.handleMenu();
|
|
};
|
|
|
|
if (document.readyState === "complete") {
|
|
callback();
|
|
} else {
|
|
document.addEventListener("DOMContentLoaded", callback);
|
|
}
|
|
}
|
|
|
|
</script>
|