From b2646ca94bfe49323c3f8aaa3351b6cc2a1e9681 Mon Sep 17 00:00:00 2001
From: Eduardo Nunes <eduardo@oddcamp.com>
Date: Fri, 10 Mar 2023 16:12:41 +0000
Subject: [PATCH] Small update to the Matcher project

---
 .tool-versions                      |  1 +
 src/pages/projects/matcher/index.md | 14 +++++---------
 src/templates/projectTemplate.js    | 23 +++++++----------------
 3 files changed, 13 insertions(+), 25 deletions(-)
 create mode 100644 .tool-versions

diff --git a/.tool-versions b/.tool-versions
new file mode 100644
index 0000000..b00f598
--- /dev/null
+++ b/.tool-versions
@@ -0,0 +1 @@
+nodejs 18.0.0
diff --git a/src/pages/projects/matcher/index.md b/src/pages/projects/matcher/index.md
index 01e8f0b..ef848b6 100644
--- a/src/pages/projects/matcher/index.md
+++ b/src/pages/projects/matcher/index.md
@@ -36,21 +36,17 @@ But first, we needed a brand.
 
 ![Matcher Logo](images/logos@2x.png)
 
-<article role="article">
-
-Quite frankly, this was one of the rare cases where the brand pretty much designed itself. For the logo, A2 Type's outstanding [Regular](https://www.a2-type.co.uk/regular) pulls most of the weight, only being complemented by a few scribbles that mimic coaching instructions. These follow a bit of a pattern but can be used in a number of different ways, keeping the logo recognizable but never boring.
-
-As for the colour scheme, it's ripped right off of the courts we used to play in. Perhaps unsurprisingly, I've come to realize these look more or less the same anywhere in the world, almost always using a combination of 2 out of 4 possible colours. By adding them all together, we had a brand palette.
-
-</article>
-
 ![Colour scheme inspiration](images/colours@2x.png)
 
 ![Kit Combinations](images/kits@2x.png)
 
 <article role="article">
 
-With the brand settled, it was time to move on to the UI. One of the biggest temptations, when you're designing an app like this, is to focus on the desktop experience first and then try to gracefully degrade it so it fits on smaller screens. I went with the opposite approach: started out by designing everything mobile‑first, and then tried to scale it up so it looks good everywhere. In all fairness, the app still ended up looking better on phones than it does on desktop, but I'm happy to report that it's just as usable on every device—and all versions share the exact same set of features.
+Quite frankly, this was one of the rare cases where the brand pretty much designed itself. For the logo, A2 Type's outstanding [Regular](https://www.a2-type.co.uk/regular) pulls most of the weight, only being complemented by a few scribbles that mimic coaching instructions. These follow a bit of a pattern but can be used in a number of different ways, keeping the logo recognizable but never boring.
+
+As for the colour scheme, it's ripped right off of the courts we used to play in. Perhaps unsurprisingly, I've come to realize these look more or less the same anywhere in the world, almost always using a combination of 2 out of 4 possible colours. By adding them all together, we had a brand palette.
+
+With the brand settled, it was time to move on to the UI. I fully committed to a mobile‑first approach, designing the interface to feel as close to a native app as possible and then slowly scaling everything up so it looked good on larger screens as well. In all fairness, the app still ended up looking better on phones than it does on desktop, but I'm happy to report that it's just as usable on every device—and all versions share the exact same set of features.
 
 </article>
 
diff --git a/src/templates/projectTemplate.js b/src/templates/projectTemplate.js
index 29c0f97..409f97c 100644
--- a/src/templates/projectTemplate.js
+++ b/src/templates/projectTemplate.js
@@ -48,29 +48,20 @@ const ProjectContent = styled.section`
       line-height: 1.6;
       margin: 0 auto 1em auto;
       max-width: 44ch;
-      letter-spacing: -0.01em;
+      letter-spacing: -0.018em;
       hyphens: none;
     }
 
     blockquote {
-      text-align: center;
-
       p {
         font-style: italic;
         font-feature-settings: 'dlig', 'liga', 'calt';
-        font-size: ${rem(22)};
+        font-size: ${rem(20)};
         letter-spacing: -0.03em;
 
         line-height: 1.4;
-        margin: 1.4em auto;
+        margin: 1em 0;
         max-width: 35ch;
-
-        strong {
-          font-weight: bold;
-        }
-        em {
-          font-weight: normal;
-        }
       }
     }
 
@@ -101,7 +92,7 @@ const ProjectContent = styled.section`
       margin-bottom: ${rem(28)};
     }
     article blockquote p {
-      font-size: ${rem(28)};
+      font-size: ${rem(22)};
     }
   }
   @media ${(props) => props.theme.mediumUp} {
@@ -112,7 +103,7 @@ const ProjectContent = styled.section`
       font-size: ${rem(20)};
     }
     article blockquote p {
-      font-size: ${rem(26)};
+      font-size: ${rem(24)};
     }
   }
   @media ${(props) => props.theme.largeUp} {
@@ -127,7 +118,7 @@ const ProjectContent = styled.section`
       font-size: ${rem(22)};
     }
     article blockquote p {
-      font-size: ${rem(30)};
+      font-size: ${rem(28)};
     }
   }
   @media ${(props) => props.theme.xxlargeUp} {
@@ -142,7 +133,7 @@ const ProjectContent = styled.section`
       font-size: ${rem(26)};
     }
     article blockquote p {
-      font-size: ${rem(36)};
+      font-size: ${rem(32)};
     }
   }
 `