neon443/neon443.github.io
1
0
Fork 0
mirror of https://github.com/neon443/neon443.github.io.git synced 2026-03-11 07:09:12 +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>
<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>

20
style.css
View File

@@ -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);
}
}