add metadata and site header props
parent
3988eba2b9
commit
28c932556e
|
@ -0,0 +1,11 @@
|
||||||
|
module.exports = {
|
||||||
|
"title": "Jay's Blog",
|
||||||
|
"url": "https://jhankins.dev/",
|
||||||
|
"language": "en",
|
||||||
|
"description": "Jay Hankins is a cloud software engineer.",
|
||||||
|
"author": {
|
||||||
|
"name": "Jay Hankins",
|
||||||
|
"email": "me@jhankins.dev",
|
||||||
|
"url": "https://jhankins.dev/about/"
|
||||||
|
}
|
||||||
|
}
|
|
@ -38,7 +38,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:focus>.menu__btn-title {
|
:focus>.menu__btn-title {
|
||||||
box-shadow: inset 0 0 1px 3px #e22d30;
|
box-shadow: inset 0 0 1px 3px var(--main-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:not(:-moz-focusring):focus>.menu__btn-title {
|
button:not(:-moz-focusring):focus>.menu__btn-title {
|
||||||
|
@ -51,7 +51,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.js .menu__btn--active {
|
.js .menu__btn--active {
|
||||||
color: #e22d30;
|
color: var(--main-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu__list {
|
.menu__list {
|
||||||
|
@ -60,7 +60,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu__item:hover {
|
.menu__item:hover {
|
||||||
background: #e22d30;
|
background: var(--main-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu__item:first-child {
|
.menu__item:first-child {
|
||||||
|
@ -68,7 +68,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu__item--active {
|
.menu__item--active {
|
||||||
background: #e22d30;
|
background: var(--main-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu__link {
|
.menu__link {
|
||||||
|
@ -109,7 +109,7 @@
|
||||||
|
|
||||||
@media screen and (min-width: 767px) {
|
@media screen and (min-width: 767px) {
|
||||||
.menu {
|
.menu {
|
||||||
border-bottom: 5px solid #e22d30;
|
border-bottom: 5px solid var(--main-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu__btn {
|
.menu__btn {
|
||||||
|
|
|
@ -1,2 +1,8 @@
|
||||||
<h1>site-header</h1>
|
<style webc:scoped>
|
||||||
<h2>subtitle!</h2>
|
:host {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h1 @text="title">fallback title</h1>
|
||||||
|
<h2 @text="subtitle">fallback subtitle</h2>
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
@import "vars.css";
|
|
@ -1,4 +1,4 @@
|
||||||
:root {
|
:root {
|
||||||
--main-color: red;
|
--main-color: rgb(16, 111, 243);
|
||||||
--pane-padding: 5px 42px;
|
--pane-padding: 5px 42px;
|
||||||
}
|
}
|
|
@ -6,12 +6,13 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title @text="title ? title : metadata.title"></title>
|
||||||
|
|
||||||
<!--- Uncomment this if you'd like folks to know that you used Eleventy to build your site! --->
|
<!--- Uncomment this if you'd like folks to know that you used Eleventy to build your site! --->
|
||||||
<meta name="generator" :content="eleventy.generator">
|
<meta name="generator" :content="eleventy.generator">
|
||||||
|
|
||||||
<!--- These will be picked up and bundled by eleventy --->
|
<!--- These will be picked up and bundled by eleventy --->
|
||||||
<link rel="stylesheet" href="../vars.css">
|
<link rel="stylesheet" href="../css/vars.css">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
|
@ -30,6 +31,7 @@
|
||||||
margin: auto;
|
margin: auto;
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<!--- Build and embed the bundles needed for each page --->
|
<!--- Build and embed the bundles needed for each page --->
|
||||||
|
@ -40,7 +42,8 @@
|
||||||
<body>
|
<body>
|
||||||
<main id="skip">
|
<main id="skip">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<site-header></site-header>
|
<site-header :@title="metadata.title" @subtitle="plaintext">
|
||||||
|
</site-header>
|
||||||
<nav-bar></nav-bar>
|
<nav-bar></nav-bar>
|
||||||
<template @raw="content" webc:nokeep></template>
|
<template @raw="content" webc:nokeep></template>
|
||||||
<site-footer></site-footer>
|
<site-footer></site-footer>
|
||||||
|
|
Loading…
Reference in New Issue