feature-homepage-launch branch: Fix projects' info pages' styling of the header

[JessicaLucindaCheng]

Overview

As developers, we need to fix the styling of the first header in the projects' info pages in the feature-homepage-launch branch so that it matches the styling of those pages on the live website.

Details

Click here to see examples of what the header should look like on the current projects' info pages

Click here to see examples of what the header looks like on the feature-homepage-launch projects' info pages

On the feature-homepage-launch branch, the problem crept in on the project info pages when the SCSS class hero-inner was removed from home.scss as part of pr #2373, which was the initial pr on the feature-homepage-launch branch. I think the problem happened because a lot of the code originally in home.scss was removed/changed in order to style the redesigned homepage, including the removal of class hero-inner.

Action Items

• Feature Branch: You will be working off a feature branch called feature-homepage-launch. Please follow "Step 1: Create your branch" in How to work off of a feature branch wiki article.
• Familiarize yourself with how the headers look on the projects' info pages on the current website. See the Details section above for screenshots of examples; in addition, here are links to those example pages:
  • https://www.hackforla.org/projects/100-automations
  • https://www.hackforla.org/projects/home-unite-us
  • https://www.hackforla.org/projects/spare
• Fix the SCSS for the header on the projects' info pages on the feature-homepage-launch branch to match how it currently looks on the website by doing the following:
  • In VS Code or your local IDE on your computer, navigate to _sass/components/_project-page.scss
  • Then, add the following SCSS code:

    .hero-inner {
      color: $color-white;
      margin: 60px auto 0px;
      max-width: $max-content-width;
      position: relative;
      z-index: 2;
    
      @media #{$bp-tablet-up} {
        margin-bottom: 0;
        margin-top: 150px;
      }
    
      h1 {
        font-weight: bold;
        margin-bottom: .65rem;
      }
      
      p {
        margin-bottom: .65rem;
      }
      
      span {
        border-bottom: 3px solid $color-red;
      }
    }
    

• Using Docker, make sure any changes you make to the code doesn't break anything on the website in mobile, tablet, and desktop views.
• To update your topic branch, please follow "Step 2: Update your branch with upstream changes" in How to work off of a feature branch wiki article.
• The pull request created from this issue should be merged into feature-homepage-launch. Please follow "Step 3: Create a pull request" in How to work off of a feature branch wiki article

Resources/Instructions

• Tracked in homepage launch #2481
• How to work off of a feature branch wiki page
• _sass/components/_project-page.scss

[ExperimentsInHonesty]

@JessicaLucindaCheng I am confused, how did a problem creep in on the project info pages? Why did they change at all? What do they have to do with the Homepage launch?

[JessicaLucindaCheng]

@ExperimentsInHonesty

I am confused, how did a problem creep in on the project info pages?

The problem crept in on the project info pages when the SCSS class hero-inner was removed from home.scss as part of pr #2373, which was the initial pr on the feature-homepage-launch branch.

Why did they change at all?

I think it changed/problem happened because a lot of the code originally in home.scss was removed/changed in order to style the redesigned homepage, including the removal of class hero-inner.

What do they have to do with the Homepage launch?

The problem had to do with the Homepage launch because

• the problem only occurs on the feature-homepage-launch branch and not on the gh-pages branch
• and it happened because of the removal of the hero-inner class from home.scss, when a lot of the code in home.scss was changed/removed in order to style the redesigned homepage.

Thus, I thought it would be best to address the problem in the feature-homepage-launch branch since that is where the problem is visible.

Also, I have updated the issue with more details about the problem. I am adding the ready for milestone back on because I am not sure what label to add to let you or other PMs know to take a look at the issue again.

[github-actions]

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

[GRISONRF]

Availability: 3h 09/26/2022
ETA: 09/26/2022

[ExperimentsInHonesty]

Manually closing (instead of the PR closing it on merge) this issue because its on a feature branch, so build in automations are not working.