# HG changeset patch
# User Dennis Fink <dennis.fink@c3l.lu>
# Date 2015-10-22 22:35:56
# Node ID bc7143dbc60f6f87627daa32dd669f28c7976a1a
# Parent  041a255ca6ce927b8dca21eef624db1585a72db7
# Parent  bd7608fb3d38e341b2c9ef17e13bc1e4e95adc29

Merge feature-responsive

diff --git a/ennstatus/static/css/ennstatus.css b/ennstatus/static/css/ennstatus.css
--- a/ennstatus/static/css/ennstatus.css
+++ b/ennstatus/static/css/ennstatus.css
@@ -166,3 +166,27 @@ a, a:hover, a:active, a:visited {
 .checkbox label, .radio label {
     padding-left: 12px;
 }
+
+.btn {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.highlighted-label {
+    font-size: 24px;
+    margin-bottom: 10px;
+    font-weight: 500;
+    line-height: 1.1;
+    box-sizing: border-box;
+    display: inline-block;
+}
+
+.highlighted-label-big {
+    font-size: 30px;
+    margin-bottom: 10px;
+    font-weight: 500;
+    line-height: 1.1;
+    box-sizing: border-box;
+    display: inline-block;
+
+}
diff --git a/ennstatus/templates/donate/index.html b/ennstatus/templates/donate/index.html
--- a/ennstatus/templates/donate/index.html
+++ b/ennstatus/templates/donate/index.html
@@ -23,16 +23,18 @@
 {% endblock %}
 
 {% block content %}
-  <div class="col-md-4 text-center">
-    <img src="{{ url_for('static', filename='images/Support.png') }}" class="img-rounded" alt="WhoIs" width="160"></img>
-    <h2>Support us!</h2>
+  <div class="col-md-4">
+    <img src="{{ url_for('static', filename='images/Support.png') }}" class="img-responsive img-rounded center-block" alt="WhoIs" width="160"></img>
+    <div class="text-center">
+      <h2>Support us!</h2>
+    </div>
   </div>
   <div class="col-md-8">
     <div class="jumbotron">
       <h2>Take action for a <strong>#FreeInternet</strong>! Support us today!</h2>
       <p>As a non-profit organization we are 100% community funded. Donations from our members and supporters will be used to <strong>power Tor nodes</strong>, <strong>print flyers and posters</strong> or cover administrative charges.</p>
-      <h3><a href="{{ url_for('donate.received') }}"><span class="label label-info">Donation history</span></a>
-      <a href="{{ url_for('root.bridgeprogram') }}"><span class="label label-primary">Adopt a Tor Bridge</span></a></h3>
+      <span class='highlighted-label'><a href="{{ url_for('donate.received') }}"><span class="label label-info">Donation history</span></a></span>
+      <span class='highlighted-label'><a href="{{ url_for('root.bridgeprogram') }}"><span class="label label-primary">Adopt a Tor Bridge</span></a></span>
     </div>
   </div>
   <div class="col-md-12">
diff --git a/ennstatus/templates/donate/received.html b/ennstatus/templates/donate/received.html
--- a/ennstatus/templates/donate/received.html
+++ b/ennstatus/templates/donate/received.html
@@ -6,6 +6,8 @@
 {% block content %}
   <div class="col-md-12">
     <h2>Received Donations</h2>
+  </div>
+  <div class="col-md-12">
     <div class="pull-left">
       {% if csv_file %}
         <h3>{{ '-'.join([year, month]) }}</h3>
@@ -18,15 +20,15 @@
         {{ form.hidden_tag() }}
         <div class="form-group">
           {{ form.year.label }}
-          {{ form.year(class_="form-control") }}
+          {{ form.year(class_="form-control input-sm") }}
           {{ form.month.label }}
-          {{ form.month(class_="form-control") }}
+          {{ form.month(class_="form-control input-sm") }}
+          <input type="submit" class="btn btn-primary btn-sm" value="Submit">
         </div>
-        <input type="submit" class="btn btn-primary btn-sm" value="Submit">
       </form> 
     </div>
+    <div class="clearfix"></div>
   </div>
-  <div class="clearfix"></div>
   <div class="col-md-12">
     {% if csv_file %}
       {{ macros.create_donations_table(csv_file) }}
diff --git a/ennstatus/templates/root/about.html b/ennstatus/templates/root/about.html
--- a/ennstatus/templates/root/about.html
+++ b/ennstatus/templates/root/about.html
@@ -3,12 +3,6 @@
 {% set title = "Who we are" %}
 
 {% block content %}
-    <!--
-    <div class="col-md-4 text-center">
-      <img class="img-rounded" alt="WhoIs" src="{{ url_for('static', filename='images/WhoIs.png') }}" width="160" height="189"></img>
-      <h3>Who we are</h3>
-      </div> -->
-
   <div class="col-md-offset-1 col-md-11">
     <h2>Who we are</h2>
     <h3>Organization</h3>
diff --git a/ennstatus/templates/root/abuse.html b/ennstatus/templates/root/abuse.html
--- a/ennstatus/templates/root/abuse.html
+++ b/ennstatus/templates/root/abuse.html
@@ -3,10 +3,6 @@
 {% set title = "Abuse" %}
 
 {% block content %}
-  <!-- <div class="col-md-4 text-center">
-    <img src="{{ url_for('static', filename='images/Abuse.png') }}" class="img-rounded" alt="FVDE_Logo_LQ" width="160"></img>
-    <h2>Report Abuse!</h2>
-  </div> -->
   <div class="col-md-offset-1 col-md-11">
     <h2>Abuse handling</h2>
     <p class="lead">We take our mission very seriously and carefully examine abuse cases.</p>
diff --git a/ennstatus/templates/root/contact.html b/ennstatus/templates/root/contact.html
--- a/ennstatus/templates/root/contact.html
+++ b/ennstatus/templates/root/contact.html
@@ -3,9 +3,11 @@
 {% set title = "Contact" %}
 
 {% block content %}
-  <div class="col-md-4 text-center">
-    <img src="{{ url_for('static', filename='images/Contact.png') }}" class="img-rounded" alt="WhoIs" width="160"></img>
-    <h2>Contact</h2>
+  <div class="col-md-4">
+    <img src="{{ url_for('static', filename='images/Contact.png') }}" class="img-responsive img-rounded center-block" alt="WhoIs" width="160"></img>
+    <div class="text-center">
+      <h2>Contact</h2>
+    </div>
   </div>
   <div class="col-md-8">
     <h2>General</h2>
diff --git a/ennstatus/templates/root/index.html b/ennstatus/templates/root/index.html
--- a/ennstatus/templates/root/index.html
+++ b/ennstatus/templates/root/index.html
@@ -8,8 +8,8 @@
 {% endblock %}
 
 {% block content %}
-  <div class="col-md-4 text-center">
-    <img class="img-rounded" alt="FVDE_Logo" src="{{ url_for('static', filename='images/logo/FVDE_logo_resize.png') }}"></img>
+  <div class="col-md-4">
+    <img class="img-rounded center-block" alt="FVDE_Logo" src="{{ url_for('static', filename='images/logo/FVDE_logo_resize.png') }}"></img>
   </div>
   <div class="col-md-8">
     <div class="jumbotron">
@@ -17,8 +17,9 @@
 	    <p><em>Luxembourg based non-profit organization defending civil rights on the internet.</em></p>
       <p>We provide high-bandwidth Tor nodes all over the world to protect <strong>online privacy</strong>, <strong>anonymity</strong>, <strong>freedom of speech</strong> and fight <strong>censorship</strong>!
       </p>
-      <h3><a href="{{ url_for('root.member') }}"><span class="label label-success">Become a Member</span></a> <a href="{{ url_for('donate.index') }}"><span class="label label-primary">Donate</span></a>
-        <a class="pull-right" href="https://twitter.com/FrennVunDerEnn" target="blank"><span class="label label-info">@FrennVunDerEnn</span></a></h3>
+      <span class="highlighted-label"><a href="{{ url_for('root.member') }}"><span class="label label-success">Become a Member</span></a></span>
+      <span class="highlighted-label"><a href="{{ url_for('donate.index') }}"><span class="label label-primary">Donate</span></a></span>
+      <span class="highlighted-label pull-right"><a href="https://twitter.com/FrennVunDerEnn" target="blank"><span class="label label-info">@FrennVunDerEnn</span></a></span>
     </div>
   </div>
   <div class="col-md-1">
@@ -38,8 +39,8 @@
     </blockquote>
   </div>
   <div class="col-md-6">
-    <p>
-      <video id="tor-animation" width="560" height="315" controls preload="none" class="video-js vjs-default-skin vjs-big-play-centered" data-setup="">
+    <div class="embed-responsive embed-responsive-16by9">
+      <video id="tor-animation" width="560" height="315" controls preload="none" class="video-js vjs-default-skin vjs-big-play-centered embed-responsive-item" data-setup="">
         <source src="{{ url_for('static', filename='videos/Tor_Animation.webm') }}" type='video/webm' />
         <source src="{{ url_for('static', filename='videos/Tor_Animation.mp4') }}" type='video/mp4' />
 
@@ -64,7 +65,7 @@
         <track src="{{ url_for('static', filename='videos/subtitles/Tor_animation.zh-CN.vtt') }}" srclang="zh-CN" label="Chinese (China)">
         <track src="{{ url_for('static', filename='videos/subtitles/Tor_animation.zh-HK.vtt') }}" srclang="zh-HK" label="Chinese (Hongkong)">
       </video>
-    </p>
+    </div>
   </div>
   <div class="col-md-6">
       <p class=lead>
@@ -74,7 +75,7 @@
       <p>
         By bouncing your communications around a distributed network of relays run by volunteers all around the world, it prevents somebody watching your Internet connection from learning what sites you visit, and it prevents the sites you visit from learning your physical location.
       </p>
-      <h2><a href="http://torproject.lu" target="blank"><span class="label label-info">Learn more about Tor</span></a></h2>
+      <span class="highlighted-label-big"><a href="http://torproject.lu" target="blank"><span class="label label-info">Learn more about Tor</span></a></span>
   </div>
 {% endblock %}
 
diff --git a/ennstatus/templates/root/member.html b/ennstatus/templates/root/member.html
--- a/ennstatus/templates/root/member.html
+++ b/ennstatus/templates/root/member.html
@@ -3,9 +3,11 @@
 {% set title = "Member" %}
 
 {% block content %}
-  <div class="col-md-4 text-center">
-    <img src="{{ url_for('static', filename='images/Partners.png') }}" class="img-rounded" alt="Partners" width="160"></img>
-    <h3>Join</h3>
+  <div class="col-md-4">
+    <img src="{{ url_for('static', filename='images/Partners.png') }}" class="img-responsive img-rounded center-block" alt="Partners" width="160"></img>
+    <div class="text-center">
+      <h2>Join</h2>
+    </div>
   </div>
   <div class="col-md-8">
     <h2>Membership</h2>
diff --git a/ennstatus/templates/root/mirrors.html b/ennstatus/templates/root/mirrors.html
--- a/ennstatus/templates/root/mirrors.html
+++ b/ennstatus/templates/root/mirrors.html
@@ -11,9 +11,11 @@
 {% endif %}
 
 {% block content %}
-  <div class="col-md-4 text-center">
-    <img src="{{ url_for('static', filename='images/Services.png') }}" class="img-rounded" alt="Partners" width="160"></img>
-    <h3>Mirrors</h3>
+  <div class="col-md-4">
+    <img src="{{ url_for('static', filename='images/Services.png') }}" class="img-responsive img-rounded center-block" alt="Partners" width="160"></img>
+    <div class="text-center">
+      <h2>Mirrors</h2>
+    </div>
   </div>
   <div class="col-md-8">
     <h2>Mirrors</h2>
diff --git a/ennstatus/templates/root/partners.html b/ennstatus/templates/root/partners.html
--- a/ennstatus/templates/root/partners.html
+++ b/ennstatus/templates/root/partners.html
@@ -3,9 +3,11 @@
 {% set title = "Partners" %}
 
 {% block content %}
-  <div class="col-md-4 text-center">
-    <img src="{{ url_for('static', filename='images/Partners.png') }}" class="img-rounded" alt="Partners" width="160"></img>
-    <h3>Partners</h3>
+  <div class="col-md-4">
+    <img src="{{ url_for('static', filename='images/Partners.png') }}" class="img-responsive img-rounded center-block" alt="Partners" width="160"></img>
+    <div class="text-center">
+      <h2>Partners</h2>
+    </div>
   </div>
   <div class="col-md-8">
     <h2>Partners</h2>
diff --git a/ennstatus/templates/status/macros.html b/ennstatus/templates/status/macros.html
--- a/ennstatus/templates/status/macros.html
+++ b/ennstatus/templates/status/macros.html
@@ -55,46 +55,48 @@
     {% set headers = ('#', 'Name', 'Tor Status', 'Country', 'Fingerprint', 'OBFS', 'FTEProxy', 'Flashproxy', 'meek', 'Last Updated <noscript>(UTC)</noscript>') %}
   {% endif %}
   <h2>{{ server_type|title }}</h2>
-  <table class="table table-bordered table-striped sortable">
-    <thead>
-      <tr>
-        {% for name in headers %}
-          <th>{{ name|safe }}</th>
+  <div class="table-responsive">
+    <table class="table table-bordered table-striped sortable">
+      <thead>
+        <tr>
+          {% for name in headers %}
+            <th>{{ name|safe }}</th>
+          {% endfor %}
+        </tr>
+      </thead>
+      <tbody>
+        {% for server in servers|sort(attribute='name')|sort(attribute='country') %}
+        <tr {% if server.name in config['ENNSTATUS_BRIDGE_PROGRAM'] %}class="info"{% endif %}>
+            <td>{{ loop.index }}</td>
+            {% if server_type in ('exit', 'relay') %}
+              <td>{{ create_name(server.name) }}</td>
+              <td>{{ server.ip }}</td>
+              <td>{{ server.ip6 or 'N/A' }}</td>
+            {% else %}
+              <td>
+                {% if server.name in config['ENNSTATUS_BRIDGE_PROGRAM'] %}
+                  <a href="{{ url_for('root.bridgeprogram') }}">{{ server.name }}</a>
+                {% else %}
+                  {{ server.name }}
+                {% endif %}
+              </td>
+            {% endif %}
+            <td>{{ colorize_status(server.status) }}</td>
+            <td>{{ create_country(server.country) }}</td>
+            <td>{{ create_fingerprint(server.fingerprint, server.type) }}</td>
+            {% if server_type == 'bridge' %}
+              <td>{{ colorize_obfs(server.obfs) }}</td>
+              <td>{{ colorize_obfs(server.fteproxy) }}</td>
+              <td>{{ colorize_obfs(server.flashproxy) }}</td>
+              <td>{{ colorize_obfs(server.meek) }}</td>
+            {% endif %}
+            <td>{{ create_date(server.last_updated) }}
+            </td>
+          </tr>
         {% endfor %}
-      </tr>
-    </thead>
-    <tbody>
-      {% for server in servers|sort(attribute='name')|sort(attribute='country') %}
-      <tr {% if server.name in config['ENNSTATUS_BRIDGE_PROGRAM'] %}class="info"{% endif %}>
-          <td>{{ loop.index }}</td>
-          {% if server_type in ('exit', 'relay') %}
-            <td>{{ create_name(server.name) }}</td>
-            <td>{{ server.ip }}</td>
-            <td>{{ server.ip6 or 'N/A' }}</td>
-          {% else %}
-            <td>
-              {% if server.name in config['ENNSTATUS_BRIDGE_PROGRAM'] %}
-                <a href="{{ url_for('root.bridgeprogram') }}">{{ server.name }}</a>
-              {% else %}
-                {{ server.name }}
-              {% endif %}
-            </td>
-          {% endif %}
-          <td>{{ colorize_status(server.status) }}</td>
-          <td>{{ create_country(server.country) }}</td>
-          <td>{{ create_fingerprint(server.fingerprint, server.type) }}</td>
-          {% if server_type == 'bridge' %}
-            <td>{{ colorize_obfs(server.obfs) }}</td>
-            <td>{{ colorize_obfs(server.fteproxy) }}</td>
-            <td>{{ colorize_obfs(server.flashproxy) }}</td>
-            <td>{{ colorize_obfs(server.meek) }}</td>
-          {% endif %}
-          <td>{{ create_date(server.last_updated) }}
-          </td>
-        </tr>
-      {% endfor %}
-    </tbody>
-  </table>
+      </tbody>
+    </table>
+  </div>
   {% if server_type == 'bridge' %}
     <div class="alert alert-info alert-dismissible" role="alert">
       <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>