From b18b8a8bdd975462bdf35405d5f08bace58fd1a0 Mon Sep 17 00:00:00 2001
From: neon443 <69979447+neon443@users.noreply.github.com>
Date: Tue, 2 Apr 2024 18:50:55 +0100
Subject: [PATCH] readded bg blur for bar added icon labels made bar more
 opaque fixed 1.8 link

---
 index.html |  9 ++++++---
 style.css  | 20 ++++++++++++++------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 7f0a76c..585e6dc 100644
--- a/index.html
+++ b/index.html
@@ -43,9 +43,12 @@
 		</p>
 <table style="width:100%">
 <tr>
-	<td class="icntd"><a href="https://neon443.github.io/eaglercraft152"><img class="icn" src="images/minecraft/1.5.png"></a></td>
-	<td class="icntd"><a href="https://neon443.github.io/eaglercraft188"><img class="icn" src="images/minecraft/1.8.png"></a></td>
-	<td class="icntd"></td>
+	<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/eaglercraft188"><img src="images/minecraft/1.8.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>
 </tr>
 </table><br>
 	</body>
diff --git a/style.css b/style.css
index 2fbd560..079dad0 100644
--- a/style.css
+++ b/style.css
@@ -72,7 +72,9 @@ h3 {
 	display: flex;
 	padding: 0;
 	overflow: hidden;
-	background-color: rgba(255, 255, 255, 0.25);
+	background-color: rgba(255, 255, 255, 0.5);
+	-webkit-backdrop-filter: blur(2.5px);
+	-moz-backdrop-filter: blur(2.5px);
 	backdrop-filter: blur(2.5px);
 }
 .barItem {
@@ -106,6 +108,8 @@ h3 {
 .barItem a:hover {
 	background-color: #111;
 	color: #eee;
+	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
+	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
 	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
 }
 /* Bar styling */
@@ -125,17 +129,19 @@ h3 {
 	padding: 20px 10px;
 }
 
+td p {
+	text-align: center;
+}
 td img{
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
-}
-.icn {
+	transform: scale(0.9, 0.9);
 	border-radius: 5px;
 	transition: all 0.25s ease-out 100ms;
 }
-.icn:hover {
-	transform: scale(1.1, 1.1);
+td img:hover {
+	transform: scale(1, 1);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -147,7 +153,7 @@ td img{
 		color: #ddd;
 	}
 	.bar {
-		background-color: rgba(0, 0, 0, 0.25);
+		background-color: rgba(0, 0, 0, 0.5);
 	}
 	.barItem * {
 		color: #ddd;
@@ -161,6 +167,8 @@ td img{
 	.barItem a:hover {
 		background-color: #eee;
 		color: #111;
+		-webkit-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
+		-moz-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
 		box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
 	}
 }