style improvements

1 files changed, 48 insertions, 66 deletions

diff --git a/contrib/request_payment.must b/contrib/request_payment.must
index 6ef7794e..28508086 100644
--- a/contrib/request_payment.must
+++ b/contrib/request_payment.must
@@ -29,81 +29,59 @@
         integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ"
         crossorigin="anonymous">
   <style>
-.talerbar h1 {
-  text-align: center;
-}
-.talerbar > p {
-  padding: 0.5em;
-}
-.talerbar a,
-.talerbar a:visited {
-  color: inherit;
-}
-.adorn-brackets::before {
+.taler::before {
   content: "❬";
   color: #aa3939;
 }
-.adorn-brackets::after {
+.taler::after {
   content: "❭";
   color: #aa3939;
 }
+.talerbar {
+  text-align: center;
+}
 .tt {
   font-family: 'Lucida Console', Monaco, monospace;
 }
-.informational-ok {
-  background: lightgreen;
-  border-radius: 1em;
-  padding: 0.5em;
+.content {
+    overflow-x: auto;
+    padding-left: 15%;
+    padding-right: 15%;
+}
+.qr {
+    margin: auto;
+    text-align: center;
+    transition: transform .2s;
+    height: 25vh;
+    width: 25vh;
+    font-size: 0.43vh;
 }
-.informational-fail {
-  background: lightpink;
-  border-radius: 1em;
-  padding: 0.5em;
+.qr:hover {
+    transform: scale(1.5);
 }
-.content {
-  overflow-x: auto;
+.talerbar {
+    margin: 0;
+    bottom: 0;
+    background-color: #033;
+    color: white;
+    width: 100%;
+    padding: 1em;
+    overflow: auto;
 }
+
 body {
   overflow-y: scroll;
 }
-
 @media (min-width: 500px) {
   .content {
-    margin-left: 25%;
-    padding-left: 2em;
+    padding-bottom: 2em;
     margin-right: 1em;
-    overflow-x: auto;
-  }
-  .talerbar {
-    height: 100%;
-    margin: 0;
-    top: 0;
-    left: 0;
-    background-color: #033;
-    color: white;
-    position: fixed;
-    width: 25%;
-    padding-right: 1em;
-    overflow: auto;
+    overflow-y: auto;
   }
 }
-  .warn {
-      background-color: #aa393977;
-      padding: 1em;
-    }
-    .notice {
-      border-radius: 1em;
-      background: #0333;
-      border-left: 0.3em solid #033;
-      padding-left: 1em;
-      padding-top: 0.5em;
-      padding-bottom: 0.5em;
-      margin-top: 2em;
-      margin-bottom: 2em;
-    }
-    #main a:link, #main a:visited, #main a:hover, #main a:active {
-        color: black;
-    }
+#main a:link, #main a:visited, #main a:hover, #main a:active {
+  color: black;
+}
   </style>
 </head>
 
@@ -140,32 +118,36 @@ body {
 
 <section id="main" class="content">
 
-<h1>Payment Required</h1>
+
+<h1><span class="taler">Taler</span> payment required</h1>
 
 <div class="taler-installed-hide">
   <p>
-  Looks like your browser doesn't support GNU Taler payments.  You can try
-  installing a <a href="https://wallet.taler.net/">wallet browser extension</a>.
+  Please select your Taler wallet to pay. If you do not have one, GNU Taler
+  offers <a href="https://www.gnu.org/philosophy/free-sw.html>Free</a>
+  <a href="https://wallet.taler.net/">wallet browser extensions</a> for
+  many platforms.
   </p>
 </div>
 
 <div>
   <p>
-  You can use this QR code to pay with your mobile wallet:
+  Alternatively, you can scan this QR code to pay with your mobile wallet:
   </p>
-  {{{taler_pay_qrcode_svg}}}
+  <div class="qr">
+    {{{taler_pay_qrcode_svg}}}
+  </div>
   <p>
-  Click <a href="{{taler_pay_uri}}">this link</a> to open your system's
-  Taler wallet if it exists.
+  Finally, you could click <a href="{{taler_pay_uri}}">this link</a> to
+  try to open your system's Taler wallet if it exists.
   </p>
 </div>
 <hr />
 </section>
 
-<div class="talerbar" style="display: flex; flex-direction: column;">
-  <p>You can learn more about Taler on our <a href="https://taler.net/">website</a>.</p>
-  <div style="flex-grow:1"></div>
-  <p>Copyright &copy; 2014&mdash;2020 Taler Systems SA</p>
+<div class="talerbar">
+  <p>You can learn more about GNU Taler on our <a href="https://taler.net/">website</a>.<br>
+  Copyright &copy; 2014&mdash;2020 Taler Systems SA</p>
 </div>
 </body>
 </html>