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 {
|
#state_MainMenuState {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
background: uiResource("menu_bg.noinline.jpg") center center / cover no-repeat !important;
|
background: uiResource("menu_bg.noinline.jpg") center center / cover no-repeat !important;
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
img {
|
img {
|
||||||
@include S(width, 350px);
|
@include S(width, 350px);
|
||||||
}
|
}
|
||||||
|
@ -15,7 +18,9 @@
|
||||||
.mainContainer {
|
.mainContainer {
|
||||||
@include S(margin-top, 40px);
|
@include S(margin-top, 40px);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
.playButton {
|
.playButton {
|
||||||
@include SuperHeading;
|
@include SuperHeading;
|
||||||
@include S(width, 150px);
|
@include S(width, 150px);
|
||||||
|
@ -24,4 +29,53 @@
|
||||||
background-color: $accentColorDark;
|
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: {
|
debug: {
|
||||||
/* dev:start */
|
/* dev:start */
|
||||||
fastGameEnter: true,
|
fastGameEnter: false,
|
||||||
noArtificialDelays: true,
|
noArtificialDelays: true,
|
||||||
disableSavegameWrite: false,
|
disableSavegameWrite: false,
|
||||||
showEntityBounds: false,
|
showEntityBounds: false,
|
||||||
|
|
|
@ -17,6 +17,18 @@ export class MainMenuState extends GameState {
|
||||||
<div class="mainContainer">
|
<div class="mainContainer">
|
||||||
<button class="playButton styledButton">Play</button>
|
<button class="playButton styledButton">Play</button>
|
||||||
</div>
|
</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