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><iframe src="https://snowflake.torproject.org/embed.html" width="320" height="240" frameborder="0" scrolling="no"></iframe></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><iframe src="https://snowflake.torproject.org/embed.html" width="320" height="240" frameborder="0" scrolling="no"></iframe></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>