Commit 962ae0a5 authored by Jonathan McGlone's avatar Jonathan McGlone
Browse files

changes to book layout, event layout, footer, and lists of blog posts

parent f29a63c1
......@@ -12,7 +12,7 @@ const Book = ({book}) => {
} = book
return (
<div className="card mb-3 lever-card">
<div className="card mb-3 book-card">
<div className="row no-gutters">
<div className="col-md-4">
<Img fluid={cover.childImageSharp.fluid}
......
......@@ -3,7 +3,7 @@ import Img from "gatsby-image"
const BookCover = ({book}) => {
return (
<div className="card mb-3 lever-card">
<div className="card mb-3 book-card">
<a href={book.readLink}>
<div className="row no-gutters">
<div className="col-md-12">
......
......@@ -6,7 +6,7 @@ const BookList = ({books}) => {
return (
<div>
<div className="row lever-card-list">
<div className="row book-card-list">
{
books.map(({node}) => {
if (node.frontmatter.orderOnPage === 1 || node.frontmatter.orderOnPage === 2) {
......@@ -19,7 +19,7 @@ const BookList = ({books}) => {
})
}
</div>
<div className="row lever-card-list">
<div className="row book-card-covers-only-list">
{
books.map(({node}) => {
if (node.frontmatter.orderOnPage > 2) {
......
import React from "react"
import Img from "gatsby-image"
import {Link} from "gatsby"
const EventCard = ({event, cardStyle}) => {
const {title, summary, date, image} = event.frontmatter
const {title, summary, date} = event.frontmatter
const slug = event.fields.slug
var showImage;
if (image) {
showImage = <Img fluid={image.childImageSharp.fluid} />
}
return (
<div className="event-card-container">
<Link to={slug}>
<li className="media my-4">
{showImage}
<li className="media my-4 event-card-container">
<Link to={slug}>
<div className="media-body">
<h5 className="mt-0 mb-1">{title}</h5>
<p>{summary}</p>
<small className="text-muted">Published {date}</small>
</div>
</Link>
</li>
</Link>
</div>
)
}
......
......@@ -3,7 +3,7 @@ import EventCard from "./eventCard"
const EventList = ({events, cardStyle}) => {
return (
<section className="lever-card-list">
<section className="event-card-list">
<h2>Events</h2>
<ul className="list-unstyled">
{
......
......@@ -18,7 +18,7 @@ const Footer = () => {
const year = now.getFullYear()
return (
<footer className="footer" role="navigation">
<footer className="footer">
<div className="container">
<div className="row">
<div className="col-md-6">
......@@ -30,7 +30,7 @@ const Footer = () => {
<a href="https://twitter.com/lever_press"><svg width="24px" height="24px" viewBox="0 0 24 24" className="social-link tw" aria-hidden="false"><title>Twitter</title><path d="M22,5.8a8.6,8.6,0,0,1-2.36.65,4.07,4.07,0,0,0,1.8-2.27,8.1,8.1,0,0,1-2.6,1A4.1,4.1,0,0,0,11.75,8a4.73,4.73,0,0,0,.09.93A11.6,11.6,0,0,1,3.39,4.62,4.2,4.2,0,0,0,2.83,6.7a4.09,4.09,0,0,0,1.82,3.4A4,4,0,0,1,2.8,9.6v0a4.11,4.11,0,0,0,3.29,4A4.2,4.2,0,0,1,5,13.81a4,4,0,0,1-.78-.07,4.14,4.14,0,0,0,3.83,2.85A8.22,8.22,0,0,1,3,18.34a6.37,6.37,0,0,1-1-.06,11.48,11.48,0,0,0,6.29,1.84A11.58,11.58,0,0,0,20,8.46c0-.18,0-.36,0-.53A8.31,8.31,0,0,0,22,5.8Z"></path></svg></a>
</p>
</div>
<div className="col-md-3">
<div className="col-md-2">
<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>
......@@ -38,7 +38,13 @@ const Footer = () => {
<li><a href="https://www.publishing.umich.edu" className="text-muted">Michigan Publishing</a></li>
</ul>
</div>
<div className="col-md-3">
<div className="col-md-2">
<h5>Peer Review</h5>
<ul className="list-unstyled text-small">
<li><a href="/peerreview" className="text-muted">Our Commitments and Guidelines</a></li>
</ul>
</div>
<div className="col-md-2">
<h5>Book Series</h5>
<ul className="list-unstyled text-small">
<li><a href="/series#series-one" className="text-muted">Series one</a></li>
......
......@@ -21,11 +21,13 @@
.books-container {
padding: 3rem 0;
.lever-card-list {
.book-card-list {
justify-content: space-evenly;
}
// card stuff
.lever-card {
// books
.book-card {
max-width: 540px;
.card-img {
......@@ -71,6 +73,21 @@
.post-image {
max-height: 500px;
overflow: hidden;
margin-bottom: 2em;
margin-top: 2em;
}
.summary {
font-size: 1em;
p {
margin-bottom: 0;
}
h4 {
font-size: .9em;
margin-top: .2em !important;
}
}
.blog-card-container {
......
......@@ -3,7 +3,7 @@ import NewsCard from "./newsCard"
const NewsList = ({news, cardStyle}) => {
return (
<section className="lever-card-list">
<section className="blog-card-list">
<h2>News</h2>
{
news.map(({node}) => {
......
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