diff --git a/_sass/components/_about-us.scss b/_sass/components/_about-us.scss new file mode 100644 index 0000000000..4202cf8792 --- /dev/null +++ b/_sass/components/_about-us.scss @@ -0,0 +1,875 @@ +/* This page is built using a mobile first method. Plain tags apply to mobile. Breakpoints below for larger sizes. */ + +.header-container--about-us { + display: flex; + justify-content: center; + flex-flow: column; + padding: 25px 15px 50px 15px; +} + +.header-container--about-us h1 { + font-weight: 900; + margin-bottom: 30px; +} + +.header-text--about-us { + font-size: 18px; + max-width: 500px; + text-align: left; + + a { + text-decoration: none; + font-weight: 700; + + &:link, + &:visited { + color: $color-black; + } + + &:hover, + &:active, + &:focus { + color: $color-red; + } + } +} + +// CSS Grid +.page-content-container-grid { + display: grid; + grid-template-columns: auto; + grid-template-rows: auto; + grid-template-areas: + "content"; + align-items: start; + margin-top: 20px; + scroll-behavior: smooth; +} + + //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: 22px; + height: fit-content; + margin: 12px; + } + + .grid-2-column { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: repeat(4, 1fr); + column-gap: 10px; + row-gap: 26px; + justify-items: stretch; + align-content: space-between; + } + + // Make the Letter page card have square corners + .page-card--ed { + border-radius: 0; + } + + // Makes the sticky navigation stick + .stick-it { + position: fixed; + top:67px; + z-index: 1; + right: 125px; + } + + // Style the sticky nav links + + .sticky-nav li { + list-style-type: none; + position: relative; + margin-bottom: 15px; + } + + + // Make the active link different + .is-active { + color: #333333; + font-weight: 700; + color: black !important; + text-decoration: none; + a { + text-decoration: none; + font-weight: 700; + + &:link, + &:visited, + &:hover, + &:active, + &:focus { + color: $color-black; + } + } + } + + .is-active::before { + position: absolute; + content: "\25C0"; + font-size: 10px; + margin-left: -35px; + margin-top: 5px; + } + + // This adjustment is so that the page scrolls to the correct place when you hit the nav links + a.anchor { + display: block; + position: relative; + top: -75x; + visibility: hidden; + } + + .last-card { + margin-bottom: 2rem; + } + + .sticky-nav { + grid-area: nav; + display: none; + background: #fff; + 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; + width: 275px; + padding: 35px 40px 15px 26px; + margin-top: 12px; + } + + .sticky-nav-inner-grid { + display: grid; + grid-template-columns: 15px auto; + grid-template-rows: auto; + grid-template-areas: + "content"; + align-items: start; + margin-top: 20px; + scroll-behavior: smooth; + } + + + // The part of the page that is not the sticky nav. Should probably rename + .not-sticky-nav-container { + grid-area: content; + } + + .about-us-section-header { + font-weight: 900; + font-size: 1.25rem; + cursor: pointer; + transition: 0.4s; + display: flex; + justify-content: space-between; + text-align: center; + } + + .about-us-section-header:after { + content: "\221F"; + float: right; + transform: rotate(-45deg); + transition: transform 0.25s ease-in; + color: rgb(250, 17, 79); + font-weight: bolder; + font-size: 24px; + } + + // This is the same as the above, but the js that opens and closes the mobile sections + // keys on this tag, and until I fix that this is the MacGyver + .about-us-section-header--ED { + font-weight: 900; + font-size: 1.25rem; + transition: 0.4s; + display: flex; + justify-content: flex-start; + text-align: center; + padding-bottom: inherit; + } + + #letterBR { + padding-left: 30px; + } + + .more-less { + display: none; + } + + .about-us-section-content { + display: none; + } + + .sec-head-img-ed { + padding: 0 25 0 0; + } + + .led-closed { + margin-top: 25px; + } + + .read-more { + color: $color-red; + text-align: right; + margin-right: 30px; + } + .read-more::after { + content: "\221F"; + position: absolute; + margin-left: 10px; + transform: rotate(-45deg); + color: rgb(250, 17, 79); + font-weight: bolder; + font-size: 16px; + } + + .read-less { + color: $color-red; + text-align: right; + margin-right: 30px; + } + .read-less::after { + content: "\221F"; + position: absolute; + margin-left: 10px; + transform: rotate(135deg); + color: rgb(250, 17, 79); + font-weight: bolder; + font-size: 16px; + } + + .au_active::after { + content: "\221F"; + transform: rotate(135deg); + transition: transform 0.25s ease-in; + } + + .sub-card-head { + font-size: 1.2rem; + font-weight: 600; + padding: 15px 0 10px 0; + display: flex; + align-items: center; + } + + .sub-head-image { + padding-right: 10px; + } + + .sub-head-text { + padding-bottom: 5px; + } + + .sub-card-content { + padding-left: 5px; + padding-left: 23px; + margin-left: 8px; + } + + .flex-container { + display: flex; + flex-direction: column; + } + + .flex-container--wins { + margin-top: 40px; + } + + .flex-container-row { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + flex-wrap: wrap; + } + + .flex-container-row--partners { + justify-content: space-evenly; + margin-top: 25px; + } + + + // Colors + + .color-dodgerblue { + color: $color-dodgerblue; + } + + .border-dodgerblue { + border-left-style: solid; + border-left-width: 5px; + border-left-color: $color-dodgerblue; + } + .color-lightseagreen { + color: $color-lightseagreen; + } + + .border-lightseagreen { + border-left-style: solid; + border-left-width: 5px; + border-left-color: $color-lightseagreen; + } + + .color-orange { + color: $color-orange; + } + + .border-orange { + border-left-style: solid; + border-left-width: 5px; + border-left-color: $color-orange; + } + + .color-chocolate { + color: $color-chocolate; + } + + .border-chocolate { + border-left-style: solid; + border-left-width: 5px; + border-left-color: $color-chocolate; + } + + .color-firebrick { + color: $color-firebrick; + } + + .border-firebrick { + border-left-style: solid; + border-left-width: 5px; + border-left-color: $color-firebrick; + } + + .color-deeppink { + color: $color-deeppink; + } + + .border-deeppink { + border-left-style: solid; + border-left-width: 5px; + border-left-color: $color-deeppink; + } + + .color-mediumvioletred { + color: $color-mediumvioletred; + } + + .border-mediumvioletred { + border-left-style: solid; + border-left-width: 5px; + border-left-color: $color-mediumvioletred; + } + + .color-darkorchid { + color: $color-darkorchid; + } + + .border-darkorchid { + border-left-style: solid; + border-left-width: 5px; + border-left-color: $color-darkorchid; + } + + .color-blueviolet { + color: $color-blueviolet; + } + + .border-blueviolet { + border-left-style: solid; + border-left-width: 5px; + border-left-color: $color-blueviolet; + } + + // SDG Colors + .color-goldenrod-2 { + color: #d49f28; + font-weight: 700; + } + + .color-orangered { + color: #ee412a; + font-weight: 700; + } + + .color-brown { + color: #8e1737; + font-weight: 700; + } + + .color-goldenrod-11 { + color: #fa9c25; + font-weight: 700; + } + + .color-darkolivegreen { + color: #48763e; + font-weight: 700; + } + + .color-teal { + color: #01548a; + font-weight: 700; + } + + .color-midnightblue { + color: #173567; + font-weight: 700; + } + + + .bold-quote { + font-weight: 700; + font-style: italic; + text-align: center; + } + + .sdg-images { + display: flex; + flex-flow: row wrap; + justify-content: space-around; + align-content: space-between; + } + + .small-text { + font-size: 8pt; + } + + .grid-center { + place-self: center; + } + + .sdg-groups { + margin-bottom: 20px; + } + /* Clear floats after the columns */ + .sdg-groups:after { + content: ""; + display: table; + clear: both; + } + + .sdg-column { + float: left; + } + + .sdg-left { + width: 15%; + } + .sdg-right { + width: 85%; + } + + .text-bold { + font-weight: 700; + } + + .text-bold--sdg { + margin: 10px 0 20px 0; + } + + .top-paragraph { + padding-top: 25px; + } + + .sdg-title-mobile { + display: inline; + } + + .sdg-title-full { + display: none; + } + + .plain-text { + color: $color-black; + } + + .accomplishment-title { + color: $color-red; + text-decoration: underline; + margin: 25px 0 10px 0; + font-weight: 500; + } + + .accomplishment-wins { + color: $color-red; + text-decoration: none; + margin: 25px 0 10px 0; + align-items: flex-start; + display: flex; + justify-content: center; + font-size: 24px; + } + + .accomplishment-wins img { + padding-right: 20px; + } + + .accomplishment-highlights { + margin: 30px 0 0 0; + } + + .text-normal { + font-size: 16px; + font-weight: 400; + font-style: normal; + color: $color-black; + } + + .eliptical { + color: #959393; + text-align: right; + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .wins-cup { + padding-right: 25px; + } + + .wins-card-mobile { + display: block; + } + .wins-card-desktop { + display: none; + } + + .coming-soon { + margin-top: 18px; + } + + .garcetti-mobile { + display: block; + } + + .garcetti-large { + display: none; + } + + // Metrics section + + .small-card { + height: 180px; + box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.15); + border-radius: 20px; + margin: 30px 0 45px 0; + padding: 10px 0 10px 0; + } + + .small-card p { + text-align: center; + } + + .metrics-image-size { + height: 35%; + width: 35%; + } + + .metrics-title { + font-size: 2rem; + text-decoration: none; + font-weight: 700; + color: $color-red; + } + + .metrics-vrms-title { + font-size: 2.2rem; + text-decoration: none; + font-weight: 900; + color: $color-black; + text-align: center; + padding: 40px 0 36px 0; + } + + .metrics-vrms-links { + display: flex; + flex-flow: row nowrap; + justify-content: space-evenly; + align-content: space-between; + } + + .list-container-no-indent ol { + margin: 10px; + padding: 10px; + } + .donation-spacing { + margin: 0 0 40px 20px; + font-size: 18px; + } + + .text-small-italic { + font-size: 15px; + font-style: italic; + } + + .news-cells { + display: flex; + flex-flow: column nowrap; + justify-content: center; + padding: 25px 0 15px 0; + align-items: center; + } + + .news-cells p { + padding-top: 40px; + margin: 0 20px 0 20px; + } + + + + .more-padding { + padding-top: 10px; + } + +/* Below are the breakpoints and adjustments for different size monitors */ + +// Bigger than mobile - 480px +@media #{$bp-mobile-up} { + +} // End mobile up + +@media only screen and (max-width: 850px) { + + .stick-it { + right: 0; + } + +} + +// Bigger than tablet - 768px +@media #{$bp-tablet-up} { + .header-container--about-us { + flex-flow: row; + padding: 3rem 1rem 0 1rem; + } + + // The next two tags turn on and off the sticky nav sidebar + .page-content-container-grid { + grid-template-columns: auto 400px; + grid-template-rows: auto; + grid-gap: 70px; + grid-template-areas: + "content nav"; + } + .sticky-nav { + display: block; + } + + + .not-sticky-nav-container { + margin-left: 100px; + grid-area: content; + justify-self: start; + } + + .page-card { + margin: 12px 12px 40px; + max-width: 896px; + padding: 40px; + } + + .page-card--platform { + padding: 60px; + } + + .read-more { + display: none; + } + + .read-less { + display: none; + } + + .last-card { + margin-bottom: 150px; + } + + .about-us-section-header { + font-size: 1.5rem; + margin: 0 0 40px; + cursor: default; + justify-content: center; + } + + .about-us-section-header--ED { + justify-content: center; + cursor: default; + font-size: 1.5rem; + margin: 0 0 40px; + } + + .about-us-section-content { + display: block; + } + + .about-us-section-header:after { + display: none; + } + .sec-head-img { + display: none; + } + + .sec-head-img-ed { + display: none; + } + + .line-break { + display: none; + } + + .sticky-nav a { + text-decoration: none; + } + + .platform-mid-section{ + display: grid; + grid-template-columns: auto auto; + grid-template-rows: auto auto auto auto auto auto auto auto auto; + grid-template-areas: + "top-left top-right" + "top-left top-right" + "top-left mid-right" + "mid-left mid-right" + "mid-left low-right" + "mid-left low-right" + "bottom-left bottom-right" + "bottom-left bottom-right" + "bottom-left bottom-right" + ; + column-gap: 80px; + row-gap: 10px; + } + + .platform-sec-impact { + grid-area: top-left; + } + .platform-sec-learning { + grid-area: top right; + } + .platform-sec-diversity { + grid-area: mid-left; + } + .platform-sec-giving { + grid-area: mid-right; + } + .platform-sec-agility { + grid-area: low-right + } + .platform-sec-scalability { + grid-area: bottom-left; + } + .platform-sec-sustainability { + grid-area: bottom-right; + align-self: center; + } + + .flex-container-reverse { + display: flex; + flex-direction: row-reverse; + } + + .flex-container { + display: flex; + flex-direction: row; + } + + .sdg-left { + width: 10%; + } + .sdg-right { + width: 90%; + } + + .sdg-left-column { + width: 40%; + margin: 30px 25px 0 0; + } + + .sdg-right-column { + width: 60%; + padding-left: 10px; + } + + .bottom-right-column { + width: 50%; + padding-left: 10px; + } + + .top-left-column { + width: 50%; + padding-right: 10px; + } + + .top-left-column--acc { + padding-right: 25px; + } + + .bottom-right-column--acc { + padding-left: 25px; + } + + .top-left-column--donations { + width: 45%; + } + + .bottom-right-column--donations { + width: 55%; + } + .sdg-title-mobile { + display: none; + } + + .sdg-title-full { + display: inline; + } + + .wins-card-mobile { + display: none; + } + .wins-card-desktop { + display: block; + } + + .wins-column-width-left { + width: 30%; + padding-left: 30px; + } + + .wins-column-width-right { + width: 70%; + padding-left: 25px; + } + + .news-cells p { + padding-top: 60px; + margin: 0 20px 0 20px; + } + + .news-cells--govtech { + margin-bottom: 75px; + } + + .garcetti-mobile { + display: none; + } + + .garcetti-large { + display: block; + } +} // End tablet-up + +//Bigger than desktop - 960px +@media #{$bp-desktop-up} { + +} // End desktop up 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/_sass/variables/_colors.scss b/_sass/variables/_colors.scss index cdfd6ed155..a99fa6020f 100644 --- a/_sass/variables/_colors.scss +++ b/_sass/variables/_colors.scss @@ -14,3 +14,14 @@ $color-papayawhip: #ffefd5; $color-royalblue: #4169e1; $color-pink: #f7f5f5; +$color-dodgerblue: #1587FF; +$color-lightseagreen: #0DC583; +$color-orange: #F9B400; +$color-chocolate: #F16618; +$color-firebrick: #D7261B; +$color-deeppink: #FA207C; +$color-mediumvioletred: #D11D69; +$color-darkorchid: #981DD1; +$color-blueviolet: #571DD1; + + diff --git a/about-us.html b/about-us.html new file mode 100644 index 0000000000..6112c86c57 --- /dev/null +++ b/about-us.html @@ -0,0 +1,413 @@ +--- +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. +

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

