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

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

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