From a2f5c18da9c8969c4d652269222a46e22082d2eb Mon Sep 17 00:00:00 2001 From: David Rubinstein Date: Wed, 14 Oct 2020 14:29:28 -0700 Subject: [PATCH 01/19] Create new files --- _sass/components/_about-us.scss | 0 _sass/main.scss | 1 + about-us.html | 307 ++++++++++++++++++++++++++++++++ 3 files changed, 308 insertions(+) create mode 100644 _sass/components/_about-us.scss create mode 100644 about-us.html diff --git a/_sass/components/_about-us.scss b/_sass/components/_about-us.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/_sass/main.scss b/_sass/main.scss index d62959efd9..ced18a9869 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -32,6 +32,7 @@ // /** // * Components // */ +@import 'components/about-us'; @import 'components/about'; @import 'components/calendar'; @import 'components/contact-us'; diff --git a/about-us.html b/about-us.html new file mode 100644 index 0000000000..1d2c6482b3 --- /dev/null +++ b/about-us.html @@ -0,0 +1,307 @@ +--- +layout: default +title: Getting Started +--- +
+

Getting Started

+

Hack for LA brings together civic-minded volunteers who build digital products, + programs and services with community partners and local government to address issues in the LA region. +

+
+
+ Step 1 +

Onboard

+ + +
+
+ Step 2 +

Choose a Project

+ + +
+
+ Step 3 +

Join a Project

+ + +
+
+ Step 4 +

Adopt Our Standards

+ +
+
+
+ + +
+ + +
+
+

STEP 1: Onboard

+ +
+

Complete Self Onboarding, or attend a Guided Onboarding session via Zoom.

+
+
+
+

Self Onboarding

+ +

Watch our Onboarding Video + where + you will hear a brief introduction to Code for + America and Hack for LA, meet members of our active projects, + and hear about the intended impact and roles these projects seek to fill.

+
+
+

Guided Onboarding

+ +

Attend a Hack for LA Remote Onboarding session via Zoom. Our next + one can be found on + our Meetup page. +

+
+
+
+
+
+

Next Actions

+ + +
    +
  1. Read the Hack for LA + Code of + Conduct
    2. +
  2. Complete our Remote + Onboarding Survey
    3. +
  3. Self-invite to the Hack + for LA Slack +
    4. + +
+ +
+
+
+
+ + + + +
+
+

STEP 2: Choose a Project

+
+
+
    +
    + +
  1. Review the Projects Section + and choose a + project. If still in doubt, attend one of our onboarding sections
    2. + +
    +
    + +
  2. Check the Team Meeting + Overview to + see + if the team you are interested in meets at a time that fits into your schedule
    3. +
    +
    + +
  3. Click to the project’s home page. Locate and review the project-specific + getting started + guide. +
    4. + +
    +
    + +
  4. Locate and join the project’s Slack channel. Post your interest to join the + team in the + channel. +
    5. + +
    +
+
+
+ + + +
+
+

STEP 3: Join a Project

+
+

Once you have chosen a team you will need to do the following.

+
+ +
    +
    + +
  1. Slack the project lead your Gmail address so we can add you to the shared + Google drive.
    2. +
    +
    + +
  2. If you do not already have one, sign up for a GitHub + Account +
    3. + +
    +
    + +
  3. Fill out the Team Roster after you receive access to the Google drive. +
    4. + +
    +
    + +
  4. Slack the Admin a link + to the Team + Roster to be added to the GitHub + repository. +
    5. + +
    +
+
+
+ + + +
+
+

STEP 4: Adopt our Standards

+ +
+
+ +
    +
    + +
  1. Set up two-factor + authentication + while waiting for the GitHub Admin to send you the invite
    2. + +
    +
    + +
  2. After you have accepted the email invitation to our GitHub organization/repo, + mark your Hack + for + LA membership + Public. +
    3. + +
    +
    + +
  3. Read the ADA + Compliance Guide. + All web and mobile app projects at Hack for LA are inclusive by design. +
    4. + +
    +
+ +
+
+ + +
+
+

Frequently Asked Questions

+
+
+ + +

How do I raise my hand on Zoom?

+ +
+

To raise your hand in Zoom: (1) Click the Participants button found in the control panel at the + bottom of the Zoom window (2) Click “Raise Hand” found at the bottom of the chat window that + appears.

