Clean up selectors in _toolkit.scss

ericvennemeyer commented 2 years ago

Overview

As a developer on the website team, SCSS code is easier to understand and maintain when it does not contain duplicate selectors. This issue is to consolidate duplicate selectors within _toolkit.scss.

Action Items

[x] Duplicate selectors are present in three places within _toolkit.scss. For each instance, remove overwritten properties and combine the remaining active properties under one selector:
- [x] .resource-svg-icons appears on line 120, and again on line 225.
- [x] .toolkit-info-container appears on line 126, and again on line 230.
- [x] .toolkit-info-container h3 appears on line 130, and again on line 231.
[x] Note that properties in the second selector that match properties in the first will take precedence and overwrite the previous properties. See CSS specificity rules for reference.

Acceptance Criteria

[x] Compare the toolkit page at localhost:4000 with the toolkit page on the Hack for LA website to ensure your code modifications don't result in any visible change.

Resources/Instructions

The duplicate selectors were highlighted when they failed to pass a Lint SCSS test for PR #3483. _toolkit.scss toolkit page CSS Specificity Rules --> "When two selectors in the same cascade layer and origin have the same specificity, proximity is important; the last selector wins."

kathrynsilvaconway commented 2 years ago

@ericvennemeyer Nice work writing this up, Eric. I am removing the draft label, it is ready for approval.

bishrfaisal commented 2 years ago

@ExperimentsInHonesty Issue is well written and specific. Ready for milestone.

7kram commented 2 years ago

@ExperimentsInHonesty very clear and straight-forward! We can add a "good second issue" label for new members.

Maybe move the last action item: "comparing toolkit page" to an Acceptance Criteria section at the end

ExperimentsInHonesty commented 2 years ago

7kram said

@ExperimentsInHonesty very clear and straight-forward! We can add a "good second issue" label for new members. Maybe move the last action item: "comparing toolkit page" to an Acceptance Criteria section at the end

@7kram

I agree with moving the comparing toolkit page to acceptance criteria section. I did that.
Good second issues are more prescriptive than this, because the purpose of a good second issue is to test your development environment. Good Small issues are actually issues which require you to make some decisions or otherwise be an independent engineer.

github-actions[bot] commented 2 years ago

Hi @Mattre7, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

Mattre7 commented 2 years ago

i. Availability: Sundays and Mondays. Rest of the days I work, but can still do a little bit, especially after 9 PST. ii. Likely Tuesday 9/20 (tomorrow), at the latest, Sunday 9/25.

hackforla / website