en/index: replace img style attributes with classes; add a wip warning.

diff --git a/en/index.html b/en/index.html
index 590fd549789eb2ac3e843f4bd2767118dc88960e..d4b1c6feb29747adb9355f423f839a27dacb6db1 100644 (file)
--- a/en/index.html
+++ b/en/index.html
@@ -20,6 +20,8 @@ href="../static/img/favicon.ico" />
 
 <!-- PLACE FUNDRAISER MODAL WINDOW HERE -->
 
+<div class="wip">THIS IS A TEST VERSION!<br />
+The latest changes haven't been approved yet. Please don't update the PO files.</div>
 
 <!-- ~~~~~~~~~ GnuPG Header and introduction text ~~~~~~~~~ -->
 <header class="row" id="header"><div>
@@ -256,7 +258,7 @@ is the program that implements the standard. Most email programs provide an inte
 <div class="section-intro">
 
 <h2><em>#2</em> Make your keys</h2>
-<p><img style="float:right; width:400px; margin:0 0 20px 20px;" src="../static/img/en/screenshots/step2a-01-make-keypair.png" alt="A robot with a head shaped like a key holding a private and a public key"/></p>
+<p><img class="float-medium" src="../static/img/en/screenshots/step2a-01-make-keypair.png" alt="A robot with a head shaped like a key holding a private and a public key"/></p>
 
 <p>To use the GnuPG system, you'll need a public key and a private key (known
 together as a keypair). Each is a long string of randomly generated numbers
@@ -560,7 +562,7 @@ page</a>.</dd>
 <div class="section-intro">
 
 <h2><em>#4</em> Try it out!</h2>
-<p><img style="float:right; width:250px; margin:0 0 20px 20px;" src="../static/img/en/screenshots/section3-try-it-out.png" alt="Illustration of a person in a house with a cat connected to a server"/></p>
+<p><img class="float-small" src="../static/img/en/screenshots/section3-try-it-out.png" alt="Illustration of a person in a house with a cat connected to a server"/></p>
 <p>Now you'll try a test correspondence with an FSF computer program named Edward,
 who knows how to use encryption. Except where noted, these are the same
 steps you'd follow when corresponding with a real, live person.</p>
@@ -569,6 +571,8 @@ steps you'd follow when corresponding with a real, live person.</p>
 may take a long time to respond, or not respond at all. We're sorry about
 this and we're working hard to fix it. Your key will still work even without
 testing with Edward.</p> -->
+
+<div style="clear: both"></div>
 </div><!-- End .section-intro -->
 
 <!-- ~~~~~~~~~ a div for each step ~~~~~~~~~ -->
@@ -809,7 +813,7 @@ then it will use your private key to decrypt it.</p>
 <div class="section-intro">
 
 <h2><em>#5</em> Learn about the Web of Trust</h2>
-<p><img style="float:right; width:250px; margin:0 0 20px 20px;" src="../static/img/en/screenshots/section5-web-of-trust.png" alt="Illustration of keys all interconnected with a web of lines"/></p>
+<p><img class="float-small" src="../static/img/en/screenshots/section5-web-of-trust.png" alt="Illustration of keys all interconnected with a web of lines"/></p>
 
 <p>Email encryption is a powerful technology, but it has a weakness:
 it requires a way to verify that a person's public key is actually