From 1359ecfcf6e249d15d156a763ea1c9fb4c7116c6 Mon Sep 17 00:00:00 2001
From: Max Stevenson <maxstevenson@msn.com>
Date: Mon, 8 Jun 2020 12:51:45 +0100
Subject: [PATCH] Layout disaster WIP

---
 index.html                         | 32 ++++++++++++++++--------------
 public/stylesheets/styles.css      | 21 ++++++++++++++++++--
 public/stylesheets/styles.css.map  |  2 +-
 sass/components/_display-text.scss | 25 ++++++++++++++++++++---
 sass/components/_layout.scss       | 12 +++++++++--
 5 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index 069d731..ccb6e0d 100644
--- a/index.html
+++ b/index.html
@@ -11,31 +11,33 @@
     <div class="outer-edge__light" id="outer-container">
       <div class="inner-edge__light">
         <div id="grid-container">
-          <div class="outer-edge__dark__no-right-edge" id="map-display">
-            <div class="inner-edge__light__no-padding">
+          <div class="outer-edge__dark__no-right-edge" id="map-display__outer">
+            <div class="inner-edge__light__no-padding" id="map-display__inner">
               <div class="map-display__container">
-                <div class="map-display__system-wrapper">
-                  <h1 id="sys-one" class="map-display__system-status">
-                    SYSTEM SECURED
-                  </h1>
-                </div>
-                <div class="map-display__center-section">
+                <div class="map-display__system-status__container">
                   <div class="map-display__system-wrapper">
-                    <h1 id="sys-two" class="map-display__system-status">
+                    <h1 id="sys-one" class="map-display__system-status">
                       SYSTEM SECURED
                     </h1>
                   </div>
+                  <div class="map-display__center-section">
+                    <div class="map-display__system-wrapper">
+                      <h1 id="sys-two" class="map-display__system-status">
+                        SYSTEM SECURED
+                      </h1>
+                    </div>
+                    <div class="map-display__system-wrapper">
+                      <h1 id="sys-three" class="map-display__system-status">
+                        SYSTEM SECURED
+                      </h1>
+                    </div>
+                  </div>
                   <div class="map-display__system-wrapper">
-                    <h1 id="sys-three" class="map-display__system-status">
+                    <h1 id="sys-four" class="map-display__system-status">
                       SYSTEM SECURED
                     </h1>
                   </div>
                 </div>
-                <div class="map-display__system-wrapper">
-                  <h1 id="sys-four" class="map-display__system-status">
-                    SYSTEM SECURED
-                  </h1>
-                </div>
               </div>
               <div class="room-info__container">
                 <div class="room-info__level-display">
diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css
index 71389ae..66592e8 100644
--- a/public/stylesheets/styles.css
+++ b/public/stylesheets/styles.css
@@ -116,8 +116,8 @@ body {
 }
 
 .map-display__container {
-  border-bottom: 8px solid #438149;
-  border-top: 8px solid #438149;
+  border-bottom: 10px solid #438149;
+  border-top: 10px solid #438149;
   display: flex;
   height: 500px;
   justify-content: space-between;
@@ -136,9 +136,26 @@ body {
 #sys-one {
   writing-mode: vertical-rl;
   text-orientation: mixed;
+}
+
+#sys-one, #sys-four {
+  font-size: 38px;
+  padding: 0 8px;
   text-align: center;
 }
 
+#sys-two {
+  padding: 4px 8px 8px 8px;
+}
+
+#sys-three {
+  padding: 8px 8px 4px 8px;
+}
+
+#sys-three, #sys-two {
+  font-size: 26px;
+}
+
 #sys-four {
   writing-mode: tb-rl;
   transform: rotate(-180deg);
diff --git a/public/stylesheets/styles.css.map b/public/stylesheets/styles.css.map
index 2d5a75c..671d455 100644
--- a/public/stylesheets/styles.css.map
+++ b/public/stylesheets/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.scss","../../sass/components/_display-text.scss","../../sass/components/_layout.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;EACE;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AC5DF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAYF;EACE;;;AC1CF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACxCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AC1BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtDF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACjHF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACnEF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACtBF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.scss","../../sass/components/_display-text.scss","../../sass/components/_layout.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;EACE;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AC5DF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAYF;EACE;;;AC1CF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;ACzDF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AC1BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtDF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACjHF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACnEF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACtBF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"styles.css"}
\ No newline at end of file
diff --git a/sass/components/_display-text.scss b/sass/components/_display-text.scss
index 0c3a545..ecc7766 100644
--- a/sass/components/_display-text.scss
+++ b/sass/components/_display-text.scss
@@ -11,10 +11,10 @@
 }
 
 .map-display__container {
-  border-bottom: 8px solid #438149;
-  border-top: 8px solid #438149;
+  border-bottom: 10px solid #438149;
+  border-top: 10px solid #438149;
   display: flex;
-  height: 500px;
+  flex: 1;
   justify-content: space-between;
   background-color: black;
   background-size: 40px 40px;
@@ -32,11 +32,30 @@
 #sys-one {
   writing-mode: vertical-rl;
   text-orientation: mixed;
+}
+
+#sys-one, #sys-four {
+  font-size: 38px;
+  padding: 0 8px;
   text-align: center;
 }
 
+#sys-two {
+  padding: 4px 8px 8px 8px;
+}
+
+#sys-three {
+  padding: 8px 8px 4px 8px;
+}
+
+#sys-three, #sys-two {
+  font-size: 26px;
+}
+
 #sys-four {
   writing-mode: tb-rl;
   transform: rotate(-180deg);
   text-align: center;
 }
+
+
diff --git a/sass/components/_layout.scss b/sass/components/_layout.scss
index ecf55ab..a626aef 100644
--- a/sass/components/_layout.scss
+++ b/sass/components/_layout.scss
@@ -23,6 +23,14 @@
   grid-area: 1 / 2 / 2 / 3;
 }
 
-#map-display {
+#map-display__outer {
   grid-area: 1 / 1 / 3 / 2;
-}
\ No newline at end of file
+  display: flex;
+  flex-direction: column;
+}
+
+#map-display__inner {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}