Frontpage facelift

4 files changed, 76 insertions, 137 deletions

diff --git a/public/css/coinos.css b/public/css/coinos.css
index dc2a3e50..2f2a2b98 100644
--- a/public/css/coinos.css
+++ b/public/css/coinos.css
@@ -1,12 +1,23 @@
+@media (min-width: 580px) {
+  .mobile {
+    display: none;
+  }
+}
+@media (max-width: 360px) {
+  .tablet {
+    display: none;
+  }
+}
 h1 {
   margin-top: 0;
 }
 div.container-fluid {
-  max-width: 480px;
+  max-width: 580px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
-  padding-bottom: 50px;
+  padding: 0;
+  padding-bottom: 10px;
 }
 .navbar-toggle {
   background-color: #428bca;
@@ -33,6 +44,35 @@ div.container-fluid {
 #connection {
   display: none;
 }
+.numpad .btn,
+.tippad .btn {
+  margin-bottom: 5px;
+  padding: 10px;
+  width: 4.5em;
+}
+.numpad h2,
+.tippad h2 {
+  margin-bottom: 2px;
+  margin-top: 1px;
+}
+.numpad {
+  width: 18em;
+}
+.rates {
+  width: 14em;
+  margin-top: -15px;
+  text-align: right;
+}
+#payment h2 {
+  margin-bottom: 2px;
+}
+.no-transition {
+  -webkit-transition: height 0.01s;
+  -moz-transition: height 0.01s;
+  -ms-transition: height 0.01s;
+  -o-transition: height 0.01s;
+  transition: height 0.01s;
+}
 #nav .nav {
   margin-top: 30px;
 }
@@ -77,12 +117,12 @@ div#calculator #received {
 div#calculator strong#total {
   font-size: 30px;
 }
-div#calculator p#address {
-  font-size: 16px;
+div#calculator #address {
   padding-top: 10px;
 }
-div#calculator p#address a {
-  color: #000;
+div#calculator #address a {
+  color: #fff;
+  text-decoration: none;
 }
 div#calculator #title {
   display: none;
@@ -95,12 +135,15 @@ div#calculator #logo {
   display: none;
   padding: 10px 0;
   margin-bottom: 10px;
-  max-height: 250px;
+  max-height: 225px;
   width: 100%;
 }
 div#calculator #error {
   margin-top: 10px;
 }
+div#calculator #qr {
+  padding-bottom: 10px;
+}
 td#total {
   font-weight: bold;
   text-align: right;
@@ -116,29 +159,6 @@ td#total {
   background-image: url('../img/coinos_logo.svg') !important;
   background-size: 300px 80px;
 }
-#modal .tab-pane {
-  padding-top: 15px;
-}
-@media screen and (min-width: 768px) {
-  .modal-dialog {
-    width: 400px;
-    /* either % (e.g. 60%) or px (400px) */
-  }
-  #modal #qr {
-    padding-left: 40px;
-  }
-}
 @page {
   margin: 0;
 }
-div.pass-container {
-  height: 30px;
-}
-div.pass-bar {
-  height: 11px;
-  margin-top: 2px;
-}
-div.pass-hint {
-  font-family: arial;
-  font-size: 11px;
-}
diff --git a/public/css/coinos.less b/public/css/coinos.less
index 11f19007..de35aaf7 100644
--- a/public/css/coinos.less
+++ b/public/css/coinos.less
@@ -1,11 +1,15 @@
+@media (min-width: 580px) { .mobile { display: none; } }
+@media (max-width: 360px) { .tablet { display: none; } }
+
 h1 { margin-top: 0; }
 	
 div.container-fluid {
-  max-width: 480px;
+  max-width: 580px;
   margin-left: auto;
   margin-right: auto;
   text-align:left;
-  padding-bottom: 50px;
+  padding: 0;
+  padding-bottom: 10px;
 }
 
 .navbar-toggle { background-color: #428bca; width: 100%; position: absolute; top: 0px; height: 30px; margin: 0; float: none; z-index: 1; margin-bottom: -30px; }
@@ -14,6 +18,22 @@ div.container-fluid {
 .navbar-collapse.in { overflow-y: visible; }
 #connection { display: none; }
 
+.numpad .btn, .tippad .btn { margin-bottom: 5px; padding: 10px; width: 4.5em; }
+.numpad h2, .tippad h2 { margin-bottom: 2px; margin-top: 1px; }
+.numpad { width: 18em; }
+
+.rates { width: 14em; margin-top: -15px; text-align: right; }
+
+#payment h2 { margin-bottom: 2px; }
+
+.no-transition {
+  -webkit-transition: height 0.01s;
+  -moz-transition: height 0.01s;
+  -ms-transition: height 0.01s;
+  -o-transition: height 0.01s;
+  transition: height 0.01s;
+}
+
 #nav {
   .nav { margin-top: 30px; }
   .nav li a { padding: 10px 0 10px 10px; }
@@ -33,12 +53,13 @@ div#calculator {
   #amount { width: 5em; }
   #received { font-size: 16px; width: 100%; }
   strong#total { font-size: 30px; }
-  p#address { font-size: 16px; padding-top: 10px; }
-  p#address a { color: #000 }
+  #address { padding-top: 10px; }
+  #address a { color: #fff; text-decoration: none; }
   #title { display: none; }
   #title a { color: #000; text-decoration: none; }
-  #logo { display: none; padding: 10px 0; margin-bottom: 10px; max-height: 250px; width: 100%; }
+  #logo { display: none; padding: 10px 0; margin-bottom: 10px; max-height: 225px; width: 100%; }
   #error { margin-top: 10px; }
+  #qr { padding-bottom: 10px; }
 }
 
 td#total { font-weight: bold; text-align: right; }
@@ -56,29 +77,6 @@ td#total { font-weight: bold; text-align: right; }
   background-size: 300px 80px;
 }
 
