From cc5537b9e0397829af8dd606c354bd517bdd8c2e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 8 May 2018 18:07:48 +0200
Subject: [PATCH] project nav tweaks

---
 src/components/molecules/ProjectNav.scss | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/molecules/ProjectNav.scss b/src/components/molecules/ProjectNav.scss
index ac432f4..54ad5a9 100644
--- a/src/components/molecules/ProjectNav.scss
+++ b/src/components/molecules/ProjectNav.scss
@@ -1,5 +1,7 @@
 @import 'variables';
 
+$breakpoint-project-nav: 45rem;
+
 .project__nav {
     display: flex;
     flex-wrap: wrap;
@@ -36,7 +38,7 @@
         }
     }
 
-    @media (min-width: 45rem) {
+    @media (min-width: $breakpoint-project-nav) {
         flex-basis: 33%;
 
         &:first-child,
@@ -66,7 +68,7 @@
     order: 3;
     width: 100%;
 
-    @media (min-width: 45rem) {
+    @media (min-width: $breakpoint-project-nav) {
         margin-top: 0;
         margin-left: $spacer * 4;
         margin-right: $spacer * 4;
@@ -107,13 +109,22 @@
     text-align: left;
 
     h3 {
-        font-size: $font-size-h3;
+        font-size: $font-size-h4;
         margin-bottom: $spacer / 4;
         color: $brand-grey-light;
+
+        @media (min-width: $breakpoint-project-nav) {
+            font-size: $font-size-h3;
+        }
     }
 
     p {
         margin: 0;
         color: $brand-grey-light;
+        font-size: $font-size-small;
+
+        @media (min-width: $breakpoint-project-nav) {
+            font-size: $font-size-base;
+        }
     }
 }