Responsive homepage

Signed-off-by: falkTX <falktx@falktx.com>

css/style.fluid.css

@@ -23,3 +23,43 @@
     padding: 0;
   }
 }
+
+@media only screen and (min-width: 540px) {
+  .responsive-item {
+    margin: 15px;
+  }
+  .responsive-item > div {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .responsive-item > div:first-child {
+    width: 160px;
+  }
+  .responsive-item > div:last-child {
+    width: calc(100% - 180px);
+  }
+  .responsive-item > div:first-child > a {
+    display: inline-block;
+    width: 130px;
+    margin: 15px;
+  }
+  .responsive-item > div:first-child > a > img {
+    padding: 1px;
+  }
+}
+
+@media only screen and (max-width: 540px) {
+  .responsive-item {
+    text-align: center;
+    margin-bottom: 25px;
+  }
+  .responsive-item.last {
+    margin-bottom: 0px;
+  }
+  .responsive-item b {
+    margin: 5px;
+  }
+  .responsive-item p {
+    margin: 0px;
+  }
+}

index.php

@@ -15,41 +15,52 @@ include_once("includes/header.php");
     The KXStudio project is divided into 3 main sections:
 </p>
 
-<table>
-    <tr><td width="130" height="130">
-        <p><img src="images/cadence.png" alt="cadence.png" class="img_thumb_128"/></p>
-    </td><td>
+<div class="responsive-item">
+    <div>
+        <a href="<?php echo $ROOT; ?>/Applications">
+            <img src="images/cadence.png" alt="cadence.png" class="img_thumb_128"/>
+        </a>
+    </div>
+    <div>
         <p>
             <b><a href="<?php echo $ROOT; ?>/Applications">Applications</a></b><br/>
             We offer our own custom set of applications and utilities for Linux and Windows.<br/>
             This includes a fully-featured audio plugin host, a JACK patchbay and more.<br/>
             <br/>
         </p>
-    </td></tr>
+    </div>
+</div>
 
-    <tr><td width="130" height="130">
-        <p><img src="images/distrho.png" alt="distrho.png" class="img_thumb_128"/></p>
-    </td><td>
+<div class="responsive-item">
+    <div>
+        <a href="<?php echo $ROOT; ?>/Plugins">
+            <img src="images/distrho.png" alt="distrho.png" class="img_thumb_128"/>
+        </a>
+    </div>
+    <div>
         <p>
             <b><a href="<?php echo $ROOT; ?>/Plugins">Plugins</a></b><br/>
             We provide a wide range of open-source audio plugins and Linux ports.<br/>
             We also provide custom patched plugins to work better and/or support more features.<br/>
         </p>
-    </td></tr>
+    </div>
+</div>
 
-    <tr><td width="130" height="130">
-        <p><img src="images/repos.png" alt="repos.png" class="img_thumb_128"/></p>
-    </td><td>
+<div class="responsive-item last">
+    <div>
+        <a href="<?php echo $ROOT; ?>/Repositories">
+            <img src="images/repos.png" alt="repos.png" class="img_thumb_128"/>
+        </a>
+    </div>
+    <div>
         <p>
             <b><a href="<?php echo $ROOT; ?>/Repositories">Repositories</a></b><br/>
             Debian and Ubuntu compatible repositories are available.<br/>
             Use them to get extra applications and updates, or to upgrade to the KXStudio distribution.<br/>
             <br/>
         </p>
-    </td></tr>
-</table>
-
-<p><br/></p>
+    </div>
+</div>
 
 <hr/>