fix principles page layout

1 files changed, 71 insertions, 41 deletions

diff --git a/principles.html.j2 b/principles.html.j2
index c6a9137d..8b377c3f 100644
--- a/principles.html.j2
+++ b/principles.html.j2
@@ -15,19 +15,17 @@ h2 {
 }
 </style>
 
-
 <div class="container">
   <div class="row">
     <div class="col">
-    <h1>GNU Taler: Design Principles</h1>
+      <h1>GNU Taler: Design Principles</h1>
     </div>
   </div>
-  <div class="row">
-    <div class="col">
-      <p>When designing GNU Taler, we had the following design principles in mind.</p>
+<p>When designing GNU Taler, we had the following design principles in mind:</p>
 
-      <h2>1. Free Software implementation <a onclick="expand('x1')">(+)</a></h2>
-      <div id="x1" style="display: none">
+  <div class="row">
+    <div class="col-lg-6">
+      <h2>1. Free Software implementation</h2>
       <p>
         Free refers to “free as in free speech”, as opposed to “free as in free beer”.
         More specifically, the four essential freedoms of free software must
@@ -52,10 +50,17 @@ h2 {
         used by merchants, customers or payment processors to increase their
         operational security.
       </p>
-      </div>
-
-      <h2>2. Protect the privacy of buyers <a onclick="expand('x2')">(+)</a></h2>
-      <div id="x2" style="display: none">
+    </div>
+    <div class="col-lg-6">
+      <p>IMAGE.</p>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6">
+    IMAGE.
+    </div>
+    <div class="col-lg-6">
+      <h2>2. Protect the privacy of buyers</h2>
       <p>
         Privacy should be guaranteed via technical measures, as opposed to mere
         policies. Especially with micropayments for online content, a disproportion-
@@ -70,65 +75,89 @@ h2 {
         shipping address for a physical delivery, must still be collected according to
         business needs.
       </p>
-      </div>
-
-      <h2>3. Enable the state to tax income and crack down on illegal business activities <a onclick="expand('x3')">(+)</a></h2>
-      <div id="x3" style="display: none">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6">
+      <h2>3. Enable the state to tax income and crack down on illegal business activities</h2>
       <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>
-
-      <h2>4. Prevent payment fraud <a onclick="expand('x4')">(+)</a></h2>
-      <div id="x4" style="display: none">
+    </div>
+    <div class="col-lg-6">
+    IMAGE.
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6">
+    IMAGE.
+    </div>
+    <div class="col-lg-6">
+      <h2>4. Prevent payment fraud</h2>
       <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
         interface design or the lack of cryptographic evidence for certain processes.
       </p>
-      </div>
-
-      <h2>5. Only disclose the minimal amount of information nec-
-essary <a onclick="expand('x5')">(+)</a></h2>
-      <div id="x5" style="display: none">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6">
+      <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
         priority, but other parties such as merchants still benefit from it, for example,
         by keeping details about the merchant’s financials hidden from competitors.
       </p>
-      </div>
-
-      <h2>6. Be usable <a onclick="expand('x6')">(+)</a></h2>
-      <div id="x6" style="display: none">
+    </div>
+    <div class="col-lg-6">
+    IMAGE.
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6">
+    IMAGE.
+    </div>
+    <div class="col-lg-6">
+      <h2>6. Be usable</h2>
       <p>
 Specifically it must be usable for non-expert customers. Usability also
 applies to the integration with merchants, and informs choices about the
 architecture, such as encapsulating procedures that require cryptographic
 operations into an isolated component with a simple API.
       </p>
-      </div>
-
-      <h2>7. Be efficient <a onclick="expand('x7')">(+)</a></h2>
-      <div id="x7" style="display: none">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6">
+      <h2>7. Be efficient</h2>
       <p>
 Approaches such as proof-of-work are ruled out by this requirement. Effi-
 ciency is necessary for GNU Taler to be used for micropayments.
       </p>
-      </div>
-
-      <h2>8. Avoid single points of failure <a onclick="expand('x8')">(+)</a></h2>
-      <div id="x8" style="display: none">
+    </div>
+    <div class="col-lg-6">
+    IMAGE.
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6">
+    IMAGE.
+    </div>
+    <div class="col-lg-6">
+      <h2>8. Avoid single points of failure</a></h2>
       <p>
 While the design we present later is rather centralized, avoiding single
 points of failure is still a goal. This manifests in architectural choices such
 as the isolation of certain components, and auditing procedures.
       </p>
-      </div>
-
-      <h2>9. Foster competition <a onclick="expand('x9')">(+)</a></h2>
-      <div id="x9" style="display: none">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6">
+      <h2>9. Foster competition</h2>
       <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
@@ -138,7 +167,8 @@ nents that can be operated, developed and improved upon independently,
 instead of having one completely monolithic system.
       </p>
       </div>
-
+    <div class="col-lg-6">
+    IMAGE.
     </div>
   </div>
 </div>