-
Notifications
You must be signed in to change notification settings - Fork 88
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
Daily Spells app by Anna and Erika #68
base: main
Are you sure you want to change the base?
Conversation
…ded in header and app.jsx
…lls in the jsx-file
…ted them into the header and the personalized spells component
updated h2 heading in personalized spells
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.
Great job with the project.
You have met all requirements and implemented the given deisgn in a good way! Remember to go through the files and "clean them up" I commented in the files regarding indentation.
color: #000; | ||
text-align: center; | ||
font-family: "Yeseva One"; | ||
font-size: 3rem; | ||
font-style: normal; | ||
font-weight: 400; | ||
margin: 0; | ||
|
||
//Desktop styling | ||
@media (min-width: 1200px) { | ||
font-size: 6rem; | ||
|
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.
indentation
color: #FFF; | ||
text-align: center; | ||
font-family: "Yeseva One"; | ||
font-size: 1.5rem; | ||
font-style: normal; | ||
font-weight: 400; | ||
margin: 0; | ||
|
||
// Tablet styling | ||
@media (min-width: 768px) { | ||
font-size: 2.25rem; | ||
} | ||
|
||
// Desktop styling | ||
@media (min-width: 1200px) { | ||
font-size: 4rem; | ||
text-align: left; | ||
} | ||
|
||
` | ||
|
||
const Level3 = styled.h3` //Heading pop-up | ||
color: #000; | ||
font-family: "Yeseva One"; | ||
font-size: 1.25rem; | ||
font-style: normal; | ||
font-weight: 400; | ||
line-height: normal; |
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.
indentation
color: #FFF; | ||
text-align: center; | ||
font-family: "Josefin Sans"; | ||
font-size: 1.5rem; | ||
font-weight: 400; | ||
line-height: 1.95rem; | ||
`; | ||
|
||
export const Typography6 = styled.p` //Quotes typography, exported this to be able to use white color | ||
color: ${(props) => (props.isWhite ? '#fff' : '#000')}; // default black - choise to be white | ||
text-align: ${(props) => (props.isCentered ? 'left' : 'center')}; | ||
font-family: "Josefin Sans"; | ||
font-size: 0.75rem; | ||
font-style: ${(props) => (props.noItalic ? 'normal' : 'italic')}; | ||
font-weight: 300; | ||
line-height: 1.1rem; | ||
|
||
@media (min-width: 768px) { | ||
font-size: 1rem; |
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.
indentation
const Tag = level === 1 ? Level1 | ||
: level === 2 ? Level2 | ||
: level === 3 ? Level3 | ||
: level === 4 ? Typography4 | ||
: level === 5 ? Typography5 | ||
: level === 6 ? Typography6 | ||
: level === 7 ? Typography7 | ||
: `h${level}`; // Use `h2`, `h3` directly for levels 2 and 3 |
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.
this is clever, however it is a bit harder to understand instead of calling the different texts heading1 or paragraph or similar
Netlify link
https://dailyspells.netlify.app/
Collaborators
Anna Hansen
Erika Olsson
[Anna2024WebDev, erikamolsson]