Add Bitcoin

11 years ago · 6cb00df9d7
parent 4d89706e0e
commit 6cb00df9d7
2 changed files with 79 additions and 117 deletions
--- a/assets/main.css
+++ b/assets/main.css
@ -69,55 +69,51 @@ a:hover {
    position: relative;
    width: 100%;
    z-index: 5;
-    margin-top: 460px;
-    left: 0;
+    margin: 460px 0 0 0;
    background: #fff;
-    min-height: 460px;
 }

-.floating {
-    width: 800px;
-    height: 400px;
+.container {
+    max-width: 900px;
    margin: 0 auto;
 }

-.features {
-    font-size: 20px;
-    line-height: 50px;
-}
-
-.left {
-    margin: 40px 0 0 0;
+.box {
+    min-width: 300px;
    float: left;
 }

-.right {
-    margin: 40px 0 0 0;
+.float-right {
    float: right;
 }

+.features {
+    margin: 50px 0 0 0;
+    font-size: 20px;
+    line-height: 50px;
+}
+
 .features span {
    width: 30px;
 }

+.features.right {
+    min-width: 220px;
+    padding-left: 50px;
+}
+
 .screenshots {
    position: relative;
    top: -100px;
-    margin: 0 auto;
-    width: 300px;
-    height: 500px;
+    height: 400px;
 }

 #slideshow {
    position: relative;
 }

-#screenshots {
-    position: relative;
-    top: -100px;
-    margin: 0 auto;
-    width: 300px;
-    height: 500px;
+.clear {
+    clear: both;
 }

 .phone {
@ -126,10 +122,15 @@ a:hover {
    width: 300px;
 }

+.bitcoin {
+    font-size: 12px;
+    padding: 6px 0;
+}
+
 .footer {
+    margin: 50px 0 0 0;
    text-align: center;
-    height: 30px;
-    margin: 50px auto 100px auto;
+    height: 140px;
    background: #fff;
 }

@ -141,68 +142,27 @@ a:hover {
    color: #777;
 }

-/* Mobile Devices (Tablets) */
-@media all and (max-width: 950px) and (min-width: 550px){
-    .wrapper {
-        height: 800px;
-    }
-
-    .floating {
-        width: 100%;
-    }
-
-    .features {
-        height: 420px; /* blaze it */
+@media (max-width: 899px) {
+    .box {
        width: 100%;
    }

-    .right {
-        float: right;
-        margin-right: 0;
-        text-align: center;
-        width: 49%;
-    }
-
-    .left {
-        float: left;
-        text-align: center;
-        width: 49%;
-    }
-
-    .footer {
-        padding-top: 400px;
-    }
-}
-
-/* Mobile Devices (Phones) */
-@media all and (max-width: 549px) {
-    .wrapper {
-        height: 800px;
-    }
-
-    .floating {
-        width: 100%;
+    .screenshots {
+        top: 0;
+        height: 450px;
    }

    .features {
-        height: 800px;
-        width: 100%;
-    }
-
-    .right {
-        float: right;
-        margin-right: 0;
        text-align: center;
-        width: 100%;
    }

-    .left {
-        float: left;
-        text-align: center;
-        width: 100%;
+    #slideshow {
+        width: 300px;
+        margin: 0 auto;
    }

-    .footer {
-        padding-top: 800px;
+    .features.right {
+        min-width: 300px;
+        padding-left: 0;
    }
 }
--- a/index.html
+++ b/index.html
@ -2,6 +2,7 @@
 <html>
 <head>
    <title>Clover - 4chan browser</title>
+    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
@ -15,7 +16,7 @@
    </div>
    <div class="header">
        <p>
-            THE NEW 4CHAN ANDROID BROWSER<br>POST FROM TOILET. HEH.
+            The new 4chan Android browser<br>Post from toilet. Heh.
            <div class="dllinks">
                <div class="top">download now</div>
                <a href="https://play.google.com/store/apps/details?id=org.floens.chan">Play Store</a> | <a href="#" onclick="alert('Coming soon!');">F-Droid</a> | <a href="https://github.com/Floens/Clover/releases/download/v1.0/Clover_v1.0.apk">APK</a>
@ -23,9 +24,8 @@
        </p>
    </div>
    <div class="wrapper">
-        <div class="floating">
-            <div class="features">
-                <div class="left">
+        <div class="container">
+            <div class="box features">
                <span class="fa fa-code-fork"></span>Open Source
                <br>
                <span class="fa fa-envelope-o"></span>New post notifications
@ -38,7 +38,14 @@
                <br>
                <span class="fa fa-comment-o"></span>Fast reply
            </div>
-                <div class="right">
+            <div class="box screenshots">
+                <div id="slideshow">
+                    <img class="phone" id="phone1" src="assets/img/phone1.png">
+                    <img class="phone" id="phone2" src="assets/img/phone2.png">
+                    <img class="phone" id="phone3" src="assets/img/phone3.png">
+                </div>
+            </div>
+            <div class="box features right">
                <span class="fa fa-money"></span>Free
                <br>
                <span class="fa fa-chevron-right"></span>4chan pass support
@ -51,15 +58,7 @@
                <br>
                <span class="fa fa-pencil"></span>Themes (soon)
            </div>
-            </div>
-            <div class="screenshots">
-                <div id="slideshow">
-                    <img class="phone" id="phone1" src="assets/img/phone1.png">
-                    <img class="phone" id="phone2" src="assets/img/phone2.png">
-                    <img class="phone" id="phone3" src="assets/img/phone3.png">
-                </div>
-            </div>
-        </div>
+            <div class="clear"></div>
            <div class="footer">
                <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                    <input type="hidden" name="cmd" value="_s-xclick">
@ -68,9 +67,12 @@
                    <img alt="" border="0" src="https://www.paypalobjects.com/nl_NL/i/scr/pixel.gif" width="1" height="1">
                </form>

+                <div class="bitcoin">Bitcoin: 1N7VtcNh8L8u4tF9CJ38GjnPbmxM4Vixi6</div>
+
                <a href="https://github.com/Floens/Clover">GitHub</a> | <a href="https://play.google.com/store/apps/details?id=org.floens.chan">Play Store</a> | <a href="#" onclick="alert('Coming soon!');">F-Droid</a> | <a href="https://github.com/Floens/Clover/releases/download/v1.0/Clover_v1.0.apk">APK</a>
            </div>
        </div>
+    </div>

    <script>
        $('#slideshow').cycle()