-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Exercise side #20
base: main
Are you sure you want to change the base?
Exercise side #20
Changes from 4 commits
e9d1820
9608b3d
eeee083
5a41e7e
b986b5a
1b6ab5d
d75747e
546c2e3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,22 @@ | ||
import '../../styles/ExerciseSide.scss'; | ||
|
||
function ExerciseSide(): JSX.Element { | ||
return <section id="exercise-side-container"></section>; | ||
return ( | ||
<section id = "exercise-side-container"> | ||
<div id = "level"> | ||
|
||
<h1> Type the correct numbers into the blanks below! </h1> | ||
<h1> A = (2,0) </h1> | ||
<h1> B = (-2,0) </h1> | ||
<h1> C = (-1,0) </h1> | ||
|
||
</div> | ||
|
||
<button id = "button"> Check </button> | ||
|
||
</section> | ||
); | ||
} | ||
|
||
|
||
export default ExerciseSide; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,28 @@ | ||
@use '_colors.scss' as colors; | ||
|
||
|
||
body { | ||
font-family: "Quattrocento Sans", sans-serif; | ||
} | ||
|
||
#exercise-side-container { | ||
background-color: colors.$bg-white; | ||
flex-grow: 1; | ||
height: 100%; | ||
|
||
level { | ||
color: white; | ||
font-size: 1.875rem; | ||
margin-left: 10px; | ||
padding: 10px; | ||
} | ||
|
||
button { | ||
background-color: green; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Don't forget to use the correct shade of green that's in the |
||
border: 1px solid #e1e4e8; | ||
border-radius: 10px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Similar to the comment on colors, this should be 12px, not 10px. |
||
color: white; | ||
//padding: 3px 10px; | ||
font-size: 1.5rem; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A few small things:
div
(perhaps with its own ID oflevel-exercise-prompts
or similar?). This would allow you to add the additional spacing between the actual heading of the exercise (the main prompt at the top) and the questions without adding some arbitrary spacing between text items 1 and 2. In addition, it would make it easier to dynamically render exercises, for when we do that in the future.h1
element which is reserved for top-level headings and the like. I suggest instead that you usep
tags for all of these and style them as needed.span
element and giving thespan
the appropriate styling for italics (I think it's something like "font-style: italic"?).