styling fix

static/style/output.css

@@ -581,14 +581,6 @@ video {
   margin-bottom: 1rem;
 }
 
-.ml-4 {
-  margin-left: 1rem;
-}
-
-.ml-8 {
-  margin-left: 2rem;
-}
-
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -617,49 +609,24 @@ video {
   display: grid;
 }
 
-.h-screen {
-  height: 100vh;
-}
-
 .w-full {
   width: 100%;
 }
 
-.w-fit {
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
 .w-auto {
   width: auto;
 }
 
-.w-1\/2 {
-  width: 50%;
-}
-
-.max-w-lg {
-  max-width: 32rem;
-}
-
-.max-w-md {
-  max-width: 28rem;
-}
-
-.max-w-sm {
-  max-width: 24rem;
+.max-w-xl {
+  max-width: 36rem;
 }
 
 .max-w-xs {
   max-width: 20rem;
 }
 
-.max-w-xl {
-  max-width: 36rem;
-}
-
-.flex-1 {
-  flex: 1 1 0%;
+.max-w-lg {
+  max-width: 32rem;
 }
 
 .border-collapse {
@@ -670,10 +637,6 @@ video {
   list-style-type: disc;
 }
 
-.grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
 .grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -682,10 +645,6 @@ video {
   flex-direction: column;
 }
 
-.place-content-center {
-  place-content: center;
-}
-
 .content-center {
   align-content: center;
 }
@@ -698,6 +657,10 @@ video {
   justify-content: center;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;

templates/.layout.html

@@ -12,24 +12,7 @@
   >
     {% block body %} {% endblock %}
   </body>
-  <div class="mx-auto footer max-w-lg">
-    <h2 class="m-2 text-xl font-bold">About The App</h2>
-    <p class="text-md">
-      Dragon Warrior Monsters 2 App, an open-source project. You can contribute
-      to the development and improvement of this app on our Git repository. Feel
-      free to explore the code, report issues, and submit pull requests.
-    </p>
-    <p class="mt-4 leading-7"></p>
-    <div class="mt-4 text-md">
-      <a
-        href="https://git.happytavern.co/oceanslim/dwm-app"
-        target="_blank"
-        class="text-purple-400 hover:text-purple-200 hover:underline"
-      >
-        View the git repository
-      </a>
-    </div>
-  </div>
+
   {% for file in js_files %}
   <script src="{{ url_for('static', filename='js/' + file) }}"></script>
   {% endfor %}

templates/app.html

@@ -17,7 +17,10 @@
 
 <br />
 
-<div id="modules" class="mt-4 justify-center items-center flex flex-col">
+<div
+  id="modules"
+  class="mt-4 mx-auto justify-center items-center flex flex-col"
+>
   <div id="monsterNameContainer" class="text-center">
     <!-- Monster name will be displayed here -->
   </div>
@@ -47,20 +50,18 @@
     </div>
   </div>
 
-  <div class="flex m-2 w-full max-w-xl">
+  <div class="flex m-2 w-full max-w-xl gap-2">
     <div
       id="breedingPairsContainer"
-      class="p-2 m-2 border-2 rounded-md border-slate-400 w-full"
+      class="p-2 border-2 rounded-md border-slate-400 w-full"
     >
       <!-- Breeding pairs will be displayed here -->
     </div>
 
     <div
       id="offspringContainer"
-      class="p-2 m-2 border-2 rounded-md border-slate-400 w-full"
+      class="p-2 border-2 rounded-md border-slate-400 w-full"
     ></div>
-
-    <div class="grid items-center justify-center grid-cols-1 ml-4"></div>
   </div>
   <div class="mt-4 text-center">
     <a
@@ -69,6 +70,25 @@
       >Go to Skills Data Page</a
     >
   </div>
+  <br />
+  <div class="w-auto max-w-xl text-center">
+    <h2 class="m-2 text-xl font-bold">About The App</h2>
+    <p class="text-md">
+      Dragon Warrior Monsters 2 App, an open-source project. You can contribute
+      to the development and improvement of this app on our Git repository. Feel
+      free to explore the code, report issues, and submit pull requests.
+    </p>
+    <p class="mt-4 leading-7"></p>
+    <div class="mt-4 text-md">
+      <a
+        href="https://git.happytavern.co/oceanslim/dwm-app"
+        target="_blank"
+        class="text-purple-400 hover:text-purple-200 hover:underline"
+      >
+        View the git repository
+      </a>
+    </div>
+  </div>
 </div>
 
 <br />