improve responsiveness of web site

3 files changed, 25 insertions, 29 deletions

diff --git a/template/docs.html.j2 b/template/docs.html.j2
index bf564bd0..d60acc40 100644
--- a/template/docs.html.j2
+++ b/template/docs.html.j2
@@ -32,7 +32,7 @@
   </div>
 
   <div class="row">
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://{{ siteconfitem['docshost'] }}/taler-merchant-manual.html">
       <img src="{{ url('icons/icon-backend.svg') }}" height=60>
       <h3>{{ _("Merchant Backend Administration")}}</h3>
@@ -43,7 +43,7 @@
       {% endtrans %}
     </div>
 
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://{{ siteconfitem['docshost'] }}/taler-merchant-api-tutorial.html">
         <img src="{{ url('icons/icon-market.svg') }}" height=60>
         <h3>{{ _("Merchant API Tutorial") }}</h3>
@@ -54,7 +54,7 @@
       {{ gettext('Also available as <a href="%(link)s">PDF</a>.', link="https://" + siteconfitem['docshost'] + "/pdf/taler-merchant-api-tutorial.pdf") }}
     </div>
 
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://{{ siteconfitem['docshost'] }}/taler-exchange-manual.html">
         <img src="{{ url('icons/icon-exchange.svg') }}" height=60>
         <h3>{{ _("Exchange")}}</h3>
@@ -65,7 +65,7 @@
       {{ gettext('Also available as <a href="%(link)s">PDF</a>.', link="https://" + siteconfitem['docshost'] + "/pdf/taler-exchange-manual.pdf") }}
     </div>
 
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://{{ siteconfitem['docshost'] }}/taler-bank-manual.html">
         <img src="{{ url('icons/icon-bank.svg') }}" height=60>
         <h3>{{ _("Bank Integration") }}</h3>
@@ -75,14 +75,8 @@
       {% endtrans %}
       {{ gettext('Also available as <a href="%(link)s">PDF</a>.', link="https://" + siteconfitem['docshost'] + "/pdf/taler-bank-manual.pdf") }}
     </div>
-  </div>
-
-  <div class="row mt-5">
-  </div>
 
-  <div class="row">
-
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://{{ siteconfitem['docshost'] }}/taler-wallet.html">
         <img src="{{ url('icons/icon-wallet.svg') }}" height=60>
         <h3>{{ _("Wallet") }}</h3>
@@ -94,7 +88,7 @@
       {% endtrans %}
     </div>
 
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://{{ siteconfitem['docshost'] }}/taler-backoffice-manual.html">
         <img src="{{ url('icons/icon-backoffice.svg') }}" height=60>
         <h3>{{ _("Back office") }}</h3>
@@ -105,7 +99,7 @@
       {{ gettext('Also available as <a href="%(link)s">PDF</a>.', link="https://" + siteconfitem['docshost'] + "/pdf/taler-backoffice-manual.pdf") }}
     </div>
 
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://{{ siteconfitem['docshost'] }}/taler-merchant-pos-terminal.html">
         <img src="{{ url('icons/icon-market.svg') }}" height=60>
         <h3>{{ _("Merchant POS Terminal") }}</h3>
@@ -116,7 +110,7 @@
       {{ gettext('Also available as <a href="%(link)s">PDF</a>.', link="https://" + siteconfitem['docshost'] + "/pdf/taler-merchant-pos-terminal.pdf") }}
     </div>
 
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="{{ url_localized('cashier.html') }}">
         <img src="{{ url('icons/icon-cashier.svg') }}" height=60>
         <h3>{{ _("Cashier") }}</h3>
@@ -125,6 +119,8 @@
         An app for taking in cash and handing out electronic cash.
       {% endtrans %}
     </div>
+
+
   </div>
 
   <div class="row mt-5">
@@ -140,7 +136,7 @@
   </div>
 
   <div class="row">
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://{{ siteconfitem['docshost'] }}/core/index.html">
         <img src="{{ url('icons/icon-api.svg') }}" height=60>
         <h3>{{ _("HTTP API")}}</h3>
