feat: pixel font for title (#555)

Signed-off-by: David Dal Busco <david.dalbusco@outlook.com>

Author: peterpeterparker

src/components/Hero/index.tsx

@@ -39,8 +39,11 @@ export default function Hero(): JSX.Element {
     <article className={clsx("hero", styles.heroBanner)}>
       <div className={`${styles.container}`}>
         <h1 className={`hero__title ${styles.title} ${styles.item}`}>
-          <span ref={el} className={styles.bold} />
-          {!typedLoaded && <span className={styles.bold}>Build</span>} ideas in
+          <span ref={el} className={`${styles.bold} ${styles.typed}`} />
+          {!typedLoaded && (
+            <span className={`${styles.bold} ${styles.typed}`}>Build</span>
+          )}{" "}
+          ideas in
           <br />
           your <span className={styles.bold}>container</span>
         </h1>

src/components/Hero/styles.module.scss

@@ -96,6 +96,24 @@
   font-weight: bold;
 }
 
+.typed {
+  font-family: "Pixelify Sans", sans-serif;
+
+  font-size: 2.75rem;
+
+  @media screen and (min-width: 480px) {
+    font-size: 2.95rem;
+  }
+
+  @media screen and (min-width: 768px) {
+    font-size: 4.6rem;
+  }
+
+  @media screen and (min-width: 960px) {
+    font-size: 5.85rem;
+  }
+}
+
 .llms {
   display: inline-flex;
   justify-content: center;

src/css/font-faces.scss

@@ -45,3 +45,15 @@
     /* Chrome 26+, Opera 23+, Firefox 39+ */
       url("/fonts/jetbrains-mono-v11-latin-800italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
+
+/* pixelify-sans-700 - latin */
+@font-face {
+  font-family: "Pixelify Sans";
+  font-style: normal;
+  font-weight: 700;
+  src:
+    local(""),
+    url("/fonts/pixelify-sans-v3-latin-700.woff2") format("woff2"),
+    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+      url("/fonts/pixelify-sans-v3-latin-700.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+}