project image & layout tweaks

content/meta.yml

@@ -23,3 +23,4 @@
     - matthiaskretschmann.com
     - beta.matthiaskretschmann.com
     - localhost
+    - 05.local

content/resume.json

@@ -20,16 +20,6 @@
         "network": "GitHub",
         "username": "kremalicious",
         "url": "https://github.com/kremalicious"
-      },
-      {
-        "network": "Dribbble",
-        "username": "kremalicious",
-        "url": "https://dribbble.com/kremalicious"
-      },
-      {
-        "network": "Keybase",
-        "username": "kremalicious",
-        "url": "https://keybase.io/kremalicious"
       }
     ],
     "location": {

src/components/Layout.module.css

@@ -1,7 +1,18 @@
 .screen {
-  margin-top: calc(var(--spacer) * var(--line-height));
+  margin: calc(var(--spacer) * var(--line-height)) auto 0 auto;
+  padding-left: 2%;
+  padding-right: 2%;
 }
 
+@media (min-width: 55rem) {
+  .screen {
+    padding-left: 4%;
+    padding-right: 4%;
+    max-width: calc(var(--projectImageMaxWidth) + 8%);
+  }
+}
+
+/* Single Project Page */
 .screen > article {
   display: grid;
   grid-template-columns:

src/components/atoms/Button.module.css

@@ -1,13 +1,13 @@
 .button {
   display: block;
   width: 100%;
-  color: var(--brand-cyan);
+  color: var(--link-color);
   text-align: center;
   border-radius: var(--border-radius);
   padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
   transition-property: all;
   background: var(--box-background-color);
-  border: 0.05rem solid var(--brand-cyan);
+  border: var(--stroke-width) solid rgba(255, 255, 255, 0.2);
   font-size: var(--font-size-small);
   text-transform: uppercase;
   cursor: pointer;
@@ -23,15 +23,14 @@
 .button svg {
   margin-right: calc(var(--spacer) / 4);
   transition: 0.2s var(--easing);
-  margin-bottom: -0.1rem;
+  margin-bottom: -0.15rem;
   width: var(--font-size-small);
   height: var(--font-size-small);
 }
 
 .button:hover,
 .button:focus {
-  color: #5ebeb1;
+  border-color: var(--link-color);
-  border-color: #5ebeb1;
   transform: translate3d(0, -0.1rem, 0);
   box-shadow: var(--box-shadow);
 }

src/components/atoms/FullWidth.jsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { fullWidth } from './FullWidth.module.css'
-
-const FullWidth = ({ children }) => <div className={fullWidth}>{children}</div>
-
-FullWidth.propTypes = {
-  children: PropTypes.node
-}
-
-export default FullWidth

src/components/atoms/FullWidth.module.css

@@ -1,3 +1,8 @@
-.fullWidth {
+.fullContainer {
   grid-column: full !important;
 }
+
+.fullWidth {
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+}

src/components/atoms/ProjectImage.jsx

@@ -4,20 +4,22 @@ import { graphql } from 'gatsby'
 import { GatsbyImage } from 'gatsby-plugin-image'
 import { projectImage as styleProjectImage } from './ProjectImage.module.css'
 
-export default function ProjectImage({ image, alt }) {
+export default function ProjectImage({ image, alt, className }) {
   return (
     <GatsbyImage
-      className={styleProjectImage}
+      className={`${styleProjectImage} ${className || ''}`}
       backgroundColor="transparent"
       image={image}
       alt={alt}
+      as="figure"
     />
   )
 }
 
 ProjectImage.propTypes = {
   image: PropTypes.object.isRequired,
-  alt: PropTypes.string.isRequired
+  alt: PropTypes.string.isRequired,
+  className: PropTypes.string
 }
 
 export const projectImage = graphql`
@@ -28,6 +30,6 @@ export const projectImage = graphql`
 
 export const projectImageTeaser = graphql`
   fragment ProjectImageTeaser on ImageSharp {
-    gatsbyImageData(layout: CONSTRAINED, width: 980, quality: 85)
+    gatsbyImageData(layout: CONSTRAINED, width: 740, quality: 85)
   }
 `

src/components/atoms/ProjectImage.module.css

@@ -6,19 +6,22 @@
   box-shadow: var(--box-shadow);
 }
 
+a:hover .frame,
+a:focus .frame {
+  border-color: var(--link-color);
+}
+
 .projectImage {
   composes: frame;
-  margin-left: auto;
-  margin-right: auto;
   display: block;
 }
 
+.projectImage:not(:only-of-type) {
+  margin-bottom: calc(var(--spacer) * 3);
+}
+
 @media (min-width: 1200px) {
-  .projectImage {
+  .projectImage:not(:only-of-type) {
-    max-width: var(--projectImageMaxWidth);
+    margin-bottom: calc(var(--spacer) * 6);
   }
 }
-
-.projectImage img {
-  display: block;
-}

src/components/molecules/ProjectLinks.module.css

@@ -17,7 +17,7 @@
 }
 
 .projectLinks svg {
-  stroke: var(--text-color-light);
+  stroke: var(--text-color);
   width: var(--font-size-small);
   height: var(--font-size-small);
   margin-left: -1.2rem;

src/components/molecules/ProjectNav.module.css

@@ -1,4 +1,5 @@
 .projectNav {
+  composes: fullWidth from '../atoms/FullWidth.module.css';
   white-space: nowrap;
   overflow-y: hidden;
   overflow-x: auto;

src/components/molecules/ProjectTechstack.module.css

@@ -14,7 +14,6 @@
   background: var(--box-background-color);
   border-radius: var(--border-radius);
   border: 0.05rem solid transparent;
-  color: var(--text-color-light);
   font-size: var(--font-size-small);
 }
 

src/components/organisms/Footer.module.css

@@ -2,7 +2,6 @@
   padding: var(--spacer);
   padding-top: calc(var(--spacer) * 4);
   text-align: center;
-  color: var(--text-color-light);
 }
 
 .footer,
@@ -22,9 +21,9 @@
   margin-left: calc(var(--spacer) / 2);
   margin-right: calc(var(--spacer) / 2);
   margin-bottom: calc(var(--spacer) / 2);
-  color: var(--text-color-light);
-}
-
-.copyright a {
   color: inherit;
 }
+
+.copyright {
+  color: var(--text-color-light);
+}

src/pages/index.jsx

@@ -38,21 +38,19 @@ function Project({ node, images }) {
   const imageCount = getImageCount(images, slug)
 
   return (
-    <article className={styleProject} key={slug}>
+    <Link to={slug} className={styleProject} key={slug}>
-      <Link to={slug}>
+      <h1 className={styleTitle}>{title}</h1>
-        <h1 className={styleTitle}>{title}</h1>
+      <ProjectImage image={img.childImageSharp.gatsbyImageData} alt={title} />
-        <ProjectImage image={img.childImageSharp.gatsbyImageData} alt={title} />
 
-        {imageCount > 1 && (
+      {imageCount > 1 && (
-          <small
+        <small
-            className={styleImageCount}
+          className={styleImageCount}
-            title={`${imageCount} project images`}
+          title={`${imageCount} project images`}
-          >
+        >
-            <Icon name="Image" /> {imageCount}
+          <Icon name="Image" /> {imageCount}
-          </small>
+        </small>
-        )}
+      )}
-      </Link>
+    </Link>
-    </article>
   )
 }
 

src/pages/index.module.css

@@ -1,14 +1,10 @@
 .projects {
   display: grid;
-  grid-template-columns: 1fr;
+  gap: calc(var(--spacer) * 2);
-  gap: calc(var(--spacer) * 3);
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-  max-width: calc(var(--projectImageMaxWidth) + var(--spacer) * 2);
-  margin: 0 auto;
-  padding-left: var(--spacer);
-  padding-right: var(--spacer);
 }
 
-@media (min-width: 30rem) {
+@media (min-width: 55rem) {
   .projects {
     grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
   }
@@ -24,41 +20,20 @@
   z-index: 2;
   padding: calc(var(--spacer) / 3) var(--spacer);
   color: #fff !important;
-  background: var(--brand-cyan);
+  background: var(--link-color);
   transform: translate3d(0, -1rem, 0);
   transition: transform 0.2s ease-out;
 }
 
 .project {
-  position: relative;
-}
-
-.project a {
   display: block;
   position: relative;
 }
 
-.project a::after {
+.project:hover .title,
-  content: '';
+.project:focus .title,
-  position: absolute;
+.project:hover .imageCount,
-  left: 0;
+.project:focus .imageCount {
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  background: transparent;
-  transition: background 0.2s ease-out;
-}
-
-.project a:hover::after,
-.project a:focus::after {
-  background: rgba(var(--brand-cyan), 0.05);
-}
-
-.project a:hover .title,
-.project a:focus .title,
-.project a:hover .imageCount,
-.project a:focus .imageCount {
   opacity: 1;
   transform: translate3d(0, 0, 0);
 }

src/pages/{ProjectsYaml.slug}.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
-import FullWidth from '../components/atoms/FullWidth'
+import { fullContainer } from '../components/atoms/FullWidth.module.css'
 import ProjectImage from '../components/atoms/ProjectImage'
 import ProjectTechstack from '../components/molecules/ProjectTechstack'
 import ProjectLinks from '../components/molecules/ProjectLinks'
@@ -9,7 +9,6 @@ import ProjectNav from '../components/molecules/ProjectNav'
 import SEO from '../components/atoms/SEO'
 import {
   meta,
-  imageWrap,
   headerTitle,
   description
 } from './{ProjectsYaml.slug}.module.css'
@@ -29,15 +28,14 @@ ProjectMeta.propTypes = {
 }
 
 function ProjectImages({ projectImages, title }) {
-  return (
+  return projectImages.map(({ node }) => (
-    <FullWidth>
+    <ProjectImage
-      {projectImages.map(({ node }) => (
+      image={node.gatsbyImageData}
-        <div className={imageWrap} key={node.id}>
+      alt={title}
-          <ProjectImage image={node.gatsbyImageData} alt={title} />
+      key={node.id}
-        </div>
+      className={fullContainer}
-      ))}
+    />
-    </FullWidth>
+  ))
-  )
 }
 
 ProjectImages.propTypes = {

src/pages/{ProjectsYaml.slug}.module.css

@@ -1,16 +1,8 @@
-.imageWrap {
-  margin-bottom: calc(var(--spacer) * 3);
-}
-
 .headerTitle {
   font-size: var(--font-size-h2);
 }
 
 @media (min-width: 30em) {
-  .imageWrap {
-    margin-bottom: calc(var(--spacer) * 6);
-  }
-
   .headerTitle {
     font-size: var(--font-size-h1);
   }

src/styles/global.css

@@ -92,7 +92,8 @@ a:focus {
 /* Media */
 img,
 video,
-svg {
+svg,
+figure {
   max-width: 100%;
   height: auto;
   margin: 0;