add dev builds section

css/main.css

@@ -328,21 +328,22 @@ table th, table td {
         text-align: center;
         padding: 20px 0 0 0;
     }
-}
 
-@media (max-width: 500px) {
     .header .navbar li {
         margin: 0 5px;
     }
+}
 
+@media (max-width: 500px) {
     .devices .phone {
         width: 240px;
         height: 400px;
     }
-}
 
-@media (max-width: 400px) {
     .header .navbar li {
         font-size: 13px;
     }
 }
+
+@media (max-width: 400px) {
+}

index.html

@@ -9,7 +9,7 @@
     <meta name="keywords" content="Clover, Clover app, 4chan, imageboard, Android">
 
     <link rel="shortcut icon" href="favicon.ico">
-    <link rel="stylesheet" type="text/css" href="css/main.css">
+    <link rel="stylesheet" type="text/css" href="css/main.css?2">
     <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,700' rel='stylesheet' type='text/css'>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
@@ -22,6 +22,7 @@
             <li><a href="#index">Index</a></li>
             <li><a href="#releases">Download</a></li>
             <li><a href="#fdroid">F-Droid</a></li>
+            <li><a href="#dev">Dev builds</a></li>
             <li><a href="#donate">Donate</a></li>
         </ul>
         <div class="logotext">
@@ -106,6 +107,18 @@
                 </p>
             </div>
         </div>
+        <div id="page-dev" class="page page-inactive">
+            <h1>Development builds</h1>
+            <p>
+                A development build is created automatically for each new commit on the dev branch.
+            </p>
+            <p>
+                <a href="https://build.floens.org/builds/Clover-dev-latest.apk">Latest development build.<i class="material-icons external">exit_to_app</i></a>
+            </p>
+            <p>
+                It will notify you of new dev builds automatically.
+            </p>
+        </div>
         <div id="page-donate" class="page page-inactive">
             <h1>Donate</h1>
             <div class="box-half box-float">
@@ -460,6 +473,6 @@
         </div>
     </div>
 
-    <script type="text/javascript" src="js/main.js?3"></script>
+    <script type="text/javascript" src="js/main.js?4"></script>
 </body>
 </html>

js/main.js

@@ -91,7 +91,7 @@ function getReleases() {
     }
 }
 
-var pages = ['index', 'fdroid', 'releases', 'donate']
+var pages = ['index', 'releases', 'fdroid', 'dev', 'donate']
 
 function switchPage(page) {
     if (page[0] == '#') {