Add paragraph classes 1-3 to codebase

[JessicaLucindaCheng]

Overview

As developers, we use reusable SCSS classes for styling Hack for LA webpages. For this issue, we will add the paragraph classes 1-3 defined in the Design System to our codebase.

Note: We will not be writing classes for paragraph classes 4-5 because the font size is illegible and should not be used on the website.

Paragraph Classes under Typography in the Design System in Figma

Action Items

• Locate the Paragraphs section under Typography in the Design System in Figma to see how the paragraph classes are defined.
• Look at the following SCSS files to see how title classes were implemented; paragraph classes should be implemented similarly.
  • _sass/variables/_typography.scss
  • _sass/elements/_typography.scss
• Based on how each paragraph class is defined in Figma, add SCSS paragraph classes 1-3 to _sass/elements/_typography.scss
  • You may also need to define some variables in _sass/variables/_typography.scss
• Update paragraph definitions in Figma (if needed) to match code

Merge Team or Technical Leads

Once the pull request associated with this issue is approved and merged, please update the following:

• Edit issue Changing text size for Getting Started page #2656 by
  • Checking off the dependency for this issue
  • Moving issue Changing text size for Getting Started page #2656 into the New Issue Approval column and removing the Dependency label
• Edit issue Create new privacy policy page #2555 by
  • Checking off the dependency for this issue
  • Moving issue Create new privacy policy page #2555 into the In Progress column, removing the Dependency label, and assigning JessicaLucindaCheng to the issue. (Note: I, Jessica, was working on issue Create new privacy policy page #2555 prior to this one and needed the classes from this issue in order to continue work on issue Create new privacy policy page #2555. So, I had to stop work on issue Create new privacy policy page #2555 and complete this issue first. Once this issue is merged, I want to finish working on Create new privacy policy page #2555 since I have 65% of it done already.)

Resources/Instructions

• Design System in Figma
• _sass/variables/_typography.scss
• _sass/elements/_typography.scss
• SASS/SCSS Basics
• SASS/SCSS Documentation

[github-actions]

@JessicaLucindaCheng

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Thursday, February 17, 2022 at 2:43 AM PST.}

[JessicaLucindaCheng]

• Progress: Coding is done and pr is opened. Fixed a typo as pointed out by Tamara.
• Blockers: none
• Availability: Will update later if further changes are requested
• ETA: Will update later if further changes are requested.