+
+
Read More
+
+ +

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

+
+
Read Less
+
+ + +
+
Hack for LA Platform
+
+
+
Workforce Development
+

+ Enlightened self-interest is a powerful motivator. Our members have access to mentorship, + one-on-one help with job searches, and resume coaching. We do project matching to fit skill + and subject areas in which they wish to develop new skills, gain confidence in newly learned + skills, and transition from beginner to junior, mid-level, or expert - often in areas they + wish to add impressive credits to their resume. +

+
+
+
Impact
+

+ We choose and empower projects where there is a demonstrable impact on stakeholders, project partners, + our local community, and our members. We don’t seek to be the experts, but instead to learn from them + and apply the leverage that technology offers to help improve pace and outcomes from their already + valuable work. High profile project partners carry weight when our members are looking for work. +

+
+
+
Learning
+

+ An environment where every member and the org itself benefit from the shared experiences of the members. + From high school students to Ph.D., from novice to expert, there is knowledge to be gained by sharing + practices and working collaboratively, making mistakes and learning from them in an environment that + values failing fast and learning. +

+
+
+
Diversity, Equity, and Inclusion
+

+ The diverse experiences of all of our members help us create a better civic tech ecosystem, by bringing + their lived experience to our org. Our diversity includes race, sexual orientation, learning modalities, + cognitive abilities, and socio-economic experiences. Our model of inclusion requires and inspires + empathy and patience, both with others and ourselves. We are all here to learn to work together to + create the change we want to see in the world, and that happens one conversation at a time. +

