From dcdc739190a288193d940e0b9b30ba0631444e66 Mon Sep 17 00:00:00 2001
From: Flummi <flummi@srv.fail>
Date: Fri, 2 Sep 2016 11:36:39 +0000
Subject: [PATCH] fix for firef0cks

---
 s/index.tpl.html | 13 +++++--------
 s/style.css      | 35 +++++++++++++++++++++++++----------
 2 files changed, 30 insertions(+), 18 deletions(-)
diff --git a/s/index.tpl.html b/s/index.tpl.html
index a8a60c0..f0fed73 100644
--- a/s/index.tpl.html
+++ b/s/index.tpl.html
@@ -7,13 +7,10 @@
 </head>
 <body>
   <div class="navbar"><a href="/">f0ck.me</a> | <a href="/how">how to</a> | <a href="/contact">Contact</a></div>
-  <div class="body">
-    <div id="posts" data-last="{{ last }}">
-      {% for item in items %}<a href="./{{ item.id }}" title="{{ item.mime }}"><img class="thumb" src="./t/{{ item.id }}.png" /></a>
-      {% endfor %}
-    </div>
-    <div class="clear"></div>
-  </div>
+  <ul id="posts" data-last="{{ last }}">
+    {% for item in items %}<li class="post"><a href="//f0ck.me/{{ item.id }}" title="{{ item.mime }}"><img class="thumb" src="//f0ck.me/t/{{ item.id }}.png" /></a></li>
+    {% endfor %}
+  </ul>
   <script src="./s/jquery-3.1.0.min.js"></script>
   <script>
   var scrollListener = () => {
@@ -26,7 +23,7 @@
             var html = "";
             for(var i = 0; i < msg.items.length; i++)
               if(msg.items[i].id)
-                html += "<a href=\"./"+msg.items[i].id+"\" title=\""+msg.items[i].mime+"\"><img class=\"thumb\" src=\"./t/"+msg.items[i].id+".png\" /></a>\n";
+                html += "<li class=\"post\"><a href=\"//f0ck.me/"+msg.items[i].id+"\" title=\""+msg.items[i].mime+"\"><img class=\"thumb\" src=\"//f0ck.me/t/"+msg.items[i].id+".png\" /></a></li>\n";
             $('#posts').append(html);
             $('#posts').data('last', msg.last);
           }
diff --git a/s/style.css b/s/style.css
index d061f3b..a698e15 100644
--- a/s/style.css
+++ b/s/style.css
@@ -1,24 +1,38 @@
 html, body {
   height: 100%;
+  width: 100%;
 }
 body {
-  width: 100%;
   margin: 1em auto 3em auto;
   background-color: #262626;
   color: #fff;
   font-family: Monospace;
 }
-.body {
-  width: 90%;
-  margin: 1em auto 3em auto;
-  background-color: #262626;
-  color: #fff;
-  font-family: Monospace;
+ul#posts {
+  width: calc(100% - 210px);
+  margin: 0;
+  margin-left: 100px;
+  padding: 0;
+  list-style: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  justify-content: space-between;
+}
+li.post {
+  padding: 5px;
+  width: 128px;
+  height: 128px;
+  margin-top: 5px;
+  line-height: 128px;
+  -webkit-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 .thumb {
-  border: 0;
-  margin: 0 8px 8px 0;
-  float: left;
   border: 2px solid #4c4a4a;
 }
 .thumb:hover {
@@ -53,6 +67,7 @@ a:hover {
 }
 .navbar {
   text-align: center;
+  margin-top: 7px;
 }
 .return {
   text-align: center;
