content screen height fix

src/static/css/App.css

@@ -193,6 +193,16 @@ tr {
   position: unset !important;
 }
 
+.growBottom {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.growBottom :last-child {
+  flex-grow: 1;
+}
+
 .header h1 {
   display: inline-block;
   transition: .4s;

src/templates/about.html

@@ -1,6 +1,6 @@
 {% block content %}
 <div class="foreground"></div>
-<div class="relative">
+<div class="relative growBottom">
   <div id="nametag" class="flex" data-aos="fade-up">
     <div>
         <h1 class="textGrad">About</h1>

src/templates/home.html

@@ -19,7 +19,7 @@
 {% endmacro %}
 
 <div class="foreground homeground"></div>
-<div class="relative">
+<div class="relative growBottom">
     <div id="nametag" class="flex" data-aos="fade-up">{{ nameplate() }}</div>
     <!--<INSERT SMALL BANNER HERE FOR PROJECT IMAGECARD CAROUSEL>-->
     <div id="desktopSpacer"></div>

src/templates/projects.html

@@ -1,6 +1,6 @@
 {% block content %}
 <div class="foreground"></div>
-<div class="relative">
+<div class="relative growBottom">
   <div id="nametag" class="flex" data-aos="fade-up">
     <div>
         <h1 class="textGrad">Work</h1>