Commit 2e06b317 authored by Jonathan McGlone's avatar Jonathan McGlone
Browse files

add typography, colors

parent e7713648
......@@ -22,7 +22,7 @@ const BookList = ({books}) => {
<div className="row book-card-covers-only-list">
{
books.map(({node}) => {
if (node.frontmatter.orderOnPage > 2) {
if (node.frontmatter.orderOnPage > 5) {
return (
<BookCover key={node.id} book={node.frontmatter} />
)
......
......@@ -18,13 +18,13 @@ const Footer = () => {
const year = now.getFullYear()
return (
<footer className="footer">
<footer className="footer text-white">
<div className="container">
<div className="row">
<div className="col-md-6">
<a href="/" className="text-muted mb-2"><img src="/assets/LeverLogo-PMS292.svg" alt="" height="100" width="auto" className="block" /> Lever Press</a>
<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>
<a href="/" className="text-light mb-2 scala-sans"><img src="/assets/LeverLogo-PMS292.svg" alt="" height="100" width="auto" className="block" /> Lever Press</a>
<small className="text-light d-block">Amherst, MA</small>
<small className="d-block"><a className="text-light" href="mailto:info@leverpress.org">info@leverpress.org</a></small>
<p className="social">
<a href="https://www.facebook.com/LeverPress/"><svg width="24px" height="24px" viewBox="0 0 24 24" className="social-link fb" aria-hidden="false"><title>Facebook</title><path d="M20.9,2H3.1A1.1,1.1,0,0,0,2,3.1V20.9A1.1,1.1,0,0,0,3.1,22h9.58V14.25h-2.6v-3h2.6V9a3.64,3.64,0,0,1,3.88-4,20.26,20.26,0,0,1,2.33.12v2.7h-1.6c-1.25,0-1.49.59-1.49,1.47v1.92h3l-.39,3H15.8V22h5.1A1.1,1.1,0,0,0,22,20.9V3.1A1.1,1.1,0,0,0,20.9,2Z"></path></svg></a>
<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>
......@@ -33,29 +33,29 @@ const Footer = () => {
<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>
<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>
<li><a href="https://acpress.amherst.edu/" className="text-light">Amerhest College Press</a></li>
<li><a href="http://www.oberlingroup.org/" className="text-light">Oberlin Group</a></li>
<li><a href="https://www.publishing.umich.edu" className="text-light">Michigan Publishing</a></li>
</ul>
</div>
<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>
<li><a href="/peerreview" className="text-light">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>
<li><a href="/series#series-two" className="text-muted">Series Two</a></li>
<li><a href="/series#series-three" className="text-muted">Series Three</a></li>
<li><a href="/series#series-one" className="text-light">Series one</a></li>
<li><a href="/series#series-two" className="text-light">Series Two</a></li>
<li><a href="/series#series-three" className="text-light">Series Three</a></li>
</ul>
</div>
</div>
<div className="row">
<div className="col-md-12">
<small className="text-muted d-block mb-3">© {year} <a aria-label="Creative Commons Attribution Non-Commercial No Derivatives 4.0 International license" rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
<small className="text-light d-block mb-3">© {year} <a aria-label="Creative Commons Attribution Non-Commercial No Derivatives 4.0 International license" rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
<img alt="Creative Commons Attribution Non-Commercial No Derivatives 4.0 International license" src="https://i.creativecommons.org/l/by-nc-nd/4.0/80x15.png" />
</a></small>
</div>
......
......@@ -2,7 +2,7 @@ import React from "react"
const Newsletter = ({newsletter}) => {
return (
<div>
<div className="text-light">
<h2 className="sr-only">{newsletter.heading}</h2>
<p>{newsletter.description}</p>
<a className="btn btn-primary" href={newsletter.url}>{newsletter.buttonLabel}</a>
......
// colors
// colors and theming
$theme-colors: (
"primary": #003352,
"danger": #ff4136
"primary": #40658f,
"secondary": #003352,
"muted": #EAEAEA
);
* {
box-sizing: border-box;
@import "../bootstrap/scss/bootstrap";
// typography
@mixin meta-serif {
font-family: "ff-meta-serif-web-pro", Georgia, "Times New Roman", serif;
}
.meta-serif {
@include meta-serif;
}
@mixin scala-sans {
font-family: "ff-scala-sans-pro", Helvetica, Arial, sans-serif;
}
.scala-sans {
@include scala-sans;
}
body {
@include meta-serif;
}
h1,
h2,
h3,
h4,
h5 {
@include scala-sans;
font-weight: 700;
}
// colors
$lever-brand-color: #003352;
$lever-accent-color: #78B3E0;
$lever-black-80: #342f2e;
// links
p {
a {
text-decoration: underline;
}
}
// buttons
.btn {
@include scala-sans;
}
// navigation
.navbar {
@include scala-sans;
min-height: 6rem;
.navbar-brand-logo {
......@@ -22,6 +73,17 @@ $theme-colors: (
padding: 5rem 0;
}
// cards
.card {
border-radius: 0;
picture,
source {
line-height: 0;
};
}
// home
.books-container {
......@@ -53,12 +115,13 @@ $theme-colors: (
.tagline-newsletter-container {
background-color: $lever-brand-color;
padding: 4rem 0;
border-top: 1px solid rgba(0,0,0,.125);
.tagline {
font-weight: bold;
font-size: 2rem;
font-size: 1.6rem;
}
}
......@@ -114,6 +177,7 @@ $theme-colors: (
// footer
.footer {
background-color: $lever-brand-color;
border-top: 1px solid rgba(0,0,0,.125);
padding: 3rem 0;
......@@ -128,11 +192,11 @@ $theme-colors: (
svg {
display: inline-block;
vertical-align: middle;
fill: grey;
fill: $lever-accent-color;
}
}
}
}
@import "../bootstrap/scss/bootstrap";
......@@ -3,7 +3,7 @@ import React from "react"
const Tagline = ({text}) => {
return (
<div className="tagline">
<p className="tag">{text}</p>
<p className="tag text-light">{text}</p>
</div>
)
}
......
......@@ -13,6 +13,7 @@ export default function HTML(props) {
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<script async src={withPrefix('jquery-3.4.1.min.js')} type="text/javascript" />
<link rel="stylesheet" href="https://use.typekit.net/bml2ueg.css"></link>
{props.headComponents}
</head>
<body {...props.bodyAttributes}>
......
......@@ -184,7 +184,7 @@ const IndexPage = ({data}) => {
<p>Interested in publishing your next book with us?</p>
</div>
<div className="col-md-6">
<a className="btn btn-lg btn-outline-secondary" href="/authors">Publish With Us</a>
<a className="btn btn-lg btn-secondary" href="/authors">Publish With Us</a>
</div>
</div>
</div>
......@@ -194,7 +194,7 @@ const IndexPage = ({data}) => {
<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="/join">Join Us</a>
<a className="btn btn-lg btn-secondary" href="/join">Join Us</a>
</div>
</div>
</div>
......
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