Commit 01bcf46c authored by Seth A Johnson's avatar Seth A Johnson
Browse files

Merge branch 'newsletter' into 'master'

newsletter, css reset

See merge request !4
parents 4c1d2230 ddfc6c7d
......@@ -15,23 +15,17 @@ body {
// index
.index-grid {
grid-area: main;
display: grid;
grid-template-rows: 3.5rem auto fit-content(8rem);
grid-template-areas: "books books",
"tagline newsletter",
"news events",
"author library",
"video map";
display: block;
}
.books-container {
grid-area: books;
display: flex;
background: lightskyblue;
}
.tagline-container {
grid-area: tagline;
background: pink;
background: indianred;
height: 10vh;
.tagline {
font-weight: bold;
......@@ -40,35 +34,36 @@ body {
}
.newsletter-container {
grid-area: newletter;
background: lightgreen;
}
.news-container {
grid-area: news;
}
.events-container {
grid-area: events;
}
.author-area {
grid-area: author;
}
.library-area {
grid-area: library;
}
.video-area {
grid-area: video;
}
.map-area {
grid-area: map;
}
// card stuff
.lever-card-list {
display: flex;
......
import React from "react"
const Newsletter = ({newsletter}) => {
return (
<div>
<h2>{newsletter.heading}</h2>
<p>{newsletter.description}</p>
<a href={newsletter.url}>{newsletter.buttonLabel}</a>
</div>
)
}
export default Newsletter
import React from "react"
const Tagline = ({text}) => {
return (
<div className="tagline">
{text}
</div>
)
}
export default Tagline
......@@ -2,4 +2,9 @@
templateKey: home-page
taglineSection:
text: A tagline for Lever Press
newsletterSection:
heading: A Newsletter Heading
description: description of the newsletter
url: "http://google.com"
buttonLabel: Sign Up
---
......@@ -5,34 +5,43 @@ import SEO from "../components/seo"
import BookList from "../components/books/bookList"
import {graphql} from "gatsby"
import Tagline from "../components/tagline"
import Newsletter from "../components/newsletter"
export const IndexQuery = graphql`
query {
markdownRemark(frontmatter: { templateKey: { eq: "home-page" } }) {
frontmatter{
taglineSection{
frontmatter {
taglineSection {
text
}
newsletterSection {
heading
description
url
buttonLabel
}
}
}
}
`
const IndexPage = ({data}) => {
const tagline = data.markdownRemark.frontmatter.taglineSection
const newsletter = data.markdownRemark.frontmatter.newsletterSection
return (
<Layout>
<SEO title="Home" />
<div className="index-grid">
<div className="books">
<div className="books-container">
<BookList />
<div class="tagline-container">
<div class="tagline">
{ data.markdownRemark.frontmatter.taglineSection.text}
</div>
</div>
<div class="newsletter-container">
newsletter
</div>
</div>
<div className="tagline-container">
<Tagline text={tagline.text} />
</div>
<div className="newsletter-container">
<Newsletter newsletter={newsletter} />
</div>
</div>
</Layout>
......
......@@ -59,6 +59,14 @@ collections:
widget: object
fields:
- { name: text, label: Text, widget: markdown }
- name: newsletterSection
label: "Newsletter Section"
widget: object
fields:
- { name: heading, label: Heading }
- { name: description, label: Description }
- { name: url, label: "Newsletter URL" }
- { name: buttonLabel, label: "Button Label" }
- file: "src/content/about.md"
name: about
label: About
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment