Macintosh-Tools/jurassic-park-interface
1
0
Fork 0
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git synced 2024-06-25 19:29:32 +00:00
Code Issues Projects Releases Wiki Activity

Messed around with the layout again.

Browse Source 
- Deleted grid layout, went back to putting everything in flex.
This commit is contained in:
Max Stevenson 2020-06-18 10:30:06 +01:00
parent aa8eb887c8
commit f9014a1661
6 changed files with 549 additions and 488 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
index.html
View File

@ -17,6 +17,7 @@
<div class="outer-edge__light" id="outer-container__outer"> <div class="outer-edge__light" id="outer-container__outer">
<div class="inner-edge__light" id="outer-container__inner"> <div class="inner-edge__light" id="outer-container__inner">
<div id="grid-container"> <div id="grid-container">
<div id="main-left__container">
<div <div
class="outer-edge__dark__no-right-edge" class="outer-edge__dark__no-right-edge"
id="tour-display__outer" id="tour-display__outer"
@ -123,10 +124,15 @@
<div class="breaker-wrapper"> <div class="breaker-wrapper">
<div class="breaker-buttons__wrapper"> <div class="breaker-buttons__wrapper">
<button class="breaker-button" id="breaker-on"></button> <button class="breaker-button" id="breaker-on"></button>
<button class="breaker-button" id="breaker-off"></button> <button
class="breaker-button"
id="breaker-off"
></button>
</div> </div>
<div class="breaker-label__wrapper"> <div class="breaker-label__wrapper">
<h4 class="breaker-label__text">herbivore feeding compound</h4> <h4 class="breaker-label__text">
herbivore feeding compound
</h4>
</div> </div>
</div> </div>
</div> </div>
@ -149,7 +155,10 @@
</h1> </h1>
</div> </div>
<div class="tour-display__system-wrapper"> <div class="tour-display__system-wrapper">
<h1 id="sys-three" class="tour-display__system-status"> <h1
id="sys-three"
class="tour-display__system-status"
>
SYSTEM SECURED SYSTEM SECURED
</h1> </h1>
</div> </div>
@ -179,7 +188,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="outer-edge__light__no-right-edge" id="console-display"> <div
class="outer-edge__light__no-right-edge"
id="console-display"
>
<div class="inner-edge__light"> <div class="inner-edge__light">
<div class="outer-edge__dark"> <div class="outer-edge__dark">
<div <div
@ -213,12 +225,16 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="main-right__container">
<div class="outer-edge__light" id="control-panel"> <div class="outer-edge__light" id="control-panel">
<div class="inner-edge__light" id="control-panel__inner"> <div class="inner-edge__light" id="control-panel__inner">
<div class="control-panel__button-display"> <div class="control-panel__button-display">
<div class="buttons button__depressed"> <div class="buttons button__depressed">
<div class=""> <div class="">
<p class="button-text__embossed small-button">VEHICLE</p> <p class="button-text__embossed small-button">
VEHICLE
</p>
</div> </div>
</div> </div>
<div class="outer-edge__light buttons"> <div class="outer-edge__light buttons">
@ -262,7 +278,9 @@
id="video-screen__power" id="video-screen__power"
> >
<div class="power-screen__left"> <div class="power-screen__left">
<div class="power-screen__stored-energy-container"> <div
class="power-screen__stored-energy-container"
>
<p class="power-button__text">Stored Energy</p> <p class="power-button__text">Stored Energy</p>
<h3 <h3
class="power-screen__status-text" class="power-screen__status-text"
@ -277,8 +295,8 @@
</div> </div>
<div class="power-screen__warning-container"> <div class="power-screen__warning-container">
<p class="power-screen__warning-text"> <p class="power-screen__warning-text">
For <u>Emergency</u> Reasons,<br />The mechanism For <u>Emergency</u> Reasons,<br />The
stored<br /> mechanism stored<br />
energy may be discharged<br /> energy may be discharged<br />
without closing the breaker.<br /> without closing the breaker.<br />
For this proceedure plus<br /> For this proceedure plus<br />
@ -292,7 +310,9 @@
<div <div
class="power-screen__contact-position-container" class="power-screen__contact-position-container"
> >
<p class="power-button__text">Contact Position</p> <p class="power-button__text">
Contact Position
</p>
<h3 <h3
class="power-screen__status-text" class="power-screen__status-text"
id="contact-status" id="contact-status"
@ -485,8 +505,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="outer-edge__light"> <div class="outer-edge__light" id="system-icons__container">
<div class="inner-edge__light" id="system-icons__container"> <div class="inner-edge__light">
<div id="system-icons__wrapper"> <div id="system-icons__wrapper">
<p class="white-font-black-background">sys icons</p> <p class="white-font-black-background">sys icons</p>
<div class="system-icons__icon-wrapper"> <div class="system-icons__icon-wrapper">
@ -516,7 +536,9 @@
class="outer-edge__dark modal-container modal-inactive" class="outer-edge__dark modal-container modal-inactive"
id="trash-modal" id="trash-modal"
> >
<div class="inner-edge__dark modal-container__content"> <div
class="inner-edge__dark modal-container__content"
>
<p class="modal-container__text">Test</p> <p class="modal-container__text">Test</p>
<p class="modal-container__text">Test</p> <p class="modal-container__text">Test</p>
<p class="modal-container__text">Test</p> <p class="modal-container__text">Test</p>
@ -534,6 +556,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="outer-edge__light" id="instructions-panel__outer"> <div class="outer-edge__light" id="instructions-panel__outer">
<div class="inner-edge__light" id="instructions-panel__inner"> <div class="inner-edge__light" id="instructions-panel__inner">
<div class="outer-edge__dark"> <div class="outer-edge__dark">