+
+
+
Giving
+

+ We all come together to give freely of our time, expertise, interest and empathy, in an effort to improve + our local community through direct action. +

+
+
+
Agility
+

+ There will be impediments, setbacks and disappointments. We embrace change by empowering our members to + meet, talk, experiment and achieve enough common consensus to move internal initiatives forward, without + rigid structures and oppressive processes. This works on project teams, Communities of Practice and + Organizational Stewardship. +

+
+
+
Scalability
+

+ In order to scale our impact with people and projects, we experiment, iterate and refine, measure and + automate. Using the lowest lift tools possible for the job, and building our own, when scale cannot be + achieved with manual labor or open source tools. +

+
+
+
Sustainability
+

+ To create a sustainable community that provides consistent results and experience for stakeholders and a + feeling of stability amongst its members. +

+
+
+

And last but definitley not least, a true open door policy....

+
Radical Inclusivity
+

+ When organizations filter you out before you get in the door, they perpetuate the bias already inherent + in our society. Radical Inclusivity at Hack for LA means that if you can contribute to our impact goals + and peer learning environment, you are welcome here. +

+
+
+
+ + +
+
+ HfLA Supports SDGsHack for LA Supports:
LA’s Sustainable Development Goals (SDG) Movement
+
+
+ +
+

+ The SDGs were drafted and adopted at the UN General Assembly in 2015. The SDGs aim to address social inequality, economic growth, + environmental preservation, among other global development challenges. In 2015, the United Nations established the 2030 Global + Agenda for Sustainable Development consisting of 17 Sustainable Development Goals (SDGs). +

