m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-22 17:23:22 +01:00
Code Releases Activity

tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-11-24 17:36:16 +01:00
parent 5789563242
commit 9ce80bd75b
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.stylelintrc
View File

@ -7,6 +7,7 @@
"syntax": "scss", "syntax": "scss",
"rules": { "rules": {
"indentation": 4, "indentation": 4,
"number-leading-zero": "never" "number-leading-zero": "never",
"no-descending-specificity": null
} }
} }

15
src/pages/index.jsx
View File

@ -5,27 +5,28 @@ import ProjectImage from '../components/molecules/ProjectImage'
import { ReactComponent as Images } from '../images/images.svg' import { ReactComponent as Images } from '../images/images.svg'
import styles from './index.module.scss' import styles from './index.module.scss'
const getImageCount = (imageEdges, slug) => { const getImageCount = (images, slug) => {
let array = [] let array = []
let slugWithoutSlashes = slug.replace(/\//g, '')
imageEdges.map(({ node }) => { images.map(({ node }) => {
if (node.name.includes(slug.replace(/\//g, ''))) { if (node.name.includes(slugWithoutSlashes)) {
array.push(node) array.push(node)
} }
}) })
return array return array.length
} }
const Home = ({ data }) => { const Home = ({ data }) => {
const projects = data.allProjectsYaml.edges const projects = data.allProjectsYaml.edges
const imageEdges = data.projectImageFiles.edges const images = data.projectImageFiles.edges
return ( return (
<div className={styles.projects}> <div className={styles.projects}>
{projects.map(({ node }) => { {projects.map(({ node }) => {
const { slug, title, img } = node const { slug, title, img } = node
const imageCount = getImageCount(imageEdges, slug).length const imageCount = getImageCount(images, slug)
return ( return (
<article className={styles.project} key={slug}> <article className={styles.project} key={slug}>
@ -33,7 +34,7 @@ const Home = ({ data }) => {
<h1 className={styles.title}>{title}</h1> <h1 className={styles.title}>{title}</h1>
<ProjectImage fluid={img.childImageSharp.fluid} alt={title} /> <ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
{imageCount > 0 && ( {imageCount > 1 && (
<small <small
className={styles.imageCount} className={styles.imageCount}
title={`${imageCount} project images`} title={`${imageCount} project images`}

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

@ -57,19 +57,29 @@
color: #fff; color: #fff;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.imageCount {
opacity: 1;
transform: translate3d(0, 0, 0);
}
} }
} }
} }
.imageCount { .imageCount {
position: absolute; position: absolute;
bottom: $spacer / 4; bottom: 10%;
right: $spacer / 2; right: 0;
color: $brand-light; color: $brand-grey-dimmed;
font-size: $font-size-mini; font-size: $font-size-mini;
opacity: .85; padding: $spacer / 6 $spacer / 2;
background: rgba($brand-cyan, .9);
z-index: 10;
opacity: 0;
transform: translate3d(0, $spacer / 2, 0);
transition: transform .25s ease-out;
svg { svg {
fill: $brand-light; fill: $brand-grey-dimmed;
} }
} }