Skip to content

Commit

Permalink
Finished spacing for levels 1 through 3
Browse files Browse the repository at this point in the history
  • Loading branch information
angoway committed Oct 23, 2024
1 parent 77dae5b commit d085a6f
Show file tree
Hide file tree
Showing 5 changed files with 24 additions and 16 deletions.
2 changes: 1 addition & 1 deletion src/components/shared/LessonSide/LessonSide.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions src/styles/ExerciseSide.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
flex-grow: 1;
height: 100%;
margin: 0;
width:55%;
}

.exercise-box {
Expand Down
1 change: 1 addition & 0 deletions src/styles/Footer.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@use '_colors.scss' as colors;

#footer {
align-self:flex-end;
align-items: center;
background-color: colors.$footer-green;
bottom: 0;
Expand Down
30 changes: 18 additions & 12 deletions src/styles/LessonSide.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,35 @@
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;
}

#lesson-side-container {
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;

Expand All @@ -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;
}
Expand All @@ -67,24 +73,25 @@
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 {
align-items: center;
box-sizing: border-box;
display: flex;
height: auto;
padding: 1vh;
width: 60%;
padding-bottom:2vh;
width: 45%;
}

#footer-space {
Expand All @@ -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%;
}

Expand Down
6 changes: 3 additions & 3 deletions src/styles/_vars.scss
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit d085a6f

Please sign in to comment.