kitten/SplatNet
Watch
0
0
Fork
You've already forked SplatNet
 0
forked from spacebar/SplatNet
Code Pull requests Activity

fix up jagged corner on header

Browse source
This commit is contained in:
kittentm 2026-02-24 07:33:51 +01:00
commit b461f76ba6
2 changed files with 60 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

38
header.html
View file

@ -6,9 +6,8 @@
</head>
<body>
<aside class="splatnet-sidebar">
<div class="icon-header-logo">
</div>
<div class="splatnet-sidebar">
<div class="icon-header-logo"></div>
<a href="/friend_list/" class="menu-link">
<div class="menu-item icon-navi-friend friend">
@ -74,23 +73,23 @@
</form>
</div>
</div>
<div class="lang-options">
<div class="image-dropdown-toggle" id="dropdownToggle">
<img id="selected-img" src="../assets/en/svg/text/menu/tx_English-11762e5c1d4ff09f310bcf46f3dbfbfbe8c8ef2ee8a12b7e793c784d44442d4f.svg" alt="English">
<img class="dropdown-arrow-icon" src="../assets/en/svg/ui/ico_pulldown-daeb8f6ce24ca8e2faedddd342929c54d3d323ff25116ea0877be93efba2a347.svg">
</div>
<ul class="image-dropdown-options" id="dropdownOptions">
<li data-value="en" data-src="../assets/en/svg/text/menu/tx_English-11762e5c1d4ff09f310bcf46f3dbfbfbe8c8ef2ee8a12b7e793c784d44442d4f.svg">
<img src="../assets/en/svg/text/menu/tx_English-11762e5c1d4ff09f310bcf46f3dbfbfbe8c8ef2ee8a12b7e793c784d44442d4f.svg">
</li>
<li data-value="jp" data-src="../assets/en/svg/text/menu/tx_Japanese-2ffb0b4509759532318fba9d93b7befb8d6d4b3aa5434afe159d7656c60bedea.svg">
<img src="../assets/en/svg/text/menu/tx_Japanese-2ffb0b4509759532318fba9d93b7befb8d6d4b3aa5434afe159d7656c60bedea.svg">
</li>
</ul>
</div>
<div class="lang-options">
<div class="image-dropdown-toggle" id="dropdownToggle">
<img id="selected-img" src="../assets/en/svg/text/menu/tx_English-11762e5c1d4ff09f310bcf46f3dbfbfbe8c8ef2ee8a12b7e793c784d44442d4f.svg" alt="English">
<img class="dropdown-arrow-icon" src="../assets/en/svg/ui/ico_pulldown-daeb8f6ce24ca8e2faedddd342929c54d3d323ff25116ea0877be93efba2a347.svg">
</div>
<ul class="image-dropdown-options" id="dropdownOptions">
<li data-value="en" data-src="../assets/en/svg/text/menu/tx_English-11762e5c1d4ff09f310bcf46f3dbfbfbe8c8ef2ee8a12b7e793c784d44442d4f.svg">
<img src="../assets/en/svg/text/menu/tx_English-11762e5c1d4ff09f310bcf46f3dbfbfbe8c8ef2ee8a12b7e793c784d44442d4f.svg">
</li>
<li data-value="jp" data-src="../assets/en/svg/text/menu/tx_Japanese-2ffb0b4509759532318fba9d93b7befb8d6d4b3aa5434afe159d7656c60bedea.svg">
<img src="../assets/en/svg/text/menu/tx_Japanese-2ffb0b4509759532318fba9d93b7befb8d6d4b3aa5434afe159d7656c60bedea.svg">
</li>
</ul>
</div>
<div class="websiteredirect-link-container">
<a href="https://www.nintendo.co.jp/wiiu/agmj/" target="_blank" rel="noopener noreferrer">
<img src="/assets/en/svg/text/menu/tx_officialpage-51d6bd752e52fb7c599246bec3c9bbb960e9f2ab063cf6e9e5b037e8fab8a7ea.svg" alt="Official Page">
@ -101,6 +100,9 @@
</div>
</div>
<div class="corner-patch"></div>
</div>
<script src="config.js"></script>
</body>
</html>

90
style.css
View file

@ -23,6 +23,7 @@ body {
padding: 0 24px 32px;
position: relative;
border-radius: 0;
z-index: 1;
}
.splatnet-sidebar::after {
@ -35,20 +36,31 @@ body {
background-image: url('assets/en/svg/ui/bg_menu_right_wave-c8ca7628fe4a702b3985b66f59c365748d266db743ec3a7a7e68211c81c74ec1.svg');
background-repeat: repeat-y;
background-size: contain;
z-index: 0;
z-index: 2;
}
.splatnet-sidebar::before {
content: "";
position: absolute;
bottom: -28px;
bottom: -48px;
left: 0;
width: 330px;
width: 345px;
height: 30px;
background-image: url('assets/en/svg/ui/bg_menu_bottom_wave-03056ad08bac76d5bf1d0bc2895f30cda65a731d9d69789719da70a084be31cb.svg');
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 2;
}
.corner-patch {
position: absolute;
bottom: -28px;
right: -15px;
width: 360px;
height: 48px;
background-color: black;
z-index: 1;
border-bottom-right-radius: 20px;
}
.icon-header-logo {
@ -148,7 +160,7 @@ body {
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #333333; /* tickles my brain but might remove for original look */
border: 4px solid #333333;
}
#mii-img {
@ -161,17 +173,6 @@ body {
display: none;
}
.profile-name-label {
position: absolute;
top: 14px;
left: 55px;
color: white;
font-family: 'RegularFont', sans-serif;
font-weight: normal;
font-size: 18px;
z-index: 1;
}
.profile-name-label {
position: absolute;
top: 12px;
@ -231,8 +232,7 @@ body {
cursor: pointer;
gap: 10px;
padding: 5px;
background: transparent; /* vro fuckass vscode autocomplete adds comments... if anyone knows a better
code editor that doesnt do this pls dm me i hate having to remove these. */
background: transparent;
}
.image-dropdown-toggle img:first-child {
@ -258,7 +258,8 @@ body {
}
.image-dropdown-options.show {
display: block;
display: block !important;
z-index: 9999;
}
.image-dropdown-options li {
@ -277,46 +278,35 @@ body {
display: block;
}
.image-dropdown-options.show {
display: block !important;
z-index: 9999;
}
.websiteredirect-link-container img {
width: 180px;
height: auto;
}
.websiteredirect-link-container {
margin-top: 15px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 15px;
z-index: 2;
margin-top: 15px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 15px;
z-index: 2;
}
.websiteredirect-link-container img {
width: 180px;
height: auto;
display: block;
width: 180px;
height: auto;
display: block;
}
.nintylogo-static {
margin-top: 10px;
width: 90px;
height: 15px;
overflow: hidden;
position: relative;
margin-top: 80px;
margin-bottom: 0px;
width: 90px;
height: 15px;
overflow: hidden;
position: relative;
margin-top: 20px;
margin-bottom: 0px;
}
.nintylogo-static img {
width: 180px;
height: auto;
position: absolute;
top: 0;
left: 0;
width: 180px;
height: auto;
position: absolute;
top: 0;
left: 0;
}