redesign

app/src/App.css

@@ -1,60 +1,72 @@
 *{
-	/* margin: 0; */
-	/* padding: 0; */
+    font-family: Helvetica, sans-serif;
 }
-
-html, body, #pagewrapper, #root{
-	height: 100vh;
-	margin: 0 0 0 0;
-	padding: 0 0 0 0;
-	overflow: auto;
-}
-
-
-.flex-column{
-	display: flex;
-	flex-direction: column;
-}
-.flex-row{
-	display: flex;
-	flex-direction: row;
-}
-
-#flex{
-	display: flex;
+html, body{
+	margin: 0;
+	padding: 0;
+    background-color: black;
+    color: white;
+	min-height: 100vh;
 	height:100%;
+	width:100%;
 }
 
 
-body {
-    font-family: 'Terminus', sans-serif;
-	background-color: #000;
+/* SET UP GRID */
+#pagewrapper{
+    display:grid;
+    grid-template-columns: 1fr auto 1fr;
+    grid-template-rows: auto auto;
+}
+header{
+    grid-column: 2;
+    grid-row: 1;
+}
+nav{
+    grid-column: 1;
+    grid-row: 2;
+}
+main{
+    grid-column: 2;
+    grid-row: 2;
 }
 
+/* Now do other shit */
 
-h1 {
-	/* margin: 10px; */
+nav{
+    color: white;
+    font-size: 32pt;
+    font-weight: bold;
+    font-style: oblique;
+    text-align: right;
+    margin-right: 8pt;
+    margin: 0px 8px 0px 0px;
+    line-height: 30pt;
+}
+nav .active{
+    font-style: oblique;
+}
+nav a{
+	text-decoration: none;
+	color: white;
 }
 
 main{
-	display: block;
-	/* margin-left: 100px; */
-	/* margin-right:100px; */
-	background-color: #333;
-	color: lime;
-	box-sizing: border-box;
-	padding: 10px;
-	width: 100%;
-	height:100%;
-}
-ul{
-	align-self: left;
+    background-color: #233;
+    padding: 16px;
+    color: #eee;
+    min-width: 40vw;
+	max-width: 800px;
 }
 
-a, a:visited, a:hover {
-    /* text-decoration: none; */
-    color: inherit;
+main h1{
+    margin: 0px;
 }
-a.selected, a.selected:visited{
-	color:red;
+main p{
+    margin-top: 0px;
+}
+
+.active
+{
+    color: #444
 }