Macintosh-Tools
/
jurassic-park-interface
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fixed the CSS hellscape created this morning.

This commit is contained in:
Max Stevenson 2020-06-08 18:44:26 +01:00
parent 6f9ff21a63
commit 8f6dad1634
7 changed files with 67 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -4,7 +4,7 @@
<link
rel="stylesheet"
type="text/css"
href="public/stylesheets/styles.css"
href="./public/stylesheets/styles.css"
/>
</head>
<body>
@ -89,7 +89,7 @@
</div>
</div>
<div class="outer-edge__light" id="control-panel">
<div class="inner-edge__light">
<div class="inner-edge__light" id="control-panel__inner">
<div class="control-panel__button-display">
<div class="button__depressed">
<p class="button-text__embossed small-button">VEHICLE</p>

43
public/stylesheets/styles.css
View File

@ -22,6 +22,7 @@ body {
border-bottom: solid 1px #c8c8c8;
border-radius: 1px;
background-color: #797979;
height: 100%;
}
.inner-edge__light, .inner-edge__light__no-padding {
@ -30,6 +31,7 @@ body {
border-left: solid 2px #c8c8c8;
border-top: solid 2px #c8c8c8;
padding: 5px;
height: 100%;
}
.inner-edge__dark {
@ -37,6 +39,7 @@ body {
border-right: solid 2px #3F3D43;
border-left: solid 2px #A7A8AE;
border-top: solid 2px #A7A8AE;
height: 100%;
}
.outer-edge__dark, .outer-edge__dark__no-right-edge {
@ -45,18 +48,22 @@ body {
border-right: solid 1px #c1c2c6;
border-bottom: solid 1px #c1c2c6;
border-radius: 1px;
height: 100%;
}
.inner-edge__light__no-padding {
padding: 0px;
height: 100%;
}
.outer-edge__dark__no-right-edge {
border-right: none;
height: 100%;
}
.outer-edge__light__no-right-edge {
border-right: none;
height: 100%;
}
.outer-edge__console {
@ -65,6 +72,7 @@ body {
border-bottom: solid 1px #B1ABAB;
border-left: solid 1px #6A6767;
border-radius: 1px;
height: 100%;
}
.inner-edge__console {
@ -73,6 +81,7 @@ body {
border-bottom: solid 1px #A59B9A;
border-left: solid 1px #EAE9E9;
background-color: white;
height: 100%;
}
.control-panel__button-display {
@ -112,6 +121,9 @@ body {
.map-display__system-wrapper {
background-color: #448149;
display: flex;
justify-content: center;
flex-direction: column;
}
.map-display__center-section {
@ -132,14 +144,15 @@ body {
.map-display__system-status {
background: #438149;
color: #ededed;
margin: 0 auto;
margin: 0;
}
.map-display__system-status__container {
display: flex;
flex: 1;
justify-content: space-between;
border: 10px solid #438149;
border-top: 10px solid #438149;
border-bottom: 10px solid #438149;
}
#sys-one {
@ -147,7 +160,8 @@ body {
text-orientation: mixed;
}
#sys-one, #sys-four {
#sys-one,
#sys-four {
font-size: 38px;
}
@ -159,7 +173,8 @@ body {
padding: 8px 8px 4px 8px;
}
#sys-three, #sys-two {
#sys-three,
#sys-two {
font-size: 26px;
}
@ -173,6 +188,7 @@ body {
grid-template-rows: auto auto;
grid-template-columns: auto auto;
justify-items: stretch;
height: 100%;
}
#outer-container__outer {
@ -184,18 +200,12 @@ body {
height: 100%;
}
#system-icons {
grid-area: 4/2/5/3;
}
#console-display {
grid-area: 4/1/5/2;
}
#control-panel {
display: flex;
flex-direction: column;
grid-area: 1/2/2/3;
grid-area: 1/2/4/3;
}
#map-display__outer {
@ -210,7 +220,13 @@ body {
flex: 1;
}
#control-panel__inner {
display: flex;
flex-direction: column;
}
.room-info__container {
grid-area: 3/1/4/4;
background-color: #e2eb57;
padding: 3px;
display: flex;
@ -469,6 +485,7 @@ body {
.button-control__bottom {
display: flex;
flex-direction: row;
height: 100%;
}
.button-control__top > div {
@ -480,6 +497,10 @@ body {
flex: 1;
}
.control-panel__output-display {
flex: 1;
}
.output-display__wrapper {
display: flex;
flex-direction: column;

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

@ -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;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"}
{"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;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;;;ACrEF;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;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC9DF;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;;;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;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","file":"styles.css"}

9
sass/components/_borders.scss
View File

@ -5,6 +5,7 @@
border-bottom: solid 1px #c8c8c8;
border-radius: 1px;
background-color: #797979;
height: 100%;
}
.inner-edge__light {
@ -13,6 +14,7 @@
border-left: solid 2px #c8c8c8;
border-top: solid 2px #c8c8c8;
padding: 5px;
height: 100%;
}
.inner-edge__dark {
@ -20,6 +22,7 @@
border-right: solid 2px #3F3D43;
border-left: solid 2px #A7A8AE;
border-top: solid 2px #A7A8AE;
height: 100%;
}
.outer-edge__dark {
@ -28,21 +31,25 @@
border-right: solid 1px #c1c2c6;
border-bottom: solid 1px #c1c2c6;
border-radius: 1px;
height: 100%;
}
.inner-edge__light__no-padding {
@extend .inner-edge__light;
padding: 0px;
height: 100%;
}
.outer-edge__dark__no-right-edge {
@extend .outer-edge__dark;
border-right: none;
height: 100%;
}
.outer-edge__light__no-right-edge {
@extend .outer-edge__light;
border-right: none;
height: 100%;
}
.outer-edge__console {
@ -51,6 +58,7 @@
border-bottom: solid 1px #B1ABAB;
border-left: solid 1px #6A6767;
border-radius: 1px;
height: 100%;
}
.inner-edge__console {
@ -59,4 +67,5 @@
border-bottom: solid 1px #A59B9A;
border-left: solid 1px #EAE9E9;
background-color: white;
height: 100%;
}

5
sass/components/_control-panel.scss
View File

@ -12,6 +12,7 @@
.button-control__bottom {
display: flex;
flex-direction: row;
height: 100%;
}
.button-control__top > div {
@ -21,4 +22,8 @@
.button-control__bottom > div {
flex: 1;
}
.control-panel__output-display {
flex: 1;
}

16
sass/components/_display-text.scss
View File

@ -1,5 +1,8 @@
.map-display__system-wrapper {
background-color: #448149;
display: flex;
justify-content: center;
flex-direction: column;
}
.map-display__center-section {
@ -21,14 +24,15 @@
.map-display__system-status {
background: #438149;
color: #ededed;
margin: 0 auto;
margin: 0;
}
.map-display__system-status__container {
display: flex;
flex: 1;
justify-content: space-between;
border: 10px solid #438149;
border-top: 10px solid #438149;
border-bottom: 10px solid #438149;
}
#sys-one {
@ -36,7 +40,8 @@
text-orientation: mixed;
}
#sys-one, #sys-four {
#sys-one,
#sys-four {
font-size: 38px;
}
@ -48,7 +53,8 @@
padding: 8px 8px 4px 8px;
}
#sys-three, #sys-two {
#sys-three,
#sys-two {
font-size: 26px;
}
@ -56,5 +62,3 @@
writing-mode: tb-rl;
transform: rotate(-180deg);
}

17
sass/components/_layout.scss
View File

@ -8,29 +8,23 @@
#outer-container__outer {
max-width: 85%;
height: 85%;
height: 100%;
}
#outer-container__inner {
height: 100%;
}
#system-icons {
grid-area: 4 / 2 / 5 / 3;
}
#console-display {
grid-area: 4 / 1 / 5 / 2;
}
#control-panel {
display: flex;
flex-direction: column;
grid-area: 1 / 2 / 2 / 3;
grid-area: 1 / 2 / 4 / 3;
}
#map-display__outer {
grid-area: 1 / 1 / 3 / 2;
grid-area: 1 / 1 / 4 / 2;
display: flex;
flex-direction: column;
}
@ -40,3 +34,8 @@
flex-direction: column;
flex: 1;
}
#control-panel__inner {
display: flex;
flex-direction: column;
}