Fix SDG background color on project pages so that it matches the SDG icons

[JessicaLucindaCheng]

Dependency

• [x] #4344
• [x] #4225
• [x] #4253
• [x] #4233

Overview

On detailed project pages, make the Sustainable Development Goal (SDG) background color match the color of the SDG mini-card so that the mini-card and the background blend in together.

Details

• A couple examples of the problem

  Click here to see a screenshot of the blue background not matching the SDG image color on the Lucky Parking page

  
  Click here to see a screenshot of the blue background not matching the SDG image color on the 311 Data page

  

Action Items

• [x] In _projects/lucky-parking.md, after sdg-image-alt: '11: sustainable cities and communities', add this new field:

  sdg-color-variable: $color-sdg11

• [x] In the following project's Markdown file, after the line sdg-image-alt: '16: peace, justice and strong institutions', add this new field:

  sdg-color-variable: $color-sdg16

  • [x] _projects/311-data.md
  • [x] _projects/access-the-data.md
  • [x] _projects/engage.md
  • [x] _projects/open-community-survey.md
• [x] In _layouts/project.html, change

  <div class='sdg-description-card'>

  to

  {%- assign background_color = page.sdg-color-variable |  replace_first: "$", "background-" -%}
  <div class='sdg-description-card {{ background_color }}'>

• [x] In _sass/components/_project-page.scss, in the .sdg-description-card class, remove

  background: #02548B;

• [x] On the Lucky Parking page (https://www.hackforla.org/projects/lucky-parking), check that the SDG background color matches the orange color of the 11 Sustainable Cities and Communities icon so that the icon and the background blend in together in desktop and tablet views and that it looks good.
• [x] Check that the Lucky Parking page in mobile view looks the same as the one on the live website.
• [x] Using Docker, check that the following pages look good in desktop, tablet, and mobile views:
  • [x] 311 Data: https://www.hackforla.org/projects/311-data
  • [x] Access the Data: https://www.hackforla.org/projects/access-the-data
  • [x] Engage: https://www.hackforla.org/projects/engage
  • [x] Open Community Survey: https://www.hackforla.org/projects/open-community-survey

Resources/Instructions

• Jekyll's use of Liquid template language
  • Liquid template language
• Hack for LA's Site Architecture wiki page

Files/Directories in the repo

• _layouts/project.html
• _sass/components/_project-page.scss
• _sass/variables/_colors-sdg.scss
• _sass/elements/_background-sdg-colors.scss
• _projects/311-data.md
• _projects/access-the-data.md
• _projects/engage.md
• _projects/lucky-parking.md
• _projects/open-community-survey.md

  Webpages to check

• Lucky Parking page: https://www.hackforla.org/projects/lucky-parking
• 311 Data: https://www.hackforla.org/projects/311-data
• Access the Data: https://www.hackforla.org/projects/access-the-data
• Engage: https://www.hackforla.org/projects/engage
• Open Community Survey: https://www.hackforla.org/projects/open-community-survey
• This issue is tracked in #4153

[github-actions[bot]]

Hi @JessicaLucindaCheng.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing: Complexity

NOTE: Please ignore the adding proper labels comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards. To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Prioritization" label once it is ready for prioritization.

Additional Resources:

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

[ExperimentsInHonesty]

My guess is that this blue is hard coded into the page layout instead of using a file to match color to the SDG to that project. Here is the spreadsheet where we have a list of SDG Hex Colors

[JessicaLucindaCheng]

• [x] Break this down into smaller issues and it's okay if it becomes
  • [x] Remove the hard coded color
  • [x] Add color variables and color background color
  • [x] Remove and replace SDG images because colors are messed up
  • [x] Fix the Lucky Parking page
  • [ ] Etc

[JessicaLucindaCheng]

• Blocker related to this comment: https://github.com/hackforla/website/issues/4233#issuecomment-1483959603

[github-actions[bot]]

Hi @JessicaLucindaCheng, 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 :)

[github-actions[bot]]

Hi @jch1013, 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 :)

[jch1013]

Availability: Weeknights ETA: October 17