Commit 28f9ce4a authored by okhin's avatar okhin

Merge branch 'some-design' into 'bootstrap'

Some design

Style for header and fotter/logos.
Some responsive.
I hope everythingis all right, I haven't been able to run the django in local so I worked with a version of the web downladed with wget and then applied the changes to the original files :-/

See merge request !10
parents 44f32daf 1d869229
......@@ -78,6 +78,7 @@ p label { width: 7em; display: inline-block; }
clear: both;
margin: auto;
background-color: #f9f9f9;
padding-bottom:30px;
}
.errorlist { font-size: .8em; color: red; }
......@@ -235,26 +236,28 @@ blockquote {
}
#header {
background: #f9f9f9;
padding:3%
}
#header a {
color: #222;
color: white;
text-decoration: none;
}
h1 {
margin: 25px 0 0 0; padding: 30px 0;
margin: 25px 0 0 0;
padding: 3%;
font-family: 'DroidSansBold', Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
font-size: 35px;
line-height: 1;
font-weight: normal;
font-weight: bold;
text-shadow:1px 2px 1px rgba(0, 0, 0, 0.4);
}
h1 span {
display: block;
font-family: 'DroidSansRegular', Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
font-size: .8em;
font-weight: normal;
color: orange;
font-weight: bold;
}
/* User */
......@@ -296,8 +299,40 @@ h1 span {
/* Content */
#content {
width: 610px;
width: 60%;
}
#add-case{
width: 40%;
}
#header{
background: rgba(11,145,194,1);
background: -moz-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(11,145,194,1)), color-stop(100%, rgba(4,220,227,1)));
background: -webkit-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
background: -o-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
background: -ms-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
background: linear-gradient(to right, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b91c2', endColorstr='#04dce3', GradientType=1 );
background-image: url("images/net-neutrality.png"), -moz-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
background-image: url("images/net-neutrality.png"), -webkit-gradient(left top, right top, color-stop(0%, rgba(11,145,194,1)), color-stop(100%, rgba(4,220,227,1)));
background-image: url("images/net-neutrality.png"), -webkit-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
background-image: url("images/net-neutrality.png"), -o-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
background-image: url("images/net-neutrality.png"), -ms-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
background-image: url("images/net-neutrality.png"), linear-gradient(to right, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
}
h2{
margin: 1.5em 0 1em 0;
}
h2:first-child{
margin: 0.5em 0 1em 0;
}
#global h2:first-child {
margin-top: 0;
}
......@@ -328,6 +363,23 @@ h1 span {
margin-top: 1em;
}
.navbar-default {
background: #333;
border: none !important;
border-radius: 0;
}
.navbar-default a{
color:white !important;
}
.navbar-default li:hover{
background:#444 !important;
}
.navbar-default li.active{
background:#555 !important;
}
/* View page */
......@@ -648,7 +700,7 @@ ul.messages {
#map { float: right; }
.logo-org { display: inline-block; margin: 15px; text-align: center; vertical-align: top; background-color: #f9f9f9; }
.logo-org img { height: 80px; }
.logo-org img { height: 80px; margin-bottom:10px}
.dark { background-color: #212121; }
tr.duplicate-status td { background: #aaa !important; }
......@@ -683,3 +735,26 @@ input[type="text"], input[type="textarea"] {
#table {
clear: both;
}
@media screen and (max-width: 700px) {
h1{font-size:30px}
h2{font-size:24px}
h1 span{font-size:16px}
}
@media screen and (max-width: 500px) {
#add-case {
width:100%;
}
#content {
width:100%;
}
}
@media screen and (max-width: 870px) {
.navbar-right input[type="text"]{
width:100px;
}
}
\ No newline at end of file
......@@ -89,15 +89,51 @@
</div>
<div id='footer'>
{% block footer %}
<p>{% trans "RespectMyNet.eu is an online platform enabling citizens to become the watchmen of the Internet by reporting Net Neutrality violations. Everyone is invited to report undue blocking or throttling of their Internet access, and help name and shame operators' harmful practices." %}</p>
<ul>
<li class="logo-org"><a href="https://www.bof.nl"><img alt="BoF logo" src="/static/img/bof.png" /></a></li>
<li class="logo-org"><a href="https://www.laquadrature.net/"><img alt="LQDN logo" src="/static/img/lqdn.png" /></a></li>
<li class="logo-org dark"><a href="https://www.openrightsgroup.org/"><img alt="ORG logo" src="/static/img/org.png" /></a></li>
<li class="logo-org dark"><br /><a href="http://nurpa.be"><img alt="NURPA logo" src="/static/img/nurpa.png"/></a></li>
<li class="logo-org"><a href="https://xnet-x.net/"><img alt="XNet logo" src="/static/img/xnet.png" /></a></li>
<li class="logo-org"><a href="https://edri.org/"><img alt="EDRI logo" src="/static/img/edri.png" /></a></li>
</ul>
<p style="padding:25px 5% 10px 5%;">{% trans "RespectMyNet.eu is an online platform enabling citizens to become the watchmen of the Internet by reporting Net Neutrality violations. Everyone is invited to report undue blocking or throttling of their Internet access, and help name and shame operators' harmful practices." %}</p>
<ul style="padding:0; max-width:800px; margin:0 auto;">
<li class="logo-org">
<a href="https://www.laquadrature.net/">
<img alt="LQDN logo" src="static/img/logos/la-quadrature-du-net.png" /><br>
La Quadrature du Net
</a>
</li>
<li class="logo-org">
<a href="https://www.bof.nl/">
<img alt="BoF logo" src="static/img/logos/Bits-of-Freedom.png" /><br>
Bits of Freedom
</a>
</li>
<li class="logo-org">
<a href="https://edri.org/">
<img alt="EDRI logo" src="static/img/logos/edri.png" /><br>
European Digital Rights
</a>
</li>
<li class="logo-org">
<a href="https://netzfreiheit.org/">
<img alt="Netzfreiheit logo" src="static/img/logos/netzfreiheit.png" /><br>
Initiative für Netzfreiheit
</a>
</li>
<li class="logo-org">
<a href="http://nurpa.be/">
<img alt="NURPA logo" src="static/img/logos/nurpa.png" /><br>
Nurpa
</a>
</li>
<li class="logo-org">
<a href="https://www.openrightsgroup.org/">
<img alt="ORG logo" src="static/img/logos/org.png" /><br>
Open Rights Group
</a>
</li>
<li class="logo-org">
<a href="https://xnet-x.net">
<img alt="Xnet logo" src="static/img/logos/Xnet.png" /><br>
Xnet
</a>
</li>
</ul>
{% endblock %}
</div>
<script type="text/javascript" src="/static/js/tinymce/tinyMCE/tinymce.min.js"></script>
......
......@@ -119,7 +119,7 @@ $(document).ready(function(){
</tbody>
</table>
</div>
<div class="col-xs-12 col-md-4">
<div id="add-case" class="col-xs-12 col-md-4">
<div class="panel panel-info">
<div class="panel-heading">
<h2>{% trans "Add New Case" %}</h2>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment