From 84b81743a7ad476eab7508f865e9ed8e575cd778 Mon Sep 17 00:00:00 2001
From: falkTX <falktx@falktx.com>
Date: Sun, 1 Aug 2021 12:04:39 +0100
Subject: [PATCH] Responsive homepage

Signed-off-by: falkTX <falktx@falktx.com>
---
 css/style.fluid.css | 40 ++++++++++++++++++++++++++++++++++++++++
 index.php           | 43 +++++++++++++++++++++++++++----------------
 2 files changed, 67 insertions(+), 16 deletions(-)

diff --git a/css/style.fluid.css b/css/style.fluid.css
index 4e09cbb..10abbd2 100644
--- a/css/style.fluid.css
+++ b/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;
+  }
+}
diff --git a/index.php b/index.php
index 4391cfd..2f9952f 100644
--- a/index.php
+++ b/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/>