diff --git a/_data/internal/communities/data-science.yml b/_data/internal/communities/data-science.yml index 553e96f827..2927a67e72 100644 --- a/_data/internal/communities/data-science.yml +++ b/_data/internal/communities/data-science.yml @@ -9,6 +9,8 @@ location: image: /assets/images/communities-of-practice/data.jpg alt: 'A person uses a laptop to review a data dashboard' +icon: /assets/images/hero/communities-icons/data-science.png + meeting-times: Thursdays 8:00-9:00 pm PT leadership-type: Mentor Led diff --git a/_data/internal/communities/engineering.yml b/_data/internal/communities/engineering.yml index 2393a1bcc1..4aab8df07d 100644 --- a/_data/internal/communities/engineering.yml +++ b/_data/internal/communities/engineering.yml @@ -9,6 +9,8 @@ location: image: /assets/images/communities-of-practice/engineering.jpg alt: 'A computer screen shows a diagram used to manage code development' +icon: /assets/images/hero/communities-icons/engineering.png + meeting-times: Wednesdays 6:00-7:00 pm PT leadership-type: Mentor Led diff --git a/_data/internal/communities/ops.yml b/_data/internal/communities/operations.yml similarity index 89% rename from _data/internal/communities/ops.yml rename to _data/internal/communities/operations.yml index 2e0cf0fd7f..216d61c8b0 100644 --- a/_data/internal/communities/ops.yml +++ b/_data/internal/communities/operations.yml @@ -1,5 +1,5 @@ --- -name: Ops +name: Operations description: This group covers all areas of dev-ops and has been the spot for coordination on infrastructure improvements such as AWS hosting, password vaults, multi-tenant product architecture, etc. visible: true status: Active @@ -9,6 +9,8 @@ location: image: /assets/images/communities-of-practice/ops.jpg alt: 'A dramatic closeup of a screen filled with code' +icon: /assets/images/hero/communities-icons/operations.png + meeting-times: Tuesdays 8:00-9:00 pm PT leadership-type: Community Led diff --git a/_data/internal/communities/project-management.yml b/_data/internal/communities/product-management.yml similarity index 91% rename from _data/internal/communities/project-management.yml rename to _data/internal/communities/product-management.yml index 3c20e97494..50dde020d1 100644 --- a/_data/internal/communities/project-management.yml +++ b/_data/internal/communities/product-management.yml @@ -1,5 +1,5 @@ --- -name: Project/Product Management +name: Product Management description: PMs from different projects come together in this group to share effective practices, give and get mentorship, set product management standards, and create guides and templates for new projects. visible: true status: Active @@ -9,6 +9,8 @@ location: image: /assets/images/communities-of-practice/product.jpg alt: 'Several people around a small table listen intently as one person speaks.' +icon: /assets/images/hero/communities-icons/product-management.png + meeting-times: Tuesdays 6:00-7:00 pm PT leadership-type: Mentor Led diff --git a/_data/internal/communities/ui-ux.yml b/_data/internal/communities/ui-ux.yml index 6a1052dd86..80ab8af903 100644 --- a/_data/internal/communities/ui-ux.yml +++ b/_data/internal/communities/ui-ux.yml @@ -9,6 +9,8 @@ location: image: /assets/images/communities-of-practice/uiux.jpg alt: 'A board full of Post-it notes is used as a communication tool' +icon: /assets/images/hero/communities-icons/ui-ux.png + meeting-times: Mondays 6:00-7:00 PM PT leadership-type: Peer Led diff --git a/_data/internal/credits/data-science.yml b/_data/internal/credits/data-science.yml new file mode 100644 index 0000000000..386023bac6 --- /dev/null +++ b/_data/internal/credits/data-science.yml @@ -0,0 +1,12 @@ +--- +title: Data Science +title-link: https://thenounproject.com/mb.icons/collection/artificial-intelligence-solid/?i=1705416 +content: icon +used-in: Home +artist: Med Marki +provider: Noun Project +provider-link: https://thenounproject.com/ +image-url: /assets/images/hero/communities-icons/data-science.png +alt: 'Data Science Icon' +type: icon +--- \ No newline at end of file diff --git a/_data/internal/credits/engineering.yml b/_data/internal/credits/engineering.yml new file mode 100644 index 0000000000..cc69890b33 --- /dev/null +++ b/_data/internal/credits/engineering.yml @@ -0,0 +1,12 @@ +--- +title: Engineering +title-link: https://thenounproject.com/ralfschmitzer/collection/gui-basics/?i=486344 +content: icon +used-in: Home +artist: Ralf Schmizter +provider: Noun Project +provider-link: https://thenounproject.com/ +image-url: /assets/images/hero/communities-icons/engineering.png +alt: 'Engineering Icon' +type: icon +--- \ No newline at end of file diff --git a/_data/internal/credits/marketing.yml b/_data/internal/credits/marketing.yml new file mode 100644 index 0000000000..d64fdb9498 --- /dev/null +++ b/_data/internal/credits/marketing.yml @@ -0,0 +1,12 @@ +--- +title: Marketing +title-link: https://thenounproject.com/iconpai19/collection/business-finance/?i=3154527 +content: icon +used-in: Home +artist: IconPai +provider: Noun Project +provider-link: https://thenounproject.com/ +image-url: /assets/images/hero/communities-icons/marketing.png +alt: 'Marketing Icon' +type: icon +--- \ No newline at end of file diff --git a/_data/internal/credits/operations.yml b/_data/internal/credits/operations.yml new file mode 100644 index 0000000000..05c18e0dd1 --- /dev/null +++ b/_data/internal/credits/operations.yml @@ -0,0 +1,12 @@ +--- +title: Operations +title-link: https://thenounproject.com/made.somewhere/collection/work/?i=1819014 +content: icon +used-in: Home +artist: Made by Made +provider: Noun Project +provider-link: https://thenounproject.com/ +image-url: /assets/images/hero/communities-icons/operations.png +alt: 'Operations Icon' +type: icon +--- \ No newline at end of file diff --git a/_data/internal/credits/product-management.yml b/_data/internal/credits/product-management.yml new file mode 100644 index 0000000000..1c2aa3e9f2 --- /dev/null +++ b/_data/internal/credits/product-management.yml @@ -0,0 +1,12 @@ +--- +title: Product Management +title-link: https://thenounproject.com/kerismaker/collection/product-management-line/?i=3656728 +content: icon +used-in: Home +artist: Tezar Tantular +provider: Noun Project +provider-link: https://thenounproject.com/ +image-url: /assets/images/hero/communities-icons/product-management.png +alt: 'Product Management Icon' +type: icon +--- \ No newline at end of file diff --git a/_data/internal/credits/revenue.yml b/_data/internal/credits/revenue.yml new file mode 100644 index 0000000000..78d166c7d1 --- /dev/null +++ b/_data/internal/credits/revenue.yml @@ -0,0 +1,12 @@ +--- +title: Revenue +title-link: https://thenounproject.com/madadesign/collection/finance-and-currency/?i=3669009 +content: icon +used-in: Home +artist: Mada Creative +provider: Noun Project +provider-link: https://thenounproject.com/ +image-url: /assets/images/hero/communities-icons/fundraising.png +alt: 'Revenue Icon' +type: icon +--- \ No newline at end of file diff --git a/_data/internal/credits/ui-ux.yml b/_data/internal/credits/ui-ux.yml new file mode 100644 index 0000000000..778b25a5e0 --- /dev/null +++ b/_data/internal/credits/ui-ux.yml @@ -0,0 +1,12 @@ +--- +title: UI/UX +title-link: https://thenounproject.com/eucalyp/collection/digital-transformation-line/?i=3160558 +content: icon +used-in: Home +artist: Eucalyp +provider: Noun Project +provider-link: https://thenounproject.com/ +image-url: /assets/images/hero/communities-icons/ui-ux.png +alt: 'UI/UX Icon' +type: icon +--- \ No newline at end of file diff --git a/_data/internal/program-areas/environment-card.yml b/_data/internal/program-areas/environment-card.yml index 5b692e8ef7..6b9a9c7248 100644 --- a/_data/internal/program-areas/environment-card.yml +++ b/_data/internal/program-areas/environment-card.yml @@ -6,7 +6,7 @@ description: > these projects support Hack for LA’s advocacy of environmentalism and susainability. -image: /assets/images/program-areas/envirnoment.png +image: /assets/images/program-areas/environment.png image_alt: Greenland with tornado @@ -37,4 +37,4 @@ projects: image: /assets/images/projects/metro-ontime.png image_alt: LA Metro Rail logo link: https://www.hackforla.org/projects/metro-ontime ---- +--- \ No newline at end of file diff --git a/_data/navigation/main.yml b/_data/navigation/main.yml index e7dae575c3..5ef5b9406f 100644 --- a/_data/navigation/main.yml +++ b/_data/navigation/main.yml @@ -4,8 +4,9 @@ - name: Projects link: /projects -- name: Press - link: /#press +# Link below to remain inactive until About page is completed and live +# - name: About Us +# link: /about - name: Join Us link: /join diff --git a/_includes/elements/wins-card-overlay.html b/_includes/elements/wins-card-overlay.html new file mode 100644 index 0000000000..d795cfa89e --- /dev/null +++ b/_includes/elements/wins-card-overlay.html @@ -0,0 +1,29 @@ +
+ +
\ No newline at end of file diff --git a/_includes/elements/wins-card.html b/_includes/elements/wins-card.html new file mode 100755 index 0000000000..a612fa85ff --- /dev/null +++ b/_includes/elements/wins-card.html @@ -0,0 +1,115 @@ +
+
+ +
+
+ + + + + +
+
+
+
+
+
+ +
+
+

+
+ ...see more +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_includes/forms/contact-us.html b/_includes/forms/contact-us.html index a32df5014d..963e4c3086 100644 --- a/_includes/forms/contact-us.html +++ b/_includes/forms/contact-us.html @@ -1,39 +1,13 @@ - -
- +
-
-

Volunteer with us

-
-
-

We are looking for volunteers of all different skill types, levels, and civic interests.

-
-
-
-

Please help us understand your transportation preferences by completing a short survey.

- -
-
-

+

Get in touch

+

The more you tell us about yourself, the better we can match you with the right resources.

+
+

I represent a government agency

-
-

Get in touch with us

-

The more you tell us about yourself, the better we can match you with the right resources.


+

I represent a non-profit organization

-
-
-
I am a government agency.
-

- -
-
-
I am a non-profit organization.
-

- -
-
-
I am none of the above.
-

+

I'm someone else

+
\ No newline at end of file diff --git a/_includes/hero.html b/_includes/hero.html deleted file mode 100644 index 84c7615666..0000000000 --- a/_includes/hero.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
-

You can change LA for the better!

-

Can you design, write, or code? You can help Los Angeles - live up to its full potential at Hack for LA.

-

All of our meetings are remote. Everyone is welcome!

- {% comment %} {% include forms/hero-signup.html %} {% endcomment %} -
-
diff --git a/_includes/home-getting-started.html b/_includes/home-getting-started.html deleted file mode 100644 index b13d93e4dc..0000000000 --- a/_includes/home-getting-started.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
\ No newline at end of file diff --git a/_includes/home-page/hero.html b/_includes/home-page/hero.html new file mode 100644 index 0000000000..d00eff61e4 --- /dev/null +++ b/_includes/home-page/hero.html @@ -0,0 +1,17 @@ +
+ +
+

At Hack for LA, we’re using technology to build a more equitable future.

+ +
+ +
+

We embrace new approaches and provide opportunities for growth without gatekeeping.

+

Through our non-profit, open-source civic tech projects we support communities, transform government through educational and software development partnerships, and are evolving a new workforce development development model to fill the gaps between education and employment. + + + + +

+ +
\ No newline at end of file diff --git a/_includes/home-page/home-communities.html b/_includes/home-page/home-communities.html new file mode 100644 index 0000000000..15b4afb684 --- /dev/null +++ b/_includes/home-page/home-communities.html @@ -0,0 +1,36 @@ +
+ +
+

Find your people with our Communities of Practice

+

Connect with people in your field of practice across projects, join talks by career professionals, and help the organization build professional infrastructure to support our community.

