Make all pages responsive

static/css/github-markdown.css

@@ -8,7 +8,8 @@
   font-size: 12px;
   line-height: 1.6;
   word-wrap: break-word;
-  width: 680px;
+  width: 80vw;
+  max-width: 680px;
   padding: 10px;
 }
 

static/css/linx.css

@@ -71,32 +71,26 @@ body {
   -webkit-box-shadow: 1px 1px 1px 1px #ccc;
   box-shadow: 1px 1px 1px 1px #ccc;
   margin-bottom: 15px;
+}
 
+.dinfo #filename {
+	margin: 2px 15px 0 0;
 }
 
 #info {
-	text-align: left;
-
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
   background-color: white;
   padding: 5px 5px 5px 5px;
 }
 
-#info #filename,
-#editform #filename {
-    width: 232px;
-}
-
 #info #extension,
 #editform #extension {
     width: 40px;
 }
 
-#info .float-left {
-	margin-top: 2px;
-	margin-right: 20px;
-}
-
-#info .right {
+#info .text-right {
 	font-size: 13px;
 }
 
@@ -115,6 +109,11 @@ body {
     color: #556A7F;
 }
 
+#info input[type=checkbox] {
+	margin: 0;
+	vertical-align: bottom;
+}
+
 #footer {
 	color: gray;
 	text-align: right;
@@ -158,7 +157,8 @@ body {
 }
 
 .fixed {
-    width: 800px;
+    width: 80vw;
+    max-width: 800px;
 }
 
 .needs-border {
@@ -245,19 +245,28 @@ body {
 }
 
 #choices {
-  float: left; 
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
   width: 100%;
-  text-align: left; 
-  vertical-align: bottom; 
   margin-top: 5px;
   font-size:13px;
 }
 
+#choices label:first-child {
+	margin-right: 15px;
+}
+
 #expiry {
-  float: right; 
   padding-top: 1px;
 }
 
+#randomize {
+  vertical-align: bottom;
+  margin: 0;
+}
+
 .oopscontent {
     width: 400px;
 }
@@ -267,8 +276,13 @@ body {
     border: 0;
 }
 
+.error-404 img {
+    max-width: 90vw;
+}
+
 .editor {
-    width: 705px;
+    width: 90vw;
+    max-width: 705px;
     height: 450px;
     border-color: #cccccc;
     font-family: monospace;

static/js/bin.js

@@ -1,6 +1,6 @@
 // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
 
-var navlist = document.getElementById("info").getElementsByClassName("right")[0];
+var navlist = document.getElementById("info").getElementsByClassName("text-right")[0];
 
 init();
 

templates/404.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
+<div class="error-404">
   <a href="{{ sitepath }}"><img src='{{ sitepath }}static/images/404.jpg'></a>
+</div>
 {% endblock %}

templates/display/base.html

@@ -7,11 +7,11 @@
 {% block content %}
 
     <div id="info" class="dinfo">
-        <div class="float-left" id="filename">
+        <div id="filename">
             {{ filename }}
         </div>
 
-        <div class="right">
+        <div class='text-right'>
             {% if expiry %}
             <span>file expires in {{ expiry }}</span> | 
             {% endif %}
@@ -31,7 +31,6 @@
         </div>
 
         {% block infoleft %}{% endblock %}
-        <div class="clear"></div>
     </div>
 
     <div id="main" {% block mainmore %}{% endblock %}>

templates/index.html

@@ -17,6 +17,7 @@
         </div>
 
         <div id="choices">
+            <label><input name="randomize" id="randomize" type="checkbox" checked /> Randomize filename</label>
             <div id="expiry">
                 <label>File expiry:
                 <select name="expires" id="expires">
@@ -26,7 +27,6 @@
                 </select>
                 </label>
             </div>
-            <label><input name="randomize" id="randomize" type="checkbox" checked /> Randomize filename</label>
         </div>
         <div class="clear"></div>
     </form>

templates/paste.html

@@ -4,17 +4,17 @@
     <form id="reply" action='{{ sitepath }}upload' method='post'>
         <div id="main">
             <div id="info" class="ninfo">
+                <div>
                     <input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)" />.<span class="hint--top hint--bounce" data-hint="Enable syntax highlighting by adding the extension"><input id="extension" class="codebox" name='extension' type='text' value="" placeholder="txt" /></span>
-
-                <div class="right">
+                </div>
+                <div>
+                    <input type="submit" value="Paste">
                     <select id="expiry" name="expires">
                         <option disabled="disabled">Expires:</option>
                         {% for expiry in expirylist %}
                         <option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
                         {% endfor %}
                     </select>
-
-                    <input type="submit" value="Paste">
                 </div>
             </div>