m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-31 09:07:38 +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 Footer from './organisms/Footer'
import { FadeIn } from './atoms/Animations'
import styles from './Layout.module.scss'
class TransitionHandler extends Component {
shouldComponentUpdate() {
@ -15,11 +16,11 @@ class TransitionHandler extends Component {
render() {
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 isHomepage = location.pathname === '/'
@ -84,7 +85,11 @@ const TemplateWrapper = ({ children, location }) => {
<Head meta={meta} />
<Header meta={meta} isHomepage={isHomepage} />
<TransitionGroup component={Main} appear={true}>
<TransitionGroup
className={styles.TransitionGroup}
component={Main}
appear={true}
>
<FadeIn
key={location.pathname}
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 { graphql } from 'gatsby'
import Img from 'gatsby-image'
import './ProjectImage.scss'
import styles from './ProjectImage.module.scss'
const ProjectImage = ({ fluid, alt }) => (
const ProjectImage = props => (
<Img
className="project__image"
outerWrapperClassName="project__image-wrap"
className={styles.project__image}
outerWrapperClassName={styles.project__imagewrap}
backgroundColor="#6b7f88"
fluid={fluid}
alt={alt}
fluid={props.fluid}
alt={props.alt}
/>
)

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

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

30
src/styles/base.scss
View File

@ -18,7 +18,6 @@ html {
}
body {
background: $body-background-color;
font-family: $font-family-base;
font-weight: $font-weight-base;
font-size: $font-size-base;
@ -28,6 +27,14 @@ body {
font-feature-settings: 'liga', 'kern';
-webkit-font-smoothing: antialiased;
-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,
@ -110,25 +117,4 @@ svg {
display: flex;
min-height: 100vh;
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 ProjectNav from '../components/molecules/ProjectNav'
import SEO from '../components/atoms/SEO'
import './Project.scss'
import styles from './Project.module.scss'
const ProjectMeta = props => {
const { links, techstack } = props
return (
<footer className="project__meta">
<footer className={styles.project__meta}>
{!!links && <ProjectLinks links={links} />}
{!!techstack && <ProjectTechstack techstack={techstack} />}
</footer>
@ -27,7 +28,9 @@ const ProjectMeta = props => {
const ProjectImages = props => (
<FullWidth>
{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>
)
@ -55,12 +58,12 @@ class Project extends Component {
<SEO project={project} meta={meta} />
<article className="project">
<article className={styles.project}>
<Content>
<h1 className="project__title">{title}</h1>
<h1 className={styles.project__title}>{title}</h1>
<ReactMarkdown
source={this.state.descriptionWithLineBreaks}
className="project__description"
className={styles.project__description}
/>
<ProjectImages projectImages={projectImages} title={title} />
<ProjectMeta links={links} techstack={techstack} />

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

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