mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-23 01:29:41 +01:00
tweaks
This commit is contained in:
parent
5789563242
commit
9ce80bd75b
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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`}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user