Change Citizen Engagement Page Description in Header Section

[JessicaLucindaCheng]

Dependencies

• Create each program area page automatically using a layout #3328

Prerequisites

1. Be a member of Hack for LA. (There are no fees to join.) If you have not joined yet, please follow the steps on our Getting Started page and attend an onboarding session.
2. You have already read our How to Contribute to Hack for LA Guide.

Overview

We want to update the description in the header of the program area pages so that the page can be converted in the future to create a template that works for all our program areas.

Action Items

• In your IDE, under the pages directory, open the _layouts/program-area-pages.html ¹.
• Delete

            If you have a new idea, want to submit feedback that will guide the next iteration
            of an existing tool, or want to start working on a project team with us, please contact
            us at <a href="mailto: citizenengagement@hackforla.org">citizenengagement@hackforla.org.</a>

• Delete

        <p class="bottom-header-paragraph">
            Read more about <a href="https://sdg.lamayor.org/about/global-goals">LA’s Sustainable Development Goals</a>.
        </p>

• Under _sass/components, open program-area-pages.scss ².
• Change the following from

// This contains the image and three paragraphs within the header. I added (bottom-header-paragraph)
// to help align it with other paragraph elements in the header. It is not typical throughout the site
// to have more than two paragraph elements.

to

// This contains the image and two paragraphs within the header.

• Delete

    .bottom-header-paragraph {
        max-width:100%;
        margin-top: 1rem;
    }

• Using Docker, check the following:
  • Citizen Engagement (localhost:4000/program-areas/citizen-engagement)
  • Civic Tech Infrastructure (localhost:4000/program-areas/civic-tech-infrastructure)
  • Diversity, Equity & Inclusion (localhost:4000/program-areas/diversity-equity-inclusion)
  • Environment (localhost:4000/program-areas/environment)
  • Justice (localhost:4000/program-areas/justice)
  • Social Safety Net (localhost:4000/program-areas/social-safety-net)
  • Vote / Representation (localhost:4000/program-areas/vote-representation)
  • Workforce Development (localhost:4000/program-areas/workforce-development)
  • Check that nothing breaks on the website in both desktop, tablet, and mobile views

Resources/Instructions

• Issue created from this comment

Footnotes

1. _layouts/program-area-pages.html ↩

2. _sass/components/program-area-pages.scss ↩

[HackforLABot]

Hi @JessicaLucindaCheng, we notice that you are assigned to an issue that you authored. Please remember to add the Draft label to this issue while you are working on it.