From 71c5b98197abe494c8e782021f9322014a936df1 Mon Sep 17 00:00:00 2001
From: worldwidepixel <58098422+worldwidepixel@users.noreply.github.com>
Date: Sun, 2 Jun 2024 18:54:49 -0700
Subject: [PATCH] Experimental new design, part two!

---
 css/src/style.scss   | 21 +++++++++++++++++++++
 template/nation.twig | 19 +++++++++++++------
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/css/src/style.scss b/css/src/style.scss
index 3a80b02..c4cb71e 100644
--- a/css/src/style.scss
+++ b/css/src/style.scss
@@ -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;
 
diff --git a/template/nation.twig b/template/nation.twig
index 8e2cf0c..81c45bc 100644
--- a/template/nation.twig
+++ b/template/nation.twig
@@ -3,13 +3,20 @@
 {% include 'includes/hero.twig' %}
 
 {% 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' %}