m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-01-03 10:25:00 +01:00
Code Releases Activity

layout tweaks, more css modules

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-06-23 15:50:02 +02:00
parent 1166d86c89
commit 61553a094e
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 54 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Layout.jsx
View File

@ -7,6 +7,7 @@ import Head from './atoms/Head'
import Header from './organisms/Header' import Header from './organisms/Header'
import Footer from './organisms/Footer' import Footer from './organisms/Footer'
import { FadeIn } from './atoms/Animations' import { FadeIn } from './atoms/Animations'
import styles from './Layout.module.scss'
class TransitionHandler extends Component { class TransitionHandler extends Component {
shouldComponentUpdate() { shouldComponentUpdate() {
@ -15,11 +16,11 @@ class TransitionHandler extends Component {
render() { render() {
const { children } = this.props const { children } = this.props
return <div className="transition-container">{children}</div> return <div className={styles.transitionContainer}>{children}</div>
} }
} }
const Main = ({ children }) => <main className="screen">{children}</main> const Main = ({ children }) => <main className={styles.screen}>{children}</main>
const TemplateWrapper = ({ children, location }) => { const TemplateWrapper = ({ children, location }) => {
const isHomepage = location.pathname === '/' const isHomepage = location.pathname === '/'
@ -84,7 +85,11 @@ const TemplateWrapper = ({ children, location }) => {
<Head meta={meta} /> <Head meta={meta} />
<Header meta={meta} isHomepage={isHomepage} /> <Header meta={meta} isHomepage={isHomepage} />
<TransitionGroup component={Main} appear={true}> <TransitionGroup
className={styles.TransitionGroup}
component={Main}
appear={true}
>
<FadeIn <FadeIn
key={location.pathname} key={location.pathname}
timeout={{ enter: 200, exit: 150, appear: 200 }} timeout={{ enter: 200, exit: 150, appear: 200 }}

15
src/components/Layout.module.scss Normal file
View File

@ -0,0 +1,15 @@
@import 'variables';
.screen {
flex: 1;
padding: $spacer;
}
.transitionGroup {
position: relative;
}
.transitionContainer {
position: relative;
width: 100%;
}

12
src/components/atoms/ProjectImage.jsx
View File

@ -2,15 +2,15 @@ import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { graphql } from 'gatsby' import { graphql } from 'gatsby'
import Img from 'gatsby-image' import Img from 'gatsby-image'
import './ProjectImage.scss' import styles from './ProjectImage.module.scss'
const ProjectImage = ({ fluid, alt }) => ( const ProjectImage = props => (
<Img <Img
className="project__image" className={styles.project__image}
outerWrapperClassName="project__image-wrap" outerWrapperClassName={styles.project__imagewrap}
backgroundColor="#6b7f88" backgroundColor="#6b7f88"
fluid={fluid} fluid={props.fluid}
alt={alt} alt={props.alt}
/> />
) )

2
src/components/atoms/ProjectImage.scss → src/components/atoms/ProjectImage.module.scss
View File

@ -1,6 +1,6 @@
@import 'variables'; @import 'variables';
.project__image-wrap { .project__imagewrap {
max-height: 100vh; max-height: 100vh;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;

30
src/styles/base.scss
View File

@ -18,7 +18,6 @@ html {
} }
body { body {
background: $body-background-color;
font-family: $font-family-base; font-family: $font-family-base;
font-weight: $font-weight-base; font-weight: $font-weight-base;
font-size: $font-size-base; font-size: $font-size-base;
@ -28,6 +27,14 @@ body {
font-feature-settings: 'liga', 'kern'; font-feature-settings: 'liga', 'kern';
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
min-height: 100vh;
background-color: $body-background-color;
transition: background .6s $easing;
&.dark {
background-color: $body-background-color--dark;
color: $text-color--dark;
}
} }
p, p,
@ -110,25 +117,4 @@ svg {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
flex-direction: column; flex-direction: column;
background-color: $body-background-color;
transition: background .6s $easing;
.dark & {
background-color: $body-background-color--dark;
color: $text-color--dark;
}
}
.screen {
flex: 1;
padding: $spacer;
}
.transition-group {
position: relative;
}
.transition-container {
position: relative;
width: 100%;
} }

15
src/templates/Project.jsx
View File

@ -11,13 +11,14 @@ import ProjectTechstack from '../components/molecules/ProjectTechstack'
import ProjectLinks from '../components/molecules/ProjectLinks' import ProjectLinks from '../components/molecules/ProjectLinks'
import ProjectNav from '../components/molecules/ProjectNav' import ProjectNav from '../components/molecules/ProjectNav'
import SEO from '../components/atoms/SEO' import SEO from '../components/atoms/SEO'
import './Project.scss'
import styles from './Project.module.scss'
const ProjectMeta = props => { const ProjectMeta = props => {
const { links, techstack } = props const { links, techstack } = props
return ( return (
<footer className="project__meta"> <footer className={styles.project__meta}>
{!!links && <ProjectLinks links={links} />} {!!links && <ProjectLinks links={links} />}
{!!techstack && <ProjectTechstack techstack={techstack} />} {!!techstack && <ProjectTechstack techstack={techstack} />}
</footer> </footer>
@ -27,7 +28,9 @@ const ProjectMeta = props => {
const ProjectImages = props => ( const ProjectImages = props => (
<FullWidth> <FullWidth>
{props.projectImages.map(({ node }) => ( {props.projectImages.map(({ node }) => (
<ProjectImage key={node.id} fluid={node.fluid} alt={props.title} /> <div className={styles.spacer} key={node.id}>
<ProjectImage fluid={node.fluid} alt={props.title} />
</div>
))} ))}
</FullWidth> </FullWidth>
) )
@ -55,12 +58,12 @@ class Project extends Component {
<SEO project={project} meta={meta} /> <SEO project={project} meta={meta} />
<article className="project"> <article className={styles.project}>
<Content> <Content>
<h1 className="project__title">{title}</h1> <h1 className={styles.project__title}>{title}</h1>
<ReactMarkdown <ReactMarkdown
source={this.state.descriptionWithLineBreaks} source={this.state.descriptionWithLineBreaks}
className="project__description" className={styles.project__description}
/> />
<ProjectImages projectImages={projectImages} title={title} /> <ProjectImages projectImages={projectImages} title={title} />
<ProjectMeta links={links} techstack={techstack} /> <ProjectMeta links={links} techstack={techstack} />

13
src/templates/Project.scss → src/templates/Project.module.scss
View File

@ -1,12 +1,13 @@
@import 'variables'; @import 'variables';
@import '../components/atoms/ProjectImage.module';
.project { // .project__imagewrap {
.project__image-wrap { .spacer {
margin-bottom: $spacer * 3; //composes: project__imagewrap from '../components/atoms/ProjectImage.module';
margin-bottom: $spacer * 3;
@media (min-width: 30rem) { @media (min-width: 30rem) {
margin-bottom: $spacer * 6; margin-bottom: $spacer * 6;
}
} }
} }