move layout to CSS grid

This commit is contained in:
Matthias Kretschmann 2018-10-17 01:24:49 +02:00
parent a2627eaa05
commit f1c3e42b75
Signed by: m
GPG Key ID: 606EEEF3C479A91F
15 changed files with 73 additions and 101 deletions

View File

@ -1,6 +1,17 @@
@import 'variables';
.screen {
flex: 1;
padding: $spacer;
margin-top: $spacer * $line-height;
> article {
display: grid;
grid-template-columns:
[full-start] minmax($spacer, 1fr)
[main-start] minmax(0, $screen-sm) [main-end]
minmax($spacer, 1fr) [full-end];
> * {
grid-column: main;
}
}
}

View File

@ -1,15 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import styles from './Content.module.scss'
const Content = props => (
<div className={styles.content} {...props}>
{props.children}
</div>
)
Content.propTypes = {
children: PropTypes.node
}
export default Content

View File

@ -1,4 +0,0 @@
.content {
max-width: 38rem;
margin: 0 auto;
}

View File

@ -1,9 +1,5 @@
@import 'variables';
.fullWidth {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
text-align: center;
grid-column: full !important;
}

View File

@ -1,7 +1,6 @@
@import 'variables';
.projectImage {
max-height: 100vh;
margin-left: auto;
margin-right: auto;
display: block;
@ -20,7 +19,6 @@
}
img {
max-height: 100vh;
display: block;
}
}

View File

@ -3,18 +3,15 @@
.projectLinks {
ul {
padding: 0;
display: flex;
flex-wrap: wrap;
margin-left: -($spacer / 2);
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: $spacer / 2;
}
li {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 calc(50% - #{$spacer / 2});
margin-left: $spacer / 2;
margin-bottom: $spacer / 2;
}
a {

View File

@ -4,7 +4,7 @@
// composes: fullWidth from '../atoms/FullWidth.module.scss';
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar,
@ -22,7 +22,7 @@
margin-right: $spacer * 2;
}
@media (min-width: 30rem) {
@media (min-width: $screen-xs) {
width: 40vw;
max-width: 500px;
margin-left: $spacer * 2;

View File

@ -3,9 +3,9 @@
.projectTechstack {
ul {
padding: 0;
display: flex;
flex-wrap: wrap;
margin-left: -($spacer / 2);
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: $spacer / 2;
}
li {
@ -18,9 +18,6 @@
border-radius: .25rem;
border: .05rem solid transparent;
color: $brand-grey-light;
margin-left: $spacer / 2;
margin-bottom: $spacer / 2;
flex: 0 0 calc(50% - #{$spacer / 2});
font-size: $font-size-small;
:global(.dark) & {

View File

@ -2,9 +2,8 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'gatsby'
import giphyAPI from 'giphy-js-sdk-core'
import Content from '../components/atoms/Content'
import Button from '../components/atoms/Button'
import './404.scss'
import styles from './404.module.scss'
// Famous last words:
// "It's just the 404 page so why not expose the dev API key"
@ -41,7 +40,7 @@ export default class NotFound extends Component {
render() {
return (
<Content className="content content--404">
<article className={styles.content}>
<h1>Shenanigans, page not found.</h1>
<p>
You might want to check the url, or{' '}
@ -56,7 +55,7 @@ export default class NotFound extends Component {
Show me another cat fail gif
</Button>
</div>
</Content>
</article>
)
}
}

View File

@ -2,29 +2,26 @@ import React from 'react'
import PropTypes from 'prop-types'
import { Link, graphql } from 'gatsby'
import ProjectImage from '../components/molecules/ProjectImage'
import FullWidth from '../components/atoms/FullWidth'
import styles from './index.module.scss'
const Home = ({ data }) => {
const projects = data.allProjectsYaml.edges
return (
<FullWidth>
<div className={styles.projects}>
{projects.map(({ node }) => {
const { slug, title, img } = node
<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>
)
})}
</div>
</FullWidth>
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>
)
}

View File

@ -1,13 +1,16 @@
@import 'variables';
.projects {
@media (min-width: 55rem) {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
display: grid;
grid-template-columns: 1fr;
grid-gap: $spacer * 6;
@media (min-width: $screen-md) {
grid-template-columns: 1fr 1fr;
grid-gap: $spacer * 3;
max-width: calc(#{$projectImageMaxWidth} + #{$spacer * 2});
margin: 0 auto;
padding: $spacer $spacer * 2;
padding: $spacer $spacer * 3;
}
}
@ -26,23 +29,11 @@
}
.project {
flex: 0 0 calc(50% - #{$spacer});
text-align: center;
margin-bottom: $spacer * 6;
position: relative;
@media (min-width: 55rem) {
margin-bottom: $spacer * 2;
}
&:last-child {
margin-bottom: 0;
}
a {
display: block;
position: relative;
margin: 0 auto;
&::after {
content: '';

View File

@ -67,3 +67,11 @@ $color-headings--dark: $brand-main-light;
/////////////////////////////////////
$spacer: ($font-size-base * $line-height);
// Responsive breakpoints
/////////////////////////////////////
$screen-xs: 30em;
$screen-sm: 40em;
$screen-md: 60em;
$screen-lg: 70em;

View File

@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import ReactMarkdown from 'react-markdown'
import { graphql } from 'gatsby'
import Content from '../components/atoms/Content'
import FullWidth from '../components/atoms/FullWidth'
import ProjectImage from '../components/molecules/ProjectImage'
import ProjectTechstack from '../components/molecules/ProjectTechstack'
@ -43,16 +42,16 @@ const Project = ({ data }) => {
<SEO project={project} />
<article className={styles.project}>
<Content>
<article>
<header>
<h1 className={styles.project__title}>{title}</h1>
<ReactMarkdown
source={descriptionWithLineBreaks}
className={styles.project__description}
/>
<ProjectImages projectImages={projectImages} title={title} />
<ProjectMeta links={links} techstack={techstack} />
</Content>
</header>
<ReactMarkdown
source={descriptionWithLineBreaks}
className={styles.project__description}
/>
<ProjectImages projectImages={projectImages} title={title} />
<ProjectMeta links={links} techstack={techstack} />
</article>
<ProjectNav slug={project.slug} />

View File

@ -4,7 +4,7 @@
.spacer {
margin-bottom: $spacer * 3;
@media (min-width: 30rem) {
@media (min-width: $screen-xs) {
margin-bottom: $spacer * 6;
}
}
@ -12,7 +12,7 @@
.project__title {
font-size: $font-size-h2;
@media (min-width: 30rem) {
@media (min-width: $screen-xs) {
font-size: $font-size-h1;
}
}
@ -23,16 +23,14 @@
}
.project__meta {
margin-top: $spacer * 5;
margin-bottom: $spacer * 5;
display: grid;
grid-template-columns: 1fr;
grid-gap: $spacer;
@media (min-width: 40rem) {
display: flex;
justify-content: space-between;
> div {
flex: 0 0 45%;
}
@media (min-width: $screen-sm) {
grid-template-columns: 1fr 1fr;
grid-gap: $spacer * 2;
}
}