Commit 800216a7 authored by akwizgran's avatar akwizgran

Merged Vicki's new layout for small screens.

parent 96025287
......@@ -8,60 +8,64 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body id="about">
<div id="header_container">
<div id="header">
<div id="logo">
<a href="index.html"><img src="img/briar_logo_large.png" alt="Briar" class="logo"/></a>
</div> <!-- logo -->
<div id="nav">
<iframe id="signupframe" style="display: none" name="signupframe" src="about:blank"></iframe>
<div id="signup">
<form id="signupform" action="https://lists.sourceforge.net/lists/subscribe/briar-announce" target="signupframe" method="post">
<input placeholder="Email address" type="email" name="email" tabindex="2" ></input>
<button name="submit" type="submit" id="signup-submit" onClick="_submit_form();">Keep me updated</button>
</form>
<div id="signupconf">Thanks! We'll keep you updated.</div>
<script language="JavaScript">
<!--
function _submit_form(){
document.getElementById('signupform').style.display = 'none';
document.getElementById('signupconf').style.display = 'block';
return true
}
//-->
</script>
</div> <!-- signup -->
<ul>
<li><a href="index.html" id="indexnav">Home</a></li>
<li><a href="download.html" id="downloadnav">Download</a></li>
<li><a href="how-it-works.html" id="hownav">How&nbsp;it&nbsp;Works</a></li>
<li><a href="about.html" id="aboutnav">About&nbsp;Us</a></li>
<li><a href="get-involved.html" id="involvednav">Get&nbsp;Involved</a></li>
</ul>
</div> <!-- nav -->
</div> <!-- header -->
</div> <!-- header_container -->
<div id="container">
<div id="content">
<div class="intro">
<h2>About us</h2>
<div id="wrapper">
<div id="header_container">
<div id="header">
<a href="index.html"><div id="logo"><img src="img/briar_logo_large.png" alt="Briar" class="logo"/></div></a>
<div id="nav">
<iframe id="signupframe" style="display: none" name="signupframe" src="about:blank"></iframe>
<div id="signup">
<form id="signupform" action="https://lists.sourceforge.net/lists/subscribe/briar-announce" target="signupframe" method="post">
<input placeholder="Email address" type="email" name="email" tabindex="2"></input>
<button name="submit" type="submit" id="signup-submit" onClick="_submit_form();">Keep me updated</button>
</form>
<div id="signupconf">Thanks! We'll keep you updated.</div>
<script language="JavaScript">
<!--
function _submit_form(){
document.getElementById('signupform').style.display = 'none';
document.getElementById('signupconf').style.display = 'block';
return true
}
//-->
</script>
</div> <!-- signup -->
<label for="menu-toggle"><img src="img/menu.png"></label>
<input type="checkbox" id="menu-toggle"/>
<ul id="menu">
<li><a href="index.html" id="indexnav">Home</a></li>
<li><a href="download.html" id="downloadnav">Download</a></li>
<li><a href="how-it-works.html" id="hownav">How&nbsp;it&nbsp;Works</a></li>
<li><a href="about.html" id="aboutnav">About&nbsp;Us</a></li>
<li><a href="get-involved.html" id="involvednav">Get&nbsp;Involved</a></li>
</ul>
</div> <!-- nav -->
</div> <!-- header -->
</div> <!-- header_container -->
<p><strong>Michael Rogers</strong> started the Briar project to support freedom of expression, freedom of association and the right to privacy. He has studied and built peer-to-peer systems for over a decade, contributed to Freenet and LimeWire, and is now a postdoc researcher at TU Delft.</p>
<div id="container">
<div id="content">
<div class="full">
<h2>About us</h2>
<p><strong>Michael Rogers</strong> started the Briar project to support freedom of expression, freedom of association and the right to privacy. He has studied and built peer-to-peer systems for over a decade, contributed to Freenet and LimeWire, and is now a postdoc researcher at TU Delft.</p>
<p><strong>Eleanor Saitta</strong> is a hacker, designer, artist, writer, and barbarian. She has ten years' experience as a security consultant, and makes a living and a vocation of understanding how complex systems operate and redesigning them to work, or at least fail, better.</p>
<p><strong>Eleanor Saitta</strong> is a hacker, designer, artist, writer, and barbarian. She has ten years' experience as a security consultant, and makes a living and a vocation of understanding how complex systems operate and redesigning them to work, or at least fail, better.</p>
<p><strong>Bernard Tyers</strong> is an independent interaction designer and user researcher. He is interested in privacy and applying user-centred design to usable security. He is a long-time supporter of the Open Rights Group, Tor and free software projects.</p>
<p><strong>Bernard Tyers</strong> is an independent interaction designer and user researcher. He is interested in privacy and applying user-centred design to usable security. He is a long-time supporter of the Open Rights Group, Tor and free software projects.</p>
<p><strong>Ximin Luo</strong> is a software engineer by trade, interested in decentralised systems, cryptography, and network security. He is a long-time supporter of anti-censorship and free software projects, and also contributes to Tor, Debian, and Freenet.</p>
<p><strong>Ximin Luo</strong> is a software engineer by trade, interested in decentralised systems, cryptography, and network security. He is a long-time supporter of anti-censorship and free software projects, and also contributes to Tor, Debian, and Freenet.</p>
<p>Briar has received funding from <a href="http://smallmediafoundation.com/">Small Media</a>, the <a href="https://openitp.org/">Open Internet Tools Project</a>, and <a href="https://accessnow.org/">Access</a>.</p>
<p>Briar has received funding from <a href="http://smallmediafoundation.com/">Small Media</a>, the <a href="https://openitp.org/">Open Internet Tools Project</a>, and <a href="https://accessnow.org/">Access</a>.</p>
<p>To contact the team, please email <a href="mailto:contact@briarproject.org">contact@briarproject.org</a> [<a href="keys/contact.asc">PGP key</a>].</p>
<p>To contact the team, please email <a href="mailto:contact@briarproject.org">contact@briarproject.org</a> [<a href="keys/contact.asc">PGP key</a>].</p>
</div> <!-- full -->
</div> <!-- content -->
</div> <!-- container -->
</div> <!-- wrapper -->
</div> <!-- intro -->
</div> <!-- content -->
</div> <!-- container -->
<div class="clearboth"></div>
<div id="footer_container">
......@@ -85,9 +89,6 @@
<ul>
<li><a href="copyright.html">Copyright</a></li>
<li>Site design by Reflective Spaces</li>
<!--
<li><a href="http://www.reflectivespaces.co.uk" target="_blank">Site design by Reflective Spaces</a></li>
-->
</ul>
</div> <!-- footer -->
</div> <!-- footer_container -->
......
......@@ -8,58 +8,61 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body id="copyright">
<div id="header_container">
<div id="header">
<div id="logo">
<a href="index.html"><img src="img/briar_logo_large.png" alt="Briar" class="logo"/></a>
</div> <!-- logo -->
<div id="nav">
<iframe id="signupframe" style="display: none" name="signupframe" src="about:blank"></iframe>
<div id="signup">
<form id="signupform" action="https://lists.sourceforge.net/lists/subscribe/briar-announce" target="signupframe" method="post">
<input placeholder="Email address" type="email" name="email" tabindex="2" ></input>
<button name="submit" type="submit" id="signup-submit" onClick="_submit_form();">Keep me updated</button>
</form>
<div id="signupconf">Thanks! We'll keep you updated.</div>
<script language="JavaScript">
<!--
function _submit_form(){
document.getElementById('signupform').style.display = 'none';
document.getElementById('signupconf').style.display = 'block';
return true
}
//-->
</script>
</div> <!-- signup -->
<ul>
<li><a href="index.html" id="indexnav">Home</a></li>
<li><a href="download.html" id="downloadnav">Download</a></li>
<li><a href="how-it-works.html" id="hownav">How&nbsp;it&nbsp;Works</a></li>
<li><a href="about.html" id="aboutnav">About&nbsp;Us</a></li>
<li><a href="get-involved.html" id="involvednav">Get&nbsp;Involved</a></li>
</ul>
</div> <!-- nav -->
</div> <!-- header -->
</div> <!-- header_container -->
<div id="wrapper">
<div id="header_container">
<div id="header">
<a href="index.html"><div id="logo"><img src="img/briar_logo_large.png" alt="Briar" class="logo"/></div></a>
<div id="nav">
<iframe id="signupframe" style="display: none" name="signupframe" src="about:blank"></iframe>
<div id="signup">
<form id="signupform" action="https://lists.sourceforge.net/lists/subscribe/briar-announce" target="signupframe" method="post">
<input placeholder="Email address" type="email" name="email" tabindex="2"></input>
<button name="submit" type="submit" id="signup-submit" onClick="_submit_form();">Keep me updated</button>
</form>
<div id="signupconf">Thanks! We'll keep you updated.</div>
<script language="JavaScript">
<!--
function _submit_form(){
document.getElementById('signupform').style.display = 'none';
document.getElementById('signupconf').style.display = 'block';
return true
}
//-->
</script>
</div> <!-- signup -->
<label for="menu-toggle"><img src="img/menu.png"></label>
<input type="checkbox" id="menu-toggle"/>
<ul id="menu">
<li><a href="index.html" id="indexnav">Home</a></li>
<li><a href="download.html" id="downloadnav">Download</a></li>
<li><a href="how-it-works.html" id="hownav">How&nbsp;it&nbsp;Works</a></li>
<li><a href="about.html" id="aboutnav">About&nbsp;Us</a></li>
<li><a href="get-involved.html" id="involvednav">Get&nbsp;Involved</a></li>
</ul>
</div> <!-- nav -->
</div> <!-- header -->
</div> <!-- header_container -->
<div id="container">
<div id="content">
<div class="intro">
<h2 >Copyright</h2>
<div id="container">
<div id="content">
<div class="full">
<h2 >Copyright</h2>
<p>Briar is free software. You can redistribute it and modify it under the terms of the <a href="https://gnu.org/licenses/gpl.txt">GNU General Public License</a>.</p>
<p>Briar is free software. You can redistribute it and modify it under the terms of the <a href="https://gnu.org/licenses/gpl.txt">GNU General Public License</a>.</p>
<p>Google Play is a trademark of Google Inc. The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the <a href="https://creativecommons.org/licenses/by/3.0">Creative Commons 3.0 Attribution License</a>.</p>
<p>Google Play is a trademark of Google Inc. The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the <a href="https://creativecommons.org/licenses/by/3.0">Creative Commons 3.0 Attribution License</a>.</p>
<p>The mobile phone image is reproduced or modified from work created and shared by <a href="https://secure.flickr.com/photos/vernieman">Vernon Chan</a> and used according to terms described in the <a href="https://creativecommons.org/licenses/by/2.0">Creative Commons 2.0 Attribution License</a>.</p>
<p>The mobile phone image is reproduced or modified from work created and shared by <a href="https://secure.flickr.com/photos/vernieman">Vernon Chan</a> and used according to terms described in the <a href="https://creativecommons.org/licenses/by/2.0">Creative Commons 2.0 Attribution License</a>.</p>
<p>The server icon was created by <a href="http://www.visualpharm.com/">VisualPharm</a>.</p>
<p>The server icon was created by <a href="http://www.visualpharm.com/">VisualPharm</a>.</p>
<p>All other content on this website is (c) 2014 Sublime Software Ltd. You can redistribute and modify it under the terms of the <a href="https://creativecommons.org/licenses/by/4.0">Creative Commons 4.0 Attribution License</a>.</p>
<p>All other content on this website is (c) 2014 Sublime Software Ltd. You can redistribute and modify it under the terms of the <a href="https://creativecommons.org/licenses/by/4.0">Creative Commons 4.0 Attribution License</a>.</p>
</div> <!-- full -->
</div> <!-- content -->
</div> <!-- container -->
</div> <!-- wrapper -->
</div> <!-- intro -->
</div> <!-- content -->
</div> <!-- container -->
<div class="clearboth"></div>
<div id="footer_container">
......@@ -83,9 +86,6 @@
<ul>
<li><a href="copyright.html">Copyright</a></li>
<li>Site design by Reflective Spaces</li>
<!--
<li><a href="http://www.reflectivespaces.co.uk" target="_blank">Site design by Reflective Spaces</a></li>
-->
</ul>
</div> <!-- footer -->
</div> <!-- footer_container -->
......
/* CSS Document */
body, html {
height: 100%;
margin: 0px auto;
padding: 0px auto;
height:100%;
margin:0;
padding:0;
background-color:#fff;
font-size:1em;
font-family:Arial, Helvetica, sans-serif;
......@@ -16,42 +16,62 @@ body#how a#hownav,
body#about a#aboutnav,
body#involved a#involvednav {color:#87C214;}
#wrapper {
min-height:100%;
margin-bottom:-2em;
}
img {
margin:0px;
margin:0;
display:inline;
padding:0px;
padding:0;
border:none;
vertical-align: middle;
vertical-align:middle;
}
figure {text-align:center;margin:0px 0px 50px 0px;padding:0px;}
figure {
text-align:center;
margin:0 0 50px 0;
padding:0;
}
figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
figcaption {
margin:10px 0 0 0;
font-weight:bold;
text-align:center;
}
@-ms-viewport{
zoom: 1.0;
width: extend-to-zoom;
zoom:1.0;
width:extend-to-zoom;
}
.clearboth {clear:both;}
#header_container {
height:120px;
position:fixed;
position:static;
width:100%;
top:0;
background-color:#2D3E50;
float:left;
}
#header {margin:20px auto 0 auto;width:65%;}
#header {
margin:20px auto 0 auto;
width:700px;
}
#logo {float:left;width:20%;}
#logo {
float:left;
width:20%;
}
.logo {
border:3px solid #2D3E50;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
background-color:#fff;
padding:30px 20px 17px 20px;
margin-top:-40px;
......@@ -63,24 +83,41 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
#nav {
font-weight:bold;
padding:0px 0px 0px 0px;
padding:0 0 0 0;
float:right;
margin:0px auto 10px auto;
margin:10px auto 10px auto;
vertical-align:bottom;
width:80%;
}
#nav a:link {text-decoration:none;color:#fff;}
#nav a:visited {text-decoration:none;color:#fff;}
#nav a:hover {text-decoration:none;color:#87C214;}
#nav a:active {text-decoration:none;color:#fff;}
#nav a:link {
text-decoration:none;
color:#fff;
}
#nav a:visited {
text-decoration:none;
color:#fff;
}
#nav a:hover {
text-decoration:none;
color:#87C214;
}
#nav a:active {
text-decoration:none;
color:#fff;
}
#nav label {display:none;}
#nav ul {
clear:both;
display:block;
list-style-type:none;
font-size:0.9em;
padding:0px 0px 0px 0px;
padding:0 0 0 0;
margin:0;
text-align:right;
height:auto;
......@@ -89,27 +126,34 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
#nav li {
list-style-type:none;
display:inline;
padding:0px 0px 0px 20px;
padding:0 0 0 20px;
text-transform:uppercase;
margin:0px;
margin:0;
font-weight:bold;
white-space:nowrap;
}
#nav a.current {color:#87C214;}
#menu-toggle {display:none;}
#signup2 {display:none;}
#signupform {height:30px;padding-bottom:10px;float:right;text-align:right;}
#signupform {
height:30px;
padding-bottom:10px;
float:right;
text-align:right;
}
#signupform2 {
height:auto;
padding-bottom:10px;
padding-bottom:0;
float:left;
width:80%;
font-size:1.5em;
padding-top:10px;
padding-left:0px;
padding-left:0;
}
#signupconf {
......@@ -121,7 +165,7 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
color:#fff;
font-size:0.9em;
font-weight:bold;
padding-bottom:0px;
padding-bottom:0;
padding-top:10px;
}
......@@ -133,7 +177,7 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
width:80%;
font-size:1.5em;
padding-top:10px;
padding-left:0px;
padding-left:0;
}
#signupform input, textarea {
......@@ -144,7 +188,7 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
background-color:#E2E1E1;
color:#565555;
padding:3px 5px;
border:0px;
border:0;
}
#signupform2 input, textarea {
......@@ -155,17 +199,17 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
background-color:#E2E1E1;
color:#565555;
padding:3px 5px;
border:0px;
border:0;
}
#signupform button {
width:auto;
background-color:#C1392B;
color:#fff;
border:0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:0;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
text-transform:uppercase;
font-size:0.6em;
font-weight:normal;
......@@ -176,10 +220,10 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
width:auto;
background-color:#C1392B;
color:#fff;
border:0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:0;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
text-transform:uppercase;
font-size:0.6em;
font-weight:normal;
......@@ -188,61 +232,105 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
#container {
margin:0 auto;
padding:175px 0 30px 0;
width:65%;
padding:175px 0 3em 0;
width:700px;
background:#fff;
height: 100%;
height:auto;
}
#content {
margin:20px 60px 20px 180px;
margin:20px 0 0 0;
font-size:0.9em;
line-height:1.4em;
}
#content ul {}
#content li {margin:0px 0px 10px 0px;}
#content li {margin:0 0 10px 0;}
#content h1 {
margin:23px 20px 0px 0px;
margin:23px 20px 0 0;
font-size:3.5em;
line-height:1.1em;
font-weight:normal;
}
#content h2 {
margin:23px 20px 0px 0px;
font-size:2.9em;
margin:23px 20px 0 0;
font-size:2.5em;
line-height:1.1em;
font-weight:normal;
}
#content h3 {
margin:20px 20px 0px 0px;
margin:20px 20px 0 0;
font-size:2em;
line-height:1.1em;
font-weight:normal;
}
#content h4 {margin:20px 20px 0px 0px;}
#content h5 {margin:20px 20px 0px 0px;}
#content h6 {margin:20px 20px 0px 0px;}
#content p {margin:20px 20px 20px 0px;}
#content h4 {
margin:20px 20px 0 0;
font-size:1.5em;
line-height:1.1em;
font-weight:normal;
}
#content a:link {text-decoration:none;color:#87C214;font-weight:bold;}
#content a:visited {text-decoration:none;color:#87C214;font-weight:bold;}
#content a:hover {text-decoration:none;color:#C1392B;font-weight:bold;}
#content a:active {text-decoration:none;color:#87C214;font-weight:bold;}
#content h5 {
margin:20px 20px 0 0;
font-size:1em;
line-height:1.1em;
font-weight:normal;
}
#content h6 {
margin:20px 20px 0 0;
font-size:1em;
line-height:1.1em;
font-weight:normal;
}
#content p {margin:20px 20px 20px 0;}
#content a:link {
text-decoration:none;
color:#87C214;
font-weight:bold;
}
#content a:visited {
text-decoration:none;
color:#87C214;
font-weight:bold;
}
#content a:hover {
text-decoration:none;
color:#C1392B;
font-weight:bold;
}
#content a:active {
text-decoration:none;
color:#87C214;
font-weight:bold;
}
#content .intro #introlist {margin:27px 0px 32px 0px;padding-left:15px;}
#content .intro #introlist li {margin:1em 20px 0px 0px;}
#content .intro #introlist {
margin:30px 0 32px 10px;
padding-left:20px;
}
#content .intro #introlist ul {}
#content .intro #introlist li {margin:1em 20px 0 0;}
#content .intro #sublist {
clear:both;
display:block;
list-style-type:none;
padding:0px;
margin:10px 0 0px 0;
padding:0;
margin:10px 0 0 0;
line-height:1.4em;
height:auto;
}
......@@ -251,33 +339,51 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
float:left;
list-style-type:none;
display:inline;
padding:0px 20px 0px 0px;
margin:10px 0px 0px 0px;
padding:0 20px 0 0;
margin:10px 0 0 0;
white-space:nowrap;
}
#sublist a.selected {color:#C1392B;}
.intro {width:70%;float:left;padding-bottom:40px;}
.full {width:100%;float:left;padding-bottom:40px;}
.intro {
width:70%;
float:left;
padding-bottom:40px;
}
.full {
width:100%;
float:left;
padding-bottom:40px;
}
.intro .button {
margin-right:30px;
margin-bottom:20px;
}
.intro .button {margin-right:30px;margin-bottom:20px;}
.intro .button2 {margin-bottom:20px;}
#phone {width:30%;float:left;display:inline;}
#phone {
width:30%;
float:left;
display:inline;
}
#phone2 {display:none;}
#flattr {
font-size:0.6em;
}
#flattr {font-size:0.6em;}
#footer_container {
color:#666;
background-color:#87C214;
color:#fff;
bottom:0;
height:30px;
height:2em;
left:0;
position:static;
width:100%;
clear:both;
}
#footer {
......@@ -287,16 +393,15 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
text-align:center;
font-size:0.7em;
font-weight:bold;
background-color:#87C214;
color:#fff;
float:left;
}
#footer ul {
width:65%;
width:700px;
display:block;
list-style-type:none;
font-size:0.9em;
padding:0px 0px 0px 0px;
padding:0 0 0 0;
margin:0 auto;
text-align:left;
}
......@@ -304,57 +409,57 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
#footer li {
list-style-type:none;
display:inline;
padding:0px 10px 0px 0px;
margin:0px;
padding:0 10px 0 0;
margin:0;
font-weight:normal;
}
#footer a:link {text-decoration:none;color:#fff;}
#footer a:visited {text-decoration:none;color:#fff;}
#footer a:hover {text-decoration:none;color:#fff;}
#footer a:active {text-decoration:none;color:#fff;}
@media all and (max-width:1400px) {
#header_container {
position:static;
float:left;
width:100%;
top:0;
background-color:#2D3E50;
}
#header, #container {width:80%;}
#footer ul {width:80%;}
#content {margin-left:0px;margin-right:0px;}
#footer a:link {
text-decoration:none;
color:#fff;
}
@media all and (max-device-width:1100px) {
#header_container {
position:static;
float:left;
width:100%;
top:0;
background-color:#2D3E50;
}
#header, #container {width:80%;}
#footer ul {width:80%;}
#content {margin-left:0px;margin-right:0px;}
#footer a:visited {
text-decoration:none;
color:#fff;
}
@media all and (max-width:800px) {
#nav {width:400px;}
figure img {width:100%;}
#footer a:hover {
text-decoration:none;
color:#fff;
}
@media all and (max-device-width:800px) {
#nav {width:400;}
figure img {width:100%;}
#footer a:active {