mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-23 01:29:41 +01:00
project meta refactor
This commit is contained in:
parent
8e0cdd1647
commit
2352347998
@ -21,14 +21,5 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: $font-size-h3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-top: $spacer / 3;
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-base;
|
||||
color: $brand-grey-light;
|
||||
}
|
||||
composes: metaTitle from '../../templates/Project.module.scss';
|
||||
}
|
||||
|
@ -2,7 +2,6 @@ import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Link, graphql, StaticQuery } from 'gatsby'
|
||||
import Img from 'gatsby-image'
|
||||
import FullWidth from '../atoms/FullWidth'
|
||||
import styles from './ProjectNav.module.scss'
|
||||
|
||||
const query = graphql`
|
||||
@ -73,7 +72,6 @@ export default class ProjectNav extends Component {
|
||||
const projects = data.allProjectsYaml.edges
|
||||
|
||||
return (
|
||||
<FullWidth>
|
||||
<nav
|
||||
className={styles.projectNav}
|
||||
ref={node => (this.scrollContainer = node)}
|
||||
@ -92,7 +90,6 @@ export default class ProjectNav extends Component {
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
</FullWidth>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
|
@ -1,7 +1,6 @@
|
||||
@import 'variables';
|
||||
|
||||
.projectNav {
|
||||
// composes: fullWidth from '../atoms/FullWidth.module.scss';
|
||||
white-space: nowrap;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
|
@ -28,14 +28,5 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: $font-size-h3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-top: $spacer / 3;
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-base;
|
||||
color: $brand-grey-light;
|
||||
}
|
||||
composes: metaTitle from '../../templates/Project.module.scss';
|
||||
}
|
||||
|
@ -9,11 +9,10 @@ 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 styles from './Project.module.scss'
|
||||
|
||||
const ProjectMeta = ({ links, techstack }) => (
|
||||
<footer className={styles.project__meta}>
|
||||
<footer className={styles.meta}>
|
||||
{!!links && <ProjectLinks links={links} />}
|
||||
{!!techstack && <ProjectTechstack techstack={techstack} />}
|
||||
</footer>
|
||||
@ -22,7 +21,7 @@ const ProjectMeta = ({ links, techstack }) => (
|
||||
const ProjectImages = ({ projectImages, title }) => (
|
||||
<FullWidth>
|
||||
{projectImages.map(({ node }) => (
|
||||
<div className={styles.spacer} key={node.id}>
|
||||
<div className={styles.imageWrap} key={node.id}>
|
||||
<ProjectImage fluid={node.fluid} alt={title} />
|
||||
</div>
|
||||
))}
|
||||
@ -44,11 +43,11 @@ const Project = ({ data }) => {
|
||||
|
||||
<article>
|
||||
<header>
|
||||
<h1 className={styles.project__title}>{title}</h1>
|
||||
<h1 className={styles.title}>{title}</h1>
|
||||
</header>
|
||||
<ReactMarkdown
|
||||
source={descriptionWithLineBreaks}
|
||||
className={styles.project__description}
|
||||
className={styles.description}
|
||||
/>
|
||||
<ProjectImages projectImages={projectImages} title={title} />
|
||||
<ProjectMeta links={links} techstack={techstack} />
|
||||
|
@ -1,7 +1,7 @@
|
||||
@import 'variables';
|
||||
@import '../components/molecules/ProjectImage.module';
|
||||
|
||||
.spacer {
|
||||
.imageWrap {
|
||||
margin-bottom: $spacer * 3;
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
@ -9,7 +9,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.project__title {
|
||||
.title {
|
||||
font-size: $font-size-h2;
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
@ -17,12 +17,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.project__description {
|
||||
.description {
|
||||
font-size: $font-size-base;
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
.project__meta {
|
||||
.meta {
|
||||
margin-top: -($spacer);
|
||||
margin-bottom: $spacer * 5;
|
||||
display: grid;
|
||||
@ -35,7 +35,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.project__meta__title {
|
||||
.metaTitle {
|
||||
font-size: $font-size-h3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user