Commit 40e3a3a5 authored by Jonathan McGlone's avatar Jonathan McGlone
Browse files

modify size of blog and event featured images

parent 203f7122
......@@ -67,6 +67,19 @@
}
}
// news and events
.post-image {
max-height: 500px;
overflow: hidden;
}
.blog-card-container {
.card-image {
max-height: 300px;
overflow: hidden;
}
}
// impact
.map {
height: 60%;
......
......@@ -7,7 +7,7 @@ const NewsCard = ({singleNews, cardStyle}) => {
const slug = singleNews.fields.slug
var showImage;
if (image) {
showImage = <div className="col-md-4">
showImage = <div className="col-md-4 card-image">
<Img fluid={image.childImageSharp.fluid} />
</div>
}
......
......@@ -9,7 +9,11 @@ const Events = ({data}) => {
return (
<Layout>
<div className="container page-container">
<EventList events={events} />
<div className="row justify-content-md-center">
<div className="col-md-10">
<EventList events={events} />
</div>
</div>
</div>
</Layout>
)
......
......@@ -9,7 +9,11 @@ const News = ({data}) => {
return (
<Layout>
<div className="container page-container">
<NewsList news={news} />
<div className="row justify-content-md-center">
<div className="col-md-10">
<NewsList news={news} />
</div>
</div>
</div>
</Layout>
)
......
......@@ -5,7 +5,7 @@ import Img from "gatsby-image"
const Event = ({data}) => {
const { html } = data.markdownRemark
const { title, date, image } = data.markdownRemark.frontmatter
const { title, summary, date, image } = data.markdownRemark.frontmatter
var showImage;
if (image) {
showImage = <Img fluid={image.childImageSharp.fluid} />
......@@ -13,11 +13,26 @@ const Event = ({data}) => {
return (
<Layout>
<div className="page-container container">
<h1 className="mb-3">{title}</h1>
{showImage}
<h4 className="mt-4">{date}</h4>
<div dangerouslySetInnerHTML={{ __html: html }} />
<div className="container page-container">
<div className="row justify-content-md-center">
<div className="col-md-10">
<h1 className="mb-3">{title}</h1>
<div className="summary">
<p>{summary}</p>
<h4 className="mt-4">{date}</h4>
</div>
</div>
</div>
<div className="row justify-content-md-center">
<div className="col-md-10 post-image">
{showImage}
</div>
</div>
<div className="row justify-content-md-center">
<div className="col-md-8">
<div dangerouslySetInnerHTML={{ __html: html }} />
</div>
</div>
</div>
</Layout>
)
......
......@@ -5,7 +5,7 @@ import Img from "gatsby-image"
const News = ({data}) => {
const { html } = data.markdownRemark
const { title, date, image } = data.markdownRemark.frontmatter
const { title, summary, date, image } = data.markdownRemark.frontmatter
var showImage;
if (image) {
showImage = <Img fluid={image.childImageSharp.fluid} />
......@@ -14,10 +14,25 @@ const News = ({data}) => {
return (
<Layout>
<div className="container page-container">
<h1 className="mb-3">{title}</h1>
{showImage}
<h4 className="mt-4">{date}</h4>
<div dangerouslySetInnerHTML={{ __html: html }} />
<div className="row justify-content-md-center">
<div className="col-md-10">
<h1 className="mb-3">{title}</h1>
<div className="summary">
<p>{summary}</p>
<h4 className="mt-4">{date}</h4>
</div>
</div>
</div>
<div className="row justify-content-md-center">
<div className="col-md-10 post-image">
{showImage}
</div>
</div>
<div className="row justify-content-md-center">
<div className="col-md-8">
<div dangerouslySetInnerHTML={{ __html: html }} />
</div>
</div>
</div>
</Layout>
)
......
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