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">
|
||||
<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
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