From d085a6fcb78eef1d6950b363a361a2eb83008b99 Mon Sep 17 00:00:00 2001
From: angoway <ngoamandauyen@gmail.com>
Date: Tue, 22 Oct 2024 22:57:42 -0700
Subject: [PATCH] Finished spacing for levels 1 through 3

---
 .../shared/LessonSide/LessonSide.tsx          |  2 +-
 src/styles/ExerciseSide.scss                  |  1 +
 src/styles/Footer.scss                        |  1 +
 src/styles/LessonSide.scss                    | 30 +++++++++++--------
 src/styles/_vars.scss                         |  6 ++--
 5 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/shared/LessonSide/LessonSide.tsx b/src/components/shared/LessonSide/LessonSide.tsx
index 6b2c992..1e53f58 100644
--- a/src/components/shared/LessonSide/LessonSide.tsx
+++ b/src/components/shared/LessonSide/LessonSide.tsx
@@ -26,7 +26,7 @@ function LessonSide({
   // console.log("max:" + maxLevel);
   return (
     <section id="lesson-side-container">
-      <div>
+      <div id="lesson-text">
         <div id="turtle-logo">
           <img
             src={penPalsLogo}
diff --git a/src/styles/ExerciseSide.scss b/src/styles/ExerciseSide.scss
index 7f90d2f..bbc60b8 100644
--- a/src/styles/ExerciseSide.scss
+++ b/src/styles/ExerciseSide.scss
@@ -5,6 +5,7 @@
   flex-grow: 1;
   height: 100%;
   margin: 0;
+  width:55%;
 }
 
 .exercise-box {
diff --git a/src/styles/Footer.scss b/src/styles/Footer.scss
index 5c3ca07..ce2fd59 100644
--- a/src/styles/Footer.scss
+++ b/src/styles/Footer.scss
@@ -1,6 +1,7 @@
 @use '_colors.scss' as colors;
 
 #footer {
+  align-self:flex-end;
   align-items: center;
   background-color: colors.$footer-green;
   bottom: 0;
diff --git a/src/styles/LessonSide.scss b/src/styles/LessonSide.scss
index 0d4a72b..f49fdc4 100644
--- a/src/styles/LessonSide.scss
+++ b/src/styles/LessonSide.scss
@@ -8,13 +8,19 @@
   font-weight: bold;
 }
 
+#lesson-text {
+  display:flex;
+  flex-direction:column;
+}
+
 #code-text {
   color: colors.$text-white;
   font-family: Cascadia Code, sans-serif;
   font-size: vars.$body-font-size;
   padding-left: vars.$lesson-side-left-padding;
   padding-right: vars.$lesson-side-left-padding;
-  padding-top: 2.5vh;
+  padding-top: 0.75vh;
+  padding-bottom:0.75vh;
   text-align: center;
 }
 
@@ -22,15 +28,15 @@
   background-color: colors.$primary-green;
   display: flex;
   flex-direction: column;
-  height: 100vh;
-  //justify-content: space-between;
+  justify-content:space-around;
+  height: 100%;
   overflow-y: auto;
-  width: 43vw;
+  width: 45%;
 }
 
 #turtle-logo {
   color: colors.$text-white;
-  padding-bottom: 2.5vh;
+  padding-bottom: 1.5vh;
   padding-left: 2vw;
   padding-top: 2vh;
 
@@ -56,7 +62,7 @@
   color: colors.$text-white;
   font-family: 'PT Sans', sans-serif;
   font-size: vars.$header-font-size;
-  padding-bottom: 2vh;
+  padding-bottom: 1vh;
   padding-left: vars.$lesson-side-left-padding;
   text-align: left;
 }
@@ -67,15 +73,16 @@
   font-size: vars.$body-font-size;
   padding-left: vars.$lesson-side-left-padding;
   padding-right: vars.$lesson-side-left-padding;
-  padding-top: 2vh;
+  padding-top: 1vh;
   text-align: left;
 }
 
 #turtle-and-levels-container {
+  align-items: center;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-bottom: 3vh;
+  padding: 1vh;
 }
 
 #encouraging-turtle {
@@ -83,8 +90,8 @@
   box-sizing: border-box;
   display: flex;
   height: auto;
-  padding: 1vh;
-  width: 60%;
+  padding-bottom:2vh;
+  width: 45%;
 }
 
 #footer-space {
@@ -96,9 +103,8 @@
 .selector-box {
   align-items: flex-end;
   display: flex;
-  height: auto;
+  height: fit-content;
   justify-content: center;
-  padding-bottom: 1vh;
   width: 100%;
 }
 
diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
index 0724d12..8f16b3d 100644
--- a/src/styles/_vars.scss
+++ b/src/styles/_vars.scss
@@ -1,5 +1,5 @@
-$body-font-size: 1.05em;
-$logo-font-size: 2.5em;
-$header-font-size: 1.4em;
+$body-font-size: 0.9em;
+$logo-font-size: 1.8em;
+$header-font-size: 1.2em;
 
 $lesson-side-left-padding: 2.2vw;