+
+ + +
+ +
+ +

How many hours are you expected to + commit to Hack for LA each + week?

+
+

At least 3 hours per week. Most often, this means you commit to recurring weekly meetings, plus a + minimum of 2 hours. Since meetings are primarily reserved for coordination of tasks and feedback, + you will + need to allocate additional time in order to work on something to contribute. + Your contribution will, of course, depend on your skillset. For example, one Hack for LA volunteer + looks for typos on team project material, does not attend meetings, and always reviews the issues + when + tagged. If you are about to enter a very busy period in your work or personal life, please consider + joining + at a later date when your schedule allows. We always welcome new volunteers, but in return, expect + that + members return the time spent onboarding them through their efforts. +

+ +
+

Can you tell me more about how + communication in Hack for LA + works?

+
+

We work in Slack, GitHub, and Google Drive. Some teams may use additional tools, so check with the + project you are interested in to confirm. +

+ +
+

When do project teams meet?

+
+

Project teams will meet as scheduled on the Project + Team Meetings page. For more detailed meeting information, please visit the project’s Slack + channel. + Additionally, all team’s are welcome to attend the virtual happy hours scheduled each week the + Westside, + Downtown, and South LA Meetups. The day and time of these socials are posted by the Hack Night + Co-Hosts + in the Slack General channel. + +

+ +
+ +
+
+
+ + + + From 626329f1906e9b2494a6aa192503d18b29ac285c Mon Sep 17 00:00:00 2001 From: David Rubinstein Date: Wed, 14 Oct 2020 15:37:18 -0700 Subject: [PATCH 02/19] Add files and directories --- .../_about-us/_about-us-header.svg | 114 ++++++++++++++++++ _sass/components/_about-us.scss | 9 ++ about-us.html | 55 ++------- 3 files changed, 132 insertions(+), 46 deletions(-) create mode 100644 _includes/_page-resources/_about-us/_about-us-header.svg diff --git a/_includes/_page-resources/_about-us/_about-us-header.svg b/_includes/_page-resources/_about-us/_about-us-header.svg new file mode 100644 index 0000000000..0571a6dc70 --- /dev/null +++ b/_includes/_page-resources/_about-us/_about-us-header.svg @@ -0,0 +1,114 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_sass/components/_about-us.scss b/_sass/components/_about-us.scss index e69de29bb2..0f8f597968 100644 --- a/_sass/components/_about-us.scss +++ b/_sass/components/_about-us.scss @@ -0,0 +1,9 @@ +// header-text is on _credit-items.scss +.header-text--about-us { + font-size: 20px; + //display: flex; + //max-width: 895px; + text-align: left; + padding: 30px; + margin: 12px auto; +} \ No newline at end of file diff --git a/about-us.html b/about-us.html index 1d2c6482b3..e259eda617 100644 --- a/about-us.html +++ b/about-us.html @@ -1,36 +1,18 @@ --- layout: default -title: Getting Started +title: About Us ---
-

Getting Started

-

Hack for LA brings together civic-minded volunteers who build digital products, - programs and services with community partners and local government to address issues in the LA region. +

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.

-
-
- Step 1 -

Onboard

- - -
-
- Step 2 -

Choose a Project

- - -
-
- Step 3 -

Join a Project

- -
-
- Step 4 -

Adopt Our Standards

- -
+
+ {% include _includes/_page-resources/_about-us/_about-us-header.svg %}
@@ -286,22 +268,3 @@

Frequently Asked Questions

- - - From 7c90116a2f7d29a2b4ab234900c6c65ef86cd9b7 Mon Sep 17 00:00:00 2001 From: David Rubinstein Date: Wed, 14 Oct 2020 15:43:38 -0700 Subject: [PATCH 03/19] Add more files and directories --- .../about-us/about-us-header.svg} | 0 about-us.html | 5 +---- 2 files changed, 1 insertion(+), 4 deletions(-) rename _includes/{_page-resources/_about-us/_about-us-header.svg => page-resources/about-us/about-us-header.svg} (100%) diff --git a/_includes/_page-resources/_about-us/_about-us-header.svg b/_includes/page-resources/about-us/about-us-header.svg similarity index 100% rename from _includes/_page-resources/_about-us/_about-us-header.svg rename to _includes/page-resources/about-us/about-us-header.svg diff --git a/about-us.html b/about-us.html index e259eda617..2ef8b162c5 100644 --- a/about-us.html +++ b/about-us.html @@ -11,12 +11,9 @@

