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({ -
+
{/* 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;