[tor-commits] [community/staging] add illustrations in inner sections and adjust layout

[pili at torproject.org]

commit 381fd9d838dbf55c41f57ce9b82edd339b4b27b2
Author: Antonela <hola at antonela.me>
Date:   Thu May 30 10:37:11 2019 -0300

    add illustrations in inner sections and adjust layout
---
 templates/localization.html     | 10 +++++-----
 templates/onion-services.html   |  8 ++++----
 templates/outreach.html         |  7 ++++---
 templates/relay-operations.html |  7 ++++---
 templates/training.html         |  8 ++++----
 templates/user-testing.html     | 14 +++++++-------
 6 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/templates/localization.html b/templates/localization.html
index a0bb3d0..1a350da 100644
--- a/templates/localization.html
+++ b/templates/localization.html
@@ -1,11 +1,11 @@
 <div class="container py-5">
-  <h2 class="text-primary">{{ _('Localization is how we reach a global community.') }}</h2>
-  <div class="row py-5">
-    <div class="col-8">
+  <div class="row pt-5">
+    <div class="col-lg-7">
+      <h2 class="text-primary">{{ _('Localization is how we reach a global community.') }}</h2>
       {{ this.body }}
     </div>
-    <div class="col-4 bg-light">
-      <p>Illustration area</p>
+    <div class="col-lg-5">
+      <img src="/static/images/home/png/{{ this.section_id }}.png" class="img-fluid" alt="{{ _(this.section) }}" />
     </div>
   </div>
   <div class="row">
diff --git a/templates/onion-services.html b/templates/onion-services.html
index c9bc3b5..c008aff 100644
--- a/templates/onion-services.html
+++ b/templates/onion-services.html
@@ -1,11 +1,11 @@
 <div class="container py-5">
-  <h2 class="text-primary">{{ _('What are Onion Services?') }}</h2>
   <div class="row py-5">
-    <div class="col-8">
+    <div class="col-lg-7">
+      <h2 class="text-primary">{{ _('What are Onion Services?') }}</h2>
       {{ this.body }}
     </div>
-    <div class="col-4 bg-light">
-      <p>Illustration area</p>
+    <div class="col-lg-5">
+        <img src="/static/images/home/png/{{ this.section_id }}.png" class="img-fluid" alt="{{ _(this.section) }}" />
     </div>
   </div>
   <h2 class="text-primary"><u>{{ _('Learn more about onion services here') }}
diff --git a/templates/outreach.html b/templates/outreach.html
index 84c73b0..dc9839f 100644
--- a/templates/outreach.html
+++ b/templates/outreach.html
@@ -1,10 +1,11 @@
 <div class="container py-5">
-  <h2 class="text-primary">{{ _('Tell the world about Tor!') }}</h2>
   <div class="row py-5">
-    <div class="col-8">
+    <div class="col-lg-7">
+      <h2 class="text-primary">{{ _('Tell the world about Tor!') }}</h2>
       {{ this.body }}
     </div>
-    <div class="col-4">
+    <div class="col-lg-5">
+      <img src="/static/images/home/png/{{ this.section_id }}.png" class="img-fluid" alt="{{ _(this.section) }}" />
     </div>
   </div>
   <h2 class="text-primary">{{ _('Help us translate') }}</h2>
diff --git a/templates/relay-operations.html b/templates/relay-operations.html
index e861c25..fa566b2 100644
--- a/templates/relay-operations.html
+++ b/templates/relay-operations.html
@@ -1,10 +1,11 @@
 <div class="container py-5">
   <div class="row py-5">
-    <div class="col-8">
+    <div class="col-lg-7">
+      <h2 class="text-primary">{{ _('Title.') }}</h2>
       {{ this.body }}
     </div>
-    <div class="col-4 bg-light">
-      <p>Illustration area</p>
+    <div class="col-lg-5">
+      <img src="/static/images/home/png/{{ this.section_id }}.png" class="img-fluid" alt="{{ _(this.section) }}" />
     </div>
   </div>
   <div class="row py-5">
diff --git a/templates/training.html b/templates/training.html
index 655dbee..4c40df1 100644
--- a/templates/training.html
+++ b/templates/training.html
@@ -1,11 +1,11 @@
 <div class="container py-5">
-  <h2 class="text-primary">{{ _('We want to teach the world about Tor. Will you help?') }}</h2>
   <div class="row py-5">
-    <div class="col-8">
+    <div class="col-lg-7">
+      <h2 class="text-primary">{{ _('We want to teach the world about Tor. Will you help?') }}</h2>
       {{ this.body }}
     </div>
-    <div class="col-4 bg-light">
-      <p>Illustration area</p>
+    <div class="col-lg-5">
+      <img src="/static/images/home/png/{{ this.section_id }}.png" class="img-fluid" alt="{{ _(this.section) }}" />
     </div>
   </div>
 
diff --git a/templates/user-testing.html b/templates/user-testing.html
index 8784f2a..ca0fe74 100644
--- a/templates/user-testing.html
+++ b/templates/user-testing.html
@@ -1,11 +1,11 @@
 <div class="container py-5">
-  <h2 class="text-primary">{{ _('Testing Tor features while respecting user privacy') }}</h2>
-  <div class="row py-5">
-    <div class="col-8">
+  <div class="row pt-5">
+    <div class="col-lg-7">
+      <h2 class="text-primary">{{ _('Testing Tor features while respecting user privacy') }}</h2>
       {{ this.body }}
     </div>
-    <div class="col-4 bg-light">
-      <p>Illustration area</p>
+    <div class="col-lg-5">
+      <img src="/static/images/home/png/{{ this.section_id }}.png" class="img-fluid" alt="{{ _(this.section) }}" />
     </div>
   </div>
   <h2 class="text-primary"><u>{{ _('Want to know more? Take a look at our process') }}
@@ -16,8 +16,8 @@
       <div class="col-sm-6 col-md-6 col-sm-12 col-xl-6 py-4">
         <div class="card h-100 border-0">
           <div class="card-body">
-            <h2 class="text-primary display-2"><i class="far fa-{{ child.image }}"></i></h2>
-            <h4 class="card-title text-primary">{{ child.title }}</h4>
+            <span class="text-primary h3"><i class="far fa-{{ child.image }}"></i></span>
+            <h4 class="card-title text-primary my-3">{{ child.title }}</h4>
             <p class="card-text">{{ child.subtitle }}</p>
           </div>
         </div>