About Us

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

-
- {% include _includes/_page-resources/_about-us/_about-us-header.svg %} -
+
{% include ../_includes/_page-resources/_about-us/_about-us-header.svg %}
-
From 91a5caa75cd21468f33f70a0f6bf580c675883bf Mon Sep 17 00:00:00 2001 From: David Rubinstein Date: Wed, 14 Oct 2020 21:28:42 -0700 Subject: [PATCH 04/19] Phase one complete --- _sass/components/_about-us.scss | 59 +++- about-us.html | 480 ++++++++++++++++---------------- 2 files changed, 296 insertions(+), 243 deletions(-) diff --git a/_sass/components/_about-us.scss b/_sass/components/_about-us.scss index 0f8f597968..f3fcea77fa 100644 --- a/_sass/components/_about-us.scss +++ b/_sass/components/_about-us.scss @@ -1,9 +1,56 @@ -// header-text is on _credit-items.scss +.header-container--about-us { + display: flex; + justify-content: center; +} + +.header-container h1 { + margin-bottom: 20px; +} + .header-text--about-us { font-size: 20px; - //display: flex; - //max-width: 895px; + max-width: 600px; text-align: left; - padding: 30px; - margin: 12px auto; -} \ No newline at end of file + + a { + text-decoration: none; + font-weight: 700; + + &:link, + &:visited { + color: $color-black; + } + + &:hover, + &:active, + &:focus { + color: $color-red; + } + } +} + +.page-content-container--about-us { + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + //Make universal + .page-card { + background: #fff; + border: 0 solid rgba(51, 51, 51, 0.06); + border-radius: 16px; + box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); + overflow: hidden; + max-width: 896px; + margin-bottom: 0; + padding: 30px; + height: fit-content; + margin: 12px auto; + } + + .page-card--ed { + border-radius: 0; + } \ No newline at end of file diff --git a/about-us.html b/about-us.html index 2ef8b162c5..dc7ed15056 100644 --- a/about-us.html +++ b/about-us.html @@ -2,266 +2,272 @@ layout: default title: About Us --- -
-

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. -

- -
{% include ../_includes/_page-resources/_about-us/_about-us-header.svg %}
+
+
+

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. +

+
+
{% include page-resources/about-us/about-us-header.svg %}
-
- - -
-
-

STEP 1: Onboard

- -
-

Complete Self Onboarding, or attend a Guided Onboarding session via Zoom.

-
-
-
-

Self Onboarding

- -

Watch our Onboarding Video - where - you will hear a brief introduction to Code for - America and Hack for LA, meet members of our active projects, - and hear about the intended impact and roles these projects seek to fill.

-
-
-

Guided Onboarding

- -

Attend a Hack for LA Remote Onboarding session via Zoom. Our next - one can be found on - our Meetup page. -

-
-
-
-
-
-

Next Actions

- - -
    -
  1. Read the Hack for LA - Code of - Conduct
    2. -
  2. Complete our Remote - Onboarding Survey
    3. -
  3. Self-invite to the Hack - for LA Slack -
    4. - -
- -
-
+
+ + +
+
+

Letter from the Executive Director

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. + Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. + Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, + leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. + Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. + Nam mollis erat ante, ac tincidunt sem molestie quis. +

+

+ Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. + Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, + consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, + non tempor mi suscipit ac. +

+

+ Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium + vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi + finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia + nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. + Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. +

- - - -
-
-

STEP 2: Choose a Project

+ +
+
+

Hack for LA Platform

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. + Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. + Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, + leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. + Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. + Nam mollis erat ante, ac tincidunt sem molestie quis. +

+

+ Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. + Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, + consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, + non tempor mi suscipit ac. +

+

+ Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium + vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi + finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia + nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. + Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. +

