m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-02-01 20:39:45 +01:00
Code Releases Activity

new front page layout on bigger viewports

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-08-07 01:24:33 +02:00
parent a607223133
commit f4a7033ee2
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/index.jsx
View File

@ -11,19 +11,21 @@ const Home = ({ data, location }) => {
return ( return (
<Layout location={location}> <Layout location={location}>
<FullWidth className="projects"> <FullWidth>
{projects.map(({ node }) => { <div className={styles.projects}>
const { slug, title, img } = node {projects.map(({ node }) => {
const { slug, title, img } = node
return ( return (
<article className={styles.project} key={slug}> <article className={styles.project} key={slug}>
<Link to={slug}> <Link to={slug}>
<h1 className={styles.title}>{title}</h1> <h1 className={styles.title}>{title}</h1>
<ProjectImage fluid={img.childImageSharp.fluid} alt={title} /> <ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
</Link> </Link>
</article> </article>
) )
})} })}
</div>
</FullWidth> </FullWidth>
</Layout> </Layout>
) )
@ -45,7 +47,9 @@ export const IndexQuery = graphql`
slug slug
img { img {
childImageSharp { childImageSharp {
...ProjectImageFluid fluid(maxWidth: 990, quality: 85) {
...GatsbyImageSharpFluid_withWebp
}
} }
} }
} }

19
src/pages/index.module.scss
View File

@ -1,14 +1,21 @@
@import 'variables'; @import 'variables';
.projects {
@media (min-width: 55rem) {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: $projectImageMaxWidth;
margin: 0 auto;
}
}
.project { .project {
flex: 0 0 calc(50% - #{$spacer * 2});
text-align: center; text-align: center;
margin-bottom: $spacer * 4; margin-bottom: $spacer * 4;
position: relative; position: relative;
@media (min-width: 30rem) {
margin-bottom: $spacer * 8;
}
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -18,10 +25,6 @@
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
@media (min-width: $projectImageMaxWidth) {
max-width: $projectImageMaxWidth;
}
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;