Update main menu to show github and discord icon
This commit is contained in:
parent
a26ef05543
commit
69a2d31792
Binary file not shown.
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
|
@ -1,12 +1,15 @@
|
|||
#state_MainMenuState {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
background: uiResource("menu_bg.noinline.jpg") center center / cover no-repeat !important;
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
@include S(width, 350px);
|
||||
}
|
||||
|
@ -15,7 +18,9 @@
|
|||
.mainContainer {
|
||||
@include S(margin-top, 40px);
|
||||
display: flex;
|
||||
|
||||
flex-grow: 1;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
.playButton {
|
||||
@include SuperHeading;
|
||||
@include S(width, 150px);
|
||||
|
@ -24,4 +29,53 @@
|
|||
background-color: $accentColorDark;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@include S(padding, 15px);
|
||||
> a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
justify-content: center;
|
||||
background: #eee;
|
||||
@include S(padding, 5px);
|
||||
@include S(border-radius, 4px);
|
||||
@include S(margin-left, 10px);
|
||||
@include SuperSmallText();
|
||||
border: #{D(1px)} solid #aaa;
|
||||
border-bottom: #{D(3px)} solid #aaa;
|
||||
box-shadow: #{D(1px)} #{D(2px)} #{D(3px)} 0 rgba(0, 10, 20, 0.1);
|
||||
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: #999da3;
|
||||
|
||||
transition: background-color 0.12s ease-in-out;
|
||||
pointer-events: all;
|
||||
@include S(width, 50px);
|
||||
@include S(height, 50px);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.thirdpartyLogo {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: center center / 85% no-repeat;
|
||||
&.githubLogo {
|
||||
background-image: uiResource("main_menu/github.png");
|
||||
}
|
||||
&.discordLogo {
|
||||
background-image: uiResource("main_menu/discord.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -66,7 +66,7 @@ export const globalConfig = {
|
|||
|
||||
debug: {
|
||||
/* dev:start */
|
||||
fastGameEnter: true,
|
||||
fastGameEnter: false,
|
||||
noArtificialDelays: true,
|
||||
disableSavegameWrite: false,
|
||||
showEntityBounds: false,
|
||||
|
|
|
@ -17,6 +17,18 @@ export class MainMenuState extends GameState {
|
|||
<div class="mainContainer">
|
||||
<button class="playButton styledButton">Play</button>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
|
||||
<a href="https://github.com/tobspr/shapez.io" target="_blank">
|
||||
<span class="thirdpartyLogo githubLogo"></span>
|
||||
</a>
|
||||
|
||||
<a href="https://discord.gg/HN7EVzV" target="_blank">
|
||||
<span class="thirdpartyLogo discordLogo"></span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue