diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css index 493576d0..bbc58ac8 100644 --- a/client/assets/styles/instance.css +++ b/client/assets/styles/instance.css @@ -54,7 +54,6 @@ /* VBOX */ .vbox { grid-area: vbox; - display: grid; grid-template-rows: min-content min-content; grid-template-areas: diff --git a/client/assets/styles/instance.mobile.css b/client/assets/styles/instance.mobile.css new file mode 100644 index 00000000..ea3ca032 --- /dev/null +++ b/client/assets/styles/instance.mobile.css @@ -0,0 +1,36 @@ +@media (max-height: 800px), (max-width: 800px) { + .instance { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: min-content; + grid-template-areas: + "top" + "vbox" + } + + .instance .equip { display: none; } + .instance .info { display: none; } + .instance .cryp-list { display: none; } + + .vbox { + grid-area: vbox; + display: grid; + grid-template-rows: min-content min-content min-content; + grid-template-columns: 1fr; + grid-template-areas: + "vbox" + "inventory" + "combiner"; + } + + .vbox-inventory { + margin-left: 0; + } + + .vbox-combiner { + grid-area: combiner; + } + + + +} \ No newline at end of file diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.css index a667c5ac..366d3e96 100644 --- a/client/assets/styles/styles.mobile.css +++ b/client/assets/styles/styles.mobile.css @@ -1,6 +1,6 @@ @media (max-height: 800px), (max-width: 800px) { #cryps { - font-size: 50%; + font-size: 55%; grid-template-columns: min-content 1fr; grid-template-rows: min-content 1fr; grid-template-areas: @@ -8,9 +8,15 @@ "main main"; } - svg { - height: 1em; + table td { + height: 2.5em; } + + svg { + width: 5em; + } + + nav { opacity: 0; position: fixed; @@ -53,4 +59,5 @@ opacity: 0.1; pointer-events: none; } + } \ No newline at end of file diff --git a/client/index.js b/client/index.js index f85e70bb..8f409800 100644 --- a/client/index.js +++ b/client/index.js @@ -1,6 +1,7 @@ require('./assets/styles/styles.css'); require('./assets/styles/styles.mobile.css'); require('./assets/styles/instance.css'); +require('./assets/styles/instance.mobile.css'); require('./assets/styles/game.css'); // kick it off