47
public/stylesheets/styles.css
View File

@ -28,32 +28,46 @@ body {
} }
#grid-container { #grid-container {
display: grid; display: flex;
grid-template-rows: auto auto; flex: 1;
grid-template-columns: auto auto; }
justify-items: stretch;
height: 100%; #main-left__container, #main-right__container {
display: flex;
flex-direction: column;
}
#main-left__container {
flex: 0 0 463px;
}
#main-right__container {
display: flex;
flex: 1;
flex-direction: column;
} }
#outer-container__outer { #outer-container__outer {
max-width: 90%; display: flex;
flex: 0 0 836px;
height: 100%; height: 100%;
} }
#outer-container__inner { #outer-container__inner {
height: 100%; height: 100%;
display: flex;
flex: 1;
} }
#console-display { #console-display {
grid-area: 4/1/5/2; flex: 0 0 70px;
} }
#control-panel { #control-panel {
grid-area: 1/2/4/3; flex: 1;
} }
#tour-display__outer { #tour-display__outer {
grid-area: 1/1/4/2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -585,8 +599,7 @@ body {
.control-panel__video-screen { .control-panel__video-screen {
margin-bottom: 10px; margin-bottom: 10px;
min-height: 267px; flex: 0 0 248px;
max-height: 267px;
} }
.video-screen { .video-screen {
@ -684,7 +697,6 @@ body {
} }
#power-display__inner { #power-display__inner {
flex-direction: column; flex-direction: column;
min-width: 486.84px;
} }
.power-screen__button-container { .power-screen__button-container {
@ -716,7 +728,7 @@ body {
} }
.power-button__text { .power-button__text {
margin: 8px 0px; margin: 6px 0px;
} }
.power-screen__contact-position-container, .power-screen__stored-energy-container { .power-screen__contact-position-container, .power-screen__stored-energy-container {
@ -733,7 +745,7 @@ body {
margin: 0; margin: 0;
font-size: x-small; font-size: x-small;
padding-left: 10px; padding-left: 10px;
padding-top: 10px; padding-top: 5px;
} }
.power-screen__status-text { .power-screen__status-text {
@ -814,6 +826,12 @@ body {
#system-icons__container { #system-icons__container {
display: flex; display: flex;
flex: 0 0 70px;
}
#system-icons__container > div, #system-icons__container > div > div {
display: flex;
flex: 1;
} }
#system-icons__wrapper { #system-icons__wrapper {
@ -834,6 +852,7 @@ body {
justify-self: center; justify-self: center;
align-self: center; align-self: center;
padding: 2px; padding: 2px;
margin: 2px 0;
} }
#trash-icon-wrapper { #trash-icon-wrapper {

2
public/stylesheets/styles.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../sass/components/_buttons.scss","../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_display-text.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","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss","../../sass/components/_main-display.scss","../../sass/components/_power-screen.scss"],"names":[],"mappings":"AAkEQ;AClER;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC1BF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AJrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AKtLF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC/DF;EACE;EACA;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxDF;EACE;;;AAGF;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;ACvKF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACzBF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACtCF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACxBF;EACE;;;ACEF;EACE;;;AAIF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE","file":"styles.css"} {"version":3,"sourceRoot":"","sources":["../../sass/components/_buttons.scss","../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_display-text.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","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss","../../sass/components/_main-display.scss","../../sass/components/_power-screen.scss"],"names":[],"mappings":"AAkEQ;AClER;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC1BF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC3DF;EACE;;;AAGF;EACE;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AJrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AKtLF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC/DF;EACE;EACA;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxDF;EACE;;;AAGF;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;ACrKF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACzBF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACxBF;EACE;;;ACEF;EACE;;;AAIF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE","file":"styles.css"}

32
sass/components/_layout.scss
View File

@ -1,30 +1,44 @@
#grid-container { #grid-container {
display: grid; display: flex;
grid-template-rows: auto auto; flex: 1;
grid-template-columns: auto auto; }
justify-items: stretch;
height: 100%; #main-left__container, #main-right__container {
display: flex;
flex-direction: column;
}
#main-left__container {
flex: 0 0 463px;
}
#main-right__container {
display: flex;
flex: 1;
flex-direction: column;
} }
#outer-container__outer { #outer-container__outer {
max-width: 90%; display: flex;
flex: 0 0 836px;
height: 100%; height: 100%;
} }
#outer-container__inner { #outer-container__inner {
height: 100%; height: 100%;
display: flex;
flex: 1;
} }
#console-display { #console-display {
grid-area: 4 / 1 / 5 / 2; flex: 0 0 70px;
} }
#control-panel { #control-panel {
grid-area: 1 / 2 / 4 / 3; flex: 1;
} }
#tour-display__outer { #tour-display__outer {
grid-area: 1 / 1 / 4 / 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

