Commit e487fc0f authored by Jonathan McGlone's avatar Jonathan McGlone
Browse files

modify posts, apply headings correctly, adjust theme styles

parent 27be08f9
......@@ -22,8 +22,8 @@ const Book = ({book}) => {
</div>
<div className="col-md-8">
<div className="card-body">
<h5 className="card-title">{title}</h5>
<h6 className="card-subtitle text-muted">{author}</h6>
<h3 className="card-title">{title}</h3>
<p className="card-subtitle text-muted h6">{author}</p>
<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>
......
......@@ -6,6 +6,7 @@ const BookList = ({books}) => {
return (
<div>
<h2 className="sr-only">Recent Books</h2>
<div className="row book-card-list">
{
books.map(({node}) => {
......
......@@ -24,7 +24,7 @@ const Navbar = () => {
<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/LeverLogo.svg" alt="" height="70" width="auto" className="navbar-brand-logo"/> Lever Press
<img src="/assets/LeverLogo.svg" alt="" height="70" width="auto" className="navbar-brand-logo"/> <h1>Lever Press</h1>
</a>
<button className="navbar-toggler" type="button" onClick={toggleNav}>
<span className="navbar-toggler-icon" />
......@@ -37,37 +37,37 @@ const Navbar = () => {
>
<ul className="navbar-nav float-right">
<li className="nav-item">
<Link to="/about" className="nav-link">
<Link to="/about" className="nav-link text-dark">
About
</Link>
</li>
<li>
<a href="https://www.fulcrum.org/leverpress" className="nav-link">
<a href="https://www.fulcrum.org/leverpress" className="nav-link text-dark">
Catalog
</a>
</li>
<li>
<Link to="/authors" className="nav-link">
<Link to="/authors" className="nav-link text-dark">
Publish With Us
</Link>
</li>
<li>
<Link to="/join" className="nav-link">
<Link to="/join" className="nav-link text-dark">
Join Us
</Link>
</li>
<li>
<Link to="/impact" className="nav-link">
<Link to="/impact" className="nav-link text-dark">
Impact
</Link>
</li>
<li>
<Link to="/news" className="nav-link">
<Link to="/news" className="nav-link text-dark">
News
</Link>
</li>
<li>
<Link to="/events" className="nav-link">
<Link to="/events" className="nav-link text-dark">
Events
</Link>
</li>
......
......@@ -38,6 +38,16 @@ h5 {
font-weight: 700;
}
h2 {
margin-top: 2rem;
}
h3,
h4,
h5 {
margin-top: 1.5rem;
}
// colors
$lever-brand-color: #003352;
$lever-accent-color: #78B3E0;
......@@ -62,6 +72,13 @@ p {
min-height: 6rem;
.navbar-brand h1 {
font-size: 1.6rem;
margin: initial;
display: inline;
font-weight: 400;
}
.navbar-brand-logo {
vertical-align: middle;
}
......@@ -97,23 +114,31 @@ p {
}
// books
// home - books
.book-card {
max-width: 540px;
h3 {
font-size: 1.25rem;
margin-top: 0;
}
.card-img {
border-radius: 0;
max-height: 300px;
}
.card-text {
font-size: .9rem;
}
.cover-only-img {
min-width: 200px;
}
}
}
// home - tagline and newsletter button
.tagline-newsletter-container {
background-color: $lever-brand-color;
padding: 4rem 0;
......@@ -125,6 +150,7 @@ p {
}
}
// home - for authors/for libraries, impact report
.author-library-container {
padding: 2.5rem 0;
border-bottom: 1px solid rgba(0,0,0,.125);
......@@ -133,6 +159,7 @@ p {
.video-impact-container {
border-bottom: 1px solid rgba(0,0,0,.125);
background-color: #f8f9fa;
}
.news-events-container, .video-impact-container {
......@@ -142,7 +169,7 @@ p {
}
}
// news and events
// news and events on homepage and individual pages
.post-image {
max-height: 500px;
overflow: hidden;
......@@ -150,11 +177,19 @@ p {
margin-top: 2em;
}
.news {
p {
line-height: 1.7;
}
}
.summary {
font-size: 1em;
p {
font-size: 1.3rem;
margin-bottom: 0;
@include scala-sans;
line-height: 1.5;
}
h4 {
......@@ -164,6 +199,15 @@ p {
}
.blog-card-container {
a:hover {
text-decoration: none;
}
.card:hover {
border: 1px solid $lever-brand-color;
}
.card-image {
max-height: 300px;
overflow: hidden;
......@@ -175,6 +219,14 @@ p {
height: 60%;
}
.map-container a:hover {
text-decoration: none;
img {
filter: grayscale(80%);
filter: contrast(50%);
}
}
// footer
.footer {
background-color: $lever-brand-color;
......
......@@ -20,8 +20,8 @@ const News = ({data}) => {
<div className="col-md-10">
<h1 className="mb-3">{title}</h1>
<div className="summary">
<p>{summary}</p>
<h4 className="mt-4">{date}</h4>
<p className="lead">{summary}</p>
</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