Note: The default ITS GitLab runner is a shared resource and is subject to slowdowns during heavy usage.
You can run your own GitLab runner that is dedicated just to your group if you need to avoid processing delays.

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>
)
}
......
Markdown is supported
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