From 7b1a6df40b1fd1b20cae8a7f6dfc4bf66390ddcb Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 4 Nov 2019 10:27:22 +1000 Subject: [PATCH] landscape is the way --- client/assets/styles/game.less | 101 +--------------- client/assets/styles/instance.mobile.less | 141 +--------------------- client/assets/styles/menu.less | 26 ---- client/assets/styles/styles.mobile.less | 122 +------------------ 4 files changed, 3 insertions(+), 387 deletions(-) diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index fe5dd570..ce49b4b1 100644 --- a/client/assets/styles/game.less +++ b/client/assets/styles/game.less @@ -347,103 +347,4 @@ max-height: 100%; max-width: 100%; // height: 5em; -} - -@media (max-width: 1000px) { - .game { - grid-template-areas: - "opponent" - "target " - "player "; - - grid-template-rows: 1fr 0.2fr 1.5fr; - grid-template-columns: 1fr; - - .game-construct { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: min-content 1fr; - - .left { - width: 100%; - grid-template-areas: - "skills" - "effects"; - grid-template-columns: 1fr; - grid-template-rows: min-content min-content; - } - - .skills { - button { - padding: 0 0.5em ; - margin: 0; - } - button.active { - background: #2c2c2c; - } - } - - .stats div { - padding: 0; - } - - .stats .max { - display: none; - } - - .stats .value { - display: flex; - } - - .stats svg { - height: 1em; - } - - .stats div { - margin: 0 0.2em; - } - - .effects { - font-size: 100%; - } - - .stats, .name { - font-size: 75%; - } - - .skills button { - font-size: 50%; - } - - .skill-description { - font-size: 65%; - } - } - - .player { - width: calc(100% - 1em); - bottom: 3em; - height: calc(50% - 3em); - } - - .opponent { - width: calc(100% - 1em); - .game-construct { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: min-content 1fr; - } - } - - #targeting, .resolving-skill { - width: calc(100% - 1em); - } - - .player { - width: calc(100% - 1em); - bottom: 3em; - height: calc(50% - 3em); - } - } - -} +} \ No newline at end of file diff --git a/client/assets/styles/instance.mobile.less b/client/assets/styles/instance.mobile.less index 9fec777b..925b487f 100644 --- a/client/assets/styles/instance.mobile.less +++ b/client/assets/styles/instance.mobile.less @@ -17,9 +17,7 @@ @media (max-width: 800px) { .instance { - overflow-y: scroll; - font-size: 8pt; - display: grid; + font-size: 6pt; grid-template-columns: 1fr; grid-template-rows: min-content 1fr; grid-template-areas: @@ -30,141 +28,4 @@ display: none; } } - - .instance .nav-btn { display: initial; } - - .vbox { - grid-area: vbox; - margin-bottom: 0; - display: grid; - grid-template-rows: min-content min-content min-content min-content; - grid-template-columns: 1fr; - grid-template-areas: - "vbox" - "varrow" - "inventory" - "combiner"; - - &:not(.visible) { - display: none; - } - - .vbox-vbox { - margin-bottom: 1em; - } - } - - .vbox-arrow { - display: none; - } - - .vbox-inventory .vbox-hdr { - display: block; - } - - .vbox-arrow-mobile { - display: block; - grid-area: varrow; - width: 100%; - text-align: center; - margin: 0; - } - - .construct-list { - display: grid; - grid-auto-rows: 1fr; - - .instance-construct:not(.visible) { - display: none; - }; - } - - .vbox-inventory { - margin-left: 0; - } - - .vbox-combiner { - margin-left: 0; - } - - .equip .specs { - margin-top: 0.5em; - border: none; - border-bottom: 1px solid #444; - } - - .equip .skills { - border: none; - border-bottom: 1px solid #444; - } - - .instance-construct { - display: grid; - grid-template-rows: min-content min-content min-content 1fr min-content; - grid-template-areas: - "name " - "skills " - "specs " - "avatar " - "stats "; - - border: 0; - padding: 0; - - transition-property: all; - transition-duration: 0.25s; - transition-delay: 0; - transition-timing-function: ease; - } - - .instance-construct:first-child { - border-left-width: 0; - } - - .instance-construct:not(:last-child) { - border-right: 1px solid #222; - } - - .instance-construct .skills { - flex-flow: column; - } - - .instance-construct .skills button { - margin: 0; - } - - .instance-construct .specs { - margin: 0; - } - - .construct-list .stats { - flex-flow: row wrap; - text-align: center; - } - - .instance-construct .stats div.speed { - order: -1; - flex: 1 0 100%; - margin: 0; - } - - .instance-construct .stats div { - flex: 1 1 33%; - } - - .instance-nav { - display: flex; - grid-area: nav; - margin-right: 0; - border-top: 2px solid #444; - } - - .instance-nav button { - font-size: 150%; - border-right: 2px solid #444; - } - - .instance-nav button:last-child { - border: none; - } } \ No newline at end of file diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less index 672e928e..5445b158 100644 --- a/client/assets/styles/menu.less +++ b/client/assets/styles/menu.less @@ -215,29 +215,3 @@ section { } } -@media (max-width: 800px) { - section { - grid-template-columns: 1fr; - - .list { - grid-template-columns: 1fr 1fr; - - &.play { - grid-template-columns: 1fr; - } - } - - } - - .menu .team { - grid-template-columns: 1fr; - - .construct { - height: 10em; - } - } - - .account { - grid-template-columns: 1fr; - } -} \ No newline at end of file diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index be259075..0eb2a954 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -4,127 +4,7 @@ } #mnml { - font-size: 12pt; - padding: 0; - grid-template-columns: 1fr; - grid-template-rows: 10fr 1fr; - grid-template-areas: - "main" - "footer"; - - height: 100vh; - max-height: initial; - min-height: initial; + font-size: 6pt; } - table td { - height: 2.5em; - } - - nav { - display: none; - } - - aside { - display: none; - } - - footer { - display: flex; - position: fixed; - bottom: 0; - width: 100%; - - button { - font-size: 90%; - } - } - - #nav-btn, #instance-nav { - display: unset; - } - - #mnml.nav-visible nav { - padding: 0.5em; - margin: 0; - display: block; - grid-area: main; - } - - #mnml.nav-visible main { - display: none; - } - - main { - overflow-x: hidden; - overflow-y: initial; - max-height: 100vh; - padding: 0 0.5em; - } - - .welcome .login { - width: 100%; - } - - .welcome .options { - width: 100%; - flex-flow: row wrap; - } - - .welcome .options button { - flex: 1 0 50%; - } - - .timer-container { - margin: 0.5em 0 0 0; - } - - .mobile-title { - display: block; - margin-bottom: 1em; - } - - .menu-instances { - display: grid; - - grid-template-columns: 1fr; - grid-template-areas: - "constructs" - "inventory" - "games"; - } - - .menu { - .options { - display: grid; - grid-template-columns: 1fr; - - button:not(:last-child) { - border: 2px solid #222; - } - - button.logo { - border: none; - margin-right: 0; - margin-top: 0.5em; - background-position: center; - } - } - } - - section { - .list { - grid-template-columns: 1fr; - } - } - - .account { - div { - padding: 0; - } - } - - .play-p { - display: none; - } }