wip

public/s/css/f0ck.css

@@ -1618,9 +1618,10 @@ span.placeholder {
 }
 
 @media (max-width: 1325px) {
-  .ranking {
+/* ranking page - idea */
+  /* .ranking {
     grid-template-columns: 1fr 1fr !important;
-  }
+  } */
 
   .by-user,
   .by-stats,
@@ -2401,7 +2402,7 @@ table.table tbody tr:nth-of-type(odd) {
 .ranking {
   display: grid;
   grid-template-columns: auto;
-  justify-content: center;
+  /* justify-content: center; */
 }
 
 .ranking div {
@@ -2414,15 +2415,15 @@ table.table tbody tr:nth-of-type(odd) {
 }
 
 .by-user {
-  grid-column: 1;
+  grid-row: 1;
 }
 
 .by-stats {
-  grid-column: 3;
+  grid-row: 3;
 }
 
 .by-hoster {
-  grid-column: 2;
+  grid-row: 2;
 }
 
 /* tags */
@@ -3016,3 +3017,7 @@ input#s_avatar {
 #s_avatar:hover {
   background: #ffffff0f;
 }
+.theforceofthree {
+  display: grid;
+  grid-template-columns: 0.4fr 1fr 0.4fr;
+}

views/ranking.html

@@ -1,12 +1,21 @@
 @include(snippets/header)
 <div id="main">
   <div class="topf0ckers">
-    <h3>Top f0ckers of all time <br>- Ranking -</h3>
+    <h3>f0ck Rankings?</h3>
+  </div>
+  <div class="theforceofthree">
+    <div class="triin">
     </div>
     <div class="ranking">
       <div class="by-user">
         <h3>Biggest taggers</h3>
         <table class="table">
+          <tr>
+            <th>Rank</th>
+            <th>Avatar</th>
+            <th>Username</th>
+            <th>Tagged</th>
+          </tr>
           <tbody>
           @for(let i = 0; i < list.length; i++)
             <tr>
@@ -47,5 +56,8 @@
         </table>
       </div>
     </div>
+    <div class="triout">
+    </div>
+</div>
 </div>
 @include(snippets/footer)