Built out Listing Page, font update

Plugged in the layout for the Listings page and turned on pagination.

Also updated the font to rubrik. Because it's pretty.

public/assets/css/front/index.css

@@ -18,16 +18,10 @@ form.index-search-form {
   padding: 30px 0;
 }
 
-input[type="text"]:focus {
-  outline: solid var(--highlight);
-  background-color: var(--highlight);
-}
-
 form.index-search-form > input[type="text"] {
   width: 91%;
   height: 50px;
   font: 44px var(--base-type);
-  transition: all 0.2s linear;
 }
 
 form.index-search-form > button {

public/assets/css/global/forms.css

@@ -8,6 +8,13 @@ input[type="text"] {
   display: inline-block;
   background: var(--white);
   color: var(--primary);
+  transition: all 0.2s linear;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus {
+  outline: solid var(--highlight);
+  background-color: var(--highlight);
 }
 
 textarea {

public/assets/css/global/typography.css

@@ -1,44 +1,71 @@
+/* RUBIK  */
 @font-face {
-  font-family: altehaasgrotesk;
-  font-weight: 400;
+  font-family: rubik;
+  src: url("fonts/Rubik/rubik-light.ttf") format("truetype"),
+    url("fonts/Rubik/rubik-light.woff") format("woff"),
+    url("fonts/Rubik/rubik-light.woff2") format("woff2");
+  font-weight: 300;
   font-style: normal;
-  src: url("type/AlteHaasGroteskRegular.woff") format("woff"),
-    url("type/AlteHaasGroteskRegular.ttf") format("ttf");
 }
 
 @font-face {
-  font-family: altehaasgrotesk;
+  font-family: rubik;
+  src: url("fonts/Rubik/rubik-regular.ttf") format("truetype"),
+    url("fonts/Rubik/rubik-regular.woff") format("woff"),
+    url("fonts/Rubik/rubik-regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: rubik;
+  src: url("fonts/Rubik/rubik-medium.ttf") format("truetype"),
+    url("fonts/Rubik/rubik-medium.woff") format("woff"),
+    url("fonts/Rubik/rubik-medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: rubik;
+  src: url("fonts/Rubik/rubik-bold.ttf") format("truetype"),
+    url("fonts/Rubik/rubik-bold.woff") format("woff"),
+    url("fonts/Rubik/rubik-bold.woff2") format("woff2");
   font-weight: 600;
-  font-style: oblique;
-  src: url("type/AlteHaasGroteskBold.woff") format("woff"),
-    url("type/AlteHaasGroteskBold.ttf") format("ttf");
+  font-style: normal;
 }
 
 :root {
-  --base-type: altehaasgrotesk, helvetica, arial, sans-serif;
+  --base-type: rubik, helvetica, arial, sans-serif;
   --mono-type: "Lucida Console", monaco, monospace;
 }
 
 h1,
 h2,
 h3 {
-  color: var(--secondary);
+  color: var(--white);
+  font-family: var(--title-type);
 }
 
 h1 {
-  font-size: 2.5em;
-  font-weight: 700;
-  line-height: 1em;
+  font-size: 4em;
+  font-weight: 500;
+  font-kerning: normal;
+  letter-spacing: -5px;
+  text-transform: uppercase;
+  line-height: 0.75em;
+  margin: 40px 0;
 }
 
 h2 {
-  font-size: 1.8em;
-  font-weight: 600;
+  font-size: 3em;
+  font-weight: 400;
+  line-height: 0.8em;
 }
 
 h3 {
-  font-size: 1.2em;
-  font-weight: 500;
+  font-size: 2em;
+  font-weight: 300;
 }
 
 main > article > h1 {