-#modal .tab-pane { padding-top: 15px; }
-
-@media screen and (min-width: 768px) {
-  .modal-dialog {
-      width: 400px; /* either % (e.g. 60%) or px (400px) */
-  }
-
-  #modal #qr { padding-left: 40px; }
-}
-
 @page {
    margin: 0;
 }
-
-div.pass-container {
-    height: 30px;
-}
-
-div.pass-bar {
-    height: 11px;
-    margin-top: 2px;
-}
-div.pass-hint {
-    font-family: arial;
-    font-size: 11px;
-}
diff --git a/public/css/index.css b/public/css/index.css
deleted file mode 100644
index 8a3cd940..00000000
--- a/public/css/index.css
+++ /dev/null
@@ -1,49 +0,0 @@
-@import "bootstrap.min.css";
-@import "bootstrap-responsive.min.css";
-@import "font-awesome.css";
-.hero-unit {
-  background: url(/img/vancouver.jpg);
-  background-size: 100% 100%;
-}
-.hero-unit p {
-  background: rgba(255, 255, 255, 0.5);
-}
-.navbar-inverse,
-.navbar-inverse .navbar-link,
-.navbar-inverse .brand,
-.navbar-inverse .nav > li > a {
-  color: #eee;
-}
-footer {
-  background: black;
-  color: #ddd;
-  padding: 10px 0px 2px 5px;
-  margin: 0;
-  text-align: right;
-}
-#ask,
-#bid {
-  color: white;
-}
-div.directory {
-  width: 500px;
-  float: left;
-  border: 1px dashed #ccc;
-  padding: 10px;
-  margin: 10px;
-}
-div.directory img {
-  height: 180px;
-  float: left;
-  padding-right: 10px;
-}
-div.directory p {
-  font-size: 13px;
-}
-div.directory h2 a {
-  text-decoration: none;
-  color: #000;
-}
-div.row-fluid td.first {
-  text-align: right;
-}
diff --git a/public/css/index.less b/public/css/index.less
deleted file mode 100644
index a470c098..00000000
--- a/public/css/index.less
+++ /dev/null
@@ -1,30 +0,0 @@
-@import "bootstrap.min.css";
-@import "bootstrap-responsive.min.css";
-@import "font-awesome.css";
-
-.hero-unit {
-  background: url(/img/vancouver.jpg);
-  background-size: 100% 100%;
-}
-
-.hero-unit p {
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.navbar-inverse, .navbar-inverse .navbar-link, .navbar-inverse .brand, .navbar-inverse .nav > li > a { color: #eee; }
-
-footer { 
-  background: black; 
-  color: #ddd; 
-  padding: 10px 0px 2px 5px; 
-  margin: 0;
-  text-align: right;
-}
-
-#ask, #bid { color: white; }
-div.directory { width: 500px; float: left;  border: 1px dashed #ccc; padding: 10px; margin: 10px; }
-div.directory img { height: 180px; float: left; padding-right: 10px; }
-div.directory p { font-size: 13px; }
-div.directory h2 a { text-decoration: none; color: #000; }
-div.row-fluid td.first { text-align: right; }
-