tweaks

.stylelintrc

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

src/pages/index.jsx

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

src/pages/index.module.scss

@@ -57,19 +57,29 @@
                 color: #fff;
                 transform: translate3d(0, 0, 0);
             }
+
+            .imageCount {
+                opacity: 1;
+                transform: translate3d(0, 0, 0);
+            }
         }
     }
 }
 
 .imageCount {
     position: absolute;
-    bottom: $spacer / 4;
-    right: $spacer / 2;
-    color: $brand-light;
+    bottom: 10%;
+    right: 0;
+    color: $brand-grey-dimmed;
     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 {
-        fill: $brand-light;
+        fill: $brand-grey-dimmed;
     }
 }