diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css
index 66592e8..d9c29c7 100644
--- a/public/stylesheets/styles.css
+++ b/public/stylesheets/styles.css
@@ -4,8 +4,15 @@
box-sizing: border-box;
}
+html,
body {
- background: black;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ height: 100vh;
+ width: 100vw;
}
.outer-edge__light, .outer-edge__light__no-right-edge {
@@ -104,8 +111,6 @@ body {
}
.map-display__system-wrapper {
- display: flex;
- align-items: center;
background-color: #448149;
}
@@ -116,10 +121,8 @@ body {
}
.map-display__container {
- 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;
@@ -127,12 +130,18 @@ body {
}
.map-display__system-status {
- max-width: fit-content;
background: #438149;
color: #ededed;
margin: 0 auto;
}
+.map-display__system-status__container {
+ display: flex;
+ flex: 1;
+ justify-content: space-between;
+ border: 10px solid #438149;
+}
+
#sys-one {
writing-mode: vertical-rl;
text-orientation: mixed;
@@ -140,8 +149,6 @@ body {
#sys-one, #sys-four {
font-size: 38px;
- padding: 0 8px;
- text-align: center;
}
#sys-two {
@@ -159,18 +166,22 @@ body {
#sys-four {
writing-mode: tb-rl;
transform: rotate(-180deg);
- text-align: center;
}
#grid-container {
display: grid;
grid-template-rows: auto auto;
- grid-template-columns: 485px 365px;
+ grid-template-columns: auto auto;
justify-items: stretch;
}
-#outer-container {
- width: fit-content;
+#outer-container__outer {
+ max-width: 85%;
+ height: 100%;
+}
+
+#outer-container__inner {
+ height: 100%;
}
#system-icons {
@@ -187,12 +198,19 @@ body {
grid-area: 1/2/2/3;
}
-#map-display {
- grid-area: 1/1/3/2;
+#map-display__outer {
+ grid-area: 1/1/4/2;
+ display: flex;
+ flex-direction: column;
+}
+
+#map-display__inner {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
}
.room-info__container {
- grid-area: 3/1/4/4;
background-color: #e2eb57;
padding: 3px;
display: flex;
diff --git a/public/stylesheets/styles.css.map b/public/stylesheets/styles.css.map
index 671d455..b34e5e0 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;;;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
+{"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;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;ACdF;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;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;ACxDF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACvCF;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/base/_base.scss b/sass/base/_base.scss
index 1650e9f..3c82254 100644
--- a/sass/base/_base.scss
+++ b/sass/base/_base.scss
@@ -4,6 +4,13 @@
box-sizing: border-box;
}
+html,
body {
- background: black;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ height: 100vh;
+ width: 100vw;
}
diff --git a/sass/components/_display-text.scss b/sass/components/_display-text.scss
index ecc7766..a8f2ac3 100644
--- a/sass/components/_display-text.scss
+++ b/sass/components/_display-text.scss
@@ -1,6 +1,4 @@
.map-display__system-wrapper {
- display: flex;
- align-items: center;
background-color: #448149;
}
@@ -11,8 +9,6 @@
}
.map-display__container {
- border-bottom: 10px solid #438149;
- border-top: 10px solid #438149;
display: flex;
flex: 1;
justify-content: space-between;
@@ -23,12 +19,18 @@
}
.map-display__system-status {
- max-width: fit-content;
background: #438149;
color: #ededed;
margin: 0 auto;
}
+.map-display__system-status__container {
+ display: flex;
+ flex: 1;
+ justify-content: space-between;
+ border: 10px solid #438149;
+}
+
#sys-one {
writing-mode: vertical-rl;
text-orientation: mixed;
@@ -36,8 +38,6 @@
#sys-one, #sys-four {
font-size: 38px;
- padding: 0 8px;
- text-align: center;
}
#sys-two {
@@ -55,7 +55,6 @@
#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 a626aef..e61777e 100644
--- a/sass/components/_layout.scss
+++ b/sass/components/_layout.scss
@@ -1,12 +1,18 @@
#grid-container {
display: grid;
grid-template-rows: auto auto;
- grid-template-columns: 485px 365px;
+ grid-template-columns: auto auto;
justify-items: stretch;
+ height: 100%;
}
-#outer-container {
- width: fit-content;
+#outer-container__outer {
+ max-width: 85%;
+ height: 85%;
+}
+
+#outer-container__inner {
+ height: 100%;
}
#system-icons {