finish initial hi-fi wireframe for demo

src/components/books/bookCard.js

@@ -12,19 +12,26 @@ const Book = ({book}) => {
   } = book
 
   return (
-    <div className="col-md-4 card lever-card">
-      <Img fluid={cover.childImageSharp.fluid}
-           alt={`cover of ${title}`}
-           className="card-img-top lever-card-img"
-      />
-      <div className="card-body">
-        <h5 className="card-title">{title}</h5>
-        <h6 className="card-subtitle text-muted">{author}</h6>
-        <p className="card-text">{description}</p>
-        <a className="card-link" href={readLink}>Read</a>
-        <a className="card-link" href={buyLink}>Buy</a>
+    <div className="card mb-3 lever-card">
+      <div className="row no-gutters">
+        <div class="col-md-4">
+          <Img fluid={cover.childImageSharp.fluid}
+             alt={`cover of ${title}`}
+            className="card-img"
+          /> 
+        </div>
+        <div class="col-md-8">
+          <div className="card-body">
+            <h5 className="card-title">{title}</h5>
+            <h6 className="card-subtitle text-muted">{author}</h6>
+            <p className="card-text">{description}</p>
+            <a className="card-link btn btn-outline-primary btn-lg" role="button" href={readLink}>Read free online</a>
+            <a className="card-link btn btn-secondary btn-lg" role="button" href={buyLink}>Buy</a>
+          </div>
+        </div>
       </div>
     </div>
+
   )
 }
 

src/components/books/bookList.js

