forked from spacebar/SplatNet
fix up banner at top of pages
This commit is contained in:
parent
9c3374da98
commit
6a49af4b77
3 changed files with 65 additions and 50 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in a new issue