+
+ +
+ {% assign sorted_communities = site.data.internal.communities | sort %} +
    + {% for community in sorted_communities %} + {% if community[1].visible == true %} +
  • + +

    {{ community[1].name }}

    +     +
    • + {% endif %} + {% endfor %} +
+ +
    + {% for community in sorted_communities %} + {% if community[1].visible == true %} +
  • + + + +
    • + {% endif %} + {% endfor %} +
+ +
+ +
\ No newline at end of file diff --git a/_includes/home-page/home-join-us.html b/_includes/home-page/home-join-us.html new file mode 100644 index 0000000000..58f39c7a31 --- /dev/null +++ b/_includes/home-page/home-join-us.html @@ -0,0 +1,20 @@ +
+ +
+

Ready to join us?

+
+ +
+

+ Are you a developer, designer, writer, researcher, product manager, or in dev-ops, marketing, or non-profit development? + Join the Hack for LA community and make an impact! +

+ +

All of our teams and meetings are remote. Everyone regardless of age, experience, or skill level is welcome!

+
+ +
+ +
+ +
\ No newline at end of file diff --git a/_includes/home-page/home-program-areas.html b/_includes/home-page/home-program-areas.html new file mode 100644 index 0000000000..6eedc7c5a1 --- /dev/null +++ b/_includes/home-page/home-program-areas.html @@ -0,0 +1,21 @@ +
+ +
+

Explore our projects by Program Area

+
+ + + +
\ No newline at end of file diff --git a/_includes/home-page/home-technologies.html b/_includes/home-page/home-technologies.html new file mode 100644 index 0000000000..27857af693 --- /dev/null +++ b/_includes/home-page/home-technologies.html @@ -0,0 +1,27 @@ +
+ +

Explore our projects by Technology

+ +
+
    +
  • +

    30+

    +

    Projects

    +
    • +
    +
  • + +

    39

    +

    Technologies

    +
    • +
    +
  • +
    + +
    +

    Potential to hone your skills

    +
    • +
+
+ +
\ No newline at end of file diff --git a/_includes/home-page/home-wins.html b/_includes/home-page/home-wins.html new file mode 100644 index 0000000000..e298aa63b8 --- /dev/null +++ b/_includes/home-page/home-wins.html @@ -0,0 +1,10 @@ +
+ {% include elements/wins-card-overlay.html %} + +
+

Celebrating our volunteers’ wins

+

Our volunteers work on diverse interdisciplinary teams on impactful projects, overcome imposter syndrome, build their networks, find jobs, get promotions, change fields, get and receive coaching, build civic tech infrastruture that creates a better future for all, and have fun doing it.

