From 03784427d8fc7f93fe01759b5f24240beb186b8c Mon Sep 17 00:00:00 2001 From: Sarah <40401149+arghmatey@users.noreply.github.com> Date: Thu, 22 Jul 2021 16:07:12 -0700 Subject: [PATCH 1/8] consolidate header component css into container file --- _sass/elements/_containers.scss | 94 ++++++++++++++++++++++++++++----- 1 file changed, 82 insertions(+), 12 deletions(-) diff --git a/_sass/elements/_containers.scss b/_sass/elements/_containers.scss index a2f5b3d7ae..78ae0d4db8 100644 --- a/_sass/elements/_containers.scss +++ b/_sass/elements/_containers.scss @@ -1,20 +1,90 @@ .header-container { background: #fff; - padding: 40px; + padding: 64px; // many different top margins. 80, 40, 36, etc? height: fit-content; margin: 61px auto 0; - font-family: "Roboto"sans-serif; - font-style: normal; - font-weight: normal; text-align: center; - - @media #{$bp-below-mobile} { - padding: 87px 15px 0px 15px; - margin-top: 10%; + justify-content: center; + + .header-text { + display: flex; + align-items: center; + flex-direction: column; + margin-right: 5rem; + } + + .header-title { + margin-bottom: 38px; + } + + .header-p { + font-size: 1.125rem; + max-width: 508px; + text-align: left; + + a { + text-decoration: none; + font-weight: 700; + + &:link, + &:visited { + color: $color-black; + } + + &:hover, + &:active, + &:focus { + color: $color-red; + } + } + } + + .header-hero-image { + height: 240px; + width: auto; + align-self: center; + } + + @media #{$bp-below-desktop} { + flex-flow: column; + + .header-text { + margin-right: 0; + } + + .header-p { + margin-bottom: 16px; + } + + .header-hero-image { + margin-top: 20px; + } + } + + @media #{$bp-below-tablet} { + flex-flow: column; + padding: 32px; + margin: 54px auto 0; + + .header-text { + margin-right: 0; + } + + .header-title { + margin-bottom: 28px; + } + + .header-p { + max-width: 300px; + line-height: 1.5rem; + } + + .header-hero-image { + height: 155px; + } } - } +} - .flex-container { +.flex-container { display: flex; - flex-direction: column; - } \ No newline at end of file +} \ No newline at end of file From cf592d903e3572dfc510e6e6265113f07da24376 Mon Sep 17 00:00:00 2001 From: Sarah <40401149+arghmatey@users.noreply.github.com> Date: Thu, 22 Jul 2021 16:07:58 -0700 Subject: [PATCH 2/8] remove redundant header css --- _sass/components/_about.scss | 56 ---------- .../components/_communities-of-practice.scss | 88 ++++----------- _sass/components/_credit-items.scss | 81 -------------- _sass/components/_join-us.scss | 74 +------------ _sass/components/_program-areas.scss | 100 ------------------ _sass/components/_project-meetings.scss | 83 --------------- _sass/components/_sitemap.scss | 34 ------ _sass/components/_toolkit.scss | 95 ++--------------- 8 files changed, 31 insertions(+), 580 deletions(-) diff --git a/_sass/components/_about.scss b/_sass/components/_about.scss index 1119e3e8db..1491067764 100644 --- a/_sass/components/_about.scss +++ b/_sass/components/_about.scss @@ -1,45 +1,9 @@ /* This page is built using a mobile first method. Plain tags apply to mobile. Breakpoints below for larger sizes. */ -.header-container--about-us { - display: flex; - justify-content: center; - flex-flow: column; - padding: 25px 15px 20px 15px; -} - -.header-container--about-us h1 { - font-weight: 900; - margin-bottom: 30px; -} - .donation-gif-box-shadow { box-shadow: 0px 8px 16px rgba(0,0,0,0.12); } -.header-text--about-us { - font-size: 18px; - max-width: 500px; - text-align: left; - margin-left: auto; - margin-right: auto; - - a { - text-decoration: none; - font-weight: 700; - - &:link, - &:visited { - color: $color-black; - } - - &:hover, - &:active, - &:focus { - color: $color-red; - } - } -} - // CSS Grid .page-content-container-grid { display: grid; @@ -599,16 +563,6 @@ a.anchor { // Below tablet - 768px @media #{$bp-below-tablet} { - .about-header-text-margin{ - margin-bottom: 36px; - - h1 { - margin-bottom: 28px; - } - } - .header-text--about-us { - font-size: 16px; - } .page-content-container-grid { margin-top: 0; } @@ -626,16 +580,6 @@ a.anchor { //Bigger than desktop - 960px @media #{$bp-desktop-up} { - - .header-container--about-us { - flex-flow: row; - padding: 3rem 1rem 0 1rem; - } - - .about-header-text-margin { - margin-right: 100px; - } - // The next two tags turn on and off the sticky nav sidebar .page-content-container-grid { grid-template-columns: 996px auto; diff --git a/_sass/components/_communities-of-practice.scss b/_sass/components/_communities-of-practice.scss index 11f0fdbb55..d2463f4be6 100644 --- a/_sass/components/_communities-of-practice.scss +++ b/_sass/components/_communities-of-practice.scss @@ -1,73 +1,9 @@ -.header--communities { - display: flex; - flex-flow: row; - justify-content: center; - background: #fff; - height: fit-content; - font-family: "Roboto", sans-serif; - font-style: normal; - font-weight: normal; - align-items: center; - /*This page has a lot more text than the others, so it starts looking weird earlier*/ - @media #{$bp-below-desktop} { - flex-direction: column; - } - - .header-text--communities { - display: flex; - flex-direction: column; - align-items: center; - - p{ - font-size: 18px; - max-width: 508px; - margin-top: 8px; - text-align: left; - @media #{$bp-below-tablet} { - max-width: 300px; - font-size: 16px; - } - } - h1 { - font-size: 48px; - @media #{$bp-below-tablet} { - font-size: 40px; - margin-bottom: 28px; - } - @media #{$bp-below-mobile} { - font-size: 32px; - } - } - } - - .header-img--communities { - max-height: 240px; - margin-left: 80px; - @media #{$bp-below-desktop} { - margin: auto; - - } - @media #{$bp-below-tablet} { - width:100%; - } - } - - .header-self-invite--communities { - display:flex; - align-items: flex-start; - max-width: 508px; - margin-top: 31px; - @media #{$bp-below-tablet} { - max-width: 300px; - margin-bottom: 30px; - } +.header-self-invite--communities { + display:flex; + align-items: flex-start; + max-width: 508px; + margin-top: 31px; - .alert--communities { - font-size: 16px; - font-weight: bold; - max-width: 450px; - } - } .self-invite-img { /*Note "margin-top: 15px" is needed to keep this img aligned with neighboring text*/ margin-top: 15px; @@ -75,8 +11,22 @@ width: 24px; height: 24px; } + + .alert--communities { + font-size: 16px; + font-weight: bold; + max-width: 450px; + margin-top: 8px; + text-align: left; + } + + @media #{$bp-below-tablet} { + max-width: 300px; + margin-bottom: 30px; + } } + .content--communities { background: $color-pink; display: flex; diff --git a/_sass/components/_credit-items.scss b/_sass/components/_credit-items.scss index 7e36dc6506..c96daf5d11 100644 --- a/_sass/components/_credit-items.scss +++ b/_sass/components/_credit-items.scss @@ -11,87 +11,6 @@ font-weight: normal; } -.header-container--credits { - display: flex; - flex-direction: row; - justify-content: center; - - img { - max-height: 240px; - } - - @media #{$bp-below-tablet}{ - img { - max-height: 170px; - } - } - - @media #{$bp-below-mobile} { - flex-direction: column; - align-items: center; - padding: 32px; - } -} - -.credits-text-margin { - display: flex; - flex-direction: column; - margin-right: 80px; - p { - font-size: 18px; - max-width: 508px; - margin-top: 8px; - text-align: left; - } - h1 { - font-size: 48px; - } - @media #{$bp-below-tablet}{ - h1 { - font-size: 2.5rem; - } - } - @media #{$bp-below-mobile} { - margin: auto; - margin-bottom: 36px; - h1 { - font-size: 2rem; - margin-bottom: 28px; - } - p { - padding: 0px; - } - } -} - -.header-text { - font-size: 26px; - display: flex; - max-width: 895px; - text-align: center; - padding: 30px; - margin: 12px auto; - font-family: "Roboto" sans-serif; -} - -.mobile-image { - @media #{$bp-below-mobile} { - padding: 0; - } -} - -.credit-hero { - padding: 33px; - margin: 0px auto; - display: flex; - justify-content: space-evenly; - - @media #{$bp-below-mobile} { - flex-direction: column; - text-align: -webkit-center; - } -} - .credits-item { margin: 15px; padding-bottom: 15px; diff --git a/_sass/components/_join-us.scss b/_sass/components/_join-us.scss index cfe5019245..903426992f 100644 --- a/_sass/components/_join-us.scss +++ b/_sass/components/_join-us.scss @@ -6,48 +6,6 @@ min-height: 100vh; } -.header-container--join { - display: flex; - flex-direction: column; - align-items: center; - padding: 4rem 1rem; - height: fit-content; - - .join-us-banner-text { - display: flex; - flex-direction: column; - align-items: center; - - h1 { - font-size: 24px; - padding-bottom: 28px; - @media #{$bp-mobile-up} { - font-size: 32px; - } - } - - p { - font-size: 18px; - max-width: 300px; - text-align: left; - @media #{$bp-tablet-up} { - max-width: 500px; - } - @media #{$bp-mobile-up} { - font-size: 16px; - text-align: left; - } - } - } - - img { - width: 80%; - max-width: 500px; - margin: auto; - padding-top: 20px; - } -} - .join-us-card-container { background: #f7f5f5; display: flex; @@ -141,34 +99,4 @@ /*--------- | Desktop ------------*/ - -@media #{$bp-desktop-up} { - .header-container--join { - flex-direction: row; - max-width: 1200px; - margin: 37px auto 0; - - .join-us-banner-text { - width: 500px; - min-width: 300px; - margin: auto 5rem auto 8rem; - - h1 { - font-size: 48px; - padding-bottom: 0; - } - - p { - font-size: 18px; - max-width: 508px; - } - } - - img { - max-width: 385px; - margin: auto 1rem auto 0; - padding: 0 15px; - } - } -} +-----------*/ \ No newline at end of file diff --git a/_sass/components/_program-areas.scss b/_sass/components/_program-areas.scss index a7ec46f6d7..dc6800f54c 100644 --- a/_sass/components/_program-areas.scss +++ b/_sass/components/_program-areas.scss @@ -1,103 +1,3 @@ -.program-areas-header { - display: flex; - justify-content: center; - - &__text { - display: flex; - align-items: center; - flex-direction: column; - margin-right: 5rem; - - @media #{$bp-below-desktop} { - margin-bottom: 1.625rem; - } - - h1 { - margin-top: 2.25rem; - margin-bottom: 3.125rem; - - @media #{$bp-below-desktop} { - margin-top: 2rem; - } - } - } - - &__text-group { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - text-align: center; - padding: 1.4rem 0; - background-color: $color-pink; - - - a { - font-weight: 300; - text-decoration: none; - color: black; - } - a:hover { - color: $color-mediumvioletred; - transform: scale(1.01); - } - - .selected-category { - color: $color-mediumvioletred; - } - - } - - &__p { - font-size: 1.125rem; - max-width: 508px; - text-align: left; - margin: 12px auto; - } - - &__hero-image { - margin: 33px 0px; - max-width: 100%; - } -} - -.program-areas-hero-svg { - width: auto; - height: 240px; - - @media #{$bp-below-tablet} { - height: auto; - max-width: 500px; - width: 80%; - } -} - -@media(max-width: 960px) { - .program-areas-header { - flex-flow: column; - - &__text { - margin-right: 0; - - h1 { - margin-bottom: 1rem; - } - } - - &__p { - margin-bottom: 0; - } - - &__hero-image { - margin: 10px 0; - } - } - - .header-container { - padding: 2rem; - margin-top: 10%; - } -} - .content--program-areas { background: $color-pink; display: flex; diff --git a/_sass/components/_project-meetings.scss b/_sass/components/_project-meetings.scss index 6043934c6e..2d85900e64 100644 --- a/_sass/components/_project-meetings.scss +++ b/_sass/components/_project-meetings.scss @@ -1,77 +1,3 @@ -.header-container--project-meetings { - display: flex; - flex-direction: column; - align-items: center; - background: #fff; - padding: 32px; - height: fit-content; - margin: 37px auto 0; - font-family: "Roboto" sans-serif; - font-style: normal; - font-weight: normal; - text-align: center; - - @media #{$bp-desktop-up} { - flex-direction: row; - align-items: center; - padding: 64px; - justify-content: center; - } - - @media (max-width: $screen-mobile) { - height: 80vh; - background-size: auto 30%; - } - - & .project-meetings-banner-icon { - max-height: 240px; - padding: 0 15px; - - @media #{$bp-desktop-up} { - margin: auto 1rem auto 0; - } - - } - - .project-meetings-header-text-container { - display: flex; - flex-direction:column; - font-size: 1.125rem; - - @media #{$bp-desktop-up} { - margin: auto 5rem; - } - - h1 { - color: #333; - font-weight: 700; - font-size: 24px; - padding-bottom: 28px; - - @media #{$bp-desktop-up} { - font-size: 48px; - padding-bottom: 0; - } - } - p { - font-size: 18px; - margin:auto; - max-width: 300px; - margin-bottom: 1rem; - text-align: start; - - @media #{$bp-desktop-up} { - margin-bottom: 0; - } - - @media #{$bp-tablet-up} { - max-width: 508px; - } - } - } - -} - .covid-notification-banner { background-color: #f2c94d; width: 100%; @@ -130,15 +56,6 @@ margin-block-end: 16px; } -.team-meetings-title { - color: #fff; - - // NEW MOBILE FRIENDLY RULES - @media #{$bp-below-mobile} { - margin-top: 60px; - } -} - .meetings-message { text-align: center; } diff --git a/_sass/components/_sitemap.scss b/_sass/components/_sitemap.scss index 1dddd6848d..dc134cf679 100644 --- a/_sass/components/_sitemap.scss +++ b/_sass/components/_sitemap.scss @@ -6,40 +6,6 @@ } } -.header-container--sitemap { - display: flex; - flex-direction: row; - justify-content: center; - - img { - max-width: 252.14px; - } - @include mobile { - flex-direction: column; - align-items: center; - padding: 32px; - } -} - -.header-text-margin--sitemap { - display: flex; - flex-direction: column; - margin-right: 80px; - p { - font-size: 18px; - max-width: 508px; - margin-top: 8px; - text-align: left; - } - @include mobile { - margin: auto; - margin-bottom: 36px; - .title1 { - margin-bottom: 20px; - } - } -} - .sitemap-page { background: #f7f5f5; min-height: 100vh; diff --git a/_sass/components/_toolkit.scss b/_sass/components/_toolkit.scss index ea94f0b311..3b19aa0b0c 100644 --- a/_sass/components/_toolkit.scss +++ b/_sass/components/_toolkit.scss @@ -1,18 +1,4 @@ .toolkit-header { - display: flex; - justify-content: center; - - &__text { - display: flex; - align-items: center; - flex-direction: column; - margin-right: 5rem; - - h1 { - margin-bottom: 3.125rem; - } - } - &__text-group { display: flex; flex-wrap: wrap; @@ -20,68 +6,22 @@ text-align: center; padding: 1.4rem 0; background-color: $color-pink; - - - a { - font-weight: 400; - text-decoration: none; - color: $color-black; - } - a:hover { - color: $color-red; - transform: scale(1.01); - } - - .selected-category { - font-weight: 700; - color: $color-red; - } - - } - - &__p { - font-size: 1.125rem; - max-width: 508px; - text-align: left; - margin: 12px auto; - } - - &__hero-image { - margin: 33px 0px; - max-width: 100%; - } -} -.toolkit-svg { - width: auto; - height: 240px; -} - -@media(max-width: 850px) { - .toolkit-header { - flex-flow: column; - - &__text { - margin-right: 0; - - h1 { - margin-bottom: 2.25rem; - } + a { + font-weight: 400; + text-decoration: none; + color: $color-black; } - - &__p { - margin-bottom: 0; + a:hover { + color: $color-red; + transform: scale(1.01); } - &__hero-image { - margin: 10px 0; + .selected-category { + font-weight: 700; + color: $color-red; } } - - .header-container { - padding: 2rem; - margin-top: 10%; - } } .toolkit-background { @@ -241,16 +181,11 @@ @media #{$bp-below-mobile} { .toolkit-header { - padding-bottom: 3rem; &__banner-item { font-size: .5rem; max-width: 3.6rem; } - - &__p { - font-size: 1rem; - } } } @@ -280,16 +215,8 @@ } } - @media #{$bp-below-tablet} { - .toolkit-svg { - max-width: 350px; - } - } - @media #{$bp-below-mobile} { - .toolkit-svg { - max-width: 250px; - } + .suggest-guide-group { flex-direction: column; } From 320d7cfb8183a6cee8f6523b3f62859e6eee9c83 Mon Sep 17 00:00:00 2001 From: Sarah <40401149+arghmatey@users.noreply.github.com> Date: Thu, 22 Jul 2021 16:08:53 -0700 Subject: [PATCH 3/8] update page files with new header component class names --- pages/about/about.html | 15 ++++++++------- pages/communities-of-practice.html | 17 +++++++++-------- pages/credits.html | 12 ++++++------ pages/join-us.html | 14 ++++++++------ pages/program-areas.html | 16 ++++++++-------- pages/project-meetings.html | 13 ++++++++----- pages/sitemap.html | 11 +++++------ pages/toolkit.html | 13 ++++++------- 8 files changed, 58 insertions(+), 53 deletions(-) diff --git a/pages/about/about.html b/pages/about/about.html index 7acff8d043..bd3e8a3fe8 100644 --- a/pages/about/about.html +++ b/pages/about/about.html @@ -3,19 +3,20 @@ title: About permalink: /about/ --- - -
-
-

About Us

-

We bring together civic-minded volunteers to build digital products, + +

+
+

About Us

+

We bring together civic-minded volunteers to build digital products, programs and services with community partners and local government to address issues in our LA region.

-

+

Hack for LA is a project of Code for America and its official Los Angeles chapter.

-
+
+
diff --git a/pages/communities-of-practice.html b/pages/communities-of-practice.html index fe8e9b9458..9cec299641 100644 --- a/pages/communities-of-practice.html +++ b/pages/communities-of-practice.html @@ -3,14 +3,14 @@ title: Communities of Practice permalink: /communities-of-practice --- - -
-
-

Communities of Practice

-

+ +

+
+

Communities of Practice

+

Communities of Practice started at Hack for LA in 2020, post-Covid. These communities have been a vital connection point in our fully remote organization. They have enabled us to connect people across projects in ways that are both meaningful for the individuals, and have helped the organization build professional infrastructure to support our community, nonprofit and government project partnerships. These communities have also enabled Hack for LA to provide rapid response to the evolving crises of 2020.

-

+

If you'd like to join one of the Communities of Practice that has a regular meeting time, join their Slack channel and look for the meeting details, usually pinned or in the description. Otherwise, see the "How to get started" sections below.

@@ -18,8 +18,9 @@

Communities of Practice

To join the Slack channels below, you first need to be a member of our Hack for LA Slack Community – you can self-invite here.

- commmunity of practice header -
+ commmunity of practice header +
+
{% assign sorted_communities = site.data.internal.communities | sort %} {% for community in sorted_communities %} diff --git a/pages/credits.html b/pages/credits.html index 20d62350d4..9407db6071 100644 --- a/pages/credits.html +++ b/pages/credits.html @@ -3,15 +3,15 @@ title: Credits permalink: /credits/ --- -
-
-

Credits

-

Thank you to all of the artists who have made our page look great. + +

+
+

Credits

+

Thank you to all of the artists who have made our page look great. Check out all of the iconography and imagery we have used on our site.

- -
+
diff --git a/pages/join-us.html b/pages/join-us.html index a9ab9e125c..3417a0c01e 100644 --- a/pages/join-us.html +++ b/pages/join-us.html @@ -5,21 +5,23 @@ ---
-
-
-

Join Us

-

+ + +

+
+

Join Us

+

We bring together civic-minded volunteers to build digital products, programs and services with community partners and local government to address issues in our LA region and to share these effective processes, practices, and code with the larger civic tech community.

-

+

Hack for LA is a project of Code for America and is its official Los Angeles chapter.

- join us banner icon + join us banner icon
diff --git a/pages/program-areas.html b/pages/program-areas.html index 36d06ce94e..fae2d02d7a 100644 --- a/pages/program-areas.html +++ b/pages/program-areas.html @@ -3,18 +3,18 @@ title: Program Areas permalink: /program-areas --- -
-
-

Program Areas

-

+ +

+
+

Program Areas

+

Hack for LA’s nonprofit civic tech projects support a wide variety of important social causes, from environmental justice to voter representation, in Los Angeles and far beyond.

-
- {% include svg/program-areas-hero.svg %} -
-
+ +
+
{% assign sorted_program_areas = site.data.internal.program-areas | sort %} {% for program_areas in sorted_program_areas %} diff --git a/pages/project-meetings.html b/pages/project-meetings.html index 528d47949b..f68f001c01 100644 --- a/pages/project-meetings.html +++ b/pages/project-meetings.html @@ -4,16 +4,19 @@ permalink: /project-meetings --- -
-
-

Project Team Meetings

-

Please review the listing of project team meeting times to find a project that fits your schedule. + + +

+
+

Project Team Meetings

+

Please review the listing of project team meeting times to find a project that fits your schedule. You are welcome to attend a project team meeting after you have completed Onboarding. Details about a team's meeting can be obtained in each team's slack channel.

- project meetings banner image + project meetings banner image
+

All meetings are currently online due to COVID19.

diff --git a/pages/sitemap.html b/pages/sitemap.html index 3e0e2e378b..12d5fc1605 100644 --- a/pages/sitemap.html +++ b/pages/sitemap.html @@ -4,17 +4,16 @@ permalink: /sitemap/ --- - -
-
-

Site Map

-

+

+
+

Site Map

+

The Hack for LA website is growing. We started with a one page website and we have been steadily adding content and features to accomodate our fully remote brigade.

- image of a person using a computer and mapping out a website
diff --git a/pages/toolkit.html b/pages/toolkit.html index 64ea890525..baffd04e55 100644 --- a/pages/toolkit.html +++ b/pages/toolkit.html @@ -3,16 +3,15 @@ title: Toolkit permalink: /toolkit/ --- -
-
-

Our Toolkit

-

Toolkit implies that there is one set of tools that is perfect for the job you are tackling! + +

+
+

Our Toolkit

+

Toolkit implies that there is one set of tools that is perfect for the job you are tackling! What you will find here are tools we have found to be effective. Think of this as the most awesome collective tool shed! Here you can find, share, and suggest tools that are of use to the open source civic tech software community.

-
- {% include svg/toolkit-hero.svg %} -
+
From 3b89e4efaf621773a7494fb2dd78dde41025fbed Mon Sep 17 00:00:00 2001 From: Sarah <40401149+arghmatey@users.noreply.github.com> Date: Thu, 22 Jul 2021 16:50:49 -0700 Subject: [PATCH 4/8] remove left over comment --- _sass/elements/_containers.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/elements/_containers.scss b/_sass/elements/_containers.scss index 78ae0d4db8..270f4ca805 100644 --- a/_sass/elements/_containers.scss +++ b/_sass/elements/_containers.scss @@ -1,6 +1,6 @@ .header-container { background: #fff; - padding: 64px; // many different top margins. 80, 40, 36, etc? + padding: 64px; height: fit-content; margin: 61px auto 0; text-align: center; From 171abc035bf8d4e37c376c00aab5c55d89e96409 Mon Sep 17 00:00:00 2001 From: Sarah <40401149+arghmatey@users.noreply.github.com> Date: Thu, 22 Jul 2021 18:24:58 -0700 Subject: [PATCH 5/8] add about page link styling --- _sass/elements/_containers.scss | 56 ++++++++++++--------------------- 1 file changed, 20 insertions(+), 36 deletions(-) diff --git a/_sass/elements/_containers.scss b/_sass/elements/_containers.scss index 270f4ca805..5b9a7d1373 100644 --- a/_sass/elements/_containers.scss +++ b/_sass/elements/_containers.scss @@ -11,32 +11,16 @@ align-items: center; flex-direction: column; margin-right: 5rem; - } - - .header-title { - margin-bottom: 38px; - } - - .header-p { - font-size: 1.125rem; - max-width: 508px; - text-align: left; - a { - text-decoration: none; - font-weight: 700; - - &:link, - &:visited { - color: $color-black; - } - - &:hover, - &:active, - &:focus { - color: $color-red; - } - } + h1 { + margin-bottom: 38px; + } + + p { + font-size: 1.125rem; + max-width: 508px; + text-align: left; + } } .header-hero-image { @@ -50,10 +34,10 @@ .header-text { margin-right: 0; - } - .header-p { - margin-bottom: 16px; + p { + margin-bottom: 16px; + } } .header-hero-image { @@ -68,15 +52,15 @@ .header-text { margin-right: 0; - } - .header-title { - margin-bottom: 28px; - } - - .header-p { - max-width: 300px; - line-height: 1.5rem; + h1 { + margin-bottom: 28px; + } + + p { + max-width: 300px; + line-height: 1.5rem; + } } .header-hero-image { From 129683e7fb1fc80c79a42e95d2c032acf91ed94f Mon Sep 17 00:00:00 2001 From: Sarah <40401149+arghmatey@users.noreply.github.com> Date: Thu, 22 Jul 2021 18:25:54 -0700 Subject: [PATCH 6/8] add about page link styling --- _sass/components/_about.scss | 16 ++++++++++++++++ pages/about/about.html | 8 ++++---- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/_sass/components/_about.scss b/_sass/components/_about.scss index 1491067764..5ac185e79b 100644 --- a/_sass/components/_about.scss +++ b/_sass/components/_about.scss @@ -1,5 +1,21 @@ /* This page is built using a mobile first method. Plain tags apply to mobile. Breakpoints below for larger sizes. */ +.header-link--about { + text-decoration: none; + font-weight: 700; + + &:link, + &:visited { + color: $color-black; + } + + &:hover, + &:active, + &:focus { + color: $color-red; + } +} + .donation-gif-box-shadow { box-shadow: 0px 8px 16px rgba(0,0,0,0.12); } diff --git a/pages/about/about.html b/pages/about/about.html index bd3e8a3fe8..c1b4caa07e 100644 --- a/pages/about/about.html +++ b/pages/about/about.html @@ -6,12 +6,12 @@
-

About Us

-

We bring together civic-minded volunteers to build digital products, +

About Us

+

We bring together civic-minded volunteers to build digital products, programs and services with community partners and local government to address issues in our LA region.

-

- Hack for LA is a project of Code for America and its official Los Angeles chapter. +

+ Hack for LA is a project of Code for America and its official Los Angeles chapter.

From 93c27302c47897657845d56389ba272b80562df2 Mon Sep 17 00:00:00 2001 From: Sarah <40401149+arghmatey@users.noreply.github.com> Date: Thu, 22 Jul 2021 18:26:42 -0700 Subject: [PATCH 7/8] final header class names --- pages/communities-of-practice.html | 6 +++--- pages/credits.html | 4 ++-- pages/join-us.html | 6 +++--- pages/program-areas.html | 4 ++-- pages/project-meetings.html | 10 +++++----- pages/sitemap.html | 4 ++-- pages/toolkit.html | 4 ++-- 7 files changed, 19 insertions(+), 19 deletions(-) diff --git a/pages/communities-of-practice.html b/pages/communities-of-practice.html index 9cec299641..d47a966045 100644 --- a/pages/communities-of-practice.html +++ b/pages/communities-of-practice.html @@ -6,11 +6,11 @@
-

Communities of Practice

-

+

Communities of Practice

+

Communities of Practice started at Hack for LA in 2020, post-Covid. These communities have been a vital connection point in our fully remote organization. They have enabled us to connect people across projects in ways that are both meaningful for the individuals, and have helped the organization build professional infrastructure to support our community, nonprofit and government project partnerships. These communities have also enabled Hack for LA to provide rapid response to the evolving crises of 2020.

-

+

If you'd like to join one of the Communities of Practice that has a regular meeting time, join their Slack channel and look for the meeting details, usually pinned or in the description. Otherwise, see the "How to get started" sections below.

diff --git a/pages/credits.html b/pages/credits.html index 9407db6071..f7a2fc1f59 100644 --- a/pages/credits.html +++ b/pages/credits.html @@ -6,8 +6,8 @@
-

Credits

-

Thank you to all of the artists who have made our page look great. +

Credits

+

Thank you to all of the artists who have made our page look great. Check out all of the iconography and imagery we have used on our site.

diff --git a/pages/join-us.html b/pages/join-us.html index 3417a0c01e..334e64d229 100644 --- a/pages/join-us.html +++ b/pages/join-us.html @@ -9,14 +9,14 @@
-

Join Us

-

+

Join Us

+

We bring together civic-minded volunteers to build digital products, programs and services with community partners and local government to address issues in our LA region and to share these effective processes, practices, and code with the larger civic tech community.

-

+

Hack for LA is a project of Code for America and is its official Los Angeles chapter.

diff --git a/pages/program-areas.html b/pages/program-areas.html index fae2d02d7a..4bf2082182 100644 --- a/pages/program-areas.html +++ b/pages/program-areas.html @@ -6,8 +6,8 @@
-

Program Areas

-

+

Program Areas

+

Hack for LA’s nonprofit civic tech projects support a wide variety of important social causes, from environmental justice to voter representation, in Los Angeles and far beyond.

diff --git a/pages/project-meetings.html b/pages/project-meetings.html index f68f001c01..b032154c18 100644 --- a/pages/project-meetings.html +++ b/pages/project-meetings.html @@ -6,11 +6,11 @@ -
-
-

Project Team Meetings

-

Please review the listing of project team meeting times to find a project that fits your schedule. - You are welcome to attend a project team meeting after you have completed Onboarding. +

+
+

Project Team Meetings

+

Please review the listing of project team meeting times to find a project that fits your schedule. + You are welcome to attend a project team meeting after you have completed Onboarding. Details about a team's meeting can be obtained in each team's slack channel.

diff --git a/pages/sitemap.html b/pages/sitemap.html index 12d5fc1605..788b650a74 100644 --- a/pages/sitemap.html +++ b/pages/sitemap.html @@ -6,8 +6,8 @@
-

Site Map

-

+

Site Map

+

The Hack for LA website is growing. We started with a one page website and we have been steadily adding content and features to accomodate our fully remote brigade. diff --git a/pages/toolkit.html b/pages/toolkit.html index baffd04e55..62d0abaf0b 100644 --- a/pages/toolkit.html +++ b/pages/toolkit.html @@ -6,8 +6,8 @@

-

Our Toolkit

-

Toolkit implies that there is one set of tools that is perfect for the job you are tackling! +

Our Toolkit

+

Toolkit implies that there is one set of tools that is perfect for the job you are tackling! What you will find here are tools we have found to be effective. Think of this as the most awesome collective tool shed! Here you can find, share, and suggest tools that are of use to the open source civic tech software community.

From 623ea5b216e19f7ad8f589d8ddba83df026d4ad5 Mon Sep 17 00:00:00 2001 From: Sarah <40401149+arghmatey@users.noreply.github.com> Date: Tue, 3 Aug 2021 19:31:28 -0700 Subject: [PATCH 8/8] resolve header spacing issues --- _sass/elements/_containers.scss | 6 ++++++ pages/about/about.html | 2 +- pages/communities-of-practice.html | 2 +- pages/join-us.html | 2 +- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/_sass/elements/_containers.scss b/_sass/elements/_containers.scss index 5b9a7d1373..58860635b7 100644 --- a/_sass/elements/_containers.scss +++ b/_sass/elements/_containers.scss @@ -8,6 +8,7 @@ .header-text { display: flex; + justify-content: center; align-items: center; flex-direction: column; margin-right: 5rem; @@ -20,6 +21,11 @@ font-size: 1.125rem; max-width: 508px; text-align: left; + margin-bottom: 0 + } + + .sub-p { + margin-top: 1rem; } } diff --git a/pages/about/about.html b/pages/about/about.html index c1b4caa07e..6910c220db 100644 --- a/pages/about/about.html +++ b/pages/about/about.html @@ -10,7 +10,7 @@

About Us

We bring together civic-minded volunteers to build digital products, programs and services with community partners and local government to address issues in our LA region.

-

+

Hack for LA is a project of Code for America and its official Los Angeles chapter.

diff --git a/pages/communities-of-practice.html b/pages/communities-of-practice.html index d47a966045..04e806a574 100644 --- a/pages/communities-of-practice.html +++ b/pages/communities-of-practice.html @@ -10,7 +10,7 @@

Communities of Practice

Communities of Practice started at Hack for LA in 2020, post-Covid. These communities have been a vital connection point in our fully remote organization. They have enabled us to connect people across projects in ways that are both meaningful for the individuals, and have helped the organization build professional infrastructure to support our community, nonprofit and government project partnerships. These communities have also enabled Hack for LA to provide rapid response to the evolving crises of 2020.

-

+

If you'd like to join one of the Communities of Practice that has a regular meeting time, join their Slack channel and look for the meeting details, usually pinned or in the description. Otherwise, see the "How to get started" sections below.

diff --git a/pages/join-us.html b/pages/join-us.html index 334e64d229..825cff79b5 100644 --- a/pages/join-us.html +++ b/pages/join-us.html @@ -16,7 +16,7 @@

Join Us

address issues in our LA region and to share these effective processes, practices, and code with the larger civic tech community.

-

+

Hack for LA is a project of Code for America and is its official Los Angeles chapter.