Commit f504f65a authored by Jonathan McGlone's avatar Jonathan McGlone
Browse files

add initial framework for homepage and general page layout

parent 5ddd574c
......@@ -11,7 +11,7 @@ const Book = ({book}) => {
} = book
return (
<div className="card lever-card">
<div className="col-md-4 card lever-card">
<Img fluid={cover.childImageSharp.fluid}
alt={`cover of ${title}`}
className="card-img-top lever-card-img"
......
......@@ -4,17 +4,15 @@ import BookCard from "./bookCard"
const BookList = ({books}) => {
return (
<section className="card-deck lever-card-list">
<div className="card-deck lever-card-list">
{
books.map(({node}) => {
return (
<div>
<BookCard key={node.id} book={node.frontmatter} />
</div>
)
})
}
</section>
</div>
)
}
......
......@@ -16,14 +16,16 @@ const Footer = () => {
const {title} = data.site.siteMetadata
return (
<footer className="footer navbar fixed-bottom bg-dark">
<ul className="lever-footer-links">
<li>
<Link to="/">
{title}
</Link>
</li>
</ul>
<footer className="footer navbar bg-dark" role="navigation">
<div class="container">
<ul className="lever-footer-links">
<li>
<Link to="/">
{title}
</Link>
</li>
</ul>
</div>
</footer>
)
}
......
......@@ -6,9 +6,11 @@ import Footer from "./footer"
const Layout = ({ children }) => {
return (
<div className="container">
<div>
<Navbar />
{children}
<div className="container">
{children}
</div>
<Footer />
</div>
)
......
......@@ -2,11 +2,6 @@
box-sizing: border-box;
}
body {
padding-top: 4rem;
padding-bottom: 4rem;
}
.navbar-brand-logo {
width: 10rem;
height: 2.5rem;
......
......@@ -23,51 +23,53 @@ const Navbar = () => {
const data = useStaticQuery(getLogo)
return (
<nav className="navbar fixed-top navbar-expand-sm bg-light navbar-light">
<Link to="/" className="navbar-brand">
<Img fluid={data.logo.childImageSharp.fluid} className="navbar-brand-logo"/>
</Link>
<button className="navbar-toggler" type="button" onClick={toggleNav}>
<span className="navbar-toggler-icon" />
</button>
<div className={
isOpen
? "collapse navbar-collapse show"
: "collapse navbar-collapse"
}
>
<ul className="navbar-nav mx-auto">
<li className="nav-item">
<Link to="/about" className="nav-link">
About
</Link>
</li>
<li>
<a href="https://www.fulcrum.org/leverpress" className="nav-link">
Catalog
</a>
</li>
<li>
<Link to="/info" className="nav-link">
Info For
</Link>
</li>
<li>
<Link to="/impact" className="nav-link">
Impact
</Link>
</li>
<li>
<Link to="/news" className="nav-link">
News
</Link>
</li>
<li>
<Link to="/events" className="nav-link">
Events
</Link>
</li>
</ul>
<nav className="navbar navbar-expand-sm bg-light navbar-light">
<div class="container">
<Link to="/" className="navbar-brand">
<Img fluid={data.logo.childImageSharp.fluid} className="navbar-brand-logo"/>
</Link>
<button className="navbar-toggler" type="button" onClick={toggleNav}>
<span className="navbar-toggler-icon" />
</button>
<div className={
isOpen
? "collapse navbar-collapse show"
: "collapse navbar-collapse"
}
>
<ul className="navbar-nav mx-auto">
<li className="nav-item">
<Link to="/about" className="nav-link">
About
</Link>
</li>
<li>
<a href="https://www.fulcrum.org/leverpress" className="nav-link">
Catalog
</a>
</li>
<li>
<Link to="/info" className="nav-link">
Info For
</Link>
</li>
<li>
<Link to="/impact" className="nav-link">
Impact
</Link>
</li>
<li>
<Link to="/news" className="nav-link">
News
</Link>
</li>
<li>
<Link to="/events" className="nav-link">
Events
</Link>
</li>
</ul>
</div>
</div>
</nav>
)
......
......@@ -145,35 +145,41 @@ const IndexPage = ({data}) => {
return (
<Layout>
<SEO title="Home" />
<div className="index-grid">
<div className="books-container">
<section className="row books-container card-deck lever-card-list">
<BookList books={books} />
</div>
<div className="tagline-container">
<Tagline text={tagline.text} />
</div>
<div className="newsletter-container">
<Newsletter newsletter={newsletter} />
</div>
<div className="news-container">
<NewsList news={news} cardStyle="tiny-card"/>
</div>
<div className="events-container">
<EventList events={events} cardStyle="tiny-card"/>
</div>
<div className="author-container">
author signup thing
</div>
<div className="library-container">
library signup thing
</div>
<div className="video-container">
<Video video={video} />
</div>
<div className="map-container">
<MapImage mapImage={map} />
</div>
</div>
</section>
<section className="row">
<div className="tagline-container col-md-6">
<Tagline text={tagline.text} />
</div>
<div className="newsletter-container col-md-6">
<Newsletter newsletter={newsletter} />
</div>
</section>
<section className="row">
<div className="news-container col-md-9">
<NewsList news={news} cardStyle="tiny-card"/>
</div>
<div className="events-container col-md-3">
<EventList events={events} cardStyle="tiny-card"/>
</div>
</section>
<section className="row">
<div className="author-container col-md-6">
author signup thing
</div>
<div className="library-container col-md-6">
library signup thing
</div>
</section>
<section className="row">
<div className="video-container col-md-6">
<Video video={video} />
</div>
<div className="map-container col-md-6">
<MapImage mapImage={map} />
</div>
</section>
</Layout>
)
}
......
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