Working on system secure border.

This commit is contained in:
Max Stevenson 2020-05-28 14:49:52 +01:00
parent 7bc59a02a9
commit c8b790990f
2 changed files with 67 additions and 9 deletions

47
app.css
View File

@ -141,8 +141,8 @@
border-radius: 1px;
border-top: 1px solid black;
border-left: none;
border-bottom: 0.5px solid #4B4B4B;
border-right: 0.5px solid #4B4B4B;
border-bottom: 0.5px solid #4b4b4b;
border-right: 0.5px solid #4b4b4b;
margin: 0px;
}
@ -163,7 +163,7 @@
}
.room-info__container {
background-color: #E2EB57;
background-color: #e2eb57;
padding: 3px;
display: flex;
width: fit-content;
@ -171,7 +171,6 @@
.room-info__level-display {
width: fit-content;
}
.room-info__level-text {
@ -184,7 +183,7 @@
margin-top: 5px;
}
.room-info__level-number {
.room-info__level-number {
display: flex;
align-items: center;
justify-content: center;
@ -207,7 +206,8 @@
text-align: center;
font-style: italic;
margin: 5px 8px;
padding: 4px 0;
padding: 8px 0;
font-size: x-large;
}
.room-info__subtitle {
@ -215,13 +215,46 @@
background-color: black;
text-align: center;
font-style: italic;
padding: 2px 36px;
padding: 4px 36px;
margin: 5px 8px 0px 8px;
}
.map-display__container {
width: 500px;
border-bottom: 8px solid #438149;
border-top: 8px solid #438149;
display: flex;
height: 500px;
justify-content: space-between;
}
.map-display__system-wrapper {
display: flex;
align-items: center;
background-color: #448149;
}
.map-display__center-section {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#sys-one {
writing-mode: vertical-rl;
text-orientation: mixed;
text-align: center;
}
#sys-four {
writing-mode: tb-rl;
transform: rotate(-180deg);
text-align: center;
}
h1 {
max-width: fit-content;
background: #438149;
color: #ededed;
margin: 0 auto;
}

View File

@ -10,7 +10,30 @@
<div class="inner-container__two">
<div class="outer-container__one" id="map-display">
<div class="outer-container__two">
<h1>SYSTEM SECURED</h1>
<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-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">
SYSTEM SECURED
</h1>
</div>
</div>
<div class="room-info__container">
<div class="room-info__level-display">
<p class="room-info__level-text">LEVEL</p>
@ -18,7 +41,9 @@
</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>
<p class="room-info__subtitle">
drawing number - 305pcoffintunaphooter
</p>
</div>
<div class="room-info__level-display">
<p class="room-info__level-text">LEVEL</p>