fix up banner at top of pages

This commit is contained in:
kittentm 2026-02-04 04:53:58 +01:00
commit 6a49af4b77
3 changed files with 65 additions and 50 deletions

View file

@ -31,9 +31,11 @@
<img class="icon-layer" src="../assets/en/svg/ui/ico_friendlist-320cb666486606280b494d4d4427451b2de2c9ad01f3332c286433c6f536db0a.svg">
<img class="label-layer" src="../assets/en/svg/text/scene/friendlist/tx_friendlist_wht-2bfe8465098d51b8154befcd805ada60d17bca5e1324f26fee3eb43278a8652b.svg">
</div>
<div class="friendsubtitle-text">
Check the online status of your friends or see who you're battling with!
</div>
<div class="stages-container" id="stages-container"></div>
</div>
</div>
<script>
//TODO: migrate into accompanying JS, just put it in here for now to allow for copy paste,
//however ie screams abt you doing this afaik

View file

@ -113,6 +113,8 @@ body {
.logo-left-align {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
margin-top: 20px;
@ -126,6 +128,7 @@ body {
height: 80px;
cursor: default;
pointer-events: none;
margin-bottom: 10px;
}
#stage-header-logo .bg-layer {
@ -152,4 +155,15 @@ body {
top: 45%;
transform: translateY(-50%);
z-index: 2;
}
.friendsubtitle-text {
margin: 0;
padding-top: 20px;
max-width: 1200px;
text-align: left;
color: white;
font-family: "Regular", sans-serif;
font-size: 24px;
line-height: 1.3;
}

View file

@ -21,6 +21,7 @@ html, body {
body {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 100vh;
background-image: url("/assets/en/bg/@2x/bg_stage-e8fe89423bce5899a3edea3884841d9eed10a3099b29482277d0dbd4a25d8b9e.png");
@ -46,22 +47,62 @@ body {
max-width: 100vw;
}
.stage-info {
.logo-left-align {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 100%;
max-width: 600px;
margin-bottom: 20px;
margin-left: 40px;
gap: 20px;
}
#stage-header-logo {
position: relative;
width: 400px;
height: 80px;
cursor: default;
pointer-events: none;
flex-shrink: 0;
}
#stage-header-logo .bg-layer {
width: 400px;
height: auto;
margin: 0 auto 20px auto;
position: relative;
display: block;
}
#stage-header-logo .icon-layer {
position: absolute;
width: 65px;
left: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
margin-left: 10px;
}
#stage-header-logo .label-layer {
position: absolute;
width: 200px;
left: 110px;
top: 45%;
transform: translateY(-50%);
z-index: 2;
}
.stage-info-text {
margin: 6px auto 24px auto;
max-width: 600px;
text-align: center;
margin: 0;
padding-top: 0px;
max-width: 1200px;
text-align: left;
color: white;
font-family: "Regular", sans-serif;
font-size: 34px;
font-size: 24px;
line-height: 1.3;
margin-right: 270px;
}
.stages-container {
@ -250,46 +291,4 @@ body {
height: 35px;
width: auto;
display: block;
}
.logo-left-align {
display: flex;
justify-content: flex-start;
width: 100%;
margin-bottom: 20px;
margin-left: 40px;
}
#stage-header-logo {
position: relative;
width: 400px;
height: 80px;
cursor: default;
pointer-events: none;
}
#stage-header-logo .bg-layer {
width: 400px;
height: auto;
position: relative;
display: block;
}
#stage-header-logo .icon-layer {
position: absolute;
width: 65px;
left: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
margin-left: 10px;
}
#stage-header-logo .label-layer {
position: absolute;
width: 200px;
left: 110px;
top: 45%;
transform: translateY(-50%);
z-index: 2;
}