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 cf6d309a authored by Jonathan McGlone's avatar Jonathan McGlone
Browse files

finish initial hi-fi wireframe for demo

parent c595adf3
......@@ -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>
)
}
......
......@@ -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 (
......
......@@ -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>
)
}
......
......@@ -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>
)
}
......
......@@ -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>
)
}
......
......@@ -8,7 +8,7 @@ const Layout = ({ children }) => {
return (
<div>
<Navbar />
<div className="container">
<div className="page-container">
{children}
</div>
<Footer />
......
......@@ -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;
}
......@@ -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>
)
}
......
......@@ -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"/>
......
......@@ -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>
)
}
......
......@@ -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}/>
......
......@@ -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>
)
}
......
......@@ -3,7 +3,7 @@ import React from "react"
const Tagline = ({text}) => {
return (
<div className="tagline">
{text}
<p className="tag">{text}</p>
</div>
)
}
......
......@@ -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'
......
---
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
---
---
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
---
......@@ -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>
)
......
......@@ -8,7 +8,9 @@ const Events = ({data}) => {
return (
<Layout>
<EventList events={events} />
<div className="container page-container">
<EventList events={events} />
</div>
</Layout>
)
}
......
......@@ -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>
......
......@@ -8,7 +8,9 @@ const News = ({data}) => {
return (
<Layout>
<NewsList news={news} />
<div className="container page-container">
<NewsList news={news} />
</div>
</Layout>
)
}
......