diff --git a/_sass/components/_about.scss b/_sass/components/_about.scss index 1119e3e8db..5ac185e79b 100644 --- a/_sass/components/_about.scss +++ b/_sass/components/_about.scss @@ -1,45 +1,25 @@ /* 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-link--about { + text-decoration: none; + font-weight: 700; -.header-container--about-us h1 { - font-weight: 900; - margin-bottom: 30px; + &: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); } -.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 +579,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 +596,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 7156c9a860..9fd5c6e0e6 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 ff2a854188..f06b7ba408 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 4a9cb9f19c..f74ff5b40f 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 { @@ -274,16 +214,11 @@ @media #{$bp-below-mobile} { .toolkit-header { - padding-bottom: 3rem; &__banner-item { font-size: .5rem; max-width: 3.6rem; } - - &__p { - font-size: 1rem; - } } } @@ -327,4 +262,4 @@ .external-resources-text { text-align: center; } -} \ No newline at end of file +} diff --git a/_sass/elements/_containers.scss b/_sass/elements/_containers.scss index a2f5b3d7ae..58860635b7 100644 --- a/_sass/elements/_containers.scss +++ b/_sass/elements/_containers.scss @@ -1,20 +1,80 @@ .header-container { background: #fff; - padding: 40px; + padding: 64px; 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; + justify-content: center; + align-items: center; + flex-direction: column; + margin-right: 5rem; + + h1 { + margin-bottom: 38px; + } + + p { + font-size: 1.125rem; + max-width: 508px; + text-align: left; + margin-bottom: 0 + } + + .sub-p { + margin-top: 1rem; + } + } + + .header-hero-image { + height: 240px; + width: auto; + align-self: center; + } + + @media #{$bp-below-desktop} { + flex-flow: column; + + .header-text { + margin-right: 0; + + 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; + + h1 { + margin-bottom: 28px; + } + + 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 diff --git a/pages/about/about.html b/pages/about/about.html index 7acff8d043..6910c220db 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. +

+ 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..04e806a574 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..f7a2fc1f59 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..825cff79b5 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 7362bdf35b..5d3c1c656b 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..b032154c18 100644 --- a/pages/project-meetings.html +++ b/pages/project-meetings.html @@ -4,16 +4,19 @@ permalink: /project-meetings --- -
-
-

Project Team Meetings

+ + +
+
+

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. + 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 e8b7e9af0e..ad01b638ec 100644 --- a/pages/sitemap.html +++ b/pages/sitemap.html @@ -4,9 +4,8 @@ permalink: /sitemap/ --- - -
-
+
+

Site Map

The Hack for LA website is growing. We started with a one page @@ -14,7 +13,7 @@

Site Map

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 dffb6913ea..9cfee66686 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 %} -
+