-
-
    -
    - -
  1. Review the Projects Section - and choose a - project. If still in doubt, attend one of our onboarding sections
    2. - -
    -
    - -
  2. Check the Team Meeting - Overview to - see - if the team you are interested in meets at a time that fits into your schedule
    3. -
    -
    - -
  3. Click to the project’s home page. Locate and review the project-specific - getting started - guide. -
    4. - -
    -
    - -
  4. Locate and join the project’s Slack channel. Post your interest to join the - team in the - channel. -
    5. +
    -
- + +
+
+

Sustainable Development Goals

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. + Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. + Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, + leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. + Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. + Nam mollis erat ante, ac tincidunt sem molestie quis. +

+

+ Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. + Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, + consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, + non tempor mi suscipit ac. +

+

+ Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium + vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi + finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia + nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. + Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. +

- - -
-
-

STEP 3: Join a Project

+ +
+
+

Accomplishments

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. + Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. + Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, + leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. + Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. + Nam mollis erat ante, ac tincidunt sem molestie quis. +

+

+ Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. + Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, + consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, + non tempor mi suscipit ac. +

+

+ Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium + vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi + finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia + nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. + Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. +

-

Once you have chosen a team you will need to do the following.

-
- -
    -
    - -
  1. Slack the project lead your Gmail address so we can add you to the shared - Google drive.
    2. -
    -
    - -
  2. If you do not already have one, sign up for a GitHub - Account -
    3. - -
    -
    - -
  3. Fill out the Team Roster after you receive access to the Google drive. -
    4. - -
    -
    - -
  4. Slack the Admin a link - to the Team - Roster to be added to the GitHub - repository. -
    5. +
    -
- + +
+
+

Metrics

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. + Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. + Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, + leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. + Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. + Nam mollis erat ante, ac tincidunt sem molestie quis. +

+

+ Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. + Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, + consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, + non tempor mi suscipit ac. +

+

+ Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium + vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi + finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia + nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. + Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. +

- - -
-
-

STEP 4: Adopt our Standards

- + +
+
+

Partners

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. + Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. + Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, + leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. + Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. + Nam mollis erat ante, ac tincidunt sem molestie quis. +

+

+ Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. + Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, + consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, + non tempor mi suscipit ac. +

+

+ Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium + vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi + finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia + nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. + Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. +

-
- -
    -
    - -
  1. Set up two-factor - authentication - while waiting for the GitHub Admin to send you the invite
    2. - -
    -
    - -
  2. After you have accepted the email invitation to our GitHub organization/repo, - mark your Hack - for - LA membership - Public. -
    3. - -
    -
    - -
  3. Read the ADA - Compliance Guide. - All web and mobile app projects at Hack for LA are inclusive by design. -
    4. - -
    -
+
+ +
+
+

Make a Donation

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. + Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. + Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, + leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. + Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. + Nam mollis erat ante, ac tincidunt sem molestie quis. +

+

+ Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. + Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, + consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, + non tempor mi suscipit ac. +

+

+ Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium + vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi + finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia + nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. + Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. +

- -
-
-

Frequently Asked Questions

+ +
+
+

Sponsors

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. + Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. + Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, + leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. + Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. + Nam mollis erat ante, ac tincidunt sem molestie quis. +

+

+ Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. + Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, + consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, + non tempor mi suscipit ac. +

+

+ Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium + vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi + finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia + nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. + Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. +

-
- - -

How do I raise my hand on Zoom?

- -
-

To raise your hand in Zoom: (1) Click the Participants button found in the control panel at the - bottom of the Zoom window (2) Click “Raise Hand” found at the bottom of the chat window that - appears.

-
- - -
- -
- -

How many hours are you expected to - commit to Hack for LA each - week?

-
-

At least 3 hours per week. Most often, this means you commit to recurring weekly meetings, plus a - minimum of 2 hours. Since meetings are primarily reserved for coordination of tasks and feedback, - you will - need to allocate additional time in order to work on something to contribute. - Your contribution will, of course, depend on your skillset. For example, one Hack for LA volunteer - looks for typos on team project material, does not attend meetings, and always reviews the issues - when - tagged. If you are about to enter a very busy period in your work or personal life, please consider - joining - at a later date when your schedule allows. We always welcome new volunteers, but in return, expect - that - members return the time spent onboarding them through their efforts. -

- -
-

Can you tell me more about how - communication in Hack for LA - works?

-
-

We work in Slack, GitHub, and Google Drive. Some teams may use additional tools, so check with the - project you are interested in to confirm. -

- -
-

