[snowflake/master] Use more semantic HTML. - tor-commits

24 Aug 2019

commit 49f4a710f8a1a708d9f9945459a41d470a9abec0
Author: David Fifield david@bamsoftware.com
Date:   Fri Aug 23 21:47:05 2019 -0600
Use more semantic HTML.
---
 proxy/static/index.css  | 28 +++++++++---------
 proxy/static/index.html | 75 +++++++++++++++++++++++++------------------------
 2 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/proxy/static/index.css b/proxy/static/index.css
index 9502a37..3816776 100644
--- a/proxy/static/index.css
+++ b/proxy/static/index.css
@@ -13,13 +13,13 @@ body {
   color: #212529;
 }
-#header {
+header {
   margin: 0;
   line-height: 0;
   padding: 1.3rem 2.6rem;
 }
-#header a {
+header a {
   border-style: none;
   display: inline-block;
   line-height: 0;
@@ -31,6 +31,10 @@ body {
   background-color: #FFFFFF;
 }
+section {
+  margin: 1.3rem 0;
+}
+
 h1 {
   margin: 0;
   font-size: 2.6rem;
@@ -38,25 +42,21 @@ h1 {
   text-align: center;
 }
-h3 {
+h2 {
   margin: 0;
   font-size: 2rem;
   color: #7D4698;
 }
-.clear {
-  margin: 2.6rem 0;
-  overflow: auto;
+.sidebyside {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: flex-start;
 }
-@media only screen and (min-width: 600px) {
-  .browser, .extension {
-    float: left;
-    width: 50%;
-  }
-  .padding {
-    padding: 0 1.3rem;
-  }
+.sidebyside section {
+  flex: 1 1 15rem;
+  padding: 0 1.3rem;
 }
.addon {
diff --git a/proxy/static/index.html b/proxy/static/index.html
index 9afb56b..8609789 100644
--- a/proxy/static/index.html
+++ b/proxy/static/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -7,12 +7,12 @@
     <link rel="stylesheet" href="index.css" />
   </head>
   <body>
-    <div id="header">
+    <header id="header">
       <a href="https://www.torproject.org/">
         <img src="tor-logo@2x.png" alt="Tor" height="50" />
       </a>
-    </div>
-    <div id="content">
+    </header>
+    <section id="content">
       <h1>SNOWFLAKE</h1>
<p class="diagram"><img src="https://trac.torproject.org/projects/tor/raw-attachment/wiki/doc/Snowflake/snowflake-schematic.png" alt="Diagram" /></p>
@@ -23,19 +23,19 @@
       information about how Snowflake works see our
       <a href="https://trac.torproject.org/projects/tor/wiki/doc/Snowflake/">documentation wiki</a>.</p>
-      <div class="clear">
+      <div class="sidebyside">
-        <div id="browser" class="browser"><div class="padding">
-          <h3>Browser</h3>
+        <section id="browser" class="browser">
+          <h2>Browser</h2>
<p>If your internet access is censored, you should download
           <a href="https://www.torproject.org/download/">Tor Browser</a>.</p>
<p class="screenshot"><img src="screenshot.png" alt="Tor Browser screenshot" /></p>
-        </div></div>
+        </section>
-        <div id="extension" class="extension"><div class="padding">
-          <h3>Extension</h3>
+        <section id="extension" class="extension">
+          <h2>Extension</h2>
<p>If your internet access is <strong>not</strong> censored, you should
           consider installing the Snowflake extension to help users in censored
@@ -52,42 +52,45 @@
               <img src="chrome150.jpg" alt="Install in Chrome" height="100" /><br />
               <span>Install in Chrome</span>
             </a>
-            <span class="clear"></span>
           </p>
-        </div></div>
+        </section>
</div>
-      <h3 id="bugs">REPORTING BUGS</h3>
-      
-      <p>If you encounter problems with Snowflake as a client or a proxy,
-      please consider filing a bug.  To do so, you will have to,</p>
-      
-      <ol>
-        <li>
-        Either <a href="https://trac.torproject.org/projects/tor/register">create an
-        account</a> or <a href="https://trac.torproject.org/projects/tor/login">log in</a>
-        using the shared <b>cypherpunks</b> account with password <b>writecode</b>.</li>
-        <li><a href="https://trac.torproject.org/projects/tor/newticket?component=Circumvention%2FSnowflake">File a ticket</a>
-        using our bug tracker.</li>
-      </ol>
+      <section id="bugs">
+        <h2>REPORTING BUGS</h2>
-      <p>Please try to be as descriptive as possible with your ticket and if
-      possible include log messages that will help us reproduce the bug.
-      Consider adding keywords <em>snowflake-webextension</em> or <em>snowflake-client</em>
-      to let us know how which part of the Snowflake system is experiencing
-      problems.</p>
+        <p>If you encounter problems with Snowflake as a client or a proxy,
+        please consider filing a bug.  To do so, you will have to,</p>
-      <h3 id="embed">EMBED</h3>
+        <ol>
+          <li>
+          Either <a href="https://trac.torproject.org/projects/tor/register">create an
+          account</a> or <a href="https://trac.torproject.org/projects/tor/login">log in</a>
+          using the shared <b>cypherpunks</b> account with password <b>writecode</b>.</li>
+          <li><a href="https://trac.torproject.org/projects/tor/newticket?component=Circumvention%2FSnowflake">File a ticket</a>
+          using our bug tracker.</li>
+        </ol>
-      <p>It is now possible to embed the Snowflake badge on any website:</p>
+        <p>Please try to be as descriptive as possible with your ticket and if
+        possible include log messages that will help us reproduce the bug.
+        Consider adding keywords <em>snowflake-webextension</em> or <em>snowflake-client</em>
+        to let us know how which part of the Snowflake system is experiencing
+        problems.</p>
+      </section>
-      <textarea readonly>&lt;iframe src="https://snowflake.torproject.org/embed.html" width="320" height="240" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;</textarea>
+      <section id="embed">
+        <h2>EMBED</h2>
-      <p>Which looks like this:</p>
+        <p>It is now possible to embed the Snowflake badge on any website:</p>
-      <iframe src="embed.html" width="320" height="240" frameborder="0" scrolling="no"></iframe>
+        <textarea readonly>&lt;iframe src="https://snowflake.torproject.org/embed.html" width="320" height="240" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;</textarea>
-    </div>
+        <p>Which looks like this:</p>
+
+        <iframe src="embed.html" width="320" height="240" frameborder="0" scrolling="no"></iframe>
+      </section>
+
+    </section>
   </body>
 </html>

    