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 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>
......
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