Basic splash page set up

Just getting the bare minimum styles and templates created and rendering
properly to have a simple splash going.

public/assets/css/front/colors.css

@@ -0,0 +1,9 @@
+:root {
+  /* BASE COLORS */
+  --primary: #140c08;
+  --secondary: #fc7472;
+  --highlight: #69b04f;
+  --white: #efebe3;
+  --grey: #abb7b7;
+  --black: #32302f;
+}

public/assets/css/front/frame.css

@@ -0,0 +1,37 @@
+html {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font: 400 1.2em/1.4em var(--base-type);
+}
+
+html body {
+  background: var(--primary);
+  color: var(--secondary);
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+/* GLOBALS */
+
+a {
+  color: var(--primary);
+  text-decoration: none;
+  border-bottom: 1px solid var(--secondary);
+  transition: all 0.2s linear;
+}
+
+a:hover {
+  border-bottom: 1px solid var(--highlight);
+}
+
+sup {
+  background: var(--black);
+  color: var(--white);
+  padding: 3px;
+  border-radius: 3px;
+}

public/assets/css/front/index.css

@@ -0,0 +1,15 @@
+section[role="intro"] {
+  padding: 10px;
+  width: 300px;
+  color: var(--highlight);
+}
+
+section[role="intro"] span[role="title"] {
+  font-size: 100px;
+  line-height: 80px;
+  color: var(--secondary);
+}
+
+section[role="intro"] p {
+  color: var(--white);
+}

public/assets/css/front/start.css

@@ -0,0 +1,5 @@
+@import url("colors.css");
+@import url("forms.css");
+@import url("typography.css");
+@import url("frame.css");
+@import url("index.css");

public/assets/css/front/typography.css

@@ -0,0 +1,45 @@
+@font-face {
+  font-family: altehaasgrotesk;
+  font-weight: 400;
+  font-style: normal;
+  src: url("type/AlteHaasGroteskRegular.woff") format("woff"),
+    url("type/AlteHaasGroteskRegular.ttf") format("ttf");
+}
+
+@font-face {
+  font-family: altehaasgrotesk;
+  font-weight: 600;
+  font-style: oblique;
+  src: url("type/AlteHaasGroteskBold.woff") format("woff"),
+    url("type/AlteHaasGroteskBold.ttf") format("ttf");
+}
+
+:root {
+  --base-type: altehaasgrotesk, helvetica, arial, sans-serif;
+  --mono-type: "Lucida Console", monaco, monospace;
+}
+
+h1,
+h2,
+h3 {
+  color: var(--secondary);
+}
+
+h1 {
+  font-size: 2em;
+  font-weight: 700;
+}
+
+h2 {
+  font-size: 1.8em;
+  font-weight: 600;
+}
+
+h3 {
+  font-size: 1.5em;
+  font-weight: 500;
+}
+
+main > article > h1 {
+  color: var(--primary);
+}