polycord/Website
1
0
Fork 0
forked from blurryface/Website
Code Pull requests Activity

Experimental new design, part two!

Browse source
This commit is contained in:
worldwidepixel 2024-06-02 18:54:49 -07:00
parent 3888d34eec
commit 71c5b98197
2 changed files with 34 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
css/src/style.scss
View file

@ -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 { .pageFooter {
opacity: 0.8; opacity: 0.8;

17
template/nation.twig
View file

@ -5,11 +5,18 @@
{% include 'includes/nav.twig' with {'page': 'nation'} %} {% include 'includes/nav.twig' with {'page': 'nation'} %}
<main class="pageContent container"> <main class="pageContent container">
<h1> {{ nation.name }} </h1> <div class="nationLayout">
<p style="font-family:monospace"> {{ nation.short }} </p> <div class="nationCoreInfo">
<hr> <h1> {{ nation.name }} </h1>
<img style="border-radius: 12px" height="128px" src="{{ nation.flag }}" alt="{{ nation.name }}'s flag." /> <p style="font-family:monospace"> {{ nation.short }} </p>
<p> {{ nation.description }} </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> </main>
{% include 'includes/footer.twig' %} {% include 'includes/footer.twig' %}