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

Fixed formatting nightmare caused by prettier plugin.

Browse Source 
- Removed unicode chars and pasted in symbols.
- Created own border style for console output screen.
This commit is contained in:
Max Stevenson 2020-06-04 12:46:44 +01:00
parent 908cbaa60a
commit 74c4ca0f94
5 changed files with 81 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
index.html
View File

@ -161,29 +161,41 @@
</div>
<div class="outer-edge__light__no-right-edge">
<div class="inner-edge__light">
<p class="button-text__engraved__light large-button" id="rewind-button">
&#9654&#9654
<p
class="button-text__engraved__light large-button"
id="rewind-button"
>
▶▶
</p>
</div>
</div>
<div class="outer-edge__light__no-right-edge">
<div class="inner-edge__light">
<p class="button-text__engraved__light large-button" id="forward-button">
&#9658&#9658
<p
class="button-text__engraved__light large-button"
id="forward-button"
>
▶▶
</p>
</div>
</div>
<div class="outer-edge__light__no-right-edge">
<div class="inner-edge__light">
<p class="button-text__engraved__light large-button" id="play-button">
&#9658
<p
class="button-text__engraved__light large-button"
id="play-button"
>
▶
</p>
</div>
</div>
<div class="outer-edge__light">
<div class="inner-edge__light">
<p class="button-text__engraved__light large-button" id="stop-button">
&#9724
<p
class="button-text__engraved__light large-button"
id="stop-button"
>
⬛
</p>
</div>
</div>
@ -209,11 +221,32 @@
</div>
</div>
</div>
<div class="control-panel__output-display"></div>
<div class="control-panel__output-display">
<div class="outer-edge__light">
<div class="inner-edge__light">
<div class="output-edge__console">
<div class="inner-edge__console">
<div class="output-display__wrapper">
<div class="output-display-content__wrapper">
<p>clear</p>
<p>- Ldg - Volume - JP</p>
</div>
<div class="output-display-content__wrapper">
<p>clear</p>
<p>- Boot Successful - CLEAR</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="outer-edge__light" id="system-icons">
<div class="inner-edge__light"></div>
<div class="inner-edge__light">
<p></p>
</div>
</div>
</div>
</div>

18
public/stylesheets/styles.css
View File

@ -53,6 +53,20 @@ body {
border-right: none;
}
.outer-edge__console {
border-top: solid 1px #6A6767;
border-right: solid 1px #B1ABAB;
border-bottom: solid 1px #B1ABAB;
border-left: solid 1px #6A6767;
}
.inner-edge__console {
border-top: solid 1px #EAE9E9;
border-right: solid 1px #A59B9A;
border-bottom: solid 1px #A59B9A;
border-left: solid 1px #EAE9E9;
}
.control-panel__button-display {
display: flex;
align-items: center;
@ -96,6 +110,10 @@ body {
display: flex;
}
#stop-button {
font-size: 11.55px;
}
.map-display__system-wrapper {
display: flex;
align-items: center;

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"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;ACRF;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;;;AC5CF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACzCF;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;EACA;;;AAGF;EACE;;;ACrBF;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;;;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;;;AChHF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;AAAyB;;;AAG3B;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AC/DF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE","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"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;ACRF;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;;;AAGF;EACE;EACA;EACA;EACA;;;AC1DF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AC7CF;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;EACA;;;AAGF;EACE;;;ACrBF;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;;;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;;;AChHF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;AAAyB;;;AAG3B;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AC/DF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"styles.css"}

15
sass/components/_borders.scss
View File

@ -44,3 +44,18 @@
@extend .outer-edge__light;
border-right: none;
}
.outer-edge__console {
border-top: solid 1px #6A6767;
border-right: solid 1px #B1ABAB;
border-bottom: solid 1px #B1ABAB;
border-left: solid 1px #6A6767;
border-radius: 1px;
}
.inner-edge__console {
border-top: solid 1px #EAE9E9;
border-right: solid 1px #A59B9A;
border-bottom: solid 1px #A59B9A;
border-left: solid 1px #EAE9E9;
}

4
sass/components/_buttons.scss
View File

@ -42,3 +42,7 @@
display: flex;
}
#stop-button {
font-size: 11.55px;
}