Styling updates again

Fixed footer

src/main/java/Team5/SmartTowns/trails/Trail.java

@@ -12,7 +12,7 @@ public class Trail {
             new Trail(2,"Trail2", "This is trail two"),
             new Trail(3,"Trail3", "This is trail three"),
             new Trail(4,"Trail4", "This is trail four"),
-            new Trail(5,"Trail5", "EDITING THIS")
+            new Trail(5,"Trail5", "This trail is an example of a trail that does not have an image")
     );
     int id;
     String name;

src/main/resources/static/css/allTrails.css

@@ -6,6 +6,7 @@ body {
     margin: 0;
     display: flex;
     flex-direction: column;
+    min-height: 100svh;
 }
 main {
 }
@@ -61,8 +62,10 @@ main {
     border-radius: 10px;
     box-shadow: 0 5px 20px 0 #000000;
     margin: 2svh auto;
+    padding-bottom: 2svw;
     width: 70vw;
-    height: 60svh;
+    height: auto;
+    min-height: 30svh;
     animation: fadeIn 3s;
 
     display: grid;
@@ -104,7 +107,7 @@ main {
         color: white;
         margin: 0;
         padding: 0 2vw;
-        font-size: 1.5vw;
+        font-size: 1.3vw;
         text-align: justify;
         text-justify: inter-character;
         line-height: 1.5;
@@ -128,9 +131,3 @@ header {
     box-shadow: #1e1e1e 0 0 10px 10px;
     font-size: 1vw;
 }
-
-footer {
-    font-size: 1vw;
-    position: relative;
-    bottom: 0;
-}
\ No newline at end of file

src/main/resources/static/css/templatingstyle.css

@@ -61,15 +61,17 @@
 
 /* Footer */
 footer {
-    margin-top:20px;
+    margin-top:auto;
     display: flex;
     justify-content: center;
+    background: blueviolet;
+    border-top: 2px rgb(230, 230, 230) solid;
 }
 .footerBar{
-    border-top: 2px rgb(230, 230, 230) solid;
+
     text-align: left;
     display: flex;
-    background: blueviolet;
+
     color: rgb(255, 255, 255);
     padding-left: 30px;
 }

src/main/resources/templates/allTrails/allTrails.html

@@ -23,8 +23,11 @@
     </section>
 
     <section id="trailInfoContainer" class="trailInfoFrag">
-        <h1 class="centerFlex">Please select your trail</h1>
-        <!--Loaded from thymeleaf-->
+        <!--All this section is loaded from thymeleaf, based on what tail is selected
+            in the #allTrailsBar -->
+        <div class="trailInfoHeader">
+            <h1 class="centerFlex">Please select your trail</h1>
+        </div>
     </section>
 
 </main>