Open vikascripps opened 2 months ago
mwilkins74
commented
1 month ago h1 styling:
Also, in order to keep Director & Producer and Director of Photography from wrapping I think the font-size will need to be smaller for these.
Got the styling to apply to: "About Me" page, description on Series page, 'Client' line under videos, and input fields on Contact Form
Updated Chip Styling:
Footer Link updated styling:
mwilkins74
commented
1 month ago Addressed in #169
vikascripps
commented
3 weeks ago @mwilkins74 a few comments here:
Also, in order to keep Director & Producer and Director of Photography from wrapping I think the font-size will need to be smaller for these. I think the issue is not just in the font size, because the Director and Producer wraps like this: Director & Producer I think if it was the font size issue it would wrap up as: Director & Producer because the "&" definitely fits inline with the "director".
Same for Director of Photography, it wraps up like this: Director of Photography I would expect it to be k=like this if it was the font size issue: Director of Photography
Could you please look into why the text wraps in this specific way?
The font for chips does not look right. Looks like you're running into the same problem as in #165.
Same issue with footer links as with chips.
mwilkins74
commented
1 week ago @vikascripps
Ok, I got Director of Photography to render as below:
But these changes cause Director & Producer to render like this:
I can't figure out how to get them each to render in the following:
Director of
PhotographyDirector &
ProducerChips & Footer Links both showing the Manrope, sans-serif flags same as on the Submit button issue in #165:
Thoughts?
I noticed that some text styled in staging don't look quite right. Let's make sure they match the styling in Figma.
Here are the changes we need to make:
1. Page Headers:
There should be H1:
//styleName: H1;
font-family: Oswald;
font-size: 32px;
font-weight: 400;
line-height: 47.42px;
text-align: left;
Let's also make sure that these headers fill out the width of the screen if there is space to avoid this look:
We want this look:
2. Video Titles
These should be H3:
//styleName: H3;
font-family: Oswald;
font-size: 24px;
font-weight: 400;
line-height: 35.57px;
text-align: left;
AND THESE ARE ALL CAPS
3. Body Copy This is used for the 'Client' line under videos, for series descriptions, on "About Me" page, on input fields for the 'Contact me' form:
These should be Body/Regular: //styleName: Body/Regular; font-family: Manrope; font-size: 16px; font-weight: 400; line-height: 22.4px; text-align: left;
4. Tags (Chip Component):
These should have the following specs:
font-family: Manrope;
font-size: 12px;
font-weight: 500;
line-height: 16.39px;
letter-spacing: 0.02em;
text-align: left;
5. Footer Links These should have the following specs: font-family: Manrope; font-size: 12px; font-weight: 400; line-height: 16.39px; text-align: left;