paritybit.ca

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:
M
build/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%;
+    }
 }