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,26 +42,22 @@ 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;
width: 50%;
}
.padding {
padding: 0 1.3rem; padding: 0 1.3rem;
} }
}
.addon { .addon {
margin-top: 2.6rem 0; margin-top: 2.6rem 0;

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,13 +52,13 @@
<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>
@ -77,8 +77,10 @@
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>
@ -87,7 +89,8 @@
<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>