diff --git a/gorge.css b/gorge.css index 2c5b49f..d09762b 100644 --- a/gorge.css +++ b/gorge.css @@ -69,16 +69,17 @@ button { #upgrades-area { position: absolute; - width: 30%; - right: 35%; + width: 400px; + right: 5%; top: 20%; + height: 20%; } #buildings-area { position: absolute; - width: 35vmin; + width: 400px; right: 5%; - top: 20%; + top: 40%; height: 80%; max-height: 70vh; padding-bottom: 10px; @@ -247,13 +248,6 @@ button { } @media (max-aspect-ratio: 1/1) { - #upgrades-area { - position: absolute; - top: 15%; - left: 50%; - height: 35%; - width: 50%; - } #resources-area { top: 15%; @@ -263,10 +257,6 @@ button { #tasty-micro { width: 30vw; } - - #upgrades-list { - max-height: 25vh !important; - } } .title { @@ -277,7 +267,7 @@ button { #upgrades-list { display: flex; flex-wrap: wrap; - max-height: 70vh; + max-height: 20%; padding-bottom: 75px; overflow-x: hidden; overflow-y: scroll; @@ -285,7 +275,7 @@ button { #upgrade-tooltip { position: absolute; - width: 200px; + width: 400px; background: #333; display: none; z-index: 1; @@ -329,9 +319,8 @@ button { } .upgrade-button { - width: 100px; - height: 100px; - margin: 10px; + width: 80px; + height: 80px; display: block; background-color: #444; transition: 0.2s; @@ -341,13 +330,14 @@ button { .upgrade-button > .fas { width: 100px; height: 100px; - font-size: 75px; - transform: translate(0%, -37.5%); + font-size: 60px; + transform: translate(-10px, -40px); opacity: 0.5; + pointer-events: none; } .upgrade-button:hover { - transform: scale(1.25, 1.25); + background-color: #999; } .upgrade-button-inactive { diff --git a/gorge.html b/gorge.html index 886f03b..bba6abf 100644 --- a/gorge.html +++ b/gorge.html @@ -61,7 +61,6 @@