| @@ -20,10 +20,31 @@ body.dark { | |||||
| font-size: 60px; | font-size: 60px; | ||||
| } | } | ||||
| #top-bar { | |||||
| background-color: #322; | |||||
| position: absolute; | |||||
| width: 100%; | |||||
| height: 10%; | |||||
| top: 0%; | |||||
| left: 0%; | |||||
| text-align: center; | |||||
| margin: auto; | |||||
| } | |||||
| #resources-area { | |||||
| position: absolute; | |||||
| text-align: center; | |||||
| width: 20%; | |||||
| left: 0%; | |||||
| top: 10%; | |||||
| margin: auto; | |||||
| } | |||||
| #buildings-area { | #buildings-area { | ||||
| position: absolute; | position: absolute; | ||||
| width: 20%; | width: 20%; | ||||
| right: 5%; | right: 5%; | ||||
| top: 10%; | |||||
| height: 100%; | height: 100%; | ||||
| overflow-y: scroll; | overflow-y: scroll; | ||||
| } | } | ||||
| @@ -78,6 +99,7 @@ body.dark { | |||||
| position: absolute; | position: absolute; | ||||
| width: 20%; | width: 20%; | ||||
| right: 35%; | right: 35%; | ||||
| top: 10%; | |||||
| } | } | ||||
| #upgrades-list { | #upgrades-list { | ||||
| @@ -18,11 +18,15 @@ | |||||
| </head> | </head> | ||||
| <body class="dark"> | <body class="dark"> | ||||
| <div id="resources">Resources</div> | |||||
| <div id="resource-food">Food: 0</div> | |||||
| <div id="productivity"></div> | |||||
| <div id="top-bar"> | |||||
| vidya gaem | |||||
| </div> | |||||
| <div id="resources-area"> | |||||
| <div id="resources">Resources</div> | |||||
| <div id="resource-food">Food: 0</div> | |||||
| <div id="productivity"></div> | |||||
| </div> | |||||
| <button id="tasty-micro">Eat Micro</button> | <button id="tasty-micro">Eat Micro</button> | ||||
| <div id="buildings-area"> | <div id="buildings-area"> | ||||
| <div id="buildings">Buildings</div> | <div id="buildings">Buildings</div> | ||||
| </div> | </div> | ||||