+

Select Hack for LA projects working to achieve these goals:

+
+
2.1
FOLA
+
+
+
5.5
Women Leadership Development
+
5.b
Empowering women through the use of technology
+
5.d
End discrimination against LBGTQI+
+
+
+
8.2
Software Engineering Apprenticing and Fellowships
+
8.6
Virtual Workshop Wednedsays
+
8.b
Youth internships and mentorship program
+
+
+
11.2
TDM calculator
+
+
+
13.3
Climate Collabathon
+
+
+
16.3
Racial Justice and Record Clearance
+
16.7
Undebate and Engage
+
16.8
311-data.org
+
+
+
17.6
Open Source Software Code for All and Civic Tech Index
+
17.11
Structured Context Data Project
+
17.17
Collabathon chrome extension
+
+
+ +
+
+ + + + + + + + +
+
+
+
+
+ + +
+
Accomplishments
+
+
+ +
+

Highlights from 2020

+ +
In 9/2020 Hack for LA joined over 40 Code for America brigades in bringing together civic leaders, + public servants, designers, coders, and engaged citizens to partner with local government and community + groups to help those most in need of a social safety net services during COVID-19. +
+ +
Launched 8/2020 the most comprehensive lising of Food Pantries and Meals to address food + insecurity in Los Angeles (listed as a resource on LA County Public Health website). +
+ +
Hack for LA’s first software application in CI/CD on LA City Department of Transportation’s + Azure servers - launching publicly in Q4 2020 +
+ +
Launched 8/2020 a comprensive 311 service report Neighborhood Council (NC) and City Council district + comparison tool using 311 data provided by LA City’s data portal. The product was created through extensive + Design thinking workshops with NC board members and LA Department of Neighborhood Empowerment +
+
+ +
+ +
Launched 4/2020 the Online Climate Collabathon in partnership with Yale Open Labs, Sensorica, + ESMT Berlin, and CoMakery. 15 speakers, and over 20 breakout and working sessions with experts + and professionals from across the sector all on Zoom. +
+ +
Hack for LA has provided labor to this important tool which continues to increase engagment at local elections + thorughout the country from the San Francisco City Attorney race, to Student Association Elections on College Campuses. +
+ +
Launched 04/2020. The Write For All project proof of concept finds exclusive langugage where inclusive language should exist. +
+ +
Created and Presented 3/2020 three technical workshops for Title 1 school students at the UCLA Exploretech Conference. + The project from conception to delivery was executed by Hack for LA’s first team of all high school students. +
+
+
+
+ +
+
Wins
+
Check out what our team members have said about their experiences.
+

