You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
149 lines
3.4 KiB
149 lines
3.4 KiB
@layout PageLayout; |
|
|
|
@page "/immortal-home" |
|
|
|
<LayoutMediumContentComponent> |
|
<div class="mainContainer"> |
|
<div class="mainTitle"> |
|
Fan Reference |
|
</div> |
|
|
|
<div> |
|
Refer to various aspects of "IMMORTAL: Gates of Pyre" from this external reference! |
|
</div> |
|
</div> |
|
|
|
<ContentDividerComponent></ContentDividerComponent> |
|
|
|
<div class="herosContainer"> |
|
<div class="hero"> |
|
<div class="heroTitle"> |
|
Database |
|
</div> |
|
<img src="image/hero/Database.png" class="heroImage"/> |
|
<NavLink Href="/database" class="heroCallToAction"> |
|
Review the units! |
|
</NavLink> |
|
</div> |
|
|
|
|
|
<div class="hero"> |
|
<div class="heroTitle"> |
|
Build Calculator |
|
</div> |
|
<img src="image/hero/Build.png" class="heroImage"/> |
|
<NavLink Href="/build-calculator" class="heroCallToAction"> |
|
Make a build! |
|
</NavLink> |
|
</div> |
|
|
|
|
|
<div class="hero"> |
|
<div class="heroTitle"> |
|
Notes |
|
</div> |
|
<img src="image/hero/Notes.png" class="heroImage"/> |
|
<NavLink Href="/notes" class="heroCallToAction"> |
|
Read some notes! |
|
</NavLink> |
|
</div> |
|
|
|
|
|
<div class="hero"> |
|
<div class="heroTitle"> |
|
Streams |
|
</div> |
|
<img src="image/hero/Streams.png" class="heroImage"/> |
|
<NavLink Href="/streams" class="heroCallToAction"> |
|
Watch live development! |
|
</NavLink> |
|
</div> |
|
|
|
</div> |
|
|
|
<ContentDividerComponent></ContentDividerComponent> |
|
|
|
<AlertComponent> |
|
<Title>Under Construction</Title> |
|
<Message>Website is still being made. Check out <NavLink Href="/immortal-roadmap">Road Map</NavLink> for future plans, <NavLink Href="/immortal-agile">Agile</NavLink> for present tasks, and <NavLink Href="/immortal-changelog">Change Log</NavLink> for past changes.</Message> |
|
|
|
</AlertComponent> |
|
|
|
</LayoutMediumContentComponent> |
|
|
|
<style> |
|
.mainContainer { |
|
padding-bottom: 32px; |
|
} |
|
|
|
.mainTitle { |
|
font-size: 2.2rem; |
|
font-weight: bold; |
|
} |
|
|
|
.quoteContainer { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 8px; |
|
max-width: 600px; |
|
margin: auto; |
|
} |
|
|
|
|
|
|
|
.quoteTitle { |
|
font-weight: 800; |
|
margin-bottom: 8px; |
|
} |
|
|
|
.quoteText { |
|
margin: auto; |
|
font-style: italic; |
|
} |
|
|
|
.herosContainer { |
|
display: flex; |
|
flex-wrap: wrap; |
|
gap: 64px; |
|
justify-content: center; |
|
} |
|
|
|
.hero { |
|
padding: 32px; |
|
display: flex; |
|
flex-direction: column; |
|
gap: 32px; |
|
} |
|
|
|
|
|
.heroTitle { |
|
font-weight: 800; |
|
font-size: 1.3rem; |
|
margin: auto; |
|
} |
|
|
|
.heroImage { |
|
border: 1px solid rgba(0,0,0,0.5); |
|
box-shadow: 2px 2px 2px rgba(0,0,0,0.5); |
|
height: 400px; |
|
width: 400px; |
|
margin: auto; |
|
} |
|
|
|
.heroCallToAction { |
|
font-weight: 700; |
|
font-size: 1.1rem; |
|
margin: auto; |
|
background-color: var(--primary); |
|
border: 1px solid var(--primary); |
|
padding: 16px; |
|
cursor: pointer; |
|
color: white; |
|
} |
|
|
|
.heroCallToAction:hover { |
|
background-color: var(--primary-hover); |
|
border-color: var(--primary-border-hover); |
|
} |
|
|
|
</style> |