This commit is contained in:
kittentm 2026-01-31 04:27:23 +01:00
commit d4e257a3b7
2 changed files with 96 additions and 3 deletions

View file

@ -1,3 +1,39 @@
<div class="header">
<img src="/assets/SplatNetLogo.png" class="logo" alt="SplatNet Logo" />
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>sidebar</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<aside class="splatnet-sidebar">
<div class="menu-item friend">
<img class="bg" src="assets/default.png">
<img class="icon" src="assets/svg/ui/ico_friendlist-320cb666486606280b494d4d4427451b2de2c9ad01f3332c286433c6f536db0a.svg">
<img class="label" src="assets/svg/text/menu/tx_friendlist-c96280213f50b1bc3c6380aa2bf191f6aaf4fd2da44a111bcbb1495444f23868.svg">
</div>
<div class="menu-item rank">
<img class="bg" src="assets/default.png">
<img class="icon" src="assets/svg/ui/ico_ranking-c89e570ab4d08a764d285e453423188b1976895b3feacf031e3f231b1506b441.svg">
<img class="label" src="assets/svg/text/menu/tx_ranking-8d97ac01b5b5c5b9244c8a4960bce79d33349175d141b06da0d835c71c8298e2.svg">
</div>
<div class="menu-item equipment">
<img class="bg" src="assets/default.png">
<img class="icon" src="assets/svg/ui/ico_equipment-40943361040a3d62c745a21d1a1fa95794c851f378e11334f2dc6c1cc81b4984.svg">
<img class="label" src="assets/svg/text/menu/tx_equipment-8d59c4296bdafb1746824229dc9300ef6b140d4bda0bb0284a662903f20afe45.svg">
</div>
<div class="menu-item stage">
<img class="bg" src="assets/default.png">
<img class="icon" src="assets/svg/ui/ico_stage-8dbc9e30d2dd9f99f4d1678fe53c4aaada7f7ff43929880a0c9f4e49f148f540.svg">
<img class="label" src="assets/svg/text/menu/tx_stageinfo-5e7f00d4a18387e2ee3065e97a475e23002554c3facc1dc6816cdb157c5985c4.svg">
</div>
</aside>
</body>
</html>

57
style.css Normal file
View file

@ -0,0 +1,57 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
background: black;
}
.splatnet-sidebar {
width: 400px;
padding: 30px 20px;
}
.menu-item {
position: relative;
height: 72px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 18px;
padding-left: 36px;
}
.menu-item .bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
z-index: 0;
}
.menu-item .icon {
width: 42px;
height: 42px;
z-index: 1;
object-fit: contain;
}
.menu-item .label {
height: 32px;
z-index: 1;
}
/* this text renders smaller for some reason, hardcode fix!!!*/
.menu-item.equipment .label {
height: 70px;
margin-top: 0px;
}
.menu-item.friend .label { margin-top: 1px; }
.menu-item.rank { margin-top: 3px; }
.menu-item.stage .label { margin-top: 3px; }