Commit 800216a7 authored by akwizgran's avatar akwizgran

Merged Vicki's new layout for small screens.

parent 96025287
......@@ -8,16 +8,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body id="about">
<div id="wrapper">
<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 -->
<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>
<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>
......@@ -31,7 +31,9 @@
//-->
</script>
</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="download.html" id="downloadnav">Download</a></li>
<li><a href="how-it-works.html" id="hownav">How&nbsp;it&nbsp;Works</a></li>
......@@ -44,7 +46,7 @@
<div id="container">
<div id="content">
<div class="intro">
<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>
......@@ -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>
</div> <!-- intro -->
</div> <!-- full -->
</div> <!-- content -->
</div> <!-- container -->
</div> <!-- wrapper -->
<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,16 +8,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body id="copyright">
<div id="wrapper">
<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 -->
<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>
<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>
......@@ -31,7 +30,9 @@
//-->
</script>
</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="download.html" id="downloadnav">Download</a></li>
<li><a href="how-it-works.html" id="hownav">How&nbsp;it&nbsp;Works</a></li>
......@@ -44,7 +45,7 @@
<div id="container">
<div id="content">
<div class="intro">
<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>
......@@ -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>
</div> <!-- intro -->
</div> <!-- full -->
</div> <!-- content -->
</div> <!-- container -->
</div> <!-- wrapper -->
<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 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 {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 a:visited {
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 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: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 {
text-decoration:none;
color:#fff;
}
@media all and (max-width:645px) {
#nav {width:300px;}
#header_container {height:auto;}
#phone img {width:100px;}
.intro {width:100%;}
@media only screen and (max-width: 48em) {
#wrapper {margin-bottom:-5em;}
#content {
margin-left:0;
margin-right:0;
}
#content figure img {width:100%;}
#container {
width:90%;
padding-top:70px;
padding-bottom:5em;
}
#content h1 {
font-size:2em;
margin-top:15px;
}
#content h2 {
font-size:2em;
margin-top:15px;
}
#phone2 {
width:auto;
clear:both;
......@@ -363,57 +468,107 @@ figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}
margin:20px 20px 20px 0;
float:left;
}
#phone {display:none;}
#logo {margin-bottom:20px;}
}
@media screen and (max-device-width:645px) {
#nav {width:300px;}
#header_container {height:auto;}
#phone img {width:100px;}
.intro {width:100%;}
#phone2 {
.logo {display:none;}
#header {
height:auto;
margin:0;
width:100%;
float:left;
padding:0;
}
#logo {
padding:0;
margin:0;
float:left;
width:50%;
height:71px;
background-size:129px 51px;
-webkit-background-size:129px 51px;
-moz-background-size:129px 51px;
-o-background-size:129px 51px;
background-image:url('../img/briar_logo_sm.png');
background-position:1em 10px;
background-repeat: no-repeat;
}
#header_container {
height:auto;
position:static;
float:left;
margin:0;
}
#nav {
float:left;
width:50%;
margin:0;
}
#nav a {
width:100%;
height:3em;
display:block;
}
#nav label {
display:block;
float:right;
margin:0 1em 0 0;
line-height:71px;
}
label {cursor:pointer;}
#nav ul {display:none;}
#menu-toggle {display:none;}
#menu {display:none;}
#menu-toggle:checked + #menu {display:block;}
#menu li {
background:#2D3E50;
border-top:1px solid #34495e;
border-bottom:1px solid #273646;
margin-left:-100%;
display:block;
font-size:0.9em;
line-height:3em;
text-align:left;
padding:2px 0 0 30px;