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