Changing text size for Getting Started page

[SAUMILDHANKAR]

Dependency

• Add paragraph classes 1-3 to codebase #2690

Overview

We need to make sure the text sizes for the header section on the Getting Started page is consistent with the rest of the site.

Action Items

• Review the text sizes of all the project pages.
• Change the text size of Getting Started page by using the SCSS class paragraph2 for the paragraphs in the header section so it is consistent with other project pages. (See the Paragraphs section under Typography in the Design System in Figma for how paragraph classes are defined.)
• This issue should also address cleaning up the code in the .header-p class (where it would overlap with the properties in the paragraph2 class). Here is a link to the .header-p class:

  website/_sass/components/_getting-started-page.scss

  Lines 16 to 32 in 8b0d5bf

  	.header-p {
  	font-size: 16px;
  	font-weight: 500;
  	display: flex;
  	max-width: 580px;
  	text-align: center;
  	padding: 0 30px 10px 30px;
  	// padding-bottom: 10px;
  	margin: 12px auto;
  	font-family: "Roboto"sans-serif;
  	@media #{$bp-below-tablet} {
  	font-size: 18px;
  	text-align: left;
  	padding: 0px;
  	}
  	}

• Make sure the page looks fine for smaller viewport screens as well, such as tablet, mobile (responsiveness)

Resources/Instructions

• See the Paragraphs section under Typography in the Design System in Figma for how paragraph classes are defined
• See the Getting Started page design in Figma in the red box
• Link to Getting Started page
• Link to Getting Started page SCSS code
• Link to Getting Started page HTML code

Screenshot of the paragraph text size to be changed as per Figma

[github-actions]

Hi @SAUMILDHANKAR.

Good job adding the required labels for this issue. The merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels

[A-BMT02]

Availability: 1 hour
ETA: in 24 hours

[A-BMT02]

I have a blocker
How do i import the "paragraph2" class to the "getting-started" html page

Do i just give the paragragh to be changed a classname of "paragraph2" or i have to import it from the "_typography.scss"?

[JessicaLucindaCheng]

@A-BMT02 You don't need to import the classes because

All sass (.scss) files are imported to the main.scss file, which Jekyll processes into a single stylesheet, main.css, which defines all the styles used on the site.

For more info, see Hack for LA's Site Architecture.

So, you can add paragraph2 as a class to the starting HTML tag. For example, if I wanted to use paragraph2 class for a paragraph, I would do something like the following in the starting tag, <p class="paragraph2">.

[A-BMT02]

Noted
Thank You!

[A-BMT02]

Progress: Done with the checklist and awaiting final review
Blockers: No difficulties
Availability: Whole weekend
ETA: Done and awaiting review