7
sass/components/_system-icons.scss
View File

@ -1,5 +1,11 @@
#system-icons__container { #system-icons__container {
display: flex; display: flex;
flex: 0 0 70px;
}
#system-icons__container > div, #system-icons__container > div > div {
display: flex;
flex: 1;
} }
#system-icons__wrapper { #system-icons__wrapper {
@ -20,6 +26,7 @@
justify-self: center; justify-self: center;
align-self: center; align-self: center;
padding: 2px; padding: 2px;
margin: 2px 0;
} }
#trash-icon-wrapper { #trash-icon-wrapper {

8
sass/components/_video-screen.scss
View File

@ -1,7 +1,6 @@
.control-panel__video-screen { .control-panel__video-screen {
margin-bottom: 10px; margin-bottom: 10px;
min-height: 267px; flex: 0 0 248px;
max-height: 267px;
} }
.video-screen { .video-screen {
@ -98,7 +97,6 @@
#power-display__inner { #power-display__inner {
flex-direction: column; flex-direction: column;
min-width: 486.84px;
} }
.power-screen__button-container { .power-screen__button-container {
@ -130,7 +128,7 @@
} }
.power-button__text { .power-button__text {
margin: 8px 0px; margin: 6px 0px;
} }
.power-screen__contact-position-container, .power-screen__stored-energy-container { .power-screen__contact-position-container, .power-screen__stored-energy-container {
@ -147,7 +145,7 @@
margin: 0; margin: 0;
font-size: x-small; font-size: x-small;
padding-left: 10px; padding-left: 10px;
padding-top: 10px; padding-top: 5px;
} }
.power-screen__status-text { .power-screen__status-text {