forked from spacebar/SplatNet
publish
This commit is contained in:
parent
8ef364cb0a
commit
d4e257a3b7
2 changed files with 96 additions and 3 deletions
42
header.html
42
header.html
|
|
@ -1,3 +1,39 @@
|
||||||
<div class="header">
|
<!DOCTYPE html>
|
||||||
<img src="/assets/SplatNetLogo.png" class="logo" alt="SplatNet Logo" />
|
<html lang="en">
|
||||||
</div>
|
<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
57
style.css
Normal 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; }
|
||||||
Loading…
Reference in a new issue