Commit 800216a7 authored by akwizgran's avatar akwizgran

Merged Vicki's new layout for small screens.

parent 96025287
...@@ -8,16 +8,16 @@ ...@@ -8,16 +8,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body id="about"> <body id="about">
<div id="wrapper">
<div id="header_container"> <div id="header_container">
<div id="header"> <div id="header">
<div id="logo"> <a href="index.html"><div id="logo"><img src="img/briar_logo_large.png" alt="Briar" class="logo"/></div></a>
<a href="index.html"><img src="img/briar_logo_large.png" alt="Briar" class="logo"/></a>
</div> <!-- logo -->
<div id="nav"> <div id="nav">
<iframe id="signupframe" style="display: none" name="signupframe" src="about:blank"></iframe> <iframe id="signupframe" style="display: none" name="signupframe" src="about:blank"></iframe>
<div id="signup"> <div id="signup">
<form id="signupform" action="https://lists.sourceforge.net/lists/subscribe/briar-announce" target="signupframe" method="post"> <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> <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> <button name="submit" type="submit" id="signup-submit" onClick="_submit_form();">Keep me updated</button>
</form> </form>
<div id="signupconf">Thanks! We'll keep you updated.</div> <div id="signupconf">Thanks! We'll keep you updated.</div>
...@@ -31,7 +31,9 @@ ...@@ -31,7 +31,9 @@
//--> //-->
</script> </script>
</div> <!-- signup --> </div> <!-- signup -->
<ul> <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="index.html" id="indexnav">Home</a></li>
<li><a href="download.html" id="downloadnav">Download</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="how-it-works.html" id="hownav">How&nbsp;it&nbsp;Works</a></li>
...@@ -44,7 +46,7 @@ ...@@ -44,7 +46,7 @@
<div id="container"> <div id="container">
<div id="content"> <div id="content">
<div class="intro"> <div class="full">
<h2>About us</h2> <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>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>
...@@ -59,9 +61,11 @@ ...@@ -59,9 +61,11 @@
<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> <!-- intro --> </div> <!-- full -->
</div> <!-- content --> </div> <!-- content -->
</div> <!-- container --> </div> <!-- container -->
</div> <!-- wrapper -->
<div class="clearboth"></div> <div class="clearboth"></div>
<div id="footer_container"> <div id="footer_container">
...@@ -85,9 +89,6 @@ ...@@ -85,9 +89,6 @@
<ul> <ul>
<li><a href="copyright.html">Copyright</a></li> <li><a href="copyright.html">Copyright</a></li>
<li>Site design by Reflective Spaces</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> </ul>
</div> <!-- footer --> </div> <!-- footer -->
</div> <!-- footer_container --> </div> <!-- footer_container -->
......
...@@ -8,16 +8,15 @@ ...@@ -8,16 +8,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body id="copyright"> <body id="copyright">
<div id="wrapper">
<div id="header_container"> <div id="header_container">
<div id="header"> <div id="header">
<div id="logo"> <a href="index.html"><div id="logo"><img src="img/briar_logo_large.png" alt="Briar" class="logo"/></div></a>
<a href="index.html"><img src="img/briar_logo_large.png" alt="Briar" class="logo"/></a>
</div> <!-- logo -->
<div id="nav"> <div id="nav">
<iframe id="signupframe" style="display: none" name="signupframe" src="about:blank"></iframe> <iframe id="signupframe" style="display: none" name="signupframe" src="about:blank"></iframe>
<div id="signup"> <div id="signup">
<form id="signupform" action="https://lists.sourceforge.net/lists/subscribe/briar-announce" target="signupframe" method="post"> <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> <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> <button name="submit" type="submit" id="signup-submit" onClick="_submit_form();">Keep me updated</button>
</form> </form>
<div id="signupconf">Thanks! We'll keep you updated.</div> <div id="signupconf">Thanks! We'll keep you updated.</div>
...@@ -31,7 +30,9 @@ ...@@ -31,7 +30,9 @@
//--> //-->
</script> </script>
</div> <!-- signup --> </div> <!-- signup -->
<ul> <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="index.html" id="indexnav">Home</a></li>
<li><a href="download.html" id="downloadnav">Download</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="how-it-works.html" id="hownav">How&nbsp;it&nbsp;Works</a></li>
...@@ -44,7 +45,7 @@ ...@@ -44,7 +45,7 @@
<div id="container"> <div id="container">
<div id="content"> <div id="content">
<div class="intro"> <div class="full">
<h2 >Copyright</h2> <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>
...@@ -57,9 +58,11 @@ ...@@ -57,9 +58,11 @@
<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> <!-- intro --> </div> <!-- full -->
</div> <!-- content --> </div> <!-- content -->
</div> <!-- container --> </div> <!-- container -->
</div> <!-- wrapper -->
<div class="clearboth"></div> <div class="clearboth"></div>
<div id="footer_container"> <div id="footer_container">
...@@ -83,9 +86,6 @@ ...@@ -83,9 +86,6 @@
<ul> <ul>
<li><a href="copyright.html">Copyright</a></li> <li><a href="copyright.html">Copyright</a></li>
<li>Site design by Reflective Spaces</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> </ul>
</div> <!-- footer --> </div> <!-- footer -->
</div> <!-- footer_container --> </div> <!-- footer_container -->
......
/* CSS Document */ /* CSS Document */
body, html { body, html {
height: 100%; height:100%;
margin: 0px auto; margin:0;
padding: 0px auto; padding:0;
background-color:#fff; background-color:#fff;
font-size:1em; font-size:1em;
font-family:Arial, Helvetica, sans-serif; font-family:Arial, Helvetica, sans-serif;
...@@ -16,42 +16,62 @@ body#how a#hownav, ...@@ -16,42 +16,62 @@ body#how a#hownav,
body#about a#aboutnav, body#about a#aboutnav,
body#involved a#involvednav {color:#87C214;} body#involved a#involvednav {color:#87C214;}
#wrapper {
min-height:100%;
margin-bottom:-2em;
}
img { img {
margin:0px; margin:0;
display:inline; display:inline;
padding:0px; padding:0;
border:none; 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{ @-ms-viewport{
zoom: 1.0; zoom:1.0;
width: extend-to-zoom; width:extend-to-zoom;
} }
.clearboth {clear:both;} .clearboth {clear:both;}
#header_container { #header_container {
height:120px; height:120px;
position:fixed; position:static;
width:100%; width:100%;
top:0; top:0;
background-color:#2D3E50; 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 { .logo {
border:3px solid #2D3E50; border:3px solid #2D3E50;
-webkit-border-radius: 20px; -webkit-border-radius:20px;
-moz-border-radius: 20px; -moz-border-radius:20px;
border-radius: 20px; border-radius:20px;
background-color:#fff; background-color:#fff;
padding:30px 20px 17px 20px; padding:30px 20px 17px 20px;
margin-top:-40px; margin-top:-40px;
...@@ -63,24 +83,41 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;} ...@@ -63,24 +83,41 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
#nav { #nav {
font-weight:bold; font-weight:bold;
padding:0px 0px 0px 0px; padding:0 0 0 0;
float:right; float:right;
margin:0px auto 10px auto; margin:10px auto 10px auto;
vertical-align:bottom; vertical-align:bottom;
width:80%; width:80%;
} }
#nav a:link {text-decoration:none;color:#fff;} #nav a:link {
#nav a:visited {text-decoration:none;color:#fff;} text-decoration:none;
#nav a:hover {text-decoration:none;color:#87C214;} color:#fff;
#nav a:active {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 { #nav ul {
clear:both; clear:both;
display:block; display:block;
list-style-type:none; list-style-type:none;
font-size:0.9em; font-size:0.9em;
padding:0px 0px 0px 0px; padding:0 0 0 0;
margin:0; margin:0;
text-align:right; text-align:right;
height:auto; height:auto;
...@@ -89,27 +126,34 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;} ...@@ -89,27 +126,34 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
#nav li { #nav li {
list-style-type:none; list-style-type:none;
display:inline; display:inline;
padding:0px 0px 0px 20px; padding:0 0 0 20px;
text-transform:uppercase; text-transform:uppercase;
margin:0px; margin:0;
font-weight:bold; font-weight:bold;
white-space:nowrap; white-space:nowrap;
} }
#nav a.current {color:#87C214;} #nav a.current {color:#87C214;}
#menu-toggle {display:none;}
#signup2 {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 { #signupform2 {
height:auto; height:auto;
padding-bottom:10px; padding-bottom:0;
float:left; float:left;
width:80%; width:80%;
font-size:1.5em; font-size:1.5em;
padding-top:10px; padding-top:10px;
padding-left:0px; padding-left:0;
} }
#signupconf { #signupconf {
...@@ -121,7 +165,7 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;} ...@@ -121,7 +165,7 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
color:#fff; color:#fff;
font-size:0.9em; font-size:0.9em;
font-weight:bold; font-weight:bold;
padding-bottom:0px; padding-bottom:0;
padding-top:10px; padding-top:10px;
} }
...@@ -133,7 +177,7 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;} ...@@ -133,7 +177,7 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
width:80%; width:80%;
font-size:1.5em; font-size:1.5em;
padding-top:10px; padding-top:10px;
padding-left:0px; padding-left:0;
} }
#signupform input, textarea { #signupform input, textarea {
...@@ -144,7 +188,7 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;} ...@@ -144,7 +188,7 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
background-color:#E2E1E1; background-color:#E2E1E1;
color:#565555; color:#565555;
padding:3px 5px; padding:3px 5px;
border:0px; border:0;
} }
#signupform2 input, textarea { #signupform2 input, textarea {
...@@ -155,17 +199,17 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;} ...@@ -155,17 +199,17 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
background-color:#E2E1E1; background-color:#E2E1E1;
color:#565555; color:#565555;
padding:3px 5px; padding:3px 5px;
border:0px; border:0;
} }
#signupform button { #signupform button {
width:auto; width:auto;
background-color:#C1392B; background-color:#C1392B;
color:#fff; color:#fff;
border:0px; border:0;
-webkit-border-radius: 5px; -webkit-border-radius:5px;
-moz-border-radius: 5px; -moz-border-radius:5px;
border-radius: 5px; border-radius:5px;
text-transform:uppercase; text-transform:uppercase;
font-size:0.6em; font-size:0.6em;
font-weight:normal; font-weight:normal;
...@@ -176,10 +220,10 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;} ...@@ -176,10 +220,10 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
width:auto; width:auto;
background-color:#C1392B; background-color:#C1392B;
color:#fff; color:#fff;
border:0px; border:0;
-webkit-border-radius: 5px; -webkit-border-radius:5px;
-moz-border-radius: 5px; -moz-border-radius:5px;
border-radius: 5px; border-radius:5px;
text-transform:uppercase; text-transform:uppercase;
font-size:0.6em; font-size:0.6em;
font-weight:normal; font-weight:normal;
...@@ -188,61 +232,105 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;} ...@@ -188,61 +232,105 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
#container { #container {
margin:0 auto; margin:0 auto;
padding:175px 0 30px 0; padding:175px 0 3em 0;
width:65%; width:700px;
background:#fff; background:#fff;
height: 100%; height:auto;
} }
#content { #content {
margin:20px 60px 20px 180px; margin:20px 0 0 0;
font-size:0.9em; font-size:0.9em;
line-height:1.4em; line-height:1.4em;
} }
#content ul {} #content ul {}
#content li {margin:0px 0px 10px 0px;}
#content li {margin:0 0 10px 0;}
#content h1 { #content h1 {
margin:23px 20px 0px 0px; margin:23px 20px 0 0;
font-size:3.5em; font-size:3.5em;
line-height:1.1em; line-height:1.1em;
font-weight:normal; font-weight:normal;
} }
#content h2 { #content h2 {
margin:23px 20px 0px 0px; margin:23px 20px 0 0;
font-size:2.9em; font-size:2.5em;
line-height:1.1em; line-height:1.1em;
font-weight:normal; font-weight:normal;
} }
#content h3 { #content h3 {
margin:20px 20px 0px 0px; margin:20px 20px 0 0;
font-size:2em; font-size:2em;
line-height:1.1em; line-height:1.1em;
font-weight:normal; font-weight:normal;
} }
#content h4 {margin:20px 20px 0px 0px;} #content h4 {
#content h5 {margin:20px 20px 0px 0px;} margin:20px 20px 0 0;
#content h6 {margin:20px 20px 0px 0px;} font-size:1.5em;
#content p {margin:20px 20px 20px 0px;} line-height:1.1em;
font-weight:normal;
}
#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:link {text-decoration:none;color:#87C214;font-weight:bold;} #content a:visited {
#content a:visited {text-decoration:none;color:#87C214;font-weight:bold;} text-decoration:none;
#content a:hover {text-decoration:none;color:#C1392B;font-weight:bold;} color:#87C214;
#content a:active {text-decoration:none;color:#87C214;font-weight:bold;} font-weight:bold;
}
#content .intro #introlist {margin:27px 0px 32px 0px;padding-left:15px;} #content a:hover {
#content .intro #introlist li {margin:1em 20px 0px 0px;} text-decoration:none;
color:#C1392B;
font-weight:bold;
}
#content a:active {
text-decoration:none;
color:#87C214;
font-weight:bold;
}
#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 { #content .intro #sublist {
clear:both; clear:both;
display:block; display:block;
list-style-type:none; list-style-type:none;
padding:0px; padding:0;
margin:10px 0 0px 0; margin:10px 0 0 0;
line-height:1.4em; line-height:1.4em;
height:auto; height:auto;
} }
...@@ -251,33 +339,51 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;} ...@@ -251,33 +339,51 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
float:left; float:left;
list-style-type:none; list-style-type:none;
display:inline; display:inline;
padding:0px 20px 0px 0px; padding:0 20px 0 0;
margin:10px 0px 0px 0px; margin:10px 0 0 0;
white-space:nowrap; white-space:nowrap;
} }
#sublist a.selected {color:#C1392B;} #sublist a.selected {color:#C1392B;}
.intro {width:70%;float:left;padding-bottom:40px;} .intro {
.full {width:100%;float:left;padding-bottom:40px;} 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;} .intro .button2 {margin-bottom:20px;}
#phone {width:30%;float:left;display:inline;} #phone {
width:30%;
float:left;
display:inline;
}
#phone2 {display:none;} #phone2 {display:none;}
#flattr { #flattr {font-size:0.6em;}
font-size:0.6em;
}
#footer_container { #footer_container {
color:#666; background-color:#87C214;
color:#fff;
bottom:0; bottom:0;
height:30px; height:2em;
left:0; left:0;
position:static; position:static;
width:100%; width:100%;
clear:both;
} }
#footer { #footer {
...@@ -287,16 +393,15 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;} ...@@ -287,16 +393,15 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
text-align:center; text-align:center;
font-size:0.7em; font-size:0.7em;
font-weight:bold; font-weight:bold;
background-color:#87C214; float:left;
color:#fff;
} }
#footer ul { #footer ul {
width:65%; width:700px;
display:block; display:block;
list-style-type:none; list-style-type:none;
font-size:0.9em; font-size:0.9em;
padding:0px 0px 0px 0px; padding:0 0 0 0;
margin:0 auto; margin:0 auto;
text-align:left; text-align:left;
}