diff --git a/src/003-assets/CSS/arcologyBuilding.css b/src/003-assets/CSS/arcologyBuilding.css index 454882e38f22d141cd6da8551bf7fdf21efd0b1d..7e478d34e2d7e88f1485a524b4af891edb1d84cf 100644 --- a/src/003-assets/CSS/arcologyBuilding.css +++ b/src/003-assets/CSS/arcologyBuilding.css @@ -1,30 +1,36 @@ -div.building { +.building { display: flex; flex-direction: column; width: 100%; } -div.building.basement { +.building.basement { border-top: solid 1px #333333; margin-top: -1px; background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, #333333 20px, #333333 30px); } -div.building div.row { +.building .row { display: flex; flex-direction: row; - width: 70%; + width: 95%; margin: 0 auto; justify-content: center; } -div.building div.outerCell { +@media only screen and (min-width: 1600px) { + .building .row { + width: 70%; + } +} + +.building .outerCell { /* fill cell fully, part 1: trick to fill the full height even if content is smaller */ display: flex; flex-direction: row; } -div.building div.innerCell { +.building .innerCell { margin: 3px; border: 5px solid; padding: 2px; @@ -35,7 +41,7 @@ div.building div.innerCell { background-color: #111; } -div.building div.decorative { +.building .decorative { outline: white solid 5px; outline-offset: -8px; height: 2em; @@ -43,133 +49,133 @@ div.building div.decorative { /* introduction special formatting */ /* makes all links unusable */ -.intro div.building a { +.intro .building a { color: white; pointer-events: none; cursor: default; } -.intro div.building .hotkey { +.intro .building .hotkey { display: none; } /* penthouse formatting */ -div.building div.gridWrapper { +.building .gridWrapper { display: grid; } -div.building div.gridWrapper.grid1 { +.building .gridWrapper.grid1 { grid-template-columns: 100%; } -div.building div.gridWrapper.grid2 { +.building .gridWrapper.grid2 { grid-template-columns: repeat(2, 50%); } -div.building div.gridWrapper.grid3 { +.building .gridWrapper.grid3 { grid-template-columns: repeat(3, 33.3%); } -div.building div.gridWrapper div { +.building .gridWrapper div { display: inline flow-root; line-height: 1.1; padding-bottom: 0.3em; } -div.building div.collapsed { +.building .collapsed { display: inline flow-root; margin: 0 0.2em; } /* border color for each cell */ -div.building div.row div.apartments { +.building .row .apartments { border-color: limegreen; } -div.building div.row div.arcade { +.building .row .arcade { border-color: deeppink; } -div.building div.row div.brothel { +.building .row .brothel { border-color: violet; } -div.building div.row div.barracks { +.building .row .barracks { border-color: olivedrab; } -div.building div.row div.club { +.building .row .club { border-color: orchid; } -div.building div.row div.corporateMarket { +.building .row .corporateMarket { border-color: purple; } -div.building div.row div.dairy { +.building .row .dairy { border-color: white; } -div.building div.row div.denseApartments { +.building .row .denseApartments { border-color: seagreen; } -div.building div.row div.empty { +.building .row .empty { border-color: lightgray; } -div.building div.row div.farmyard { +.building .row .farmyard { border-color: brown; } -div.building div.row div.fsShops { +.building .row .fsShops { border-color: mediumpurple; } -div.building div.row div.manufacturing { +.building .row .manufacturing { border-color: slategray; } -div.building div.row div.markets { +.building .row .markets { border-color: mediumorchid; } -div.building div.row div.nursery { +.building .row .nursery { border-color: deepskyblue; } -div.building div.row div.luxuryApartments { +.building .row .luxuryApartments { border-color: palegreen; } -div.building div.row div.pens { +.building .row .pens { border-color: goldenrod; } -div.building div.row div.penthouse { +.building .row .penthouse { border-color: teal; } -div.building div.row div.pit { +.building .row .pit { border-color: orangered; } -div.building div.row div.private { +.building .row .private { border-color: red; } -div.building div.row div.shops { +.building .row .shops { border-color: thistle; } -div.building div.row div.sweatshops { +.building .row .sweatshops { border-color: gray; } -div.building div.row div.transportHub { +.building .row .transportHub { border-color: magenta; } -div.building div.row div.weaponsManufacturing { +.building .row .weaponsManufacturing { border-color: springgreen; }