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 f8176217 authored by Seth A Johnson's avatar Seth A Johnson
Browse files

slightly better default css

parent 2aa14b07
......@@ -12,14 +12,19 @@ const Book = ({book}) => {
} = book
return (
<article className="terrible-card-container">
<Img fluid={cover.childImageSharp.fluid} alt={`cover of ${title}`} />
<h3>{title}</h3>
<h4>{author}</h4>
<p>{description}</p>
<a href={readLink}>Read</a>
<a href={buyLink}>Buy</a>
</article>
<div className="card lever-card">
<Img fluid={cover.childImageSharp.fluid}
alt={`cover of ${title}`}
className="card-img-top lever-card-img"
/>
<div className="card-body">
<h5 className="card-title">{title}</h5>
<h5 className="card-title">{author}</h5>
{/* <p className="card-text">{description}</p> */}
<a className="card-link" href={readLink}>Read</a>
<a className="card-link" href={buyLink}>Buy</a>
</div>
</div>
)
}
......
......@@ -11,6 +11,7 @@ export const bookQuery = graphql`
) {
edges {
node {
id
frontmatter {
title
author
......@@ -36,19 +37,17 @@ const BookList = () => {
console.log(data)
return (
<section>
<h2>Books</h2>
<div className="row">
{
data.allMarkdownRemark.edges.map(({node}) => {
return (
<div className="col-3">
<BookCard key={node.id} book={node.frontmatter} />
</div>
)
})
}
</div>
<section className="card-deck lever-card-list">
{
data.allMarkdownRemark.edges.map(({node}) => {
console.log(node.id);
return (
<div>
<BookCard key={node.id} book={node.frontmatter} />
</div>
)
})
}
</section>
)
}
......
import React from 'react'
import {graphql, useStaticQuery} from 'gatsby'
import {graphql, useStaticQuery, Link} from 'gatsby'
export const titleQuery = graphql`
{
......@@ -15,12 +15,18 @@ export const titleQuery = graphql`
const Footer = () => {
const data = useStaticQuery(titleQuery)
const {title} = data.site.siteMetadata
return (
<footer className="container">
<h2>{title}</h2>
<footer className="navbar fixed-bottom bg-dark">
<ul className="lever-footer-links">
<li>
<Link to="/">
Lever Press
</Link>
</li>
</ul>
</footer>
)
}
export default Footer
\ No newline at end of file
export default Footer
.terrible-img-container {
/* I don't know what I'm doing help */
min-width: 100px;
min-height: 100px;
position: absolute;
}
/* .terrible-card-container {
width: 200px;
height: 500px;
padding: 10px;
border: black;
} */
.navbar-brand-logo {
width: 10rem;
height: 2.5rem;
vertical-align: middle;
}
.lever-card-list {
display: flex;
align-items: top;
margin: 1rem;
}
.lever-card {
min-width: 10rem;
max-width: 20rem;
// border: none;
}
.lever-card-img {
width: 225px;
margin: auto;
}
.lever-footer-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
@media (max-width: 575px) {
.lever-card-list {
flex-direction: column;
}
.lever-card {
max-width: 20rem;
}
}
......@@ -23,11 +23,9 @@ const Navbar = () => {
const data = useStaticQuery(getLogo)
return (
<nav className="navbar navbar-expand-sm bg-light navbar-light">
<nav className="navbar fixed-top navbar-expand-sm bg-light navbar-light">
<Link to="/" className="navbar-brand">
<span className="terrible-img-container">
<Img fluid={data.logo.childImageSharp.fluid} />
</span>
<Img fluid={data.logo.childImageSharp.fluid} className="navbar-brand-logo"/>
</Link>
<button className="navbar-toggler" type="button" onClick={toggleNav}>
<span className="navbar-toggler-icon" />
......
......@@ -7,13 +7,17 @@ const News = (props) => {
const slug = props.singleNews.fields.slug
return (
<article className="terrible-card-container">
<h4>{title}</h4>
<h6>{date}</h6>
<Link to={slug}>
<Img fluid={image.childImageSharp.fluid} />
</Link>
</article>
<div className="card lever-card">
<div className="card-img-top lever-card-img">
<Link to={slug}>
<Img fluid={image.childImageSharp.fluid} />
</Link>
</div>
<div className="card-body">
<h5 className="card-title">{title}</h5>
<h5 className="card-title">{date}</h5>
</div>
</div>
)
}
......
......@@ -3,7 +3,7 @@ import NewsCard from "./newsCard"
const NewsList = (props) => {
return (
<section>
<section className="card-deck lever-card-list">
{
props.news.map(({node}) => {
return <NewsCard key={node.id} singleNews={node} />
......
......@@ -8,7 +8,6 @@ import BookList from "../components/books/bookList"
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<Title title="Home" />
<BookList />
</Layout>
)
......
......@@ -22,6 +22,7 @@ export const query = graphql`
) {
edges {
node {
id
fields{
slug
}
......
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