Coming soon....

+
+
+
+
+
+
+
+
+ + +
+
Metrics
+
+
+

+ Hack for LA is taking an iterative approach to Metrics gathering. Using readily available tools now, and building + custom tools to model, grow, and serve our sector specific community. +

+

+ We currently use Google surveys extensively and make the responses available publicly. +

+
+
+ +
+
+
+
Metrics
+
+

Check out our Survey Results

+
+
+
+ +
+
+
+

+ VRMS is a browser-based software tool created by Hack for LA (HfLA) to curate participant journeys and further the organization’s + goals of workforce development and project impact. +

+

+ By collecting and using relevant data VRMS will be able to automate repetitive tasks; match volunteers with projects, + relevant training, and job opportunities; measure engagement with projects and activities; and surface insights to + improve organizational effectiveness and the volunteer experience over time. +

+
+
+
+ + +
+
Partners
+
+
+ + + + + + + + + + + + +
+
+
+ + +
+
Make a Donation
+
+
+
+

Hack for LA takes donations through Code for America.

+
+
    +
  1. Please follow this link to the Code for America donation form.
  2. +
  3. To make a donation please select Hack for LA under the brigades listed.

    +

    *100% of donated proceeds go directly to Hack for LA when option is selected.

  4. +
+
+
+
+ +
+
+
+
+ + +
+
Sponsors
+
+
+ + + + +
+
+
+ + +
+ + +
+
+ + + diff --git a/assets/images/about-us/about-us-header.svg b/assets/images/about-us/about-us-header.svg new file mode 100644 index 0000000000..0571a6dc70 --- /dev/null +++ b/assets/images/about-us/about-us-header.svg @@ -0,0 +1,114 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/about-us/donation-instructions.svg b/assets/images/about-us/donation-instructions.svg new file mode 100644 index 0000000000..030b6adafb --- /dev/null +++ b/assets/images/about-us/donation-instructions.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/about-us/metrics-pie-chart-svg b/assets/images/about-us/metrics-pie-chart-svg new file mode 100644 index 0000000000..9f9fa6abc8 --- /dev/null +++ b/assets/images/about-us/metrics-pie-chart-svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/metrics-pie-chart.png b/assets/images/about-us/metrics-pie-chart.png new file mode 100644 index 0000000000..3643a983fe Binary files /dev/null and b/assets/images/about-us/metrics-pie-chart.png differ diff --git a/assets/images/about-us/nav-arrow.svg b/assets/images/about-us/nav-arrow.svg new file mode 100644 index 0000000000..bed61d83ac --- /dev/null +++ b/assets/images/about-us/nav-arrow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/about-us/news-images/cnn.svg b/assets/images/about-us/news-images/cnn.svg new file mode 100644 index 0000000000..12dddd5821 --- /dev/null +++ b/assets/images/about-us/news-images/cnn.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/news-images/garcetti-large.svg b/assets/images/about-us/news-images/garcetti-large.svg new file mode 100644 index 0000000000..3754f10ddf --- /dev/null +++ b/assets/images/about-us/news-images/garcetti-large.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/images/about-us/news-images/garcetti-mobile.svg b/assets/images/about-us/news-images/garcetti-mobile.svg new file mode 100644 index 0000000000..9e36ecfd10 --- /dev/null +++ b/assets/images/about-us/news-images/garcetti-mobile.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/images/about-us/news-images/gt.svg b/assets/images/about-us/news-images/gt.svg new file mode 100644 index 0000000000..d5e34ac82d --- /dev/null +++ b/assets/images/about-us/news-images/gt.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/news-images/la-times.svg b/assets/images/about-us/news-images/la-times.svg new file mode 100644 index 0000000000..bbb1f2b3a4 --- /dev/null +++ b/assets/images/about-us/news-images/la-times.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/partners/blue-circle.svg b/assets/images/about-us/partners/blue-circle.svg new file mode 100644 index 0000000000..51a00deb70 --- /dev/null +++ b/assets/images/about-us/partners/blue-circle.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/partners/bp.svg b/assets/images/about-us/partners/bp.svg new file mode 100644 index 0000000000..0bf75125e7 --- /dev/null +++ b/assets/images/about-us/partners/bp.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/partners/city-of-la.svg b/assets/images/about-us/partners/city-of-la.svg new file mode 100644 index 0000000000..5605525acf --- /dev/null +++ b/assets/images/about-us/partners/city-of-la.svg @@ -0,0 +1,474 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/partners/county-of-la.svg b/assets/images/about-us/partners/county-of-la.svg new file mode 100644 index 0000000000..25fda8e8e1 --- /dev/null +++ b/assets/images/about-us/partners/county-of-la.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/partners/empower-la.svg b/assets/images/about-us/partners/empower-la.svg new file mode 100644 index 0000000000..b407bf49b3 --- /dev/null +++ b/assets/images/about-us/partners/empower-la.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/partners/enciv.svg b/assets/images/about-us/partners/enciv.svg new file mode 100644 index 0000000000..e7d84157f2 --- /dev/null +++ b/assets/images/about-us/partners/enciv.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/partners/hope-of-the-valley.svg b/assets/images/about-us/partners/hope-of-the-valley.svg new file mode 100644 index 0000000000..6e60fe00b4 --- /dev/null +++ b/assets/images/about-us/partners/hope-of-the-valley.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/partners/la-city-attorney.svg b/assets/images/about-us/partners/la-city-attorney.svg new file mode 100644 index 0000000000..a932f3f23e --- /dev/null +++ b/assets/images/about-us/partners/la-city-attorney.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/partners/m.svg b/assets/images/about-us/partners/m.svg new file mode 100644 index 0000000000..fcaca519bd --- /dev/null +++ b/assets/images/about-us/partners/m.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/partners/point-source-youth.svg b/assets/images/about-us/partners/point-source-youth.svg new file mode 100644 index 0000000000..1ac067b366 --- /dev/null +++ b/assets/images/about-us/partners/point-source-youth.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/partners/real-help-lasting-change.svg b/assets/images/about-us/partners/real-help-lasting-change.svg new file mode 100644 index 0000000000..b87799d3b9 --- /dev/null +++ b/assets/images/about-us/partners/real-help-lasting-change.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/images/about-us/partners/yale-open-labs.svg b/assets/images/about-us/partners/yale-open-labs.svg new file mode 100644 index 0000000000..c86c27da67 --- /dev/null +++ b/assets/images/about-us/partners/yale-open-labs.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/platform-header-elements/agility.svg b/assets/images/about-us/platform-header-elements/agility.svg new file mode 100644 index 0000000000..e96b7ede53 --- /dev/null +++ b/assets/images/about-us/platform-header-elements/agility.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/platform-header-elements/diversity.svg b/assets/images/about-us/platform-header-elements/diversity.svg new file mode 100644 index 0000000000..81a50c3dc3 --- /dev/null +++ b/assets/images/about-us/platform-header-elements/diversity.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/platform-header-elements/giving.svg b/assets/images/about-us/platform-header-elements/giving.svg new file mode 100644 index 0000000000..bfdebc410b --- /dev/null +++ b/assets/images/about-us/platform-header-elements/giving.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/about-us/platform-header-elements/impact.svg b/assets/images/about-us/platform-header-elements/impact.svg new file mode 100644 index 0000000000..4281e723f2 --- /dev/null +++ b/assets/images/about-us/platform-header-elements/impact.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/about-us/platform-header-elements/inclusivity.svg b/assets/images/about-us/platform-header-elements/inclusivity.svg new file mode 100644 index 0000000000..8a7e741cf6 --- /dev/null +++ b/assets/images/about-us/platform-header-elements/inclusivity.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/images/about-us/platform-header-elements/learning.svg b/assets/images/about-us/platform-header-elements/learning.svg new file mode 100644 index 0000000000..317644e0f4 --- /dev/null +++ b/assets/images/about-us/platform-header-elements/learning.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/about-us/platform-header-elements/scalability.svg b/assets/images/about-us/platform-header-elements/scalability.svg new file mode 100644 index 0000000000..be85779dc4 --- /dev/null +++ b/assets/images/about-us/platform-header-elements/scalability.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/about-us/platform-header-elements/sustainability.svg b/assets/images/about-us/platform-header-elements/sustainability.svg new file mode 100644 index 0000000000..1844ce2c82 --- /dev/null +++ b/assets/images/about-us/platform-header-elements/sustainability.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/about-us/platform-header-elements/workforce-development.svg b/assets/images/about-us/platform-header-elements/workforce-development.svg new file mode 100644 index 0000000000..8fc8c5f24f --- /dev/null +++ b/assets/images/about-us/platform-header-elements/workforce-development.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/sdg-elements/climate-action.svg b/assets/images/about-us/sdg-elements/climate-action.svg new file mode 100644 index 0000000000..8154f231a6 --- /dev/null +++ b/assets/images/about-us/sdg-elements/climate-action.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/sdg-elements/decent-work.svg b/assets/images/about-us/sdg-elements/decent-work.svg new file mode 100644 index 0000000000..d9186e809c --- /dev/null +++ b/assets/images/about-us/sdg-elements/decent-work.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/sdg-elements/gender-equality.svg b/assets/images/about-us/sdg-elements/gender-equality.svg new file mode 100644 index 0000000000..d6b6712013 --- /dev/null +++ b/assets/images/about-us/sdg-elements/gender-equality.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/sdg-elements/partnerships.svg b/assets/images/about-us/sdg-elements/partnerships.svg new file mode 100644 index 0000000000..a48b6ecb93 --- /dev/null +++ b/assets/images/about-us/sdg-elements/partnerships.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/sdg-elements/peace-justice.svg b/assets/images/about-us/sdg-elements/peace-justice.svg new file mode 100644 index 0000000000..8cdabc1d08 --- /dev/null +++ b/assets/images/about-us/sdg-elements/peace-justice.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/sdg-elements/sdg-la.svg b/assets/images/about-us/sdg-elements/sdg-la.svg new file mode 100644 index 0000000000..8ad0cadb58 --- /dev/null +++ b/assets/images/about-us/sdg-elements/sdg-la.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/sdg-elements/sustainable-cities.svg b/assets/images/about-us/sdg-elements/sustainable-cities.svg new file mode 100644 index 0000000000..362c520caa --- /dev/null +++ b/assets/images/about-us/sdg-elements/sustainable-cities.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/sdg-elements/zero-hunger.svg b/assets/images/about-us/sdg-elements/zero-hunger.svg new file mode 100644 index 0000000000..133e641ba8 --- /dev/null +++ b/assets/images/about-us/sdg-elements/zero-hunger.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/section-header-elements/accomplishments.svg b/assets/images/about-us/section-header-elements/accomplishments.svg new file mode 100644 index 0000000000..15489bd2c6 --- /dev/null +++ b/assets/images/about-us/section-header-elements/accomplishments.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/about-us/section-header-elements/donations.svg b/assets/images/about-us/section-header-elements/donations.svg new file mode 100644 index 0000000000..45a692cc7f --- /dev/null +++ b/assets/images/about-us/section-header-elements/donations.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/about-us/section-header-elements/letter.svg b/assets/images/about-us/section-header-elements/letter.svg new file mode 100644 index 0000000000..c76a6ceab8 --- /dev/null +++ b/assets/images/about-us/section-header-elements/letter.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/about-us/section-header-elements/metrics.svg b/assets/images/about-us/section-header-elements/metrics.svg new file mode 100644 index 0000000000..d42c31e8e7 --- /dev/null +++ b/assets/images/about-us/section-header-elements/metrics.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/section-header-elements/news.svg b/assets/images/about-us/section-header-elements/news.svg new file mode 100644 index 0000000000..8a0ffeb63d --- /dev/null +++ b/assets/images/about-us/section-header-elements/news.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/about-us/section-header-elements/partners.svg b/assets/images/about-us/section-header-elements/partners.svg new file mode 100644 index 0000000000..a6e6c8103a --- /dev/null +++ b/assets/images/about-us/section-header-elements/partners.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/images/about-us/section-header-elements/platform.svg b/assets/images/about-us/section-header-elements/platform.svg new file mode 100644 index 0000000000..57f4e6a838 --- /dev/null +++ b/assets/images/about-us/section-header-elements/platform.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/images/about-us/section-header-elements/sponsors.svg b/assets/images/about-us/section-header-elements/sponsors.svg new file mode 100644 index 0000000000..2e4c8c7922 --- /dev/null +++ b/assets/images/about-us/section-header-elements/sponsors.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/images/about-us/section-header-elements/sustainability.svg b/assets/images/about-us/section-header-elements/sustainability.svg new file mode 100644 index 0000000000..150e11243d --- /dev/null +++ b/assets/images/about-us/section-header-elements/sustainability.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/sponsors/carbon-five.svg b/assets/images/about-us/sponsors/carbon-five.svg new file mode 100644 index 0000000000..a3ad76c4e8 --- /dev/null +++ b/assets/images/about-us/sponsors/carbon-five.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/sponsors/code-for-america.svg b/assets/images/about-us/sponsors/code-for-america.svg new file mode 100644 index 0000000000..b9bf70b651 --- /dev/null +++ b/assets/images/about-us/sponsors/code-for-america.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/assets/images/about-us/sponsors/laci.svg b/assets/images/about-us/sponsors/laci.svg new file mode 100644 index 0000000000..978dfe7dfe --- /dev/null +++ b/assets/images/about-us/sponsors/laci.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/sponsors/sip-sonder.svg b/assets/images/about-us/sponsors/sip-sonder.svg new file mode 100644 index 0000000000..953ed41452 --- /dev/null +++ b/assets/images/about-us/sponsors/sip-sonder.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/vrms-logo.svg b/assets/images/about-us/vrms-logo.svg new file mode 100644 index 0000000000..304ba4f077 --- /dev/null +++ b/assets/images/about-us/vrms-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/about-us/wins-card-desktop.svg b/assets/images/about-us/wins-card-desktop.svg new file mode 100644 index 0000000000..5c1e2212db --- /dev/null +++ b/assets/images/about-us/wins-card-desktop.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/wins-card-mobile.svg b/assets/images/about-us/wins-card-mobile.svg new file mode 100644 index 0000000000..3babecddf7 --- /dev/null +++ b/assets/images/about-us/wins-card-mobile.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/about-us/wins-cup.svg b/assets/images/about-us/wins-cup.svg new file mode 100644 index 0000000000..1a32f141f2 --- /dev/null +++ b/assets/images/about-us/wins-cup.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/js/about-us.js b/assets/js/about-us.js new file mode 100644 index 0000000000..aa14465dec --- /dev/null +++ b/assets/js/about-us.js @@ -0,0 +1,220 @@ + /**************************************/ + /**** Script 1: Sticky Navigation *****/ +/**************************************/ + +//Initialize and set defaults +let stickyNav = document.getElementById("sticky-nav"); +let stickyNavTop = stickyNav.offsetTop - 80; + +// When the menu reaches the position we want it to stick at, this adds a class and some padding. +function stickItHere() { + if (window.scrollY >= stickyNavTop) { + //stickyNav.style.paddingTop = nav.offsetHeight + 'px'; + stickyNav.classList.add('stick-it'); + } else { + //stickyNav.style.paddingTop = 0; + stickyNav.classList.remove('stick-it'); + } +} + +// Listen to the scrolling to find when it reaches the sticky spot +window.addEventListener('scroll', stickItHere); + + + /*************************************************/ + /**** Script 2: Highlight Links when clicked *****/ +/*************************************************/ + +//locate all the navigation links and arrows +let navLinks = document.querySelectorAll(".sticky-nav a"); + +for (let i=0; i < navLinks.length; i++){ + + navLinks[i].addEventListener('click', function(event){ + + // Disable scroll handler when click on navigation link if using smooth scroll + document.removeEventListener('scroll', scrollHandler, true); + + //check if a link is currently selected, remove is-active class if yes + isActive = document.getElementsByClassName('is-active')[0]; + + if (isActive != undefined){ + isActive.classList.remove('is-active'); + } + + //then add is-active class to the most recent selected link + this.classList.add('is-active'); + + //re-enable scroll event 1 second after is-active class is added + setTimeout(function(){ + document.addEventListener("scroll", scrollHandler, true); + }, 1000); + + }); +} + + /***************************************************/ + /**** Script 3: Highlight links when scrolling *****/ +/***************************************************/ + +// Initialize +//locate all the navigation links +let quickLinks = document.querySelectorAll(".sticky-nav a"); +let qlArray = []; +let positionArray = []; + +for (let i=0; i < quickLinks.length; i++) { + + // Create an array of ids + qlArray.push(quickLinks[i].href.substring(quickLinks[i].href.indexOf('#')+1)); +} + +// create an array of the position of each id +for (var i=0; i < qlArray.length; i++){ + positionArray.push(document.getElementById(qlArray[i]).getBoundingClientRect().top); +} + +document.addEventListener("scroll", scrollHandler, true); + +function scrollHandler() { + + // Initialize + let currentScrollPosition = document.documentElement.scrollTop; + let currentActive; + + for (let i=1; i <= positionArray.length; i++) { + + // Set value + currentScrollPosition = document.documentElement.scrollTop; + + if (currentScrollPosition >= positionArray[i-1] && currentScrollPosition < positionArray[i]) { + currentActive = document.getElementsByClassName('is-active')[0]; + + if (currentActive != undefined){ + currentActive.classList.remove('is-active'); + } + + quickLinks[i-1].classList.add('is-active'); + break; + } + + if (currentScrollPosition > positionArray[positionArray.length-1]){ + currentActive = document.getElementsByClassName('is-active'); + currentActive = document.getElementsByClassName('is-active')[0]; + + if (currentActive != undefined){ + currentActive.classList.remove('is-active'); + } + + quickLinks[quickLinks.length-1].classList.add('is-active'); + break; + } + } // End for +}; + + /***********************************************************/ + /* ************** Script 4: Mobile accordian ************* */ +/***********************************************************/ + +// classToAdd is the name of the class that gets added to the list +// accordionElements are the elements that we're working on +function createAccordionEventListener (classToAdd, accordionElements) { + + for (let el of accordionElements) { + + el.addEventListener("click", function () { + + // Toggles adding and removing the class from the class list + this.classList.toggle(classToAdd); + + // Which panel to open/close + let accordionContainer = this.nextElementSibling; + + + // Open and close panel + if (accordionContainer.style.display === "block") { + accordionContainer.style.display = "none" + } else { + accordionContainer.style.display = "block" + } + }) + } +} // end function + +// Add event listeners +if (windowWidth < 768) { + // Get the list of elements for the accordion + let accordionList = document.querySelectorAll(".about-us-section-header"); + + // Create event listeners + createAccordionEventListener ("au_active", accordionList); +} + + /*********************************************************************************/ + /* ************** Script 5: Mobile accordian - Read more/Read less ************* */ +/*********************************************************************************/ + + +function createReadMoreReadLessEventListener (classToAdd, accordionElements) { + + for (let el of accordionElements) { + + el.addEventListener("click", function () { + + // Declare variables! + let accordionContainer = this.previousElementSibling; + let readMore = document.querySelector(".read-more"); + let readLess = document.querySelector(".read-less"); + + // This needs to toggle "Read more" and "Read less" so one comes on and the other goes off + readMore.classList.toggle(classToAdd); + readLess.classList.toggle(classToAdd); + + // if it is read-more and not read-less, do this + if (this.className.includes("read-more")) { + accordionContainer = this.nextElementSibling; + console.log("Here -> more"); + } + + console.log('accordionContainer -> ' + this.className); + + // Open and close panel + if (accordionContainer.style.display === "block") { + console.log("Here -> none"); + accordionContainer.style.display = "none" + } else { + accordionContainer.style.display = "block" + console.log("Here -> block"); + } + event.stopPropagation() + }) + } +} // end function + +// Add event listeners +if (windowWidth < 768) { + // Get the list of elements for the accordion + let letterFromExecDir = document.querySelectorAll(".read-more, .read-less"); + + // Create event listeners + createReadMoreReadLessEventListener ("more-less", letterFromExecDir); +} + + + /*******************************************************/ + /***** Script 6: Add a break tag to certain headers ****/ +/*******************************************************/ + +// There certain headers need to be split into two lines on mobile +// This adds a br tag as the designated spot in the string. + +// Get the header text +let letterHeadText = document.getElementById("letterBR").innerText; + +// Function to add something within a string +let insertSomething = (str,ins_str,pos) => { return str.slice(0, pos) + ins_str + str.slice(pos) }; + +// If it's mobile, add a break tag and put it back +if (windowWidth < 768) { + document.getElementById("letterBR").innerHTML = insertSomething(letterHeadText, '
', 15); +} \ No newline at end of file