When do project teams meet?

-
-

Project teams will meet as scheduled on the Project - Team Meetings page. For more detailed meeting information, please visit the project’s Slack - channel. - Additionally, all team’s are welcome to attend the virtual happy hours scheduled each week the - Westside, - Downtown, and South LA Meetups. The day and time of these socials are posted by the Hack Night - Co-Hosts - in the Slack General channel. - -

- -
+
+ +
+
+

Hack for LA in the News

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. + Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. + Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, + leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. + Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. + Nam mollis erat ante, ac tincidunt sem molestie quis. +

+

+ Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. + Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, + consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, + non tempor mi suscipit ac. +

+

+ Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium + vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi + finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia + nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. + Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. +

+
From 67483aa5cb4db7c7d43ec28b637575f9cecc4449 Mon Sep 17 00:00:00 2001 From: David Rubinstein Date: Thu, 15 Oct 2020 21:39:29 -0700 Subject: [PATCH 05/19] 10-15 modifications --- _sass/components/_about-us.scss | 29 ++++- about-us.html | 209 +++++++++++++++++--------------- 2 files changed, 136 insertions(+), 102 deletions(-) diff --git a/_sass/components/_about-us.scss b/_sass/components/_about-us.scss index f3fcea77fa..d92f19af44 100644 --- a/_sass/components/_about-us.scss +++ b/_sass/components/_about-us.scss @@ -32,9 +32,9 @@ .page-content-container--about-us { min-height: 100vh; display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + flex-direction: row-reverse; + justify-content: flex-end; + align-items: flex-start; } //Make universal @@ -44,7 +44,7 @@ border-radius: 16px; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); overflow: hidden; - max-width: 896px; + max-width: 850px; margin-bottom: 0; padding: 30px; height: fit-content; @@ -53,4 +53,25 @@ .page-card--ed { border-radius: 0; + } + .sticky-nav { + background: #fff; + border: 0 solid rgba(51, 51, 51, 0.06); + border-radius: 16px; + box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); + overflow: hidden; + max-width: 250px; + padding: 30px; + height: fit-content; + margin-left: 75px; + } + + .sticky-nav ul { + list-style-type: none; + margin: 0; + padding: 0; + } + + .not-sticky-nav { + margin-left: 100px; } \ No newline at end of file diff --git a/about-us.html b/about-us.html index dc7ed15056..a191c5b4e3 100644 --- a/about-us.html +++ b/about-us.html @@ -16,216 +16,229 @@

About Us

- - -
-
-

Letter from the Executive Director

-

+

+
+ +
+
+

Letter from the Executive Director

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. Nam mollis erat ante, ac tincidunt sem molestie quis. -

-

+

+

Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, non tempor mi suscipit ac. -

-

+

+

Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. -

+

+
-
- -
-
-

Hack for LA Platform

-

+ +

+
+

Hack for LA Platform

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. Nam mollis erat ante, ac tincidunt sem molestie quis. -

-

+

+

Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, non tempor mi suscipit ac. -

-

+

+

Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. -

+

+
-
- -
-
-

Sustainable Development Goals

-

+ +

+
+

Sustainable Development Goals

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. Nam mollis erat ante, ac tincidunt sem molestie quis. -

-

+

+

Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, non tempor mi suscipit ac. -

-

+

+

Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. -

+

+
-
- -
-
-

Accomplishments

-

+ +

+
+

Accomplishments

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. Nam mollis erat ante, ac tincidunt sem molestie quis. -

-

+

+

Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, non tempor mi suscipit ac. -

-

+

+

Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. -

+

+
-
- -
-
-

Metrics

-

+ +

+
+

Metrics

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. Nam mollis erat ante, ac tincidunt sem molestie quis. -

-

+

+

Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, non tempor mi suscipit ac. -

-

+

+

Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. -

+

+
-
- -
-
-

Partners

-

+ +

+
+

Partners

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. Nam mollis erat ante, ac tincidunt sem molestie quis. -

-

+

+

Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, non tempor mi suscipit ac. -

-

+

+

Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. -

+

+
-
- -
-
-

Make a Donation

-

+ +

+
+

Make a Donation

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. Nam mollis erat ante, ac tincidunt sem molestie quis. -

-

+

+

Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, non tempor mi suscipit ac. -

-

+

+

Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. -

