forked from blurryface/Website
Experimental new design, part two!
This commit is contained in:
parent
3888d34eec
commit
71c5b98197
|
@ -416,6 +416,27 @@ a {
|
|||
//
|
||||
}
|
||||
|
||||
.nationLayout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media (min-width: 601px) {
|
||||
.nationLayout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.nationFlag {
|
||||
border-radius: 12px;
|
||||
}
|
||||
.nationCoreInfo {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pageFooter {
|
||||
opacity: 0.8;
|
||||
|
||||
|
|
|
@ -5,11 +5,18 @@
|
|||
{% include 'includes/nav.twig' with {'page': 'nation'} %}
|
||||
|
||||
<main class="pageContent container">
|
||||
<h1> {{ nation.name }} </h1>
|
||||
<p style="font-family:monospace"> {{ nation.short }} </p>
|
||||
<hr>
|
||||
<img style="border-radius: 12px" height="128px" src="{{ nation.flag }}" alt="{{ nation.name }}'s flag." />
|
||||
<p> {{ nation.description }} </p>
|
||||
<div class="nationLayout">
|
||||
<div class="nationCoreInfo">
|
||||
<h1> {{ nation.name }} </h1>
|
||||
<p style="font-family:monospace"> {{ nation.short }} </p>
|
||||
<hr>
|
||||
<img class="nationFlag" src="{{ nation.flag }}" alt="{{ nation.name }}'s flag." />
|
||||
</div>
|
||||
<div class="nationCoreInfo">
|
||||
<h3> Description </h3>
|
||||
<p> {{ nation.description }} </p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include 'includes/footer.twig' %}
|
||||
|
|
Loading…
Reference in a new issue