Update toolkit page subheadings

[macho-catt]

Fixes #1479

What changes did you make and why did you make them ?

• Placed suggest-guide-group div as a child of toolkit-flex-container for both the guides and external resources so that it becomes part of the grid, along with the guides
• Set suggest-guide-group to span the entire column, which fixes the heading and button alignments so they align with the edges of the first and last guides
• Removed "We made these" from subheading
• Removed commented code and fixed some tab alignments
• For external resources, wrapped the resources under a new div: external-resource-container. Without this div, the external resources sit to the left (instead of centered like in the figma) because of how grid works. To fix this, added media queries so that at certain breakpoints, this div is either a flex (above 1632px), a grid (below 1632px until above mobile) and back to flex (below mobile).
• Added comment under _toolkit.scss to explain the above in the code:
  Refer to issue Update toolkit page subheadings #1999. This part, the accompanying divs in toolkit.html (lines 89 and 109),
  and $screen-desktop-large under layout.scss were added to take into account how the external
  resources look at a certain breakpoint ($bp-desktop-large-up). As of 7/22/2021, there are only three resources in the list.
  Since suggest-site-group div was added to the grid and takes up the entire first row, the rows that
  follow does not go to the center and instead aligns to the left. The media queries here fixes that.
  When there are four or more resources added in the future, this part (and the divs in toolkit.html)
  can be removed.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Full page before

Full page after

Guides responsiveness

External Resources responsiveness

[github-actions]

From your project repository, check out a new branch and test the changes.

git checkout -b macho-catt-fix-toolkit-subheading-1479 gh-pages
git pull https://github.com/macho-catt/website.git fix-toolkit-subheading-1479

[abuna1985]

@macho-catt I was able to pull the changes and verify locally. It looks awesome. Thank you for your detailed pull request and comment to notate the addition of the $screen-desktop-large and implementation for the Toolkit page. Great work.

[Abel-Zambrano]

Hey, @macho-catt it's looking good, but there's still unalignment happening below 960px width. If you could please make changes so it's aligned with cards before it gets centered in mobile-screen.

[Abel-Zambrano]

Screen.Recording.2021-07-29.at.6.45.33.PM.mov

[macho-catt]

@Abel-Zambrano good catch! I'll work on that, thanks!

[macho-catt]

New commits for @Abel-Zambrano's change request

What changes did you make and why did you make them ?

• Under _toolkit.scss, fixed grid-template-column for below desktop view so that the header and the guides are still aligned on both edges
• Made a new media query for below tablet view, and placed anything that uses below tablet view under that new media query
• Added new class, external-resources-text for the external resources header because at a certain width below tablet view, it wraps the text and centers it, which makes it not aligned to the front edge. The new class aligns it to the left below tablet view.
• Fixed scss indents

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

New full page (still looks the same)

Guides header responsiveness

External Resources header responsiveness

[Abel-Zambrano]

@macho-catt Wow! That looks great! Sorry, one more thing, I must've missed it. On file _toolkit.scss, can you move line 308's code for h2's margin-bottom into media query bp-below-mobile (line 314) so it can be aligned with the button on the right?

How it looks now

How it should look

[Abel-Zambrano]

This change will also give the h2 and button some breathing room when viewed on mobile-screens

[macho-catt]

Thanks @Abel-Zambrano

Changes

• Fixed alignment so Guides and External Resources are aligned with the button

Fixed Header Alignment

[Abel-Zambrano]

Awesome work! @macho-catt

[abuna1985]

Great job @macho-catt. Thank you for your edits.