Adjusted text size, made it so that the footer is all the way at the …

…bottom, and made it so that the turtle and level selector stay on the same place in the container, no matter if the lesson text changes

src/components/shared/LessonSide/LessonSide.tsx

@@ -37,18 +37,20 @@ function LessonSide({
         </div>
         <LessonText text_array={lesson_info} />
       </div>
-      <div id="turtle-and-levels-container">
-        <Turtle turtleID={randomTurtleMessage} />
+      <div id="lesson-interactive">
+        <div id="turtle-and-level-selector">
+          <Turtle turtleID={randomTurtleMessage} />
 
-        {/* passed from parent component */}
-        <LevelSelector
-          numLevels={6}
-          currentLevel={levelNum}
-          maxLevelReached={maxLevel}
-          updateLevel={updateLevel}
-        />
+          {/* passed from parent component */}
+          <LevelSelector
+            numLevels={6}
+            currentLevel={levelNum}
+            maxLevelReached={maxLevel}
+            updateLevel={updateLevel}
+          />
+        </div>
+        <Footer />
       </div>
-      <Footer />
     </section>
   );
 }

src/styles/Footer.scss

@@ -16,8 +16,6 @@
 #footer h3 {
   color: white;
   margin: 0;
-  padding-bottom: 1em;
-  padding-top: 1em;
 }
 
 #footer a {

src/styles/LessonSide.scss

@@ -17,10 +17,10 @@
   color: colors.$text-white;
   font-family: Cascadia Code, sans-serif;
   font-size: vars.$body-font-size;
-  padding-bottom: 0.75vh;
+  padding-bottom: 1vh;
   padding-left: vars.$lesson-side-left-padding;
   padding-right: vars.$lesson-side-left-padding;
-  padding-top: 0.75vh;
+  padding-top: 1vh;
   text-align: center;
 }
 
@@ -29,7 +29,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  justify-content: space-around;
+  justify-content: space-between;
   overflow-y: auto;
   width: 45vw;
 }
@@ -39,7 +39,6 @@
   padding-bottom: 1.5vh;
   padding-left: 2vw;
   padding-top: 2vh;
-
   //align-items: flex-start;
   text-align: left;
 }
@@ -77,19 +76,19 @@
   text-align: left;
 }
 
-#turtle-and-levels-container {
+#turtle-and-level-selector {
   align-items: center;
   display: flex;
   flex-direction: column;
-  padding: 1vh;
+  padding: 0.5em;
 }
 
 #encouraging-turtle {
   align-items: center;
   box-sizing: border-box;
   display: flex;
   height: auto;
-  padding-bottom: 2vh;
+  padding-bottom: 1em;
   width: 45%;
 }
 

src/styles/_vars.scss

@@ -1,5 +1,5 @@
-$body-font-size: 0.9em;
+$body-font-size: 1.025em;
 $logo-font-size: 1.8em;
-$header-font-size: 1.2em;
+$header-font-size: 1.1em;
 
 $lesson-side-left-padding: 2.2vw;