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

Restructure to make use of new class names.

Browse Source
This commit is contained in:
Max Stevenson 2020-06-01 17:03:01 +01:00
parent a8ee76f4ff
commit 033f3537b4
5 changed files with 111 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
index.html
View File

@ -1,124 +1,124 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="public/stylesheets/styles.css" />
<link
rel="stylesheet"
type="text/css"
href="public/stylesheets/styles.css"
/>
</head>
<body>
<div class="outer-edge__light">
<div class="inner-edge__light">
<div class="inner-container__one">
<div class="inner-container__two" id="grid-container">
<div class="outer-container__one" id="map-display">
<div class="outer-container__two">
<div class="map-display__container">
<div id="grid-container">
<div class="outer-edge__dark-no-right-edge" id="map-display">
<div class="inner-edge__light">
<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-wrapper">
<h1 id="sys-one" class="map-display__system-status">
<h1 id="sys-two" 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-four" class="map-display__system-status">
<h1 id="sys-three" class="map-display__system-status">
SYSTEM SECURED
</h1>
</div>
</div>
<div class="room-info__container">
<div class="room-info__level-display">
<p class="room-info__level-text">LEVEL</p>
<p class="room-info__level-number">2</p>
</div>
<div class="room-info__title-container">
<h3 class="room-info__title">Control Room / Plan View</h3>
<p class="room-info__subtitle">
drawing number - 305pcoffintunaphooter
</p>
</div>
<div class="room-info__level-display">
<p class="room-info__level-text">LEVEL</p>
<p class="room-info__level-number">2</p>
</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">
<p class="room-info__level-text">LEVEL</p>
<p class="room-info__level-number">2</p>
</div>
<div class="room-info__title-container">
<h3 class="room-info__title">Control Room / Plan View</h3>
<p class="room-info__subtitle">
drawing number - 305pcoffintunaphooter
</p>
</div>
<div class="room-info__level-display">
<p class="room-info__level-text">LEVEL</p>
<p class="room-info__level-number">2</p>
</div>
</div>
</div>
<div class="outer-container__one" id="console-display">
<div class="outer-container__two">
<div class="inner-container__one">
<div class="inner-container__two">
<div class="console-display__wrapper">
<div class="screen-container__wrapper">
<div class="screen-container__outer">
<p class="screen-container__text">SCREEN</p>
</div>
<div class="triangle-wrapper">
<div class="outer-triangle__right"></div>
<div class="inner-triangle__right"></div>
</div>
<div class="buffer"></div>
</div>
<div class="outer-edge__light-no-right-edge" id="console-display">
<div class="inner-edge__light">
<div class="outer-edge__dark">
<div class="inner-edge__light">
<div class="console-display__wrapper">
<div class="screen-container__wrapper">
<div class="screen-container__outer">
<p class="screen-container__text">SCREEN</p>
</div>
<div class="island-container__wrapper">
<div class="triangle-wrapper" id="island-triangle">
<div class="outer-triangle__left"></div>
<div class="inner-triangle__left"></div>
</div>
<div class="island-container__outer">
<p class="island-container__text">
Isla Nubar, Costa Rica
</p>
</div>
<div class="triangle-wrapper">
<div class="outer-triangle__right"></div>
<div class="inner-triangle__right"></div>
</div>
<div class="buffer"></div>
</div>
<div class="island-container__wrapper">
<div class="triangle-wrapper" id="island-triangle">
<div class="outer-triangle__left"></div>
<div class="inner-triangle__left"></div>
</div>
<div class="island-container__outer">
<p class="island-container__text">
Isla Nubar, Costa Rica
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="outer-container__one" id="control-panel">
<div class="outer-container__two">
<div class="control-pannel__button-display">
<div class="button-display__button">
<p class="button-text__embossed">VEHICLE</p>
</div>
<div class="outer-container__one buttons">
<div class="outer-container__two">
<p class="button-text__engraved">TOUR</p>
</div>
</div>
<div class="outer-container__one buttons">
<div class="outer-container__two">
<p class="button-text__engraved">POWER</p>
</div>
</div>
<div class="outer-container__one buttons">
<div class="outer-container__two">
<p class="button-text__engraved">TIME</p>
</div>
</div>
<div class="outer-edge__light" id="control-panel">
<div class="inner-edge__light">
<div class="control-pannel__button-display">
<div class="button__depressed">
<p class="button-text__embossed">VEHICLE</p>
</div>
<div class="outer-edge__light buttons">
<div class="inner-edge__light">
<p class="button-text__engraved">TOUR</p>
</div>
</div>
<div class="control-pannel__video-screen">
<div class="outer-edge__light buttons">
<div class="inner-edge__light">
<p class="button-text__engraved">POWER</p>
</div>
</div>
<div class="outer-edge__light buttons">
<div class="inner-edge__light">
<p class="button-text__engraved">TIME</p>
</div>
</div>
<div class="control-pannel__button-control"></div>
<div class="control-pannel__button-display"></div>
<div class="control-pannel__output-display"></div>
</div>
<div class="control-pannel__video-screen"></div>
<div class="control-pannel__button-control"></div>
<div class="control-pannel__button-display"></div>
<div class="control-pannel__output-display"></div>
</div>
<div class="outer-container__one" id="system-icons">
<div class="outer-container__two"></div>
</div>
</div>
<div class="outer-edge__light" id="system-icons">
<div class="inner-edge__light"></div>
</div>
</div>
</div>
</div>
</body>
</body>
</html>

14
public/stylesheets/styles.css
View File

@ -7,7 +7,7 @@ body {
margin: 0 100px;
}
.outer-edge__light {
.outer-edge__light, .outer-edge__light-no-right-edge {
border-left: solid 1px #585356;
border-top: solid 1px #585356;
border-right: solid 1px #c8c8c8;
@ -31,7 +31,7 @@ body {
border-top: solid 2px #A7A8AE;
}
.outer-edge__dark {
.outer-edge__dark, .outer-edge__dark-no-right-edge {
border-left: solid 1px #302a2a;
border-top: solid 1px #302a2a;
border-right: solid 1px #c1c2c6;
@ -39,6 +39,14 @@ body {
border-radius: 1px;
}
.outer-edge__dark-no-right-edge {
border-right: none;
}
.outer-edge__light-no-right-edge {
border-right: none;
}
.control-pannel__button-display {
display: flex;
align-items: center;
@ -59,7 +67,7 @@ body {
.button__depressed {
width: fit-content;
box-shadow: inset 0 0 2px #515151;
box-shadow: inset 0 0 2px #4C4C4C;
}
.map-display__system-wrapper {

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"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;ACNF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AC7BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;ACpBF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrCF;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","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"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;ACNF;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;;;ACvCF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;ACpBF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrCF;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","file":"styles.css"}

10
sass/components/_borders.scss
View File

@ -29,3 +29,13 @@
border-bottom: solid 1px #c1c2c6;
border-radius: 1px;
}
.outer-edge__dark-no-right-edge {
@extend .outer-edge__dark;
border-right: none;
}
.outer-edge__light-no-right-edge {
@extend .outer-edge__light;
border-right: none;
}

2
sass/components/_buttons.scss
View File

@ -18,6 +18,6 @@
.button__depressed {
width: fit-content;
box-shadow: inset 0 0 2px #515151;
box-shadow: inset 0 0 2px #4C4C4C;
}