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

remove old lever files; add custom styles and assets for heb

parent b02b73ed
module.exports = {
siteMetadata: {
title: `Humanities E-Book`,
description: `Humanities E-Book`,
author: `Humanities E-Book`,
title: `ACLS Humanities EBook`,
description: `ACLS Humanites Ebook (ACLS HEB) is a digital collection of over 5,700 foundational books in the humanities and social sciences, presented in collaboration with over 120 publishers and Michigan Publishing.`,
author: `ACLS Humanities EBook`,
},
plugins: [
{
......@@ -66,7 +66,7 @@ module.exports = {
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/HEB-REDBG@4x.png`, // This path is relative to the root of the site.
icon: `src/images/HEB-REDBLACK.svg`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
......
......@@ -9,7 +9,7 @@ const CallToAction = ({callToAction}) => {
<p>{callToAction.description}</p>
</div>
<div className="col-md-6 text-center">
<a className="btn btn-secondary" href={callToAction.buttonUrl}>{callToAction.buttonLabel}</a>
<a className="btn btn-primary" href={callToAction.buttonUrl}>{callToAction.buttonLabel}</a>
</div>
</div>
</div>
......
......@@ -10,21 +10,18 @@ const Card = ({cardImage, card}) => {
} = card
return (
<div className="card mb-3 book-card">
<div className="row no-gutters">
<div className="col-md-4">
<img src={cardImage} alt={`${title}`} className="card-img" />
<div className="card col-md-5 mb-3">
<img src={cardImage} alt={`${title}`} className="card-img" />
<div className="card-body row">
<div className="col-xs-8">
<h3 className="card-title">{title}</h3>
<p className="card-text">{description}</p>
</div>
<div className="col-md-8">
<div className="card-body">
<h3 className="card-title">{title}</h3>
<p className="card-text">{description}</p>
<a className="card-link btn btn-secondary btn-lg" role="button" href={buttonUrl}>{buttonLabel}</a>
</div>
<div className="col-xs-4">
<a className="card-link btn btn-secondary" role="button" href={buttonUrl}>{buttonLabel}</a>
</div>
</div>
</div>
)
}
......
......@@ -6,7 +6,7 @@ const CardList = ({cards}) => {
return (
<div>
<h2 className="sr-only">Recent Cards</h2>
<div className="row book-card-list">
<div className="row card-list">
{
cards.map(({node}) => {
return (
......
......@@ -41,7 +41,7 @@ const Footer = () => {
<div className="container">
<div className="row">
<div className="col-md-6">
<a href="/" className="text-light mb-2 scala-sans"><img src="/assets/heb-red-4x.png" alt="ACLS Humanities Ebook" height="100" width="auto" className="block" /></a>
<a href="/" className="text-light mb-2 scala-sans"><img src="/assets/HEB-RED.svg" alt="ACLS Humanities Ebook" height="100" width="auto" className="block" /></a>
<small className="text-light d-block">New York, NY</small>
<small className="d-block"><a className="text-light" href="/contact">Contact Us</a></small>
<p className="social">
......
import React, {useState} from "react"
import React from "react"
import {Link} from "gatsby"
// import Img from 'gatsby-image'
......@@ -15,61 +15,67 @@ import {Link} from "gatsby"
// `
const Navbar = () => {
const [isOpen, setNav] = (useState(false))
const toggleNav = () => {
setNav(isOpen => !isOpen)
}
return (
<nav className="navbar fixed-top navbar-expand-lg navbar-light bg-light border-bottom">
<div className="container">
<a href="/" className="navbar-brand">
<img src="/assets/heb-red-4x.png" alt="" height="70" width="auto" className="navbar-brand-logo"/> <h1>ACLS Humanities EBook</h1>
</a>
<button className="navbar-toggler" type="button" onClick={toggleNav}>
<span className="navbar-toggler-icon" />
</button>
<div id="navbar" className={
isOpen
? "collapse navbar-collapse flex-row show"
: "collapse navbar-collapse flex-row-reverse"
}
>
<ul className="navbar-nav float-right">
<li>
<Link to="/collection" className="nav-link text-dark">
The Collection
</Link>
</li>
<li className="nav-item">
<Link to="/about" className="nav-link text-dark">
About
</Link>
</li>
<li>
<Link to="/librarians" className="nav-link text-dark">
For Librarians
</Link>
</li>
<li>
<Link to="/publishers" className="nav-link text-dark">
For Publishers
</Link>
</li>
<li>
<Link to="/societies" className="nav-link text-dark">
For Societies
</Link>
</li>
<li>
<Link to="/impact" className="nav-link text-dark">
Impact
</Link>
</li>
</ul>
<div className="header-nav-container">
<header>
<div className="container py-3">
<div className="row flex-nowrap justify-content-end">
<div className="col-8">
<a href="/" className="navbar-brand">
<img src="/assets/HEB-REDBLACK_NOFILL_CROP.svg" alt="" height="70" width="auto" className="navbar-brand-logo"/> <h1>ACLS<br/> Humanities EBook</h1>
</a>
</div>
<div className="col-4 pt-3">
<form className="search-form navbar-left navbar-form" action="https://fulcrum.org/heb?locale=en" acceptCharset="UTF-8" method="get">
<fieldset>
<div className="input-group">
<label className="sr-only" htmlFor="catalog_search">Search and discover books</label>
<input type="search" name="q" id="catalog_search" className="q search-query form-control" placeholder="Search and discover books" tabIndex="0"/>
<div className="input-group-btn">
<button type="submit" className="search-submit" id="keyword-search-submit" tabIndex="0">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
</button>
</div>
</div>
</fieldset>
</form>
<div className="nav-browse mt-1">
<a className="pr-4" href="https://fulcrum.org/heb/">Browse Books</a>
<a href="/help">Help</a>
</div>
</div>
</div>
</div>
</header>
<div className="nav-scroller">
<div className="container">
<nav className="nav d-flex justify-content-between">
<Link to="/collection" className="nav-link text-dark">
The Collection
</Link>
<Link to="/about" className="nav-link text-dark">
About
</Link>
<Link to="/librarians" className="nav-link text-dark">
For Librarians
</Link>
<Link to="/publishers" className="nav-link text-dark">
For Publishers
</Link>
<Link to="/societies" className="nav-link text-dark">
For Societies
</Link>
<Link to="/impact" className="nav-link text-dark">
Impact
</Link>
</nav>
</div>
</div>
</nav>
</div>
)
}
......
// colors and theming
$theme-colors: (
"primary": #40658f,
"secondary": #003352,
"muted": #EAEAEA
"primary": #333333,
"secondary": #91A3B0,
"muted": #E9EDF0
);
@import "../bootstrap/scss/bootstrap";
@import url("https://use.typekit.net/rqe4rki.css");
// colors
$heb-brand-color: #333333;
$heb-accent-color: #91A3B0;
$heb-accent-color-dark: #65778B;
$heb-red: #9E172E;
// typography
@mixin meta-serif {
font-family: "ff-meta-serif-web-pro", Georgia, "Times New Roman", serif;
@mixin proxima-nova {
font-family: proxima-nova, Arial, Helvetica, sans-serif;
}
.meta-serif {
@include meta-serif;
.proxima-nova {
@include proxima-nova;
}
@mixin scala-sans {
font-family: "ff-scala-sans-pro", Helvetica, Arial, sans-serif;
@mixin freight-text {
font-family: freight-text-pro, Georgia, 'Times New Roman', Times, serif;
}
.scala-sans {
@include scala-sans;
.freight-text {
@include freight-text;
}
body {
@include meta-serif;
@include freight-text;
}
h1,
......@@ -34,8 +41,9 @@ h2,
h3,
h4,
h5 {
@include scala-sans;
@include proxima-nova;
font-weight: 700;
color:$heb-brand-color;
}
h2 {
......@@ -48,10 +56,7 @@ h5 {
margin-top: 1.5rem;
}
// colors
$lever-brand-color: #003352;
$lever-accent-color: #78B3E0;
$lever-black-80: #342f2e;
// links
p {
......@@ -62,62 +67,114 @@ p {
// buttons
.btn {
@include scala-sans;
@include proxima-nova;
font-weight: 600;
}
// header and navigation
.nav,
header {
@include proxima-nova;
}
// navigation
.navbar {
@include scala-sans;
min-height: 6rem;
.navbar-brand h1 {
font-size: 1.6rem;
margin: initial;
display: inline;
font-weight: 400;
header {
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
input.search-query {
background-color: #F3F3F3;
border-right: none;
}
.navbar-brand-logo {
vertical-align: middle;
button.search-submit {
border-top: rgb(206, 212, 218) 1px solid;
border-right: rgb(206, 212, 218) 1px solid;
border-bottom: rgb(206, 212, 218) 1px solid;
border-left: none;
height: 100%;
padding: 0;
}
.nav-browse {
display: flex;
justify-content: flex-end;
font-size: 14px;
a {
text-transform: uppercase;
font-weight: 600;
color: #707070;
}
a:hover,
a:active {
text-decoration: underline;
}
}
}
// page
.page-container {
padding-top: 5rem;
padding-bottom: 5rem;
}
.nav-scroller {
position: relative;
z-index: 2;
overflow-y: hidden;
border-bottom: 2px solid $heb-red;
.nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
a {
text-transform: uppercase;
font-weight: 600;
}
a:hover,
a:active {
text-decoration: underline;
}
// cards
}
}
.card {
border-radius: 0;
.navbar-brand-logo {
padding-right: 1rem;
}
picture,
source {
line-height: 0;
};
.navbar-brand h1 {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
display: inline-block;
margin: 0;
margin-bottom: -8px;
vertical-align: bottom;
font-size: 26px;
}
// cards
// home
.books-container {
.cards-container {
padding: 3rem 0;
.book-card-list {
.card-list {
justify-content: space-evenly;
}
.book-card-covers-only-list {
}
// home - books
.book-card {
max-width: 540px;
.card {
border-radius: 0;
padding-right: 0;
padding-left: 0;
picture,
source {
line-height: 0;
};
.card-body {
justify-content: space-around;
}
h3 {
font-size: 1.25rem;
......@@ -139,168 +196,34 @@ p {
}
}
// home - tagline and newsletter button
.tagline-catalog-container {
background-color: $lever-brand-color;
// home - tagline and cta button
.tagline-container {
background-color: $heb-brand-color;
padding: 4rem 0;
border-top: 1px solid rgba(0,0,0,.125);
.row {
justify-content: space-between;
}
.tagline {
font-weight: bold;
font-size: 1.6rem;
margin-left: 1.5em;
}
}
// home - catalog
.catalog-wrapper {
display: flex;
flex-direction: column;
text-align: center;
figure {
display: flex;
justify-content: center;
}
}
.catalog-image {
width: 95px;
}
// home - for authors/for libraries, impact report
.author-library-container {
// call to action buttons
.cta-container {
padding: 1.5rem 0;
border-bottom: 1px solid rgba(0,0,0,.125);
border-top: 1px solid rgba(0,0,0,.125);
background-color: $heb-accent-color;
.author-container, .newsletter-container, .library-container {
.cta-1-container, .cta-2-container, .cta-3-container {
margin: 15px 0;
}
}
.video-impact-container {
border-bottom: 1px solid rgba(0,0,0,.125);
background-color: #f8f9fa;
}
.news-events-container, .video-impact-container {
padding-top: 3rem;
padding-bottom: 3rem;
h2 {
margin-bottom: 1rem;
}
}
// video
.video-embed {
margin-bottom: 1rem;
}
// news and events on homepage and individual pages
.post-image {
max-height: 500px;
overflow: hidden;
margin-bottom: 2em;
margin-top: 2em;
}
.news {
p {
line-height: 1.7;
}
}
.summary {
p {
font-size: 1.3rem;
margin-bottom: 0;
@include scala-sans;
line-height: 1.5;
}
h4 {
font-size: .9em;
margin-top: .2em !important;
}
}
.blog-card-container {
a:hover {
text-decoration: none;
}
.card:hover {
border: 1px solid $lever-brand-color;
}
.card-image {
max-height: 300px;
overflow: hidden;
}
}
// join
.join-us {
padding-top: 0;
img {
margin-bottom: 2rem;
}
}
.join-us h2 {
margin-top: 1rem;
}
.jumbotron {
background-color: $lever-brand-color;
margin-bottom: 4rem;
}
.featurette-divider {
margin-top: 4rem;
margin-bottom: 4rem;
}
.join-jumbo {
h1, p {
color: #f8f9fa;
}
p.join-tag {
color: $lever-accent-color;
font-size: 1.5rem;
margin-bottom: 0;
}
}
.intro {
text-transform: uppercase;
font-size: 1.4rem;
}
thead {
background-color: $lever-brand-color;
color: #f8f9fa;
}
.join-h3 {
text-transform: uppercase;
font-size: 1.4rem;
}
ol.join {
font-size: 1.25rem;
}
.cta-bottom {