color tweaks

src/components/atoms/ProjectImage.jsx

@@ -25,3 +25,9 @@ export const projectImage = graphql`
     gatsbyImageData(layout: CONSTRAINED, width: 1440, quality: 85)
   }
 `
+
+export const projectImageTeaser = graphql`
+  fragment ProjectImageTeaser on ImageSharp {
+    gatsbyImageData(layout: CONSTRAINED, width: 980, quality: 85)
+  }
+`

src/components/atoms/ProjectImage.module.css

@@ -1,10 +1,16 @@
+.frame {
+  border: var(--stroke-width) solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  transition: 0.2s ease-out;
+  box-shadow: var(--box-shadow);
+}
+
 .projectImage {
+  composes: frame;
   margin-left: auto;
   margin-right: auto;
   display: block;
-  border-radius: var(--border-radius);
-  overflow: hidden;
-  box-shadow: var(--box-shadow);
 }
 
 @media (min-width: 1200px) {

src/components/molecules/LogoUnit.module.css

@@ -57,12 +57,6 @@
   transform-box: border-box;
 }
 
-.minimal .title,
-.minimal .description {
-  color: var(--text-color-light);
-}
-
 .minimal .logo {
   margin-bottom: calc(var(--spacer) / 3);
-  opacity: 0.5;
 }

src/pages/index.jsx

@@ -89,7 +89,7 @@ export const IndexQuery = graphql`
           slug
           img {
             childImageSharp {
-              gatsbyImageData(layout: CONSTRAINED, width: 980, quality: 85)
+              ...ProjectImageTeaser
             }
           }
         }

src/styles/_variables.css

@@ -4,18 +4,23 @@
   --brand-cyan: #43a699;
   --brand-main-light: #88bec8;
   --brand-light: #e7eef4;
+
   --brand-grey: #4e5d63;
-  --brand-grey-light: #70858e;
+  --brand-grey-dark: #323c41;
-  --brand-grey-dimmed: #97abb3;
+  --brand-grey-light: #7f97a1;
+  --brand-grey-dimmed: #c3d8e0;
 
   /* Backgrounds */
   --body-background-color: var(--brand-light);
-  --box-background-color: rgba(255, 255, 255, 0.2);
+  --box-background-color: rgba(255, 255, 255, 0.4);
 
   /* Text Colors */
   --text-color: var(--brand-grey);
   --text-color-light: var(--brand-grey-light);
+  --text-color-dimmed: var(--brand-grey-dimmed);
   --color-headings: var(--brand-main);
+  --link-color: var(--brand-cyan);
+  --border-color: var(--brand-grey-dimmed);
 
   /* Typography */
   --font-size-root: 18px;
@@ -45,18 +50,23 @@
   /* Components spacing */
   --spacer: 1.5rem;
   --border-radius: 0.25rem;
+  --stroke-width: 0.125rem;
 
   /* Miscellanious */
   --projectImageMaxWidth: 1440px;
   --easing: cubic-bezier(0.75, 0, 0.08, 1);
-  --box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05), 0 5px 16px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 1.3px 5.4px rgba(0, 0, 0, 0.1),
+    0 4.5px 18.1px rgba(0, 0, 0, 0.06), 0 20px 81px rgba(0, 0, 0, 0.04);
 }
 
 .dark {
-  --text-color: #7e9199;
+  --body-background-color: #161a1b;
-  --text-color-light: var(--brand-grey);
-  --color-headings: var(--brand-main-light);
-  --body-background-color: #1d2224;
   --box-background-color: rgba(255, 255, 255, 0.03);
-  --box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25), 0 5px 16px rgba(0, 0, 0, 0.25);
+  --box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 16px rgba(0, 0, 0, 0.1);
+
+  --text-color: var(--brand-grey-light);
+  --text-color-light: var(--brand-grey);
+  --text-color-dimmed: var(--brand-grey-dark);
+  --border-color: var(--brand-grey-dark);
+  --color-headings: var(--brand-main-light);
 }

src/styles/global.css

@@ -103,3 +103,8 @@ svg {
   min-height: 100vh;
   flex-direction: column;
 }
+
+.gatsby-image-wrapper {
+  max-height: 100vh;
+  display: block;
+}