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 Initiative: homepage launch #2481
• How to work off of a feature branch wiki page
• _sass/components/_project-page.scss

[ExperimentsInHonesty]

@JessicaLucindaCheng what should we do with this issue?

[JessicaLucindaCheng]

@JessicaLucindaCheng what should we do with this issue?

@ExperimentsInHonesty I updated the issue. It is ready for you to review and add a milestone if you think it is ready for it.

[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?