forked from blurryface/Website
63 lines
1.3 KiB
Twig
63 lines
1.3 KiB
Twig
{% include 'includes/head.twig' with {'pageTitle': nation.name} %}
|
|
|
|
{% include 'includes/hero.twig' %}
|
|
|
|
{% include 'includes/nav.twig' with {'page': 'nation'} %}
|
|
|
|
<main class="pageContent container">
|
|
<div class="nationLayout">
|
|
<div class="nationCoreInfo">
|
|
<h1 style="margin: 0"> {{ nation.name }} </h1>
|
|
<p style="font-family:monospace"> {{ nation.short }} </p>
|
|
<h2> Flag </h2>
|
|
<img class="nationFlag" src="{{ nation.flag }}" alt="{{ nation.name }}'s flag." />
|
|
</div>
|
|
<div class="nationCoreInfo">
|
|
<h2 style="margin: 0"> Description </h2>
|
|
<p> {{ nation.description }} </p>
|
|
<h2> Leader </h2>
|
|
<p> {{ nation.leader }} </p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
/* TCF PLEASE MOVE THIS TO THE CORRECT CSS FILE, I AM TOO LAZY */
|
|
|
|
@media (max-width: 700px) {
|
|
.nationLayout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 701px) {
|
|
.nationLayout {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 3rem;
|
|
}
|
|
}
|
|
|
|
p, h1, h2, h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.nationFlag {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.nationCoreInfo {
|
|
flex-grow: 1;
|
|
flex-basis: 250px;
|
|
gap: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
</style>
|
|
|
|
{% include 'includes/footer.twig' %}
|
|
{% include 'includes/foot.twig' %} |