Macintosh-Tools/jurassic-park-interface
1
0
Fork 0
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git synced 2024-09-16 01:54:35 +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 { #console-display {
width: fit-content; grid-area: 4 / 1 / 5 / 2;
} }
#console-display > .outer-container__two { #console-display > .outer-container__two {
padding: 5px 10px; padding: 5px 10px;
} }
.room-info__container { .room-info__container {
grid-area: 3 / 1 / 4 / 4;
background-color: #e2eb57; background-color: #e2eb57;
padding: 3px; padding: 3px;
display: flex; display: flex;
width: fit-content;
} }
.room-info__level-display { .room-info__level-display {
@ -219,6 +220,10 @@
margin: 5px 8px 0px 8px; margin: 5px 8px 0px 8px;
} }
#map-display {
grid-area: 1 / 1 / 3 / 2;
}
.map-display__container { .map-display__container {
width: 500px; width: 500px;
border-bottom: 8px solid #438149; border-bottom: 8px solid #438149;
@ -252,6 +257,13 @@
text-align: center; text-align: center;
} }
#grid-container {
display: grid;
grid-template-rows: auto auto auto auto;
grid-template-columns: auto auto;
justify-items: stretch;
}
h1 { h1 {
max-width: fit-content; max-width: fit-content;
background: #438149; background: #438149;

2
index.html
View File

@ -7,7 +7,7 @@
<div class="outer-container__one"> <div class="outer-container__one">
<div class="outer-container__two"> <div class="outer-container__two">
<div class="inner-container__one"> <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__one" id="map-display">
<div class="outer-container__two"> <div class="outer-container__two">
<div class="map-display__container"> <div class="map-display__container">