CSS Reshuffle, Added Page Renderer

Reorganized the CSS structure to there is some seperation between front
facing style and the backend den.

Also add the Render class so auth status is included in every template
rendering event so login status and select member data is available if
needed. will expand if needed.

public/assets/css/global/colors.css

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

public/assets/css/global/forms.css

@@ -0,0 +1,39 @@
+input[type="email"],
+input[type="password"],
+input[type="text"] {
+  border: 0;
+  padding: 5px;
+  border-radius: 5px;
+  font: 18px var(--base-type);
+  display: inline-block;
+  background: var(--white);
+  color: var(--primary);
+}
+
+textarea {
+  border: 0;
+  border-radius: 3px;
+  color: var(--primary);
+  background: var(--white);
+}
+
+button,
+input[type="submit"] {
+  background: var(--highlight);
+  color: var(--white);
+  font: 20px var(--base-type);
+  border-radius: 5px;
+  position: relative;
+  cursor: pointer;
+  border: 0;
+  transition: all 0.3s linear;
+}
+
+select {
+  font: 20px var(--base-type);
+  border-radius: 5px;
+  border: 1px solid var(--primary);
+  appearance: none;
+  color: var(--primary);
+  background: var(--secondary);
+}

public/assets/css/global/frame.css

@@ -0,0 +1,59 @@
+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;
+}
+
+header {
+  width: 100%;
+  color: var(--primary);
+  background: var(--secondary);
+}
+
+header > nav {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  padding: 10px;
+}
+
+header > nav i {
+  font-size: 1.3em;
+}
+
+header > nav > div[role="nav-right"] {
+  text-align: right;
+}
+
+/* GLOBALS */
+
+a {
+  color: var(--primary);
+  text-decoration: none;
+  border-bottom: 1px solid var(--white);
+  transition: all 0.2s linear;
+}
+
+a:hover {
+  border-bottom: 1px solid var(--primary);
+}
+
+sup {
+  background: var(--black);
+  color: var(--white);
+  padding: 2px;
+  border-radius: 3px;
+  vertical-align: baseline;
+  font-family: var(--mono-type);
+}

public/assets/css/global/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: 2.5em;
+  font-weight: 700;
+}
+
+h2 {
+  font-size: 1.8em;
+  font-weight: 600;
+}
+
+h3 {
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+main > article > h1 {
+  color: var(--primary);
+}