@@ -4,7 +4,7 @@ import BookCard from "./bookCard"
 const BookList = ({books}) => {
 
   return (
-    <div className="card-deck lever-card-list">
+    <div className="row lever-card-list">
       {
         books.map(({node}) => {
           return (

src/components/events/eventCard.js

@@ -7,16 +7,16 @@ const EventCard = ({event, cardStyle}) => {
   const slug = event.fields.slug
 
   return (
-    <div className={`card ${cardStyle || "lever-card"}`}>
-      <div className="card-img-top lever-card-img">
-        <Link to={slug}>
+    <div className="event-card-container">
+      <Link to={slug}>
+        <li className="media my-4">
           <Img fluid={image.childImageSharp.fluid} />
-        </Link>
-      </div>
-      <div className="card-body">
-        <h5 className="card-title">{title}</h5>
-        <h5 className="card-text">{date}</h5>
-      </div>
+          <div class="media-body">
+            <h5 className="mt-0 mb-1">{title}</h5>
+            Summary of the event goes here.
+          </div>
+        </li>
+      </Link>
     </div>
   )
 }

src/components/events/eventList.js

@@ -3,12 +3,15 @@ import EventCard from "./eventCard"
 
 const EventList = ({events, cardStyle}) => {
   return (
-    <section className="card-deck lever-card-list">
-    {
-      events.map(({node}) => {
-        return <EventCard key={node.id} event={node} cardStyle={cardStyle} />
-      })
-    }
+    <section className="lever-card-list">
+      <h2>Events</h2>
+      <ul className="list-unstyled">
+      {
+        events.map(({node}) => {
+          return <EventCard key={node.id} event={node} cardStyle={cardStyle} />
+        })
+      }
+      </ul>
     </section>
   )
 }

src/components/footer.js

@@ -16,16 +16,35 @@ const Footer = () => {
     const {title} = data.site.siteMetadata
 
     return (
-    <footer className="footer navbar bg-dark" role="navigation">
+    <footer className="footer" role="navigation">
       <div className="container">
-        <ul className="lever-footer-links">
-          <li>
-            <Link to="/">
-              {title}
-            </Link>
-          </li>
-        </ul>
-      </div>
+        <div className="row">
+          <div className="col-md-6">
+            <Link to="/" className="text-muted mb-2">{title}</Link>
+            <small className="text-muted d-block">Amherst, MA</small>      
+            <small className="text-muted d-block"><a href="mailto:info@leverpress.org">info@leverpress.org</a></small>      
+            <small className="text-muted d-block mb-3">© 2019</small>      
+          </div>
+          <div className="col-md-3">
+            <h5>Our Partners</h5>
+            <ul className="list-unstyled text-small">
+              <li><a href="https://acpress.amherst.edu/" className="text-muted">Amerhest College Press</a></li>
+              <li><a href="http://www.oberlingroup.org/" className="text-muted">Oberlin Group</a></li>
+              <li><a href="https://www.publishing.umich.edu" className="text-muted">Michigan Publishing</a></li>
+            </ul>
+          </div>
+          <div className="col-md-3">
+            <ul className="list-unstyled text-small">
+              <li><a href="/about" className="text-muted">About</a></li>
+              <li><a href="/catalog" className="text-muted">Catalog</a></li>
+              <li><a href="/info" className="text-muted">Info For</a></li>
+              <li><a href="/impact" className="text-muted">Impact</a></li>
+              <li><a href="/news" className="text-muted">News</a></li>
+              <li><a href="/events" className="text-muted">Events</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>  
     </footer>
   )
 }

src/components/layout.js

@@ -8,7 +8,7 @@ const Layout = ({ children }) => {
   return (
     <div>
       <Navbar />
-      <div className="container">
+      <div className="page-container">
         {children}
       </div>
       <Footer />

src/components/layout.scss

@@ -2,8 +2,8 @@
   box-sizing: border-box;
 }
 
-.navbar-brand {
-  height: 4rem;
+.navbar {
+  height: 6rem;
 
   .navbar-brand-logo {
     width: 10rem;
@@ -13,101 +13,56 @@
 
 }
 
-
-// index
-.index-grid {
-  display: block;
+// page
+.page-container {
+  padding: 2rem 0;
 }
 
-.books-container {
-  display: flex;
-  background: lightskyblue;
-}
-
-.tagline-container {
-  background: indianred;
-  height: 10vh;
-
-  .tagline {
-    font-weight: bold;
-    font-size: 2rem;
-  }
-}
 
-.newsletter-container {
-  background: lightgreen;
-}
-
-.news-container {
-  background: mediumpurple;
-}
-
-.events-container {
-  background: palegoldenrod;
-}
-
-.author-container {
-  background: hotpink;
-}
-
-.library-container {
-  background: lightseagreen;
-}
+// home
 
-.video-container {
-  background: darkorange;
-}
+.books-container {
+  padding: 3rem 0;
 
-.map-container {
-  background: aqua;
+  .lever-card-list {
+    justify-content: space-evenly;
+  }
+  // card stuff
+  .lever-card {
+    max-width: 540px;
 
-  .map-image {
-    width: 20rem;
+    .card-img {
+      border-radius: 0;
+    }
   }
 }
 
-// card stuff
-.lever-card {
-  min-width: 10rem;
-  max-width: 20rem;
+.tagline-newsletter-container {
+  padding: 4rem 0;
+  border-bottom: 1px solid rgba(0,0,0,.125);
+  border-top: 1px solid rgba(0,0,0,.125);
 
-  .lever-card-img {
-    width: 225px;
-    margin: auto;
+  .tagline {
+    font-weight: bold;
+    font-size: 2rem;
   }
 }
 
-.tiny-card {
-  min-width: 10rem;
-  max-width: 10rem;
+.author-library-container {
+  padding: 2.5rem 0;
+  border-bottom: 1px solid rgba(0,0,0,.125);
+  border-top: 1px solid rgba(0,0,0,.125);
+}
 
-  .lever-card-img {
-    width: 100px;
-    margin: auto;
-  }
-  .card-title {
-    font-size: 1rem;
-  }
-  .card-text {
-    font-size: 0.7rem;
+.news-events-container, .video-impact-container {
+  padding: 3rem 0;
+  h2 {
+    margin-bottom: 1rem;
   }
 }
 
-
 // footer
-.lever-footer-links {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  align-items: center;
-}
-
-@media (max-width: 575px) {
-  .lever-card-list {
-    flex-direction: column;
-  }
-  .lever-card {
-    max-width: 20rem;
-  }
+.footer {
+  border-top: 1px solid rgba(0,0,0,.125);
+  padding: 3rem 0;
 }

src/components/mapImage.js

@@ -5,8 +5,10 @@ const MapImage = ({mapImage}) => {
   return (
     <div>
     <h2>{mapImage.heading}</h2>
-    <figure><Img fluid={mapImage.mapImage.childImageSharp.fluid} alt="map" className="map-image"/></figure>
-    <p>{mapImage.description}</p>
+    <a href="/impact">
+      <figure><Img fluid={mapImage.mapImage.childImageSharp.fluid} alt="map" className="map-image"/></figure>
+      <p>{mapImage.description}</p>
+    </a>
     </div>
   )
 }

src/components/navbar.js

@@ -23,7 +23,7 @@ const Navbar = () => {
   const data = useStaticQuery(getLogo)
 
   return (
-    <nav className="navbar navbar-expand-sm navbar-light border-bottom border-light">
+    <nav className="navbar navbar-expand-sm navbar-light border-bottom">
       <div className="container">
         <Link to="/" className="navbar-brand">
           <Img fluid={data.logo.childImageSharp.fluid} className="navbar-brand-logo"/>

src/components/news/newsCard.js

@@ -8,16 +8,23 @@ const NewsCard = ({singleNews, cardStyle}) => {
 
 
   return (
-    <div className={`card ${cardStyle || "lever-card"}`}>
-      <div className="card-img-top lever-card-img">
-        <Link to={slug}>
-          <Img fluid={image.childImageSharp.fluid} />
-        </Link>
-      </div>
-      <div className="card-body">
-        <h5 className="card-title">{title}</h5>
-        <h5 className="card-text">{date}</h5>
-      </div>
+    <div className="blog-card-container">
+      <Link to={slug}>
+        <div className="card mb-3">
+          <div class="row no-gutters">
+            <div className="col-md-4">
+              <Img fluid={image.childImageSharp.fluid} />
+            </div>
+            <div class="col-md-8">
+              <div className="card-body">
+                <h5 className="card-title">{title}</h5>
+                <p className="card-text">Summary of the blog post goes here.</p>
+                <p className="published"><small class="text-muted">Published {date}</small></p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Link>
     </div>
   )
 }

src/components/news/newsList.js

@@ -3,7 +3,8 @@ import NewsCard from "./newsCard"
 
 const NewsList = ({news, cardStyle}) => {
   return (
-    <section className="card-deck lever-card-list">
+    <section className="lever-card-list">
+      <h2>News</h2>
     {
       news.map(({node}) => {
         return <NewsCard key={node.id} singleNews={node} cardStyle={cardStyle}/>

src/components/newsletter.js

@@ -3,9 +3,9 @@ import React from "react"
 const Newsletter = ({newsletter}) => {
   return (
     <div>
-      <h2>{newsletter.heading}</h2>
+      <h2 className="sr-only">{newsletter.heading}</h2>
       <p>{newsletter.description}</p>
-      <a href={newsletter.url}>{newsletter.buttonLabel}</a>
+      <a className="btn btn-primary" href={newsletter.url}>{newsletter.buttonLabel}</a>
     </div>
   )
 }

src/components/tagline.js

@@ -3,7 +3,7 @@ import React from "react"
 const Tagline = ({text}) => {
   return (
     <div className="tagline">
-      {text}
+      <p className="tag">{text}</p>
     </div>
   )
 }

src/content/books/frank-being-a-presence-for-students-teaching-as-a-lived-defense-of-liberal-education.md

@@ -7,7 +7,7 @@ authorLastname: Frank
 author: Jeff Frank
 cover: /assets/being-a-presence.jpg
 description: >-
-  How does a college professor, on a daily basis, help students feel the value of liberal education
+  How does a college professor help students feel the value of liberal education
   and get the most from that education?
 orderOnPage: 2
 readLink: 'https://doi.org/10.3998/mpub.11567473'

src/content/books/tanaka-history-without-chronology.md

----
-templateKey: book
-title: History without Chronology
-authorLastname: Tanaka
-author: Stephen Tanaka
-cover: /assets/9781643150048.jpg
-description: >-
-  A short, approachable book imploring scholars to embrace the richness of
-  non-modern societies.
-orderOnPage: 3
-readLink: 'https://doi.org/10.3998/mpub.11418981'
-buyLink: >-
-  https://cdcshoppingcart.uchicago.edu/Cart2/Cart.aspx?ISBN=9781643150031&PRESS=lever
----
-

src/content/home.md

 ---
 templateKey: home-page
 taglineSection:
-  text: 'Open Access, digitally native, liberal arts. Read our books!'
+  text: 'We are a digital-first Open Access publisher, making great books for the humanities and social sciences.'
 newsletterSection:
-  buttonLabel: Subscribe Now!
-  description: A quarterly newsletter
+  buttonLabel: Subscribe
+  description: Stay current with our quarterly newsletter
   heading: Keep up to date with Lever
   url: 'https://google.com'
 videoSection:
-  description: A promotional video for Lever Press
+  description: In this video, members of the Lever Press faculty editorial board talk about how the press' commitments to platinum open access, digitally native scholarship, and the mission and ethos of liberal arts colleges help scholars in the humanities and social sciences publish  long-form scholars in the humanities and social sciences.
   embed: >-
     <iframe width="560" height="315"
     src="https://www.youtube-nocookie.com/embed/e2vF-SG0-WU" frameborder="0"
     allow="accelerometer; autoplay; encrypted-media; gyroscope;
     picture-in-picture" allowfullscreen></iframe>
-  heading: Why authors choose Lever
+  heading: Why publish with Lever Press?
 mapSection:
   description: >-
-    See views or downloads of our published content that occurred the previous
-    day
-  heading: Supporting a Global Community
+    Learn about our impact with real-time mapping of views and downloads of our published content that occurred the previous
+    day across the world and other statistics about the usage of our books.
+  heading: Our impact and reach is global
   mapImage: /assets/screen-shot-2019-11-18-at-11.29.58-am.png
 ---
 

src/pages/404.js

@@ -5,9 +5,11 @@ import SEO from "../components/seo"
 
 const NotFoundPage = () => (
   <Layout>
-    <SEO title="404: Not found" />
-    <h1>NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+    <div className="container page-container">
+      <SEO title="404: Not found" />
+      <h1 className="mb-3">NOT FOUND</h1>
+      <p>You just hit a page that doesn&#39;t exist... the sadness.</p>
+    </div>
   </Layout>
 )
 

src/pages/events.js

@@ -8,7 +8,9 @@ const Events = ({data}) => {
 
   return (
     <Layout>
-      <EventList events={events} />
+      <div className="container page-container">
+        <EventList events={events} />
+      </div>
     </Layout>
   )
 }

src/pages/index.js

@@ -145,39 +145,65 @@ const IndexPage = ({data}) => {
   return (
     <Layout>
       <SEO title="Home" />
-        <section className="row books-container card-deck lever-card-list">
+        <section className="books-container container">
           <BookList books={books} />
         </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} />
+        <section class="tagline-newsletter-container">
+          <div class="container">
+            <div class="row">
+              <div className="tagline-container col-md-9">
+                <Tagline text={tagline.text} />
+              </div>
+              <div className="newsletter-container col-md-3">
+                <Newsletter newsletter={newsletter} />
+              </div>
+            </div>
           </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"/>
+        <section className="news-events-container container">
+          <div className="row">
+            <div className="news-container col-md-6">
+              <NewsList news={news} />
+            </div>
+            <div className="events-container col-md-6">
+              <EventList events={events} />
+            </div>
           </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
+        <section className="author-library-container">
+          <div class="container">
+            <div class="row">
+              <div className="author-container col">
+                <div className="row">
+                <div className="col-md-8">
+                    <p>Interested in publishing your next book with us?</p>
+                  </div>
+                  <div className="col-md-4">
+                    <a className="btn btn-lg btn-outline-secondary" href="/info-for#author">Learn more</a>
+                  </div>
+                </div>
+              </div>
+              <div className="library-container col">
+                <div className="row">
+                  <div className="col-md-8">
+                    <p>Join over 50 liberal arts colleges and their libraries who support our Open Access mission</p>
+                  </div>
+                  <div className="col-md-4">
+                    <a className="btn btn-lg btn-outline-secondary" href="/info-for#library">Join Us</a>
+                  </div>
+                </div>
+              </div>
+            </div>
           </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} />
+        <section className="video-impact-container container">
+          <div class="row">
+            <div className="video-container col">
+              <Video video={video} />
+            </div>
+            <div className="map-container col">
+              <MapImage mapImage={map} />
+            </div>
           </div>
         </section>
     </Layout>

src/pages/news.js

@@ -8,7 +8,9 @@ const News = ({data}) => {
 
   return (
     <Layout>
-      <NewsList news={news} />
+      <div className="container page-container">
+        <NewsList news={news} />
+      </div>
     </Layout>
   )
 }