Macintosh-Tools/jurassic-park-interface
1
0
Fork 0
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git synced 2024-09-07 03:54:27 +00:00
Code Issues Projects Releases Wiki Activity

Grid layout implemented.

Browse Source
This commit is contained in:
Max Stevenson 2020-05-29 19:22:51 +01:00
parent c8b790990f
commit fefc542d4a
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app.css
View File

@ -156,17 +156,18 @@
}
#console-display {
width: fit-content;
grid-area: 4 / 1 / 5 / 2;
}
#console-display > .outer-container__two {
padding: 5px 10px;
}
.room-info__container {
grid-area: 3 / 1 / 4 / 4;
background-color: #e2eb57;
padding: 3px;
display: flex;
width: fit-content;
}
.room-info__level-display {
@ -219,6 +220,10 @@
margin: 5px 8px 0px 8px;
}
#map-display {
grid-area: 1 / 1 / 3 / 2;
}
.map-display__container {
width: 500px;
border-bottom: 8px solid #438149;
@ -252,6 +257,13 @@
text-align: center;
}
#grid-container {
display: grid;
grid-template-rows: auto auto auto auto;
grid-template-columns: auto auto;
justify-items: stretch;
}
h1 {
max-width: fit-content;
background: #438149;

2
index.html
View File

@ -7,7 +7,7 @@
<div class="outer-container__one">
<div class="outer-container__two">
<div class="inner-container__one">
<div class="inner-container__two">
<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">