Front End Templating

Began the process of getting the front end together by adding about and
listing pages and applied some light styling to it doesn't look like
garbage.

Still need to turn on the indivial instance display pages, so that will
be next.

public/assets/css/front/about.css

@@ -0,0 +1,12 @@
+section[role="about"] {
+  background: var(--primary);
+  width: 100%;
+  max-width: 600px;
+  padding: 100px;
+  margin: 0 auto;
+  color: var(--white);
+}
+
+section[role="about"] a {
+  color: var(--highlight);
+}

public/assets/css/front/index.css

@@ -1,15 +1,37 @@
-section[role="intro"] {
-  padding: 10px;
-  width: 300px;
-  color: var(--highlight);
+section[role="start"] {
+  background-image: url("../../images/global/special-trash.jpg");
+  height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-section[role="intro"] span[role="title"] {
+section[role="start"] div {
+  background: var(--primary);
+  width: 400px;
+  border-radius: 3px;
+  padding: 5px;
+}
+
+section[role="start"] span[role="title"] {
   font-size: 100px;
   line-height: 80px;
+  font-weight: bold;
   color: var(--secondary);
 }
 
-section[role="intro"] p {
+section[role="start"] p {
   color: var(--white);
+  display: inline-block;
+  vertical-align: top;
+  margin: 6px auto;
+  font-size: 1.87em;
+}
+
+section[role="start"] p a {
+  color: var(--highlight);
+  margin-top: 5px;
 }

public/assets/css/front/listing.css

@@ -0,0 +1,13 @@
+section[role="listings"] {
+  background: var(--primary);
+  width: 100%;
+  max-width: 600px;
+  border-radius: 3px;
+  padding: 100px;
+  margin: 0 auto;
+  color: var(--white);
+}
+
+section[role="listings"] a {
+  color: var(--highlight);
+}

public/assets/css/front/start.css

@@ -3,5 +3,6 @@
 @import "../global/typography.css";
 @import "../global/frame.css";
 @import "../global/icons.css";
-
 @import "index.css";
+@import "about.css";
+@import "listing.css";

public/assets/css/global/frame.css

@@ -24,7 +24,7 @@ header {
 
 header > nav {
   display: grid;
-  grid-template-columns: 200px 1fr;
+  grid-template-columns: 1fr 1fr;
   padding: 10px;
 }
 
@@ -36,6 +36,16 @@ header > nav > div[role="nav-right"] {
   text-align: right;
 }
 
+div[role="system-notice"] {
+  background: var(--highlight);
+  color: var(--primary);
+  padding: 10px;
+}
+
+main {
+  height: 100%;
+}
+
 /* GLOBALS */
 
 a {
@@ -45,6 +55,11 @@ a {
   transition: all 0.2s linear;
 }
 
+a[role="nav-links"] {
+  padding: 7px;
+  border-bottom: none;
+}
+
 a:hover {
   border-bottom: 1px solid var(--primary);
 }

public/assets/css/global/typography.css

@@ -28,6 +28,7 @@ h3 {
 h1 {
   font-size: 2.5em;
   font-weight: 700;
+  line-height: 1em;
 }
 
 h2 {