fashion page writeup

src/static/css/all.css

@@ -100,7 +100,7 @@ li {
         grid-row-gap: 0px; 
         flex-direction: column;
     }
-    .nav-lemonland { grid-area: 1 / 4 / 2 / 5;
+    .nav-diary { grid-area: 1 / 4 / 2 / 5;
         display: grid;
         grid-template-columns: 100%;
         grid-template-rows: 80% 20%;
@@ -108,7 +108,7 @@ li {
         grid-row-gap: 0px; 
         flex-direction: column;
     }
-    .nav-diary { grid-area: 1 / 5 / 2 / 6;
+    .nav-fashion { grid-area: 1 / 5 / 2 / 6;
         display: grid;
         grid-template-columns: 100%;
         grid-template-rows: 80% 20%;

src/static/css/fashion.css

@@ -0,0 +1,33 @@
+.content-grid { 
+    grid-area: 3 / 1 / 4 / 4; 
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(6, auto);
+    grid-column-gap: 0px;
+    grid-row-gap: 2em; 
+    color: white
+}
+    .banner { 
+        grid-area: 1 / 1 / 2 / 2;
+        text-align: center;
+        margin-top: 2em;
+    }
+        .controls img { width: 10em; }
+
+.demo-game iframe {
+    border: 2px solid #df85a5;
+    padding: 10px;
+    display: block;
+    margin: auto;
+}
+.demo-intro {
+    width: 40%;
+    padding: 10px;
+    margin: auto;
+}
+    .demo { grid-area: 2 / 1 / 3 / 2; }
+    .controls { grid-area: 3 / 1 / 4 / 2; }
+    .system { grid-area: 4 / 1 / 5 / 2; }
+    .story { grid-area: 5 / 1 / 6 / 2; }
+    .characters { grid-area: 6 / 1 / 7 / 2; }
+    .info { grid-area:  7 / 1 / 8 / 2; }