+
+ + {% include elements/wins-card.html %} +
\ No newline at end of file diff --git a/_sass/components/_header-nav.scss b/_sass/components/_header-nav.scss index 7daa40b923..56172f0456 100644 --- a/_sass/components/_header-nav.scss +++ b/_sass/components/_header-nav.scss @@ -92,12 +92,14 @@ body { // This styles the hamburger nav and menus on mobile @media #{$bp-below-tablet} { #burgerImage { + background-color: $color-white; display: block; height: 25px; width: 25px; border: none; padding-right: 41px; padding-top: 5px; + margin: 5px 0; } #burgerImageX { diff --git a/_sass/components/_home.scss b/_sass/components/_home.scss index 961dfa60b2..7a43a87389 100644 --- a/_sass/components/_home.scss +++ b/_sass/components/_home.scss @@ -1,472 +1,566 @@ -.contact-form { - border-bottom: 2px solid rgba($color-teal, 0.25); - padding-bottom: 32px; - - textarea { - min-height: 200px; - } - - .form-controls { +// This page is styled mobile first. +.home { + &--section { + padding: 32px 16px; + @media #{$bp-tablet-up} { - display: flex; - - .form-input { - flex-grow: 1; - } - - .btn { - margin: 0 0 24px 12px; - } - } - } -} - -.logo-garden { - li { - margin-bottom: 12px; - display: flex; - justify-content: center; - - @media #{$bp-mobile-up} { - margin-right: 24px; - - &:last-child { - margin-right: 0; - } + padding: 74px 32px; } - } - - .unstyled-list { - @media #{$bp-mobile-up} { - display: flex; - justify-content: space-between; + + &:nth-child(even) { + background-color: $color-whitesmoke; } } +} - .logo { - img { - display: block; - height: 50px; - margin: 10px 80px; +.desktop-up-only { + display: none; - @media #{$bp-mobile-up} { - height: 70px; - margin: 10px; - } - } + @media #{$bp-desktop-up} { + display: revert; } } - - -//hero************************************************************************************************** +// HERO SECTION .hero { - background: $color-darkblue url($absolute_url + "/assets/images/hero/hacknight-women.jpg") center - center no-repeat; - background-size: cover; + background-color: $color-darkblue; +} + +.hero--header { + background: linear-gradient(to bottom, rgba(3,13,45,0) 0%, rgba(53, 61, 87, 0.13) 20%, rgba(11, 21, 52, 0.9037) 55%,#030d2d 100%),url($absolute_url + "/assets/images/hero/hacknight-women.jpg"); + background-size: 140%; + background-repeat: no-repeat; + background-position: center top; display: flex; flex-direction: column; - height: 80vh; justify-content: flex-end; - max-height: 700px; - min-height: 100vh; - padding: 20px; - position: relative; + align-items: center; + color: #fff; + height: 374px; + padding: 36px; + margin-top: 50px; + + h1 { + line-height: 1.35em; + max-width: 900px; + } @media #{$bp-tablet-up} { - min-height: 0; - } - - &::after { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: linear-gradient( - to bottom, - rgba($color-darkblue, 0.3) 0%, - rgba($color-darkblue, 1) 100% - ); - content: ""; - display: block; - z-index: 1; + background: linear-gradient(to bottom, rgba($color-darkblue, 0) 0%, rgba($color-darkblue, 1) 100%), url($absolute_url + "/assets/images/hero/hacknight-women.jpg") center no-repeat; + background-size: cover; + display: flex; + height: 80vh; + max-height: 680px; + margin: 61px auto 0; - @media #{$bp-tablet-up} { - background: linear-gradient( - to bottom, - rgba($color-darkblue, 0) 30%, - rgba($color-darkblue, 1) 100% - ); - opacity: 1; + a { + display: none; + } + } + + @media #{$bp-desktop-up} { + padding: { + left: 176px; + right: 176px; } } } -.hero-inner { - color: $color-white; - margin: 60px auto 0px; - max-width: $max-content-width; - position: relative; - z-index: 2; +.hero--embrace { + padding: 36px; + background-color: $color-white; - @media #{$bp-tablet-up} { - margin-bottom: 0; - margin-top: 150px; + h2 { + text-align: center; + margin-bottom: 36px; } - h1 { - font-weight: bold; - margin-bottom: .65rem; - } p { - margin-bottom: .65rem; - } - - span { - border-bottom: 3px solid $color-red; - } -} - -.hero-signup { - .form-input { - width: 100%; + margin-bottom: 0; + line-height: 1.375em; } - @media #{$bp-tablet-up} { + @media #{$bp-desktop-up} { display: flex; + justify-content: center; + padding: 100px; - .form-input { - margin-right: 10px; + h2 { + max-width: 611px; + margin-right: 50px; + text-align: left; } - } - .form-confirmation { - margin: 10px 0; + p { + font-size: 20px; + max-width: 439px; + } } } -//***************************************************************************************************** -//calender********************************************************************************************* -.cal-title { - color: $color-red; -} - -.cal-container { - background-color: $color-white; - border-radius: 16px; - padding: 5px; - @media #{$bp-mobile-up} { - padding: 10px; - } +// PROGRAM AREAS SECTION +.home--program-areas { + text-align: center; } -.cal { +.program-areas--cards { + display: flex; + gap: 12px; + max-width: 100%; margin: 0 auto; - max-height: 500px; - overflow-y: auto; - padding: 5px; - width: 100%; - - @media #{$bp-mobile-up} { - padding: 10px; + overflow-x: scroll; + padding-inline-start: 0px; + -ms-overflow-style: none; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; } -} -.cal-item { - background: $color-white; - border-top: 1px solid $color-mediumgrey; - color: $color-black; - margin: 0; - padding: 10px; - &:first-child { - border-top: 0; - } + .program-area-card { + list-style-type: none; + width: 164px; - @media #{$bp-mobile-up} { - padding: 20px; - } + .program-area-img { + height: 160px; + width: 160px; + overflow: hidden; + border-radius: 20px; + background-color: rgb(3, 13, 45); - &--title { - color: $color-red; - font-size: #{map-get($font-size-h4, mobile)}; + img { + opacity: .75; - @media #{$bp-tablet-up} { - font-size: #{map-get($font-size-h3, print)}; + &:hover { + opacity: 1; + } + } } - } - &--description { - margin: 5px 0; - } + a { + text-decoration: none; + color: #333333; + font-size: 16px; + font-weight: 700; - &--details { - font-size: #{map-get($font-size-base, print)}; - font-weight: #{map-get($font-weight, light)}; - font-style: normal; + p { + margin-top: 18px; + } + } } -} -button { - background: $color-white; - border: 2px solid $color-red; - color: $color-red; - cursor: pointer; - font-size: #{map-get($font-size-small, print)}; - margin: 5px 0; + @media #{$bp-tablet-up} { + justify-content: center; + gap: 20px; + flex-wrap: wrap; + overflow-x: initial; + max-width: 1328px; -} -//*************************************************************************************************** + .program-area-card { + width: 254px; -//_projects****************************************************************************** + .program-area-img { + height: 245px; + width: 245px; + } -.projects { - background: $color-pink; - padding: 32px 16px; + a { + font-size: 20px; + } + } + } } -.projects-inner { + +// TECHNOLOGIES SECTION +.home--technologies { display: flex; flex-direction: column; + align-items: center; + text-align: center; - @media #{$bp-mobile-up} { - flex-direction: row; - flex-wrap: wrap; + h2 { + margin-bottom: 32px; } } -.project-list { - margin-bottom: 24px; - order: 2; +.technology-metrics-container { + max-width: 342px; + width: 100%; + border-radius: 20px; + box-shadow: 0 0 8px rgba(51, 51, 51, 0.2); + padding: 0 25px 10px; - @media #{$bp-tablet-up} { - display: grid; - grid-gap: 24px; - grid-template-columns: repeat(2, 1fr); - order: 3; - width: 100%; - } -} + ul { + display: flex; + justify-content: space-between; -.project-card { - background: $color-white; - border: 0 solid rgba($color-black, 0.06); - border-radius: 16px; - box-shadow: 0 0 8px 0 rgba($color-black, 0.2); - margin-bottom: 24px; - overflow: hidden; + .metric { + display: flex; + flex-direction: column; + align-items: center; + + p { + font-size: 16px; + font-weight: 700; + max-width: 269px; + margin-bottom: 0; + } + + .metric-number { + font-size: 28px; + font-weight: 900; + margin: 0; + height: 50px; + display: flex; + align-items: center; + + img { + height: .9em; + transform: scale(0.9); + } + } + } + } + + hr { + display: none; + } @media #{$bp-tablet-up} { - margin-bottom: 0; + max-width: 1070px; + + ul { + .metric { + p { + font-size: 24px; + } + + .metric-number { + font-size: 120px; + height: 150px; + } + } + } } -} -.project-title-no-page { - color: $color-black; -} + @media #{$bp-desktop-up} { + box-shadow: none; -.project-tmb-img { - display: block; - width: 100%; -} + ul { + .metric { + p { + font-size: 28px; + } + + .metric-number { + font-size: 144px; + height: 180px; + } + } + } -.project-body { - padding: 16px; + hr { + display: revert; + margin: 25px 0; + height: 146px; + width: 1px; + border: none; + border-left: 1px solid #706E6E; + } + } } -.project-header { - color: $color-black; - margin-bottom: 16px; - margin-right: auto; - order: 1; -} +// COMMUNITIES OF PRACTICE SECTION +.home--communities { -.project-pitch { - order: 3; + .communities-heading { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + h2 { + text-align: center; + } - @media #{$bp-tablet-up} { - align-self: flex-end; - margin-bottom: 16px; - margin-left: auto; - order: 2; + p { + font-size: 18px; + padding-top: 10px; + } } - @media #{$bp-below-mobile} { - font-size: 0.9em; - } + .communities-links { + margin: 0 auto; + padding: 17px 22px; + border-radius: 20px; + width: fit-content; + max-width: 100%; + overflow-x: scroll; + -ms-overflow-style: none; + scrollbar-width: none; + background: + linear-gradient(270deg, #FA114F 0%, #FE4498 16.43%, #E973D4 30.73%, #C69CFC 46.88%, #A5BCFF 61%, #9AD6FF 74%, #AEEAFF 86%, #D4F9FF 100%); + + &::-webkit-scrollbar { + display: none; + } + + ul { + display: flex; + gap: 60px; + max-width: fit-content; + margin: 0 auto; + padding: 0 10px; + + li { + list-style-type: none; + width: 77px; + min-width: 77px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + + a { + color: #333333; + text-decoration: none; + + p { + height: 50px; + font-size: 20px; + font-weight: 700; + } + } + } + } + + .communities-links--names { + border-radius: 20px 20px 0 0; + } - .btn { - margin: 0 0 0 12px; + .communities-links--icons { + border-radius: 0 0 20px 20px; + } } -} -.project-tmb { - position: relative; -} + @media #{$bp-tablet-up} { + .communities-heading { -.status-indicator { - float: right; - text-align: center; - margin-left: 10px; - background-color: rgb(255, 255, 151); - width: 92px; - padding: 2px 7px; - border-radius: 6px; - box-shadow: 0 0 8px 0 rgba($color-black, 0.1); -} + h2 { + max-width: 450px; + } -.status-text { - margin: 0px 0px; -} + p { + width: 442px; + } + } -.status-Active { - background-color: rgb(187, 255, 187); -} + .communities-links { -.status-Rebooting { - background-color: rgb(164, 213, 255); -} + ul { -.status-Completed { - background-color: rgb(255, 173, 173); -} + li { + width: 143px; + min-width: 143px;} + } + } + } -.project-card-field-inline { - display: inline; -} -//*************************************************************************************************** + @media #{$bp-desktop-up} { + .communities-heading { + flex-direction: row; -//_press*********************************************************************************************** -.press { - padding: 32px 16px; -} + h2 { + margin-right: 60px; + text-align: left; + } -.news-cards { - border-bottom: 2px solid rgba($color-teal, 0.25); - margin: 0; - padding: 0 0 32px; + p { + align-items: center; + } + } - @media #{$bp-mobile-up} { - display: grid; - grid-gap: 24px; - grid-template-columns: repeat(2, 1fr); - order: 3; - width: 100%; - } + .communities-links { + background: none; - @media #{$bp-tablet-up} { - grid-template-columns: repeat(3, 1fr); + ul { + width: fit-content; + } + + .communities-links--icons { + border-radius: 20px; + padding: 20px 10px; + background: linear-gradient(270deg, #FA114F 0%, #FE4498 16.43%, #E973D4 30.73%, #C69CFC 46.88%, #A5BCFF 61%, #9AD6FF 74%, #AEEAFF 86%, #D4F9FF 100%); + justify-content: center; + } + } } } -.news-title { - margin-bottom: 0; +// WINS SECTION +.home--wins { + .wins-heading { + margin-bottom: 29px; + + h2 { + text-align: center; + } + } + + @media #{$bp-desktop-up} { + display: flex; + justify-content: center; + + .wins-heading { + max-width: 346px; + margin-right: 75px; - a { - &:link, - &:visited { - color: $color-black; + h2 { + margin-bottom: 44px; + text-align: left; + } } - &:hover, - &:active, - &:focus { - color: darken($color-red, 10%); + .wins-card { + max-width: 620px; } } } -//*************************************************************************************************** - -//_contact-us************************************************************************************ -.page-card--home { - text-align: center; -} +// JOIN SECTION +.home--join { + display: flex; + gap: 30px; + flex-direction: column; + justify-content: center; + align-items: center; -.btn--home-subscribe { - margin: 0 !important; + @media #{$bp-tablet-up} { + flex-direction: row; + gap: 71px; + } } -.btn--home-survey { - width: 175px; - height: 40px; - font-size: 1rem; - text-align: center; - margin: 0 !important; +.join-heading { border-radius: 20px; -} - -.row { - display: flex; - flex-direction: row; - flex-wrap: wrap; + display: none; justify-content: center; - width: 70%; - margin: 0 auto; align-items: center; - text-align: initial; - margin-left: 20%; + height: 298px; + width: 298px; + background-color: #030D2D; - @media screen and (max-width: 600px) { + h2 { + color: white; + width: 40%; text-align: center; - flex-direction: column; - margin: auto; + margin-bottom: 0; + } + + @media #{$bp-tablet-up} { + display: flex; + height: 30vw; + width: 30vw; + min-height: 310px; + min-width: 310px; + max-height: 475px; + max-width: 475px; } } -.column { - display: flex; - flex-direction: column; - flex-basis: 100%; - flex: 1; -} +.join-text { + width: auto; + max-width: 624px; -.volunteerWithUs { - margin: 0 5%; -} + &--main { + font-weight: 700; + font-size: 24px; + } -.row-1 { - display: flex; - flex-wrap: wrap; - flex-direction: row; - justify-content: center; - width: 83%; - margin-left: 8%; -} + &--sub { + font-size: 16px; + margin-bottom: 0; + } -.volunteerWithUs .row { - width: 90%; -} + &--desktop-only { + display: none; + } -@media only screen and (max-device-width: 550px) { + @media #{$bp-tablet-up} { + &--sub { + font-size: 20px; + } - //For adding spacing between 'Getting Started' and 'Transportation' buttons on mobile devices - .page-card--home-volunteer .btn--home-survey { - margin: 0 0 15px 0 !important; + &--desktop-only { + display: revert; + } } +} - .btn--home-subscribe { - margin: 5px 0 10px 0 !important; +.join-button{ + @media #{$bp-tablet-up} { + display: none; } } -//*************************************************************************************************** -//home-getting-started******************************************************************************** -.home-getting-started-container { - text-align: center; -} +// CONTACT SECTION +.home--contact { + display: flex; + flex-direction: column; + align-items: center; -.btn--home-getting-started { - margin: 0 20px 20px 0; + h2 { + text-align: center; + width: 100%; + max-width: 1090px; + margin-bottom: 27px; + } - @media #{$bp-below-tablet} { - margin: 0 0 20px 0; + &--tablet-up-only { + display: none; } -} -//*************************************************************************************************** + .contact-links { + display: flex; + flex-direction: column; + gap: 40px; + align-items: center; + justify-content: space-between; + width: 832px; + margin-top: 10px; + p { + margin: 0; + + a { + font-weight: 700; + } + } + } + + @media #{$bp-tablet-up} { + h2 { + border-bottom: 1px solid #706E6E; + padding-bottom: 27px; + } + + &--tablet-up-only { + display: revert; + } + } + + @media #{$bp-desktop-up} { + padding-top: 74px; + padding-bottom: 74px; + + .contact-links { + flex-direction: row; + gap: 0; + } + } +} \ No newline at end of file diff --git a/_sass/elements/_buttons.scss b/_sass/elements/_buttons.scss index 2f9dce3da8..0aefdcc284 100644 --- a/_sass/elements/_buttons.scss +++ b/_sass/elements/_buttons.scss @@ -176,6 +176,16 @@ font-size: 1.25rem; }} line-height: 40px; /* Centers the text */ } + +/* Small Button */ + +.btn-sm { + height: 34px; + padding: 0 16px; + border-radius: 20px; + font-size: .875rem; +} + /*---------------------------------------------------- Page-Specific Button Classes diff --git a/assets/images/hero/communities-icons/data-science.png b/assets/images/hero/communities-icons/data-science.png new file mode 100644 index 0000000000..a5efce7a94 Binary files /dev/null and b/assets/images/hero/communities-icons/data-science.png differ diff --git a/assets/images/hero/communities-icons/engineering.png b/assets/images/hero/communities-icons/engineering.png new file mode 100644 index 0000000000..c4edd4542f Binary files /dev/null and b/assets/images/hero/communities-icons/engineering.png differ diff --git a/assets/images/hero/communities-icons/fundraising.png b/assets/images/hero/communities-icons/fundraising.png new file mode 100644 index 0000000000..a75364958b Binary files /dev/null and b/assets/images/hero/communities-icons/fundraising.png differ diff --git a/assets/images/hero/communities-icons/marketing.png b/assets/images/hero/communities-icons/marketing.png new file mode 100644 index 0000000000..dc49a19aaf Binary files /dev/null and b/assets/images/hero/communities-icons/marketing.png differ diff --git a/assets/images/hero/communities-icons/operations.png b/assets/images/hero/communities-icons/operations.png new file mode 100644 index 0000000000..8d97286e6f Binary files /dev/null and b/assets/images/hero/communities-icons/operations.png differ diff --git a/assets/images/hero/communities-icons/product-management.png b/assets/images/hero/communities-icons/product-management.png new file mode 100644 index 0000000000..cc7184bb6b Binary files /dev/null and b/assets/images/hero/communities-icons/product-management.png differ diff --git a/assets/images/hero/communities-icons/ui-ux.png b/assets/images/hero/communities-icons/ui-ux.png new file mode 100644 index 0000000000..b71a63cca8 Binary files /dev/null and b/assets/images/hero/communities-icons/ui-ux.png differ diff --git a/assets/images/hero/infinite.svg b/assets/images/hero/infinite.svg new file mode 100755 index 0000000000..96deb484f8 --- /dev/null +++ b/assets/images/hero/infinite.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/program-areas/citizen-engagement.png b/assets/images/program-areas/citizen-engagement.png old mode 100644 new mode 100755 index 665164314c..5138adc91d Binary files a/assets/images/program-areas/citizen-engagement.png and b/assets/images/program-areas/citizen-engagement.png differ diff --git a/assets/images/program-areas/civic-tech-infrastructure.png b/assets/images/program-areas/civic-tech-infrastructure.png index 1f9f684508..759c9caa0e 100644 Binary files a/assets/images/program-areas/civic-tech-infrastructure.png and b/assets/images/program-areas/civic-tech-infrastructure.png differ diff --git a/assets/images/program-areas/diversity-equity-inclusion.png b/assets/images/program-areas/diversity-equity-inclusion.png old mode 100644 new mode 100755 index f8c267377f..98653e680e Binary files a/assets/images/program-areas/diversity-equity-inclusion.png and b/assets/images/program-areas/diversity-equity-inclusion.png differ diff --git a/assets/images/program-areas/envirnoment.png b/assets/images/program-areas/envirnoment.png deleted file mode 100644 index 7f31ed157d..0000000000 Binary files a/assets/images/program-areas/envirnoment.png and /dev/null differ diff --git a/assets/images/program-areas/environment.png b/assets/images/program-areas/environment.png new file mode 100755 index 0000000000..289df4a0de Binary files /dev/null and b/assets/images/program-areas/environment.png differ diff --git a/assets/images/program-areas/justice.png b/assets/images/program-areas/justice.png old mode 100644 new mode 100755 index cfe267036a..c1c529ff80 Binary files a/assets/images/program-areas/justice.png and b/assets/images/program-areas/justice.png differ diff --git a/assets/images/program-areas/social-safety-net.png b/assets/images/program-areas/social-safety-net.png old mode 100644 new mode 100755 index aa3b11ebb8..f9aedd6bc2 Binary files a/assets/images/program-areas/social-safety-net.png and b/assets/images/program-areas/social-safety-net.png differ diff --git a/assets/images/program-areas/vote-representation.png b/assets/images/program-areas/vote-representation.png old mode 100644 new mode 100755 index c39dfba55c..9863cf4000 Binary files a/assets/images/program-areas/vote-representation.png and b/assets/images/program-areas/vote-representation.png differ diff --git a/assets/images/program-areas/workforce-development.png b/assets/images/program-areas/workforce-development.png old mode 100644 new mode 100755 index ed76c814ed..81d36cfa10 Binary files a/assets/images/program-areas/workforce-development.png and b/assets/images/program-areas/workforce-development.png differ diff --git a/assets/js/home.js b/assets/js/home.js new file mode 100644 index 0000000000..594bfa4b43 --- /dev/null +++ b/assets/js/home.js @@ -0,0 +1,283 @@ +--- + +--- +const time = "Timestamp"; +const email = "Email Address"; +const name = "Full name"; +const linkedin_url = "Linkedin URL (optional)"; +const linkedin_permission = "Could we use your Linkedin profile picture next to your story?"; +const github_url = "Github URL (optional)"; +const github_permission = "Could we use your Github profile picture next to your story?"; +const team = "Select the team(s) you're on"; +const role = "Select your role(s) on the team"; +const specific_role = "What is/was your specific role? (optional)"; +const join_date = "When did you join Hack for LA? (optional)"; +const win = "What do you want to celebrate (select all that apply)?"; +const overview = "Give us a brief overview"; +const display = "Display?"; +const homepage = "Homepage?"; + +const otherIcon = `star.svg`; + +const badgeIcons = { + "I got a new job": `briefcase.svg`, + "I produced something for my portfolio": `file.svg`, + "I improved my LinkedIn": `linkedin.svg`, + "I learned how to work better on a team": `team.svg`, + "I increased the number of commits on my Github profile": `github.svg`, + "I learned a new language": `code.svg`, + "I set up 2FA": `twofa.svg`, + "I became part of a a caring community": `$community.svg`, + "I worked on an enterprise project": `enterprise.svg`, + "I worked on a project that will help the people of Los Angeles": `giving.svg`, + "I worked on two or more projects": `hammers.svg`, + "I taught or mentored a person on my team": `mentor.svg`, + "I taught or mentored a person on another team": `mentor-external.svg`, + "My team delivered software to a stakeholder": `deliverable.svg`, + "My team launched our MVP": `launch.svg`, +}; + +let randomWin; + +function initWinCard() { + {% assign winsData = site.data.external._wins-data %} + + let winsData = JSON.parse(decodeURIComponent("{{ winsData | jsonify | uri_escape }}")); + + let homePageWins = []; + + winsData.forEach(win => { + win[homepage] ? homePageWins.push(win) : null; + }); + + randomWin = homePageWins[Math.floor(Math.random()*homePageWins.length)]; + + makeWinCard(randomWin); +} + +function makeWinCard(data) { + {% assign githubData = site.data.external.github-data %} + // Escapes JSON for injections. See: #2134. If this is no longer the case, perform necessary edits, and remove this comment. + let githubData = JSON.parse(decodeURIComponent("{{ githubData | jsonify | uri_escape }}")); + + const AVATAR_DEFAULT_PATH = "/assets/images/wins-page/avatar-default.svg"; + const GITHUB_ICON = "/assets/images/wins-page/icon-github-small.svg"; + const LINKEDIN_ICON = "/assets/images/wins-page/icon-linkedin-small.svg"; + const homepageWinsCard = document.querySelector(".wins-card--homepage"); + + let githubId; + + // If github link is provided, and permission is given: search through projects contributors to find users github id + if (data[github_url] && data[github_permission] === "Yes") { + githubData.slice(1).map(item => { + item.contributorsComplete.data.map(contributors => { + if (contributors.github_url == data[github_url]) { + githubId = contributors.id; + } + }) + }) + } + + let profileImgSrc = githubId ? `https://avatars1.githubusercontent.com/u/${githubId}?v=4` : AVATAR_DEFAULT_PATH; + + homepageWinsCard.querySelector(".wins-card-profile-img").src = profileImgSrc; + + homepageWinsCard.querySelector(".wins-card-name").textContent = data[name]; + + if (data[linkedin_url].length) { + homepageWinsCard.querySelector(".wins-card-linkedin-icon").href = data[linkedin_url]; + homepageWinsCard.querySelector(".linkedin-icon").src = LINKEDIN_ICON; + } else { + homepageWinsCard.querySelector(".wins-card-linkedin-icon").setAttribute("hidden", "true"); + } + + if (data[github_url].length) { + homepageWinsCard.querySelector(".wins-card-github-icon").href = data[github_url]; + homepageWinsCard.querySelector(".github-icon").src = GITHUB_ICON; + } else { + homepageWinsCard.querySelector(".wins-card-github-icon").setAttribute("hidden", "true"); + } + + homepageWinsCard.querySelector(".project-inner.wins-card-team").innerHTML = `Teams(s): ${data[team]}`; + homepageWinsCard.querySelector(".project-inner.wins-card-role").innerHTML = `Roles(s): ${data[role]}`; + + homepageWinsCard.querySelector(".wins-card-overview").textContent = data[overview]; + + // Load icons and their badges + insertIcons('.wins-icon-container', data[win], 'wins', homepageWinsCard); + + const winTextContainer = homepageWinsCard.querySelector(".wins-card-text"); + + function addSeeMore() { + const winText = homepageWinsCard.querySelector(".wins-card-overview"); + const seeMoreDiv = homepageWinsCard.querySelector(".wins-see-more-div"); + + // Shows or hides "see more" span based of height of overview text + if (!winTextContainer.classList.contains("expanded") && winText.offsetHeight <= winTextContainer.offsetHeight) { + seeMoreDiv.setAttribute("hidden", "true"); + } else { + seeMoreDiv.removeAttribute("hidden"); + }; + + if (!winTextContainer.classList.contains("expanded")) winTextContainer.classList.add("relative"); + if (window.innerWidth > 960) { + if (seeMoreDiv.parentElement.classList.contains("expanded")) mobileSeeMore(seeMoreDiv.children[0]) + } + } + + addSeeMore(); + + new ResizeObserver(addSeeMore).observe(winTextContainer); +} + + +function insertIcons(containerClass, winString, viewType, homepageWinsCard = document) { + // Splits win list into array of wins + let initialWinList = winString.split(',').map(win => win.trim()); + + let winList = []; + const view = viewType; + + // Iterate through user chosen wins an user written wins + // Add custom wins (no icon association) to the end of the array, premade wins (icon association) to the beginning + initialWinList.reverse().forEach(win => { + if (win.length && Object.keys(badgeIcons).indexOf(win) > -1) { + winList.unshift(win); + } else if (win.length > 0 && Object.keys(badgeIcons).indexOf(win) === -1) { + winList.push(win); + } + }); + + const SVG_FILE_PATH = `/assets/images/wins-page/wins-badges/`; + + const iconContainer = homepageWinsCard.querySelector(containerClass); + + winList.forEach(win => { + if (badgeIcons.hasOwnProperty(win)) { + // Inserts html inside the element, after its last child + iconContainer.insertAdjacentHTML('beforeend', + `
+ ${badgeIcons[win]} +
${win}
+
` + ); + } else { + iconContainer.insertAdjacentHTML('beforeend', + `
+ ${badgeIcons[otherIcon]} +
${win}
+
` + ); + }; + }); +} + +function seeMore(id) { + if (window.innerWidth > 960) { + updateOverlay(randomWin); + } else { + mobileSeeMore(id); + } +} + +function mobileSeeMore(id) { + let span = document.getElementById(id); + let parent = span.parentElement.parentElement; + parent.classList.toggle("expanded"); + let winsIconContainer = document.getElementById(`icons-${id}`); + if (parent.classList.contains("expanded")) { + span.innerHTML = 'caret  see less'; + parent.setAttribute("class","project-inner wins-card-text expanded"); + winsIconContainer.setAttribute("class", "wins-tablet wins-icon-container"); + span.parentElement.removeAttribute("hidden"); + } else { + span.innerHTML = "...see more"; + parent.setAttribute("class", "project-inner wins-card-text relative"); + winsIconContainer.setAttribute("class", "wins-icon-container"); + }; +} + +function updateOverlay(data) { + window.addEventListener("keydown", event => { + if (event.key == "Escape") { + hideOverlay(event.key) + }; + }); + + document.addEventListener("click", event => { + if (event.target.matches(".overlay") || event.target.closest(".overlay-close-icon") || event.target.closest(".top-buffer") || event.target.closest(".bottom-buffer")) { + hideOverlay(); + }; + }); + + document.querySelector(".main-header").inert = true; + document.querySelector(".main-footer").inert = true; + document.querySelector(".sr-only-focusable").inert = true; + + window.addEventListener("resize", event => { + let widthOutput = window.innerWidth; + if (widthOutput < 960) { + hideOverlay(event) + }; + }); + + const overlayProfileImg = document.querySelector("#overlay-profile-img"); + overlayProfileImg.src = document.querySelector(".wins-card-profile-img").src; + + const overlayIcons = document.querySelector("#overlay-icons"); + overlayIcons.innerHTML = ""; + + if (data[linkedin_url].length > 0) { + makeIcon(data[linkedin_url], overlayIcons, "linkedin-icon", "/assets/images/wins-page/icon-linkedin-small.svg"); + } if (data[github_url].length > 0) { + makeIcon(data[github_url], overlayIcons, "github-icon", "/assets/images/wins-page/icon-github-small.svg"); + } + + const overlayName = document.querySelector("#overlay-name"); + overlayName.innerHTML = data[name]; + + const overlayTeams = document.querySelector("#overlay-teams"); + overlayTeams.innerHTML = `Team(s): ${data[team]}`; + + const overlayRoles = document.querySelector("#overlay-roles"); + overlayRoles.innerHTML = `Role(s): ${data[role]}`; + + const overlayOverview = document.querySelector("#overlay-overview"); + overlayOverview.innerHTML = data[overview]; + + insertIcons("#overlay-info", data[win], "overlay") + + const overlayProjectCard = document.querySelector("#overlay-project-card"); + overlayProjectCard.parentNode.classList.add("display-initial"); +} + +function makeElement(elementType, parent, className) { + let child = document.createElement(elementType); + child.classList.add(className); + parent.appendChild(child); + return child; +} + +function makeIcon(href, parent, className, src) { + let icon = makeElement("a", parent, "wins-card-icon"); + icon.setAttribute("href", href); + let iconImg = makeElement("img", icon, className); + iconImg.setAttribute("src", src); +} + +function hideOverlay(e) { + e = e || window.event || e.key == "Escape"; + + const overlayProjectCard = document.querySelector("#overlay-project-card"); + overlayProjectCard.parentNode.classList.remove("display-initial"); + + document.querySelector(".main-header").inert = false; + document.querySelector(".main-footer").inert = false; + document.querySelector(".sr-only-focusable").inert = false; + + const overlayInfo = document.querySelector("#overlay-info"); + + overlayInfo.innerHTML = ""; +} + +initWinCard(); \ No newline at end of file diff --git a/pages/communities-of-practice.html b/pages/communities-of-practice.html index 0767d11d79..cc827cf4d5 100644 --- a/pages/communities-of-practice.html +++ b/pages/communities-of-practice.html @@ -26,6 +26,7 @@

Communities of Practice

{% assign sorted_communities = site.data.internal.communities | sort %} {% for community in sorted_communities %} {% if community[1].visible == true %} +
{{ community[1].alt }} diff --git a/pages/index.html b/pages/index.html index 90e354d4d2..80ca215e0a 100644 --- a/pages/index.html +++ b/pages/index.html @@ -11,11 +11,13 @@ {%- include forms/contact-us.html -%} {%- include sponsors.html -%} {% else %} - {%- include hero.html -%} - {%- include home-getting-started.html -%} - {%- include current-projects.html -%} - {%- include press.html -%} - {%- include about.html -%} + {%- include home-page/hero.html -%} + {%- include home-page/home-program-areas.html -%} + {%- include home-page/home-technologies.html -%} + {%- include home-page/home-communities.html -%} + {%- include home-page/home-wins.html -%} + {%- include home-page/home-join-us.html -%} {%- include forms/contact-us.html -%} - {%- include sponsors.html -%} -{% endif %} +{% endif %} + + \ No newline at end of file diff --git a/pages/program-areas.html b/pages/program-areas.html index 6940b6fcf8..3bee3a7a05 100644 --- a/pages/program-areas.html +++ b/pages/program-areas.html @@ -19,6 +19,7 @@

Program Areas

{% assign sorted_program_areas = site.data.internal.program-areas | sort %} {% for program_areas in sorted_program_areas %} {% if program_areas[1].size > 0 %} +
{{ program_areas[1].image_alt }}