fix

1 files changed, 20 insertions, 40 deletions

diff --git a/principles.html.j2 b/principles.html.j2
index 3f77c1d1..7480b943 100644
--- a/principles.html.j2
+++ b/principles.html.j2
@@ -23,8 +23,9 @@ h2 {
   </div>
   <p>When designing GNU Taler, we had the following design principles in mind:</p>
   <div class="row">
-    <div class="col-lg-6">
+    <div class="col-lg-12">
       <h2>1. Free Software implementation</h2>
+      <a href="https://www.gnu.org/graphics/freedom.html"><img style="width:40vw;float:right" src="../images/stallman.medium.png" alt="... in the are of computing, freedom means not using proprietary software"></a>
       <p>
         GNU Taler must be <a href="https://www.gnu.org/philosophy/free-sw.html">Free Software</a>.
         For merchants, our Free Software
@@ -39,17 +40,12 @@ h2 {
         assured.
       </p>
     </div>
-    <div class="col-lg-6">
-      <p><a href="https://www.gnu.org/graphics/freedom.html"><img style="width:40vw" src="../images/stallman.medium.png" alt="... in the are of computing, freedom means not using proprietary software"></a></p>
-    </div>
   </div>
   <div class="row">
-    <div class="col-lg-6">
-      <p><!-- From https://www.pixabay.com/ -->
-         <img style="width:20vw" src="../images/anonymous.jpg" alt="You deserve some privacy"></p>
-    </div>
-    <div class="col-lg-6">
+    <div class="col-lg-12">
       <h2>2. Protect the privacy of buyers</h2>
+      <!-- From https://www.pixabay.com/ -->
+      <img style="width:40vw;float:left;padding:15px" src="../images/anonymous.jpg" alt="You deserve some privacy">
       <p>
         Privacy should be guaranteed via technical measures, as opposed to mere
         policies. Especially with micropayments for online content, a disproportion-
@@ -67,26 +63,22 @@ h2 {
     </div>
   </div>
   <div class="row">
-    <div class="col-lg-6">
+    <div class="col-lg-12">
       <h2>3. Enable the state to tax income and crack down on illegal business activities</h2>
+      <!-- From https://www.pxhere.com/ -->
+      <img style="width:40vw;float:right;padding:15px" src="../images/money-laundering.medium.jpg" alt="Money laundering">
       <p>
         As a payment system must still be legal to operate and use, it must comply
         with these requirements. Furthermore, we consider levying of taxes as
         beneficial to society.
       </p>
     </div>
-    <div class="col-lg-6">
-      <p><!-- From https://www.pxhere.com/ -->
-         <img style="width:20vw" src="../images/money-laundering.medium.jpg" alt="Money laundering"></p>
-    </div>
   </div>
   <div class="row">
-    <div class="col-lg-6">
-      <p><!-- From https://www.maxpixel.net/ -->
-         <img style="width:40vw" src="../images/fraud.medium.jpg" alt="Phishing attack"></p>
-    </div>
-    <div class="col-lg-6">
+    <div class="col-lg-12">
       <h2>4. Prevent payment fraud</h2>
+      <!-- From https://www.maxpixel.net/ -->
+      <img style="width:40vw;float:left;padding:15px" src="../images/fraud.medium.jpg" alt="Phishing attack">
       <p>
         This imposes requirements on the security of the system, as well as on the
         general design, as payment fraud can also happen through misleading user
@@ -95,7 +87,7 @@ h2 {
     </div>
   </div>
   <div class="row">
-    <div class="col-lg-6">
+    <div class="col-lg-12">
       <h2>5. Only disclose the minimal amount of information necessary</h2>
       <p>
         The reason behind this goal is similar to (2). The privacy of buyers is given
@@ -103,15 +95,9 @@ h2 {
         by keeping details about the merchant’s financials hidden from competitors.
       </p>
     </div>
-    <div class="col-lg-6">
-    <!-- IMAGE. -->
-    </div>
   </div>
   <div class="row">
-    <div class="col-lg-6">
-    <!-- IMAGE. -->
-    </div>
-    <div class="col-lg-6">
+    <div class="col-lg-12">
       <h2>6. Be usable</h2>
       <p>
 Specifically it must be usable for non-expert customers. Usability also
@@ -122,22 +108,18 @@ operations into an isolated component with a simple API.
     </div>
   </div>
   <div class="row">
-    <div class="col-lg-6">
+    <div class="col-lg-12">
       <h2>7. Be efficient</h2>
+      <img style="width:40vw;float:left;padding:15px" src="../images/efficient.png" alt="Energy efficiency"></a>
       <p>
-Approaches such as proof-of-work are ruled out by this requirement. Efficiency is necessary for GNU Taler to be used for micropayments.
+         Approaches such as proof-of-work are ruled out by this requirement. Efficiency is necessary for GNU Taler to be used for micropayments.
       </p>
     </div>
-    <div class="col-lg-6">
-      <p><img style="width:40vw" src="../images/efficient.png" alt="Energy efficiency"></a></p>
-    </div>
   </div>
   <div class="row">
-    <div class="col-lg-6">
-      <p><img style="width:20vw" src="../images/life-safer.medium.jpg" alt="Life Safers"></a></p>
-    </div>
-    <div class="col-lg-6">
+    <div class="col-lg-12">
       <h2>8. Fault-tolerant design</a></h2>
+      <img style="width:40vw;float:right;padding:15px" src="../images/life-safer.medium.jpg" alt="Life Safers"></a>
       <p>
         Taler should tolerate failure of individual components and systems,
         including malicious operators compromising core secrets.
@@ -147,8 +129,9 @@ Approaches such as proof-of-work are ruled out by this requirement. Efficiency i
     </div>
   </div>
   <div class="row">
-    <div class="col-lg-6">
+    <div class="col-lg-12">
       <h2>9. Foster competition</h2>
+      <img style="width:40vw;float:left;padding:15px" src="../images/market.medium.jpg" alt="A competitive market"></a>
       <p>
 It must be relatively easy for competitors to join the systems. While the
 barriers for this in traditional financial systems are rather high, the technical
@@ -158,9 +141,6 @@ nents that can be operated, developed and improved upon independently,
 instead of having one completely monolithic system.
       </p>
       </div>
-    <div class="col-lg-6">
-      <p><img style="width:20vw" src="../images/market.medium.jpg" alt="A competitive market"></a></p>
-    </div>
     </div>
   </div>
 </div>