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