paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit e52470e4eb822b677519a9eb398b7dc840366a44
parent aec24b6bbe5949774db0876776bae3145358cb42
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Tue, 16 Apr 2019 00:06:53 -0400

Vastly improve initiative page's layout and design on smaller screens

Diffstat:
Mbuild/base.css | 52++++++++++++++++++++++++++++++++++++++++++++++------
1 file changed, 46 insertions(+), 6 deletions(-)

diff --git a/build/base.css b/build/base.css @@ -207,7 +207,7 @@ ul.inline { /* ============================ */ .initiative-list { - width: 40%; + width: 60%; padding: 1em 0 1em 0; } @@ -230,23 +230,28 @@ ul.inline { .in-val { margin-right: 15px; - position: relative; text-align: center; - left: 55px; + font-weight: bold; + position: relative; + float: right; + left: -180px; width: 10%; } .in-rem-btn, .in-edit-btn { border-radius: 30px; position: relative; + float: right; } .in-rem-btn { - left: 60px; + left: 105px; + top: 16px; } .in-edit-btn { - left: 45px; + left: -60px; + top: 16px; } .red-x { @@ -266,7 +271,7 @@ ul.inline { /* =============================== */ /* Ensure proper scaling with differently-sized displays */ -@media all and (max-width: 800px) { +@media all and (max-width: 900px) { #side-bar { float: center; width: 50%; @@ -287,6 +292,29 @@ ul.inline { .initiative-list { width: 90%; } + .in-name { + width: 100%; + text-align: center; + } + .in-edit-btn, .in-rem-btn { + height: 40px; + float: none; + } + .in-rem-btn { + left: 60px; + width: 100px; + top: 0px; + } + .in-edit-btn { + left: 45px; + width: 70px; + top: 0px; + } + .in-val { + left: 20px; + width: 10%; + float: none; + } } @media all and (max-width: 550px) { @@ -296,4 +324,16 @@ ul.inline { clear: both; margin: 0% 5% 30px 5%; } + #add-char>button, #add-char>*>* { + margin-top: 0.5em; + height: 30px; + margin-left: 20%; + } + #add-char>button { + height: 40px; + margin-left: 30%; + } + #init-val { + margin-left: 22%; + } }