Use more semantic HTML.

This commit is contained in:
David Fifield 2019-08-23 21:47:05 -06:00
parent 1063ef7b1d
commit 49f4a710f8
2 changed files with 53 additions and 50 deletions

View file

@ -13,13 +13,13 @@ body {
color: #212529; color: #212529;
} }
#header { header {
margin: 0; margin: 0;
line-height: 0; line-height: 0;
padding: 1.3rem 2.6rem; padding: 1.3rem 2.6rem;
} }
#header a { header a {
border-style: none; border-style: none;
display: inline-block; display: inline-block;
line-height: 0; line-height: 0;
@ -31,6 +31,10 @@ body {
background-color: #FFFFFF; background-color: #FFFFFF;
} }
section {
margin: 1.3rem 0;
}
h1 { h1 {
margin: 0; margin: 0;
font-size: 2.6rem; font-size: 2.6rem;
@ -38,25 +42,21 @@ h1 {
text-align: center; text-align: center;
} }
h3 { h2 {
margin: 0; margin: 0;
font-size: 2rem; font-size: 2rem;
color: #7D4698; color: #7D4698;
} }
.clear { .sidebyside {
margin: 2.6rem 0; display: flex;
overflow: auto; flex-flow: row wrap;
align-items: flex-start;
} }
@media only screen and (min-width: 600px) { .sidebyside section {
.browser, .extension { flex: 1 1 15rem;
float: left; padding: 0 1.3rem;
width: 50%;
}
.padding {
padding: 0 1.3rem;
}
} }
.addon { .addon {

View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
@ -7,12 +7,12 @@
<link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="index.css" />
</head> </head>
<body> <body>
<div id="header"> <header id="header">
<a href="https://www.torproject.org/"> <a href="https://www.torproject.org/">
<img src="tor-logo@2x.png" alt="Tor" height="50" /> <img src="tor-logo@2x.png" alt="Tor" height="50" />
</a> </a>
</div> </header>
<div id="content"> <section id="content">
<h1>SNOWFLAKE</h1> <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> <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 information about how Snowflake works see our
<a href="https://trac.torproject.org/projects/tor/wiki/doc/Snowflake/">documentation wiki</a>.</p> <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"> <section id="browser" class="browser">
<h3>Browser</h3> <h2>Browser</h2>
<p>If your internet access is censored, you should download <p>If your internet access is censored, you should download
<a href="https://www.torproject.org/download/">Tor Browser</a>.</p> <a href="https://www.torproject.org/download/">Tor Browser</a>.</p>
<p class="screenshot"><img src="screenshot.png" alt="Tor Browser screenshot" /></p> <p class="screenshot"><img src="screenshot.png" alt="Tor Browser screenshot" /></p>
</div></div> </section>
<div id="extension" class="extension"><div class="padding"> <section id="extension" class="extension">
<h3>Extension</h3> <h2>Extension</h2>
<p>If your internet access is <strong>not</strong> censored, you should <p>If your internet access is <strong>not</strong> censored, you should
consider installing the Snowflake extension to help users in censored 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 /> <img src="chrome150.jpg" alt="Install in Chrome" height="100" /><br />
<span>Install in Chrome</span> <span>Install in Chrome</span>
</a> </a>
<span class="clear"></span>
</p> </p>
</div></div> </section>
</div> </div>
<h3 id="bugs">REPORTING BUGS</h3> <section id="bugs">
<h2>REPORTING BUGS</h2>
<p>If you encounter problems with Snowflake as a client or a proxy, <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> please consider filing a bug. To do so, you will have to,</p>
<ol> <ol>
<li> <li>
Either <a href="https://trac.torproject.org/projects/tor/register">create an 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> 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> 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> <li><a href="https://trac.torproject.org/projects/tor/newticket?component=Circumvention%2FSnowflake">File a ticket</a>
using our bug tracker.</li> using our bug tracker.</li>
</ol> </ol>
<p>Please try to be as descriptive as possible with your ticket and if <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. possible include log messages that will help us reproduce the bug.
Consider adding keywords <em>snowflake-webextension</em> or <em>snowflake-client</em> 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 to let us know how which part of the Snowflake system is experiencing
problems.</p> problems.</p>
</section>
<h3 id="embed">EMBED</h3> <section id="embed">
<h2>EMBED</h2>
<p>It is now possible to embed the Snowflake badge on any website:</p> <p>It is now possible to embed the Snowflake badge on any website:</p>
<textarea readonly>&lt;iframe src="https://snowflake.torproject.org/embed.html" width="320" height="240" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;</textarea> <textarea readonly>&lt;iframe src="https://snowflake.torproject.org/embed.html" width="320" height="240" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;</textarea>
<p>Which looks like this:</p> <p>Which looks like this:</p>
<iframe src="embed.html" width="320" height="240" frameborder="0" scrolling="no"></iframe> <iframe src="embed.html" width="320" height="240" frameborder="0" scrolling="no"></iframe>
</section>
</div> </section>
</body> </body>
</html> </html>