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