From f074cf7f1ff5a95ffc68af3af0dcefa01238ea53 Mon Sep 17 00:00:00 2001
From: neon443 <69979447+neon443@users.noreply.github.com>
Date: Sat, 13 Apr 2024 10:50:46 +0100
Subject: [PATCH] icons now responsive and changed to flexbox div

---
 index.html | 45 +++++++++++++++++++++++++++------------------
 style.css  | 52 ++++++++++++++++++++++++++++++----------------------
 2 files changed, 57 insertions(+), 40 deletions(-)

diff --git a/index.html b/index.html
index c98f341..abcf003 100644
--- a/index.html
+++ b/index.html
@@ -41,23 +41,32 @@
 			<b>├─</b><a href="https://neon443.github.io/sandspiel/">Sandspiel</a><br>
 			<b>└─</b><a href="https://neon443.github.io/sandboxels/">Sandboxels</a><br><br>
 		</p>
-		<table>
-		<tr>
-			<td class="icn"><a href="https://neon443.github.io/eaglercraft152"><img src="images/minecraft/1.5.png" alt=""></a></td>
-			<td class="icn"><a href="https://neon443.github.io/eaglercraftX188"><img src="images/minecraft/1.8.png" alt=""></a></td>
-			<td class="icn"><a href="https://neon443.github.io/webEPK"><img src="images/webEPK/icon.png" alt=""></a></td>
-			<td class="icn"><a href="https://neon443.github.io/2048"><img src="images/2048/icon.png" alt=""></a></td>
-			<td class="icn"><a href="https://neon443.github.io/fancade"><img src="images/fancade/icon.png" alt=""></a></td>
-			<td class="icn"><a href="https://neon443.github.io/fancade/drive.html"><img src="images/fancade/drive.png" alt=""></a></td>
-		</tr>
-		<tr>
-			<td class="label"><p>Minecraft 1.5.2</p></td>
-			<td class="label"><p>Minecraft 1.8.8 u27</p></td>
-			<td class="label"><p>webEPK</p></td>
-			<td class="label"><p>2048</p></td>
-			<td class="label"><p>Fancade</p></td>
-			<td class="label"><p>Drive Mad</p></td>
-		</tr>
-		</table><br>
+		<div class="homescreen">
+			<!-- 16 app icons -->
+			<a href="https://neon443.github.io/eaglercraft152" class="app">
+				<img src="./images/minecraft/1.5.png" alt="App Icon">
+				<span class="label">Minecraft 1.5.2</span>
+			</a>
+			<a href="https://neon443.github.io/eaglercraftX188" class="app">
+				<img src="./images/minecraft/1.8.png" alt="App Icon">
+				<span class="label">Minecraft 1.8.8</span>
+			</a>
+			<a href="https://neon443.github.io/webEPK" class="app">
+				<img src="./images/webEPK/icon.png" alt="App Icon">
+				<span class="label">WebEPK</span>
+			</a>
+			<a href="https://neon443.github.io/2048" class="app">
+				<img src="./images/icon.png" alt="App Icon">
+				<span class="label">2048</span>
+			</a>
+			<a href="https://neon443.github.io/fancade" class="app">
+				<img src="./images/fancade/icon.png" alt="App Icon">
+				<span class="label">Fancade</span>
+			</a>
+			<a href="https://neon443.github.io/fancade/drive" class="app">
+				<img src="./images/fancade/drive.png" alt="App Icon">
+				<span class="label">Drive Mad</span>
+			</a>
+		</div>
 	</body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index f0de329..9aadb1c 100644
--- a/style.css
+++ b/style.css
@@ -27,6 +27,7 @@
 	font-family: system-ui;
 	transition: 0.2s;
 	color: #222;
+	box-sizing: border-box;
 }
 b {
 	color: #ff6200;
@@ -117,33 +118,35 @@ h3 {
 }
 /* Bar styling */
 
-table {
-	table-layout: fixed;
-	width: 100%;
+.homescreen {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Responsive grid */
+	gap: 20px;
+	padding: 20px;
+	justify-content: center;
 }
 
-td {
-	padding: 0px;
-	margin: 0px;
-}
-
-td p {
+.app {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 	text-align: center;
-	font-size: 15px;
-}
-td img{
-	height:	150px;
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-	transform: scale(0.9, 0.9);
-	border-radius: 10px;
-	transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-	position: relative;
+	text-decoration: none;
 }
 
-td img:hover {
-	transform: scale(1, 1);
+.app img {
+	width: auto;
+	height: 100px;
+	border-radius: 5px;
+	transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.app:hover img {
+	transform: scale(1.1); /* Grow effect */
+}
+
+.label {
+	margin-top: 5px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -176,4 +179,9 @@ td img:hover {
 }
 
 @media screen and (max-width: 600px) {
+	.app img {
+		width: auto;
+		height: 80px;
+		border-radius: 20px;
+	}
 }
\ No newline at end of file