neon443/neon443.github.io
1
0
Fork 0
mirror of https://github.com/neon443/neon443.github.io.git synced 2026-03-11 15:16:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

readded bg blur for bar

Browse Source 
added icon labels
made bar more opaque
fixed 1.8 link
This commit is contained in:
neon443
2024-04-02 18:50:55 +01:00
parent 16158fd27c
commit b18b8a8bdd
2 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@@ -43,9 +43,12 @@
</p> </p>
<table style="width:100%"> <table style="width:100%">
<tr> <tr>
<td class="icntd"><a href="https://neon443.github.io/eaglercraft152"><img class="icn" src="images/minecraft/1.5.png"></a></td> <td class="icn"><a href="https://neon443.github.io/eaglercraft152"><img src="images/minecraft/1.5.png" alt=""></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="icn"><a href="https://neon443.github.io/eaglercraft188"><img src="images/minecraft/1.8.png" alt=""></a></td>
<td class="icntd"></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> </tr>
</table><br> </table><br>
</body> </body>

20
style.css
View File

@@ -72,7 +72,9 @@ h3 {
display: flex; display: flex;
padding: 0; padding: 0;
overflow: hidden; 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); backdrop-filter: blur(2.5px);
} }
.barItem { .barItem {
@@ -106,6 +108,8 @@ h3 {
.barItem a:hover { .barItem a:hover {
background-color: #111; background-color: #111;
color: #eee; 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); box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
} }
/* Bar styling */ /* Bar styling */
@@ -125,17 +129,19 @@ h3 {
padding: 20px 10px; padding: 20px 10px;
} }
td p {
text-align: center;
}
td img{ td img{
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} transform: scale(0.9, 0.9);
.icn {
border-radius: 5px; border-radius: 5px;
transition: all 0.25s ease-out 100ms; transition: all 0.25s ease-out 100ms;
} }
.icn:hover { td img:hover {
transform: scale(1.1, 1.1); transform: scale(1, 1);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@@ -147,7 +153,7 @@ td img{
color: #ddd; color: #ddd;
} }
.bar { .bar {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.5);
} }
.barItem * { .barItem * {
color: #ddd; color: #ddd;
@@ -161,6 +167,8 @@ td img{
.barItem a:hover { .barItem a:hover {
background-color: #eee; background-color: #eee;
color: #111; 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); box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
} }
} }