[tor-commits] [snowflake/master] Use more semantic HTML.
dcf at torproject.org
dcf at torproject.org
Sat Aug 24 04:53:11 UTC 2019
commit 49f4a710f8a1a708d9f9945459a41d470a9abec0
Author: David Fifield <david at 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;
}
- at 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 at 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>
More information about the tor-commits
mailing list