@@ -150,7 +146,7 @@
       {% endtrans %}
     </div>
 
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://{{ siteconfitem['docshost'] }}/developers-manual.html">
         <img src="{{ url('icons/icon-developers.svg') }}" height=60>
         <h3>{{ _("Onboarding")}}</h3>
@@ -175,7 +171,7 @@
   </div>
 
   <div class="row">
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://lists.gnu.org/mailman/listinfo/taler">
         <img src="{{ url('icons/icon-share.svg') }}" height=60>
         <h3>{{ _("Mailing List")}}</h3>
@@ -183,7 +179,7 @@
       {{ _("The official GNU Taler mailing list.") }}
     </div>
 
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://webchat.freenode.net/?channels=taler">
         <img src="{{ url('icons/icon-share.svg') }}" height=60>
         <h3>{{ _("IRC")}}</h3>
@@ -191,7 +187,7 @@
       {{ _("Our IRC channel is #taler on freenode.") }}
     </div>
 
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://gnunet.org/bugs/">
         <img src="{{ url('icons/icon-share.svg') }}" height=60>
         <h3>{{ _("Bug Tracker")}}</h3>
@@ -215,7 +211,7 @@
 
   <div class="row">
 
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://git.taler.net">
         <img src="{{ url('icons/icon-code.svg') }}" height=60>
         <h3>{{ _("Git repositories") }}</h3>
@@ -223,7 +219,7 @@
       {{ _("Git repositories for all of GNU Taler.") }}
     </div>
 
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://lcov.taler.net">
         <img src="{{ url('icons/icon-lcov.svg') }}" height=60>
         <h3>{{ _("lcov results") }}</h3>
@@ -231,7 +227,7 @@
       {{ _("Shows results of the code coverage analysis for our test suite.") }}
     </div>
 
-    <div class="col-3">
+    <div class="col-lg-4">
       <a href="https://buildbot.taler.net">
         <img src="{{ url('icons/buildbot.svg') }}" height=60>
         <h3>{{ _("Continuous integration") }}</h3>
diff --git a/template/features.html.j2 b/template/features.html.j2
index dde5c029..cb3df6e6 100644
--- a/template/features.html.j2
+++ b/template/features.html.j2
@@ -8,7 +8,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="col">
+    <div class="col-lg-6">
       <p>
         {% trans %}
           GNU Taler is a <span class="tlr">privacy-preserving</span>
@@ -56,7 +56,7 @@
       {% endtrans %}
     </p>
     </div>
-    <div class="col">
+    <div class="col-lg-6">
       <img class="img-fluid" src="{{ url_static('images/diagram-simple.png') }}">
     </div>
   </div>
diff --git a/template/index.html.j2 b/template/index.html.j2
index 1c55d09d..6cc7b44f 100644
--- a/template/index.html.j2
+++ b/template/index.html.j2
@@ -3,17 +3,16 @@
   <div class="container">
 
     <div class="row justify-content-center">
-      <div class="col-8">
-        <img src="{{ url_static('images/logo-2020.jpg') }}">
-      </div>
+      <img style="width:80vw" src="{{ url_static('images/logo-2020.jpg') }}">
     </div>
 
     <div class="row mt-5">
     </div>
 
     <div class="row">
-      <div class="col">
+      <div class="col-lg-8">
         <h2>{{ _("We provide a payment system that makes <span class='tlr'>privacy-friendly</span> online transactions <span class='tlr'>fast and easy</span>.")}}</h2>
+        <p>
         <ul class="checklist">
           <li>
             <img class="checkmark" src="{{ url_static('images/checkmark.png') }}">
@@ -42,8 +41,9 @@
         </ul>
         <form action="https://demo.taler.net/" style="display:inline;"><button type="submit" class="btn btn-primary">{{ _("Try Demo!")}}</button></form>
         <form action="https://docs.taler.net/" style="display:inline;"><button type="submit" class="btn btn-secondary">{{ _("Read Docs")}}</button></form>
+        </p>
       </div>
-      <div class="col align-self-center">
+      <div class="col-lg-4">
         <img class="img-fluid" src="{{ url_static('images/stock1s.jpg') }}" style="border-radius: 1cm;" />
       </div>
     </div>