From 77dae5b7234c02cb59a51deda72acd6a9f21ebdb Mon Sep 17 00:00:00 2001
From: angoway <ngoamandauyen@gmail.com>
Date: Tue, 22 Oct 2024 20:53:54 -0700
Subject: [PATCH] Completed basic spacing for first level, now figure out
 second

---
 .../shared/LessonSide/LessonSide.tsx          |  2 +-
 src/styles/LessonSide.scss                    | 21 ++++++++++++-------
 src/styles/_vars.scss                         |  6 +++---
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/shared/LessonSide/LessonSide.tsx b/src/components/shared/LessonSide/LessonSide.tsx
index 252106f..6b2c992 100644
--- a/src/components/shared/LessonSide/LessonSide.tsx
+++ b/src/components/shared/LessonSide/LessonSide.tsx
@@ -37,7 +37,7 @@ function LessonSide({
         </div>
         <LessonText text_array={lesson_info} />
       </div>
-      <div>
+      <div id="turtle-and-levels-container">
         <Turtle turtleID={randomTurtleMessage} />
 
         {/* passed from parent component */}
diff --git a/src/styles/LessonSide.scss b/src/styles/LessonSide.scss
index 2e7a711..0d4a72b 100644
--- a/src/styles/LessonSide.scss
+++ b/src/styles/LessonSide.scss
@@ -23,9 +23,9 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  justify-content: space-between;
+  //justify-content: space-between;
   overflow-y: auto;
-  width: 40vw;
+  width: 43vw;
 }
 
 #turtle-logo {
@@ -56,7 +56,7 @@
   color: colors.$text-white;
   font-family: 'PT Sans', sans-serif;
   font-size: vars.$header-font-size;
-  padding-bottom: 2.5vh;
+  padding-bottom: 2vh;
   padding-left: vars.$lesson-side-left-padding;
   text-align: left;
 }
@@ -67,17 +67,24 @@
   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: 2vh;
   text-align: left;
 }
 
+#turtle-and-levels-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 3vh;
+}
+
 #encouraging-turtle {
-  align-items: flex-end;
+  align-items: center;
   box-sizing: border-box;
   display: flex;
   height: auto;
-  padding: 5vh;
-  width: 100%;
+  padding: 1vh;
+  width: 60%;
 }
 
 #footer-space {
diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
index 7babd0e..0724d12 100644
--- a/src/styles/_vars.scss
+++ b/src/styles/_vars.scss
@@ -1,5 +1,5 @@
-$body-font-size: 1.125em;
-$logo-font-size: 3.5em;
-$header-font-size: 1.5em;
+$body-font-size: 1.05em;
+$logo-font-size: 2.5em;
+$header-font-size: 1.4em;
 
 $lesson-side-left-padding: 2.2vw;