95 lines
2.4 KiB
Plaintext
95 lines
2.4 KiB
Plaintext
|
|
@inherits BasePage
|
|
|
|
@page "/"
|
|
@page "/immortal-home"
|
|
|
|
<LayoutMediumContentComponent>
|
|
<PaperComponent>
|
|
<div class="mainContainer">
|
|
<div class="mainTitle">
|
|
Fan Reference
|
|
</div>
|
|
|
|
<div>
|
|
Refer to various aspects of "IMMORTAL: Gates of Pyre" from this external reference!
|
|
</div>
|
|
|
|
<DevOnlyComponent>
|
|
<div class="cooldown-demo">
|
|
<div class="cooldown-demo-label">Cooldown Demo</div>
|
|
<CooldownButtonComponent CooldownSeconds="12"
|
|
Size="120"
|
|
OnClick="OnCooldownClick">
|
|
Click Me
|
|
</CooldownButtonComponent>
|
|
</div>
|
|
</DevOnlyComponent>
|
|
</div>
|
|
</PaperComponent>
|
|
|
|
<ContentDividerComponent></ContentDividerComponent>
|
|
|
|
<PaperComponent>
|
|
<div class="heroesContainer">
|
|
|
|
<ContentHighlightComponent Title="Build Calculator"
|
|
Description="Make a build!"
|
|
Href="/build-calculator"
|
|
ImageHref="image/hero/Build.png"/>
|
|
|
|
<ContentHighlightComponent Title="Database"
|
|
Description="Review the units!"
|
|
Href="/database"
|
|
ImageHref="image/hero/Database.png"/>
|
|
|
|
|
|
</div>
|
|
</PaperComponent>
|
|
|
|
</LayoutMediumContentComponent>
|
|
|
|
<style>
|
|
.mainContainer {
|
|
padding-bottom: 32px;
|
|
}
|
|
.cooldown-demo {
|
|
margin-top: 32px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.cooldown-demo-label {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary, #aaa);
|
|
}
|
|
|
|
.mainTitle {
|
|
font-size: 2.2rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.heroesContainer {
|
|
display: grid;
|
|
gap: 64px;
|
|
justify-content: center;
|
|
margin: auto;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
|
|
@@media only screen and (max-width: 1025px) {
|
|
.heroesContainer {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
@code {
|
|
private Task OnCooldownClick()
|
|
{
|
|
return Task.CompletedTask;
|
|
}
|
|
} |