From befb7b37ea3c853fe1018db3863f95820a3241cf Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Thu, 11 Oct 2018 20:09:22 -0400
Subject: [PATCH] Added a second log area

---
 stroll.html |  3 +++
 style.css   | 45 ++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/stroll.html b/stroll.html
index 10cdb45..ae1e34f 100644
--- a/stroll.html
+++ b/stroll.html
@@ -191,6 +191,9 @@
       <div id="log">
         <div>Welcome to Stroll 0.7.2</div>
         <div><b>This game features 18+ content</b></div>
+        <div>&nbsp;</div>
+      </div>
+      <div id="react-log">
         <div>It's a nice day for a walk</div>
         <div>&nbsp;</div>
       </div>
diff --git a/style.css b/style.css
index 6135977..d66a518 100644
--- a/style.css
+++ b/style.css
@@ -52,12 +52,30 @@ body.dark div {
 @media (max-aspect-ratio: 16/9){
   .game-area {
     width: 100%
+    height: 60%;
+  }
+  #log {
+    height: 80vh;
+    max-height: 50vh;
+  }
+  #react-log {
+    height: 40vh;
   }
 }
 
 @media (min-aspect-ratio: 16/10){
   .game-area {
-    width: 75%
+    width: 90%
+  }
+  #log {
+    float: left;
+    height: 75vh;
+    width: 50vh;
+  }
+  #react-log {
+    float: right;
+    height: 75vh;
+    width: 50vh;
   }
 }
 
@@ -66,9 +84,28 @@ body.dark div {
   display:none;
 }
 
-body.light #log {
-  height: 900px;
+#log {
   overflow: auto;
+}
+
+body.light #react-log {
+  color: #000;
+  background-color: #e7e7e7;
+}
+
+body.light #react-log div {
+  background-color: #e7e7e7;
+}
+
+body.dark #react-log {
+  color: #eee;
+  background-color: #151515;
+}
+
+body.dark #react-log div {
+  background-color: #151515;
+}
+body.light #react-log {
   color: #000;
   background-color: #e7e7e7;
 }
@@ -78,8 +115,6 @@ body.light #log div {
 }
 
 body.dark #log {
-  height: 900px;
-  overflow: auto;
   color: #eee;
   background-color: #151515;
 }