+

+
-
- -
-
-

Sponsors

-

+ +

+
+

Sponsors

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. Nam mollis erat ante, ac tincidunt sem molestie quis. -

-

+

+

Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, @@ -237,37 +250,37 @@

About Us

finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. -

+

+
-
- -
-
-

Hack for LA in the News

-

+ +

+
+

Hack for LA in the News

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. Nam mollis erat ante, ac tincidunt sem molestie quis. -

-

+

+

Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, non tempor mi suscipit ac. -

-

+

+

Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. -

+

+
-
From cdd07f5bd6245a0f936269b5201f17fb809ea4bc Mon Sep 17 00:00:00 2001 From: David Rubinstein Date: Wed, 21 Oct 2020 10:09:49 -0700 Subject: [PATCH 06/19] This is a test commit --- _sass/components/_about-us.scss | 31 +++++++++++- about-us.html | 82 +++++++++++++++--------------- sticky-test.html | 88 +++++++++++++++++++++++++++++++++ 3 files changed, 159 insertions(+), 42 deletions(-) create mode 100644 sticky-test.html diff --git a/_sass/components/_about-us.scss b/_sass/components/_about-us.scss index d92f19af44..23ad8668c7 100644 --- a/_sass/components/_about-us.scss +++ b/_sass/components/_about-us.scss @@ -35,6 +35,7 @@ flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; + border: 2px solid red; } //Make universal @@ -54,9 +55,23 @@ .page-card--ed { border-radius: 0; } + + .sticky-element { + position: -webkit-sticky; + position: sticky; + top: -1px; + border: 3px solid black; + background-color: yellow; + } + + .sticky-container { + display: flex; + flex-direction: row-reverse; + } + .sticky-nav { background: #fff; - border: 0 solid rgba(51, 51, 51, 0.06); + border: 0px solid rgba(51, 51, 51, 0.06); border-radius: 16px; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); overflow: hidden; @@ -72,6 +87,20 @@ padding: 0; } + .sticky-nav ul li { + margin-bottom: 10px; + } + + /* + /* Only stick if you can fit +@media (min-height: 300px) { + nav ul { + position: sticky; + top: 0; + } +} +*/ + .not-sticky-nav { margin-left: 100px; } \ No newline at end of file diff --git a/about-us.html b/about-us.html index a191c5b4e3..a325b00c5f 100644 --- a/about-us.html +++ b/about-us.html @@ -16,22 +16,22 @@

About Us

- -
- -
+ +
+ +

Letter from the Executive Director

@@ -56,10 +56,10 @@

About Us

Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero.

-
+
- -
+ +

Hack for LA Platform

@@ -84,10 +84,10 @@

About Us

Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero.

-
+
- -
+ +

Sustainable Development Goals

@@ -112,10 +112,10 @@

About Us

Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero.

-
+
- -
+ +

Accomplishments

@@ -140,10 +140,10 @@

About Us

Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero.

-
+
- -
+ +

Metrics

@@ -168,10 +168,10 @@

About Us

Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero.

-
+
- -
+ +

Partners

@@ -196,10 +196,10 @@

About Us

Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero.

-
+
- -
+ +

Make a Donation

@@ -224,10 +224,10 @@

About Us

Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero.

-
+
- -
+ +

Sponsors

@@ -252,10 +252,10 @@

About Us

Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero.

-
+
- -
+ +

Hack for LA in the News

@@ -280,7 +280,7 @@

About Us

Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero.

+
-
diff --git a/sticky-test.html b/sticky-test.html new file mode 100644 index 0000000000..f9fd4f5f3f --- /dev/null +++ b/sticky-test.html @@ -0,0 +1,88 @@ + + +
+
+ This bit should be sticky +
+
+

Letter from the Executive Director

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. + Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. + Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, + leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. + Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. + Nam mollis erat ante, ac tincidunt sem molestie quis. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. + Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. + Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, + leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. + Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. + Nam mollis erat ante, ac tincidunt sem molestie quis. +

+

+ Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. + Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, + consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, + non tempor mi suscipit ac. +

+

+ Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium + vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi + finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia + nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. + Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. +

+

Sustainable Development Goals

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. + Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. + Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, + leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. + Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. + Nam mollis erat ante, ac tincidunt sem molestie quis. +

+

+ Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. + Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, + consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, + non tempor mi suscipit ac. +

+

+ Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium + vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi + finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia + nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. + Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. +

+

Sustainable Development Goals

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum nisi congue posuere imperdiet. + Mauris ac libero nec tortor eleifend pulvinar in eget est. Phasellus eget feugiat nisl, euismod sodales lacus. + Duis at hendrerit orci. Mauris a varius lorem. Sed a nibh nibh. Vestibulum maximus, magna at vulputate feugiat, + leo nisi dictum neque, sit amet ullamcorper mauris lectus ac augue. Curabitur tincidunt cursus diam eget pharetra. + Aliquam non leo ut urna vehicula commodo. Suspendisse ultrices elit et dui accumsan, et vestibulum sapien egestas. + Nam mollis erat ante, ac tincidunt sem molestie quis. +

+

+ Pellentesque elementum tellus eu convallis gravida. Duis fermentum felis elementum odio semper, sit amet dictum tortor iaculis. + Maecenas eu pretium lectus. Phasellus tempor risus vitae sem sodales mattis. Integer ex leo, ultrices sit amet vulputate a, + consectetur id lacus. Proin pharetra tortor quam. Aenean egestas ligula sit amet pharetra maximus. Nunc ultrices est mauris, + non tempor mi suscipit ac. +

+

+ Aliquam erat volutpat. Aenean enim orci, venenatis vehicula dolor nec, dictum auctor erat. Nulla ac odio quis mauris porta pretium + vel ut turpis. Morbi cursus et lorem nec suscipit. Suspendisse potenti. Etiam nec libero sed lacus pharetra lacinia. Sed ac nisi + finibus, pellentesque ante non, ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia + nostra, per inceptos himenaeos. Vivamus eu risus et eros congue pulvinar vitae et lorem. Vestibulum et lorem orci. + Etiam et justo et quam imperdiet congue. Maecenas sit amet faucibus libero. Maecenas a quam ut purus cursus imperdiet iaculis quis libero. +

+
+
\ No newline at end of file From 3a8c850cc7a262171c18963f3acc1e0e03a10a6c Mon Sep 17 00:00:00 2001 From: David Rubinstein Date: Wed, 21 Oct 2020 15:49:11 -0700 Subject: [PATCH 07/19] Add about-us.js.html --- .../page-resources/about-us/about-us.js.html | 12 +++++++++++ _sass/components/_about-us.scss | 21 ++++++------------- about-us.html | 6 ++++-- 3 files changed, 22 insertions(+), 17 deletions(-) create mode 100644 _includes/page-resources/about-us/about-us.js.html diff --git a/_includes/page-resources/about-us/about-us.js.html b/_includes/page-resources/about-us/about-us.js.html new file mode 100644 index 0000000000..73ac9cc878 --- /dev/null +++ b/_includes/page-resources/about-us/about-us.js.html @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/_sass/components/_about-us.scss b/_sass/components/_about-us.scss index 23ad8668c7..372e017c5a 100644 --- a/_sass/components/_about-us.scss +++ b/_sass/components/_about-us.scss @@ -35,7 +35,6 @@ flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; - border: 2px solid red; } //Make universal @@ -56,19 +55,13 @@ border-radius: 0; } - .sticky-element { + /* + div#nav-container > nav { position: -webkit-sticky; position: sticky; - top: -1px; - border: 3px solid black; - background-color: yellow; + top: 0px; } - - .sticky-container { - display: flex; - flex-direction: row-reverse; - } - + */ .sticky-nav { background: #fff; border: 0px solid rgba(51, 51, 51, 0.06); @@ -91,15 +84,13 @@ margin-bottom: 10px; } - /* - /* Only stick if you can fit -@media (min-height: 300px) { + /* Only stick if you can fit */ + @media (min-height: 300px) { nav ul { position: sticky; top: 0; } } -*/ .not-sticky-nav { margin-left: 100px; diff --git a/about-us.html b/about-us.html index a325b00c5f..f2eaf90f64 100644 --- a/about-us.html +++ b/about-us.html @@ -2,6 +2,8 @@ layout: default title: About Us --- +< +{% include page-resources/about-us/about-us.js.html %}

About Us

@@ -16,8 +18,8 @@

About Us

-