diff --git a/404.html b/404.html index 5591e20..e005d6e 100644 --- a/404.html +++ b/404.html @@ -4,10 +4,10 @@
-
+

404 Error

This page does not exist. Please use the navigation to get back to a working page on the site.

- + Return home {% octicon chevron-right height:16 %} diff --git a/_config.yml b/_config.yml index 855228c..def985a 100644 --- a/_config.yml +++ b/_config.yml @@ -57,17 +57,6 @@ sass: load_paths: - node_modules/ - -collections: - insights: - output: true - permalink: /:collection/:title/ - -feed: - collections: - insights: - path: "insights/feed.xml" - seo: diff --git a/_includes/arrow.html b/_includes/arrow.html new file mode 100644 index 0000000..6b3a8a6 --- /dev/null +++ b/_includes/arrow.html @@ -0,0 +1,7 @@ + + + + + diff --git a/_includes/footer.html b/_includes/footer.html index 88176a6..f3a6527 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,12 +1,41 @@ -
diff --git a/_includes/logo-list.html b/_includes/logo-list.html new file mode 100644 index 0000000..88a6bc1 --- /dev/null +++ b/_includes/logo-list.html @@ -0,0 +1,53 @@ +
    +
  • + GitHub logo +
    • +
  • + Red Hat logo +
    • +
  • + Microsoft logo +
    • +
  • + Cisco logo +
    • +
  • + intel logo +
    • +
  • + Fidelity logo +
    • +
  • + shaw university logo +
    • +
  • + North Carolina Central University logo +
    • +
  • + Clark Atlanta University logo +
    • +
  • + Winston Salem State University logo +
    • +
  • + Saint Augustine’s University logo +
    • +
  • + Huston Tillotson University logo +
    • +
  • + University of North Carolina Pembroke logo +
    • +
  • + CHAOSS Project logo +
    • +
  • + Linux Foundation logo +
    • +
  • + Major League Hacking logo +
    • +
  • + All Things Open Network logo +
    • +
diff --git a/_includes/video-community.html b/_includes/video-community.html new file mode 100644 index 0000000..233f8ff --- /dev/null +++ b/_includes/video-community.html @@ -0,0 +1,53 @@ +
+
+
+ + + {% if page.id == 'home' %} +
Introducing All In at the Open Source Summit 2021
+ {% else %} +
Preliminary findings from the Maintainers Listening Tour at All Things Open 2021
+ {% endif %} +
+ +
diff --git a/_includes/video.html b/_includes/video.html new file mode 100644 index 0000000..4a8ceb3 --- /dev/null +++ b/_includes/video.html @@ -0,0 +1,54 @@ +
+
+
+ + + {% if page.id == 'home' %} +
Introducing All In at the Open Source Summit 2021
+ {% else %} +
Preliminary findings from the Maintainers Listening Tour at All Things Open 2021
+ {% endif %} +
+ +
diff --git a/_layouts/default.html b/_layouts/default.html index bda52f1..9594b7c 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -21,6 +21,8 @@ opacity: 0; } + + diff --git a/access.html b/access.html new file mode 100644 index 0000000..8e6e4ac --- /dev/null +++ b/access.html @@ -0,0 +1,95 @@ +--- +layout: default +id: access +permalink: /access/ +title: Access Programs +--- + +
+
+
+
+
+ Access icon +
+
+

{ All In Access }

+

All In for Students

+

12-month Pilot

+

A paid, 12-month program for select students attending Minority Serving Institutions.

+
+

Coming soon: 2022 All In for Students Cohort

+
+ Application Process Opens January 2022 +
+
+
+
+
+
+
+ +
+
+
+ student on computer +
+
+

2021 All In for Students Pilot

+ +
+
+

Professional development training

+

Participants will attend regular meet-ups to hear from open source professionals on topics that will help equip them for success. Topics include:

+
    +
  • Leveraging employee resource groups
    • +
  • Dealing with microaggressions
    • +
  • Performance management
    • +
  • Careers in tech
    • +
  • Developing and owning your personal story
    • +
  • The power of collaboration and networking before and after the job
    • +
+
+
+ +
+
+

Open source education

+

Students will be enrolled in online, self-paced courses that provide an introduction to open source. During this time, they’ll also have access to a professor for one-on-one instruction and a class forum to connect with other participants.

+

A Beginner’s Guide to Open Source Development

+

Introduction to Cloud Infrastructure Technologies

+

Introduction to DevOps and Site Reliability Engineering

+
+
+ +
+
+

Structured 12-week open source project

+

Students will be matched to teams with a corporate partner or Major League Hacking to complete a 12-week project where they will either contribute directly to open source or focus on working with open source communities. Each student will also be paired with mentors to support them throughout the process.

+
+
+ +
+
+

Internship experiences

+

Students who complete the open source curriculum, professional development sessions, and 12-week project will have the opportunity to participate in an internship experience with one of our corporate partners.

+
+
+ +
+
+
+ + +
+
+

Are you All In?

+

All In for Students provides open source curriculum, career development, and opportunities at companies, nonprofits and within open source communities. Consider becoming a corporate partner today.

+
+ + Become a Partner + {% include arrow.html %} + +
+
+
diff --git a/assets/css/_settings.scss b/assets/css/_settings.scss index a8949ed..d53b5b3 100644 --- a/assets/css/_settings.scss +++ b/assets/css/_settings.scss @@ -7,17 +7,20 @@ // Fonts // ---------------------------------------- -// 300 | 400 | 500 | 600 | 700 -$sans-serif: 'alliance', mono, sans-serif; +// 300 | 400 | 500 |700 +$sans-serif: 'theinhardt', mono, sans-serif; // 300 | 400 | 500 | 700 $mono: 'sf-mono', mono, sans-serif; +// 700 +$serif: 'Noe', serif; + // ---------------------------------------- // Font Size/ Line Height // ---------------------------------------- -$main-font: $mono; +$main-font: $sans-serif; $base-font-size: 18px; $base-line-height: 1.5; @@ -29,6 +32,11 @@ $base-line-height: 1.5; $brand: #06F395; $black: #000000; + +$border: #121212; + +$gray-darkest: #161616; + $white: #ffffff; @@ -41,7 +49,7 @@ $error: #FF3333; $xlarge: 1280px; $large: 1012px; -$medium: 800px; +$medium: 768px; $small: 544px; @mixin start-at($device-width) { @@ -62,7 +70,7 @@ $small: 544px; // ---------------------------------------- -$header-breakpoint: $medium; +$header-breakpoint: $large; $transition-speed: 0.4s; $transition: $transition-speed ease; diff --git a/assets/css/base/_baseHtml.scss b/assets/css/base/_baseHtml.scss index 1521732..dfd5cd3 100644 --- a/assets/css/base/_baseHtml.scss +++ b/assets/css/base/_baseHtml.scss @@ -4,97 +4,103 @@ html, body { - background: $black; - font-size: 62.5%; + background: $black; + font-size: 62.5%; +} + +body { + opacity: 0; + transition: opacity 0.3s ease; + + &.page-ready { + transition-delay: 0.6s; + opacity: 1; + } } -// -// body { -// opacity: 0; -// transition: opacity 0.3s ease; -// -// &.page-ready { -// transition-delay: 0.6s; -// opacity: 1; -// } -// } body, input, button, select, textarea { - font-family: $main-font; - font-size: 15px; - line-height: $base-line-height; - font-weight: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-smoothing: antialiased; - color: $black; - - @include start-at($medium) { - font-size: $base-font-size; - } + font-family: $main-font; + font-size: 18px; + line-height: $base-line-height; + font-weight: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-smoothing: antialiased; + color: $black; + + @include start-at($medium) { + font-size: 20px; + } } +main { + min-height: calc(100vh - 150px); + @include start-at($large) { + min-height: calc(100vh - 80px); + } +} .grid { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } a { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; - &:hover { - cursor: pointer; - text-decoration: none; - } + &:hover { + cursor: pointer; + text-decoration: none; + } - &[href^="tel:"] { + &[href^="tel:"] { - &:hover { - cursor: default; - } + &:hover { + cursor: default; } + } } [data-scroll-to], [data-click-target] { - cursor: pointer; + cursor: pointer; } img, video { - height: auto; - max-width: 100%; - display: block; + height: auto; + max-width: 100%; + display: block; } figure, img { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } sup { - vertical-align: super; - font-size: smaller; + vertical-align: super; + font-size: smaller; } picture > * { - width: 100%; - height: auto; + width: 100%; + height: auto; } @mixin selection { - color: $black; - background: $brand; + color: $black; + background: $brand; } ::selection { - @include selection; + @include selection; } ::-moz-selection { - @include selection; + @include selection; } diff --git a/assets/css/base/_fonts.scss b/assets/css/base/_fonts.scss index d79949b..0843ea3 100644 --- a/assets/css/base/_fonts.scss +++ b/assets/css/base/_fonts.scss @@ -1,92 +1,45 @@ - - -@font-face { - font-family: 'sf-mono'; - src: url('../fonts/sfmono-medium-webfont.woff2') format('woff2'), - url('../fonts/sfmono-medium-webfont.woff') format('woff'); - font-weight: 500; - font-style: normal; -} -@font-face { - font-family: 'sf-mono'; - src: url('../fonts/sfmono-regular-webfont.woff2') format('woff2'), - url('../fonts/sfmono-regular-webfont.woff') format('woff'); - font-weight: 400; - font-style: normal; -} @font-face { - font-family: 'sf-mono'; - src: url('../fonts/SFMonoLight.woff') format('woff'); - font-weight: 300; + font-family: 'Noe'; + src: url('../fonts/NoeDisplay-Bold.woff2') format('woff2'), + url('../fonts/NoeDisplay-Bold.woff') format('woff'); + font-weight: 700; font-style: normal; } -// -// @font-face { -// font-family: 'fira'; -// src: url('../fonts/fira/FiraCode-Medium.woff2') format('woff2'), -// url('../fonts/fira/FiraCode-Medium.woff') format('woff'); -// font-weight: 500; -// font-style: normal; -// } -// @font-face { -// font-family: 'fira'; -// src: url('../fonts/fira/FiraCode-Light.woff2') format('woff2'), -// url('../fonts/fira/FiraCode-Light.woff') format('woff'); -// font-weight: 200; -// font-style: normal; -// } -// @font-face { -// font-family: 'fira'; -// src: url('../fonts/fira/FiraCode-Regular.woff2') format('woff2'), -// url('../fonts/fira/FiraCode-Regular.woff') format('woff'); -// font-weight: 400; -// font-style: normal; -// } @font-face { - font-family: 'alliance'; - src: url('../fonts/alliance-no-2-regular.woff2') format('woff2'), - url('../fonts/alliance-no-2-regular.woff') format('woff'); + font-family: 'theinhardt'; + src: url('../fonts/Theinhardt-Regular.woff2') format('woff2'), + url('../fonts/Theinhardt-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { - font-family: 'alliance'; - src: url('../fonts/alliance-no-2-regular-italic.woff2') format('woff2'), - url('../fonts/alliance-no-2-regular-italic.woff') format('woff'); + font-family: 'theinhardt'; + src: url('../fonts/Theinhardt-Italic.woff2') format('woff2'), + url('../fonts/Theinhardt-Italic.woff') format('woff'); font-weight: 400; font-style: italic; } - @font-face { - font-family: 'alliance'; - src: url('../fonts/alliance-no-2-medium.woff2') format('woff2'), - url('../fonts/alliance-no-2-medium.woff') format('woff'); + font-family: 'theinhardt'; + src: url('../fonts/Theinhardt-Medium.woff2') format('woff2'), + url('../fonts/Theinhardt-Medium.woff') format('woff'); font-weight: 500; font-style: normal; } @font-face { - font-family: 'alliance'; - src: url('../fonts/alliance-no-2-semibold.woff2') format('woff2'), - url('../fonts/alliance-no-2-semibold.woff') format('woff'); - font-weight: 600; - font-style: normal; -} - -@font-face { - font-family: 'alliance'; - src: url('../fonts/alliance-no-2-bold.woff2') format('woff2'), - url('../fonts/alliance-no-2-bold.woff') format('woff'); + font-family: 'theinhardt'; + src: url('../fonts/Theinhardt-Bold.woff2') format('woff2'), + url('../fonts/Theinhardt-Bold.woff') format('woff'); font-weight: 700; font-style: normal; } - @font-face { - font-family: 'alliance'; - src: url('../fonts/alliance-no-2-extrabold.woff2') format('woff2'), - url('../fonts/alliance-no-2-extrabold.woff') format('woff'); - font-weight: 800; - font-style: normal; + font-family: 'theinhardt'; + src: url('../fonts/Theinhardt-Bold-Italic.woff2') format('woff2'), + url('../fonts/Theinhardt-Bold-Italic.woff') format('woff'); + font-weight: 700; + font-style: italic; } diff --git a/assets/css/base/_links.scss b/assets/css/base/_links.scss index 63ee2ee..6b6e6c6 100644 --- a/assets/css/base/_links.scss +++ b/assets/css/base/_links.scss @@ -11,36 +11,23 @@ justify-content: center; font-size: 14px; - font-weight: 600; - padding: 13px 12px 15px; + font-weight: 500; + padding: 15px 12px 13px; min-width: 240px; overflow: hidden; background: transparent; border-radius: 0; - border: 2px solid $white; - border-left: none; - color: $white; + border: 2px solid $brand; + background: $brand; + + color: $black; -webkit-transition: background $trans, border-color $trans, color $trans; transition: background $trans, border-color $trans, color $trans; - - &:before, - &:after { - content: ''; - width: 2px; - height: 16px; - position: absolute; - background: $white; - left: 0; - top: 0; - transition: transform $trans; - z-index: -1; - } - &:after { - top: auto; - bottom: 0; + @include stop-at($small) { + width: 100%; } @include start-at($xlarge) { @@ -57,10 +44,11 @@ svg { position: relative; z-index: 2; + fill: currentColor; } @include stop-at($small) { - &.button--full--sm { + &.btn--full--sm { width: 100%; } } @@ -82,6 +70,10 @@ fill: currentColor; transform: translate3d(0, 2px, 0); transition: transform $trans; + + * { + fill: currentColor; + } } img, svg { @@ -91,8 +83,8 @@ &:hover { cursor: pointer; - background: $white; - color: $black; + background: transparent; + color: $brand; span + svg { transform: translate3d(3px, 2px, 0); @@ -104,21 +96,145 @@ } } - &:not(.button--sm) { - min-width: 160px; + &[disabled] { + opacity: 0.6; + &:hover { + background: $brand; + color: $black; + cursor: default; + } } - &.button--lg { +} + +@mixin btn-alt { + font-family: $sans-serif; + position: relative; + z-index: 1; + display: inline-flex; + align-items: center; + justify-content: center; + + font-size: 14px; + font-weight: 500; + padding: 14px 12px; + min-width: 240px; + + overflow: hidden; + border-radius: 0; + border: 2px solid $brand; + border-left: none; + border-right: none; + background: transparent; + + color: $brand; + transition: background $trans, border-color $trans, color $trans; + + @include start-at($xlarge) { + font-size: 16px; + padding: 13px 32px 15px; + } + + div { display: flex; - width: 330px; + align-items: center; + justify-content: center; + width: 100%; + } + + div:before, + div:after, + &:before, + &:after { + content: ''; + width: 2px; + height: 30%; + position: absolute; + background: $brand; + left: 0; + top: 0; + transition: height $trans; + z-index: -1; + } + + div:before, + div:after { + left: auto; + right: 0; + } + &:after, + div:after { + top: auto; + bottom: 0; + } + + svg { + position: relative; + z-index: 2; + fill: currentColor; + transition: transform $trans; + + * { + fill: currentColor; + transition: transform $trans; + } + } + + svg + span, + span + svg, + img + span, + span + img { + margin-left: 8px; } -} -.button { + img, svg { + -webkit-transition: transform $trans; + transition: transform $trans; + } + + &:hover { + cursor: pointer; + + span + svg { + transform: translate3d(3px, 0, 0); + } + + &:before, + &:after, + div:before, + div:after { + height: 50%; + } + } + +} +.btn { @include btn; } -.button--static { +.btn-alt { + @include btn-alt; +} + + +.btn--scroll { + background: transparent; + color: $brand; + + svg { + display: block; + transform-origin: center; + transform: translate3d(0, 0, 0) rotate(90deg); + } + + &:hover { + svg { + transform: translate3d(0, 3px, 0) rotate(90deg) !important; + } + } +} + +.btn--static { &:hover { span + svg { @@ -128,7 +244,7 @@ } -.button--sm { +.btn--sm { padding: 2px 16px; height: 40px; min-width: 120px; @@ -139,13 +255,29 @@ } } -.button--wide { +.btn--wide { width: 100%; max-width: 330px; } +@include stop-at($small){ + .btn--full-sm { + width: 100%; + margin: 0 !important; + + + .btn--full-sm { + margin: 18px 0 0 !important; + } + } +} + +.btn--grow { + min-width: 120px; + width: 100%; +} + -.button--spin { +.btn--spin { img, svg { width: 12px; height: 12px; @@ -160,13 +292,19 @@ } } +.bg-white { + + .btn:hover { + color: $black; + } +} .icon-link { display: inline-flex; align-items: center; justify-content: flex-start; font-size: 14px; - font-weight: 600; + font-weight: 500; transition: opacity $trans; @include start-at($large) { @@ -203,20 +341,6 @@ } -.button--outline { - background: $white !important; - color: $black; - border: 1px solid #D1D5DA; - - &:before { - background: $white; - } - - &:hover { - color: $white; - } -} - a:hover { .icon-link { span + svg { @@ -232,7 +356,7 @@ a:hover .icon-link.icon-link--static, } } -.button--white { +.btn--white { &:hover { color: $white; @@ -249,8 +373,8 @@ a:hover .icon-link.icon-link--static, display: inline-flex; justify-content: flex-start; align-items: center; - font-weight: 600; - font-size: 14px; + font-weight: 500; + font-size: 16px; svg { display: block; @@ -288,7 +412,7 @@ a:hover .icon-link.icon-link--static, p a { text-decoration: underline; transition: opacity $trans; - color: inherit; + color: #1F44D2; &:hover { opacity: 0.6; @@ -296,6 +420,12 @@ p a { } } +.bg-static, .bg-black { + p a { + color: $brand; + } +} + .icon-link { display: inline-flex; align-items: center; diff --git a/assets/css/base/_type.scss b/assets/css/base/_type.scss index b665798..051343b 100644 --- a/assets/css/base/_type.scss +++ b/assets/css/base/_type.scss @@ -6,96 +6,115 @@ /* A community dedicated to advancing diversity, equity, and inclusion within open source. */ - - .h1 { display: block; - font-family: $mono; - font-weight: 300 !important; - font-size: 44px !important; - line-height: 1; + font-family: $serif; + font-weight: 700; + font-size: 48px !important; + line-height: 125%; letter-spacing: 0; - text-decoration-line: underline; - text-transform: uppercase; - color: #FFFFFF; + + margin-bottom: 16px; + + &:last-child { + margin-bottom: 0; + } @include start-at($large) { - font-size: 64px !important; + font-size: 88px !important; } } .h2 { display: block; - font-family: $mono; - font-weight: 300 !important; - font-size: 36px !important; - line-height: 1; + font-family: $serif; + font-weight: 700; + font-size: 48px !important; + line-height: 1.2; letter-spacing: 0; - text-decoration-line: underline; - text-transform: uppercase; - color: #FFFFFF; + + margin-bottom: 16px; + + &:last-child { + margin-bottom: 0; + } @include start-at($large) { - font-size: 48px !important; + font-size: 72px !important; } } .h3 { - font-family: $sans-serif; - font-weight: 800 !important; - font-size: 24px !important; - letter-spacing: -0.2px; - line-height: 1.25; - color: $black; + display: block; + font-family: $serif; + font-weight: 700; + font-size: 36px !important; + line-height: 125%; + letter-spacing: 0; + margin-bottom: 16px; - @include start-at($medium) { - font-size: 32px !important;; + &:last-child { + margin-bottom: 0; + } + + @include start-at($large) { + font-size: 40px !important; } } .h4 { - font-family: $sans-serif; - font-weight: 600 !important; - font-size: 18px !important; - line-height: 1.25; - color: $black; + display: block; + font-family: $serif; + font-weight: 700; + font-size: 24px !important; + line-height: 125%; + letter-spacing: 0; + margin-bottom: 16px; - @include start-at($medium) { - font-size: 24px !important;; + &:last-child { + margin-bottom: 0; } } .h5 { font-family: $sans-serif; - font-weight: 500 !important; - font-size: 14px !important; - letter-spacing: -0.1px; + font-weight: 700 !important; + font-size: 16px !important; + letter-spacing: 1px; line-height: 1.25; + text-transform: uppercase; + + margin-bottom: 16px; + + &:last-child { + margin-bottom: 0; + } @include start-at($medium) { - font-size: 16px !important;; + font-size: 20px !important;; } } .h6 { font-family: $sans-serif; - font-weight: 500 !important; - font-size: 10px !important; + font-weight: 700 !important; + font-size: 14px !important; letter-spacing: 1px; line-height: 1.25; text-transform: uppercase; @include start-at($medium) { - font-size: 12px !important;; + font-size: 16px !important;; } } + // ---------------------------------------- // Paragraph Style Mixins // ---------------------------------------- @@ -111,7 +130,6 @@ @include start-at($medium) { font-size: 20px; } - } @@ -141,7 +159,7 @@ p { } a { - color: var(--color-scale-gray-5); + color: #1F44D2; } .text-white & { @@ -170,14 +188,25 @@ p { .p-lg { @include para; - color: var(--color-scale-gray-5); - font-size: 16px; + font-size: 18px; line-height: 1.5; letter-spacing: 0; font-weight: 400; @include start-at($large) { - font-size: 20px; + font-size: 24px; + } +} + +.p-xlg { + @include para; + font-size: 24px; + line-height: 1.5; + letter-spacing: 0; + font-weight: 400; + + @include start-at($large) { + font-size: 32px; } } @@ -189,38 +218,40 @@ small { } -.text-display { - //font-family: $display; -} - - .text-content { > * { margin-bottom: 16px; } } -.font-mono { - font-family: $mono; - font-weight: 400 !important; -} -.long-form { +.long-form, +.rte { p { margin-bottom: 16px; - font-size: 16px; + + &:last-child { + margin-bottom: 0; + } } li { - font-size: 16px; - margin-bottom: 12px; + margin-bottom: 6px; + + &:last-child { + margin-bottom: 0; + } } ul { list-style: initial; - padding-left: 48px; + padding-left: 36px; margin: 24px 0; + + &:last-child { + margin-bottom: 0; + } } ol { @@ -232,9 +263,6 @@ small { } -.font-weight-600 { - font-weight: 600 !important; -} .font-weight-800 { font-weight: 800 !important; } @@ -263,3 +291,24 @@ small { .font-italic { font-style: italic; } + + +.h1, .h2 { + u { + position: relative; + text-decoration: none; + z-index: 1; + display: inline-flex; + + &:after { + content: ''; + position: absolute; + display: block; + height: 16px; + width: 100%; + background: $brand; + bottom: 16px; + z-index: -2; + } + } +} diff --git a/assets/css/index.scss b/assets/css/index.scss index 8559839..67d94ed 100644 --- a/assets/css/index.scss +++ b/assets/css/index.scss @@ -11,8 +11,18 @@ // // ---------------------------------------- +@import "@primer/css/support/variables/layout.scss"; +@import "@primer/css/support/mixins/layout.scss"; +@import "@primer/css/layout/index.scss"; +@import "@primer/css/utilities/colors.scss"; +@import "@primer/css/utilities/flexbox.scss"; +@import "@primer/css/utilities/margin.scss"; +@import "@primer/css/utilities/padding.scss"; +@import "@primer/css/utilities/visibility-display.scss"; + + @import "base/_fonts"; -@import '@primer/css/core/index.scss'; +//@import '@primer/css/core/index.scss'; @import "base/_mixins"; @import "./_settings"; @@ -27,6 +37,7 @@ // ---------------------------------------- @import "layout/_wrappers"; @import "layout/_header"; +@import "layout/_grid"; // ---------------------------------------- // Modules @@ -35,13 +46,15 @@ @import "modules/_heros"; @import "modules/_oneoffs"; @import "modules/_media"; -@import "modules/_impact"; -@import "modules/_insights"; + +@import "modules/_list"; + @import "modules/_modal"; @import "modules/_forms"; @import "modules/_carousel"; -@import "modules/_blog"; +@import "modules/_form-split"; + @import "layout/_footer"; @import "modules/_utils"; diff --git a/assets/css/layout/_footer.scss b/assets/css/layout/_footer.scss index 760f96b..ea15b1f 100644 --- a/assets/css/layout/_footer.scss +++ b/assets/css/layout/_footer.scss @@ -2,23 +2,101 @@ // Site Footer Styles // --------------------------------------------------------------------- -.footer { - background: $black; +.site-footer { + background: $gray-darkest url('../img/direction/static.jpg') center / cover no-repeat; color: $white; border-top: 1px solid #2F3138; - ul a { - color: var(--color-scale-gray-4); + a { + color: $white; transition: color $trans; &:hover { - color: $white; - text-decoration: underline; + color: $brand; + } + } + + a, small { + font-size: 15px; + font-weight: 500; + } + + .wrapper { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: 20px 0; + + @include start-at($large) { + justify-content: space-between; + } + } +} + +.site-footer__legal { + text-align: center; + order: 3; + width: 100%; + + img { + display: none; + } + + @include start-at($large) { + display: flex; + align-items: center; + justify-content: center; + width: 220px; + text-align: left; + order: 1; + + img { + display: block; + margin-right: 12px; } } } -.bg-gray-light { - background: #24292E; - color: var(--color-scale-gray-4); +.site-footer nav { + text-align: center; + margin: 18px 0; + order: 2; + width: 100%; + + @include start-at($large) { + width: calc(100% - 440px); + margin: 0; + } +} + +.social-list { + display: flex; + align-items: center; + justify-content: center; + order: 1; + width: 100%; + + li { + margin: 0 12px; + } + + @include start-at($large) { + justify-content: flex-end; + order: 3; + width: 220px; + + li { + margin: 0 0 0 24px; + } + } + + + + a { + color: $white; + + &:hover { + color: $brand; + } + } } diff --git a/assets/css/layout/_grid.scss b/assets/css/layout/_grid.scss new file mode 100644 index 0000000..81c2da7 --- /dev/null +++ b/assets/css/layout/_grid.scss @@ -0,0 +1,284 @@ +// --------------------------------------------------------------------- +// Grid +// --------------------------------------------------------------------- + +$grid-columns: 12; +$grid-gutter-width: 36px; + + +// [converter] This is defined recursively in LESS, but Sass supports real loops +@mixin make-grid-columns($i: 1, $list: ".col--xs--#{$i}, .col--sm--#{$i}, .col--md--#{$i}, .col--lg--#{$i}") { + @for $i from (1 + 1) through $grid-columns { + $list: "#{$list}, .col--xs--#{$i}, .col--sm--#{$i}, .col--md--#{$i}, .col--lg--#{$i}"; + } + #{$list} { + position: relative; + min-height: 1px; + padding-left: ceil(($grid-gutter-width / 2)); + padding-right: floor(($grid-gutter-width / 2)); + } +} + + +// [converter] This is defined recursively in LESS, but Sass supports real loops +@mixin float-grid-columns($class, $i: 1, $list: ".col--#{$class}--#{$i}") { + @for $i from (1 + 1) through $grid-columns { + $list: "#{$list}, .col--#{$class}--#{$i}"; + } +} + + +@mixin calc-grid-column($index, $class, $type) { + @if ($type == width) and ($index > 0) { + .col--#{$class}--#{$index} { + width: percentage(($index / $grid-columns)); + } + } + @if ($type == push) and ($index > 0) { + .col--#{$class}--push--#{$index} { + left: percentage(($index / $grid-columns)); + } + } + @if ($type == push) and ($index == 0) { + .col--#{$class}--push--0 { + left: auto; + } + } + @if ($type == pull) and ($index > 0) { + .col--#{$class}--pull--#{$index} { + right: percentage(($index / $grid-columns)); + } + } + @if ($type == pull) and ($index == 0) { + .col--#{$class}--pull--0 { + right: auto; + } + } + @if ($type == offset) { + .col--#{$class}--offset--#{$index} { + margin-left: percentage(($index / $grid-columns)); + } + } +} + +// [converter] This is defined recursively in LESS, but Sass supports real loops +@mixin loop-grid-columns($columns, $class, $type) { + @for $i from 0 through $columns { + @include calc-grid-column($i, $class, $type); + } +} + + +// Create grid for specific class +@mixin make-grid($class) { + @include float-grid-columns($class); + @include loop-grid-columns($grid-columns, $class, width); + @include loop-grid-columns($grid-columns, $class, pull); + @include loop-grid-columns($grid-columns, $class, push); + @include loop-grid-columns($grid-columns, $class, offset); +} + + +// Grid system +// +// Generate semantic grid columns with these mixins. + + +// ---------------------------------------- +// Centered container element +// ---------------------------------------- +@mixin container-fixed($gutter: $grid-gutter-width) { + margin-right: auto; + margin-left: auto; + padding-left: floor(($gutter / 2)); + padding-right: ceil(($gutter / 2)); + @include clearfix; +} + + +// ---------------------------------------- +// Creates a wrapper for a series of columns +// ---------------------------------------- +@mixin make-row($gutter: $grid-gutter-width) { + margin-left: ceil(($gutter / -2)); + margin-right: floor(($gutter / -2)); + @include clearfix; +} + +// ---------------------------------------- +// Generate the extra small columns +// ---------------------------------------- +@mixin make-xs-column($columns, $gutter: $grid-gutter-width) { + position: relative; + float: left; + width: percentage(($columns / $grid-columns)); + min-height: 1px; + padding-left: ($gutter / 2); + padding-right: ($gutter / 2); +} +@mixin make-xs-column-offset($columns) { + margin-left: percentage(($columns / $grid-columns)); +} +@mixin make-xs-column-push($columns) { + left: percentage(($columns / $grid-columns)); +} +@mixin make-xs-column-pull($columns) { + right: percentage(($columns / $grid-columns)); +} + + +// ---------------------------------------- +// Generate the small columns +// ---------------------------------------- + +@mixin make-sm-column($columns, $gutter: $grid-gutter-width) { + position: relative; + min-height: 1px; + padding-left: ($gutter / 2); + padding-right: ($gutter / 2); + + @include start-at($small) { + float: left; + width: percentage(($columns / $grid-columns)); + } +} +@mixin make-sm-column-offset($columns) { + @include start-at($small) { + margin-left: percentage(($columns / $grid-columns)); + } +} +@mixin make-sm-column-push($columns) { + @include start-at($small) { + left: percentage(($columns / $grid-columns)); + } +} +@mixin make-sm-column-pull($columns) { + @include start-at($small) { + right: percentage(($columns / $grid-columns)); + } +} + + +// ---------------------------------------- +// Generate the medium columns +// ---------------------------------------- + +@mixin make-md-column($columns, $gutter: $grid-gutter-width) { + position: relative; + min-height: 1px; + padding-left: ($gutter / 2); + padding-right: ($gutter / 2); + + @include start-at($medium) { + float: left; + width: percentage(($columns / $grid-columns)); + } +} +@mixin make-md-column-offset($columns) { + @include start-at($medium) { + margin-left: percentage(($columns / $grid-columns)); + } +} +@mixin make-md-column-push($columns) { + @include start-at($medium) { + left: percentage(($columns / $grid-columns)); + } +} +@mixin make-md-column-pull($columns) { + @include start-at($medium) { + right: percentage(($columns / $grid-columns)); + } +} + + +// ---------------------------------------- +// Generate the large columns +// ---------------------------------------- + +@mixin make-lg-column($columns, $gutter: $grid-gutter-width) { + position: relative; + min-height: 1px; + padding-left: ($gutter / 2); + padding-right: ($gutter / 2); + + @include start-at($large) { + float: left; + width: percentage(($columns / $grid-columns)); + } +} +@mixin make-lg-column-offset($columns) { + @include start-at($large) { + margin-left: percentage(($columns / $grid-columns)); + } +} +@mixin make-lg-column-push($columns) { + @include start-at($large) { + left: percentage(($columns / $grid-columns)); + } +} +@mixin make-lg-column-pull($columns) { + @include start-at($large) { + right: percentage(($columns / $grid-columns)); + } +} + + +// -------------------------------------------------- +// Grid system +// -------------------------------------------------- + +.row { + @include make-row; + display: flex; + flex-wrap: wrap; +} + +.row--align-center { + align-items: center; +} + +.row--flush { + @include make-row; + *[class*='col--xs--'], + *[class*='col--sm--'], + *[class*='col--md--'], + *[class*='col--lg--'] { + padding-left: 0; + padding-right: 0; + } + margin-left: 0; + margin-right: 0; +} + + +// Columns +// Common styles for small and large grid columns +@include make-grid-columns; + + +// Extra small grid +// Columns, offsets, pushes, and pulls for extra small devices like +// smartphones. +@include make-grid(xs); + + +// Small grid +// Columns, offsets, pushes, and pulls for the small device range, from phones +// to tablets. +@include start-at($small) { + @include make-grid(sm); +} + + +// Medium grid +// Columns, offsets, pushes, and pulls for the desktop device range. +@include start-at($medium) { + @include make-grid(md); +} + + +// Large grid +// Columns, offsets, pushes, and pulls for the large desktop device range. +@include start-at($large) { + @include make-grid(lg); +} diff --git a/assets/css/layout/_header.scss b/assets/css/layout/_header.scss index 3004f27..229a695 100644 --- a/assets/css/layout/_header.scss +++ b/assets/css/layout/_header.scss @@ -3,60 +3,60 @@ // --------------------------------------------------------------------- $header-height: 64px; - -body { - padding-top: $header-height; -} +$header-height-lg: 80px; .site-header { - position: absolute; - display: block; + position: fixed; + display: block; z-index: 10; width: 100%; left: 0; top: 0; - transition: opacity $trans; - - @include stop-at($header-breakpoint) { - background: $black; - } - - &.is-sticky { - opacity: 0; - - &.scrolling-up { - //background: $black; - opacity: 1; - } - } + transition: opacity $trans, background $trans; + color: $white; } body { &.is-sticky { - .site-header { - margin-top: 0; - opacity: 0; - - } - } - &.scrolling-up { - .site-header { - //background: $black; - opacity: 1; - } - } + .site-header { + margin-top: 0; + opacity: 0; + background: $black; + > .container-wide { + height: $header-height; + } + } + } + &.scrolling-up { + .site-header { + opacity: 1; + } + } } .site-header > .container-wide { - padding: 16px $wrapper-padding; - height: $header-height; - //background: $black; + padding: 0 $wrapper-padding; + height: $header-height-lg; + //background: $black; display: flex; align-items: center; justify-content: space-between; + transition: height $trans; + + @include start-at($large) { + height: $header-height-lg; + } +} + +body.is-sticky { + .site-header { + + } +} - @include start-at(1600px) { - padding: 16px 72px; +body.menu-is-active { + .site-header { + background: url('../img/direction/static.jpg') center / cover no-repeat; } } @@ -89,9 +89,13 @@ $max-logo-width: 168px; width: 100%; } + @include start-at($header-breakpoint) { - width: 40%; - min-width: 40%; + width: 25%; + } + + @include start-at($large) { + width: 20%; } } @@ -105,17 +109,18 @@ $max-logo-width: 168px; width: 80%; display: flex; align-items: center; - justify-content: flex-end; + justify-content: center; @include stop-at($header-breakpoint) { - justify-content: center; - text-align: center; - width: 100%; - display: none; + display: none; + } + + @include start-at($header-breakpoint) { + width: 50%; } - .octicon-mail { - transform: translate3d(0, 1px, 0); + @include start-at($large) { + width: 60%; } li { @@ -135,76 +140,87 @@ $max-logo-width: 168px; } .has-sub-nav > div, - a:not(.button) { - position: relative; + a:not(.btn-alt) { + position: relative; font-size: 14px; - color: $black; - font-family: $sans-serif; - font-weight: 600; + color: currentColor; + font-family: $sans-serif; + font-weight: 500; display: flex; - align-items: center; - justify-content: flex-end; + align-items: center; + justify-content: flex-end; padding: 12px 4px; transition: color $trans; position: relative; text-decoration: none; - // &:after { - // content: ''; - // position: absolute; - // bottom: 4px; - // left: 15%; - // width: 70%; - // height: 1px; - // display: block; - // transform: scaleX(0); - // transform-origin: center; - // background: linear-gradient(90deg, rgba(121,184,255,1) 23%, rgba(190,245,202,1) 100%);; - // transition: transform $trans; - // } - - @include start-at(1600px) { + @include start-at(1600px) { font-size: 16px; } - svg { - width: 16px; - min-width: 16px; - fill: currentColor; - margin-left: 4px; - transform: translate3d(0, 2px, 0); - transition: transform $trans; + } + + li.is-active { + a { + color: $white; + + &:before { + opacity: 1; + transform: translate3d(-6px, 0, 0); + } + &:after { + opacity: 1; + transform: translate3d(6px, 0, 0); + } } + } +} - &:hover { - color: var(--color-scale-gray-8); +.desktop-navigation a:not(.btn-alt), +.mobile-navigation a:not(.btn) { + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; + padding: 12px 4px; - svg { - transform: translate3d(3px, 2px, 0); - } + &:before, + &:after { + content: '{'; + color: $brand; + display: block; + font-weight: 500; + opacity: 0; + transition: transform $trans, opacity $trans; + } - &:after { - transform: scaleX(1); - } - } + &:after { + content: '}'; } - a.has-icon { + &:hover { + color: var(--color-scale-gray-8); + + &:before { + opacity: 1; + transform: translate3d(-6px, 0, 0); + } &:after { - display: none; + opacity: 1; + transform: translate3d(6px, 0, 0); } } +} - li.is-active, - li.current-menu-item { - a { - color: $white; - text-decoration-color: $white; - - &:after { - transform: scaleX(1); - } - } +.desktop-navigation li.is-active a:not(.btn-alt), +.mobile-navigation li.is-active a:not(.btn) { + &:before { + opacity: 1; + transform: translate3d(-6px, 0, 0); + } + &:after { + opacity: 1; + transform: translate3d(6px, 0, 0); } } @@ -218,6 +234,16 @@ $max-logo-width: 168px; justify-content: flex-end; align-items: center; + .btn-alt { + height: 44px; + padding: 0 12px; + min-width: 168px; + + @include stop-at($header-breakpoint) { + display: none; + } + } + .has-sub-nav { position: relative; font-size: 14px; @@ -234,8 +260,7 @@ $max-logo-width: 168px; } @include start-at($header-breakpoint) { - display: none; - width: 50%; + width: 25%; } @include start-at($large) { @@ -253,13 +278,13 @@ $max-logo-width: 168px; width: 100%; right: 0; background: rgba($black, 0.96); + background: url('../img/direction/static.jpg') center / cover no-repeat; z-index: 10; bottom: $header-height; top: $header-height; padding-bottom: $header-height; overflow-x: hidden; overflow-y: auto; - //opacity: 0; pointer-events: none; transition: transform $trans, opacity $trans; transform: translate3d(100%, 0, 0); @@ -280,6 +305,18 @@ $max-logo-width: 168px; width: 1px; } + &:after { + content: ''; + width: 180px; + height: 180px; + position: absolute; + bottom: 72px; + right: -24px; + background: url('../img/direction/orb-blue.svg') center / cover no-repeat; + z-index: -1; + transform: rotate(-45deg); + } + > div { min-height: 100%; display: flex; @@ -302,6 +339,7 @@ $max-logo-width: 168px; } .btn { + width: 100%; margin: 48px 0; } } @@ -320,10 +358,11 @@ $max-logo-width: 168px; .mobile-navigation { text-align: right; padding: 40px 0; + flex-grow: 1; a { - font-size: 16px; - font-weight: 500; + font-size: 24px; + font-weight: 700; color: $white; display: inline-flex; align-items: center; @@ -331,10 +370,6 @@ $max-logo-width: 168px; padding: 4px 0; transition: color $trans; - &:hover { - color: var(--color-scale-gray-5); - } - svg { fill: currentColor; margin-right: 8px; @@ -480,10 +515,19 @@ $max-logo-width: 168px; position: relative; width: 40px; height: 40px; - display: block; + display: flex; + align-items: center; + justify-content: center; - img { - width: 24px; + @include start-at($header-breakpoint) { + display: none; + } + + svg { + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); } span { diff --git a/assets/css/modules/_animateIn.scss b/assets/css/modules/_animateIn.scss index 7c42f32..9f41251 100644 --- a/assets/css/modules/_animateIn.scss +++ b/assets/css/modules/_animateIn.scss @@ -2,57 +2,75 @@ // Animate In // --------------------------------------------------------------------- -*[data-animate-in="up"] { - opacity: 0; - transform: translate3d(0, 24px, 0); - transition: transform 0.3s ease-out, opacity 0.3s ease-out; - &.in-view { - opacity: 1; - transform: translate3d(0, 0, 0); - } +[data-animate-in="up"] { + opacity: 0; + transition: opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); + transform: scale(.96) translateY(24px); + + &.in-view { + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +[data-animate-in="left"] { + opacity: 0; + transition: opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); + transform: scale(.96) translateX(-24px); + + &.in-view { + transform: translate3d(0, 0, 0); + opacity: 1; + } } -*[data-animate-in="down"] { - opacity: 0; - transform: translate3d(0, -24px, 0); - transition: transform 0.3s ease-out, opacity 0.3s ease-out; +[data-animate-in="right"] { + opacity: 0; + transition: opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); + transform: scale(.96) translateX(24px); - &.in-view { - opacity: 1; - transform: translate3d(0, 0, 0); - } + &.in-view { + transform: translate3d(0, 0, 0); + opacity: 1; + } } -*[data-animate-in="fade"] { - opacity: 0; - transition: opacity 0.4s ease-out; +[data-animate-in="down"] { + opacity: 0; + transition: opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); + transform: scale(.96) translateY(-24px); - &.in-view { - opacity: 1; - } + &.in-view { + transform: translate3d(0, 0, 0); + opacity: 1; + } } -*[data-animate-in="left"] { - opacity: 0; - transform: translate3d(-24px, 0, 0); - transition: transform 0.3s ease-out, opacity 0.3s ease-out; - transition-delay: 0.4s; +[data-animate-in="fade"] { + //transform: translate3d(0, 0, 0); + opacity: 0; + transition: opacity .8s ease-in-out; - &.in-view { - opacity: 1; - transform: translate3d(0, 0, 0); - } + &.in-view { + opacity: 1; + } } -*[data-animate-in="right"] { - opacity: 0; - transform: translate3d(24px, 0, 0); - transition: transform 0.3s ease-out, opacity 0.3s ease-out; - transition-delay: 0.4s; - &.in-view { - opacity: 1; - transform: translate3d(0, 0, 0); - } +.fade-in { + opacity: 0; + transition: opacity 1s ease; +} + +.page-loaded .fade-in, +.page-loaded.fade-in { + opacity: 1; +} + +.isSafari.isTouch [data-animate-in], +.isSafari.isTouch [data-animate-in="up"] { + opacity: 1; + transition: none; + transform: none; } diff --git a/assets/css/modules/_blog.scss b/assets/css/modules/_blog.scss deleted file mode 100644 index 09af508..0000000 --- a/assets/css/modules/_blog.scss +++ /dev/null @@ -1,199 +0,0 @@ -// --------------------------------------------------------------------- -// -// --------------------------------------------------------------------- - - -.back-to-all { - color: $white; - position: absolute; - top: 40px; - left: 50%; - transform: translate3d(-50%, 0, 0); - - .icon-link { - display: flex; - - svg { - transform: translate3d(0, 3px, 0); - } - } -} - -.blog-header { - background: $black; - position: relative; - z-index: 1; - - &:after { - content: ''; - display: block; - width: 100%; - height: 100px; - bottom: 0; - left: 0; - background: $white; - z-index: 1; - position: absolute; - - @include start-at($medium) { - height: 180px; - } - @include start-at($large) { - height: 280px; - } - } -} - -.blog-header--no-img { - padding-bottom: 72px; - - &:after { - display: none; - } -} - -.blog-header__content { - max-width: 1032px; - margin: 0 auto; - width: 92%; - padding: 120px 0 0; - color: $white; - position: relative; - z-index: 2; - - @include start-at($large) { - padding: 180px 0 0; - } -} - -.blog-header__image { - margin-top: 90px; - overflow: hidden; - position: relative; - height: 0; - width: 100%; - padding-bottom: 52%; - - img { - object-fit: cover; - width: 100%; - height: 100%; - position: absolute; - } -} - - -.blog__content { - @include wrapper; - max-width: 820px; - margin-bottom: 120px; - - .author { - figure { - width: 48px !important; - height: 48px !important; - min-width: 48px !important; - } - - span { - display: inline-block !important; - font-size: 14px !important; - - @include start-at($medium) { - font-size: 14px !important; - } - } - - p { - font-size: 18px !important; - margin-bottom: 4px !important; - - @include start-at($medium) { - font-size: 24px !important; - - } - } - } - - .blog__meta { - p.font-mono { - font-weight: 200 !important; - font-size: 14px !important; - } - } -} - -.longform { - img { - width: 100%; - margin: 36px 0; - } - - h1, h2, h3, h4 { - margin-top: 36px; - - + p { - margin-top: 18px; - } - } - - strong, b { - font-weight: 600; - } - - blockquote { - margin: 36px 0; - position: relative; - z-index: 1; - - &:before { - content:'“'; - position: absolute; - top: 0; - left: 0; - transform: translateX(-100%); - - @include start-at($medium) { - transform: translateX(-150%); - } - } - - &:before, - p { - font-family: $sans-serif; - font-weight: 700 !important; - font-size: 24px !important; - letter-spacing: -0.2px; - line-height: 1.25; - color: $black; - - @include start-at($medium) { - font-size: 48px !important;; - } - } - } - - small { - font-weight: 200 !important; - font-size: 16px !important; - } - - ul, ol { - @include para; - color: var(--color-text-secondary); - list-style-type: disc; - padding-left: 24px; - margin: 18px 0; - line-height: 1.6; - } - - ol { - list-style-type: decimal; - } -} - - - -// ---------------------------------------- -// -// ---------------------------------------- diff --git a/assets/css/modules/_form-split.scss b/assets/css/modules/_form-split.scss new file mode 100644 index 0000000..4dacf76 --- /dev/null +++ b/assets/css/modules/_form-split.scss @@ -0,0 +1,99 @@ +// --------------------------------------------------------------------- +// +// --------------------------------------------------------------------- + +body.become-a-partner, +body.all-in-for-maintainers-listening-tour { + background: $gray-darkest url('../img/direction/static.jpg') center / auto repeat; + + .site-header { + // background: $gray-darkest url('../img/direction/static.jpg') center / cover no-repeat; + } +} + +.form-split { + min-height: calc(100vh - 150px); + + @include start-at($large) { + display: flex; + align-items: stretch; + min-height: calc(100vh - 80px); + } +} + +.form-split__content { + color: $white; + padding: 180px $wrapper-padding 48px; + background: url('../img/direction/pattern-dark.svg') top center / 70% auto repeat-y; + + .logo-list { + > * { + width: calc(100% / 2); + margin: 20px 0; + + @include start-at($small) { + width: calc(100% / 3); + } + + @include start-at($medium) { + width: calc(100% / 3); + } + } + + img { + filter: grayscale(100%) brightness(0) invert(1); + } + } + + > * { + max-width: 492px; + margin: 0 auto; + } + + @include start-at($large) { + width: 45%; + padding: 256px $wrapper-padding 48px; + + > * { + max-width: 492px; + margin: 0 auto; + } + } +} + +@media (min-width: $large) and (min-height: 860px) { + .form-split__content > * { + position: sticky; + top: 120px; + } +} + +.form-split__form { + background: $white; + position: relative; + z-index: 1; + overflow: hidden; + padding: 36px $wrapper-padding 48px; + + @include start-at($large) { + width: 55%; + padding: 80px $wrapper-padding 120px; + background: transparent; + + > * { + max-width: 601px; + } + + &:after { + content: ''; + @include cover-parent; + z-index: -1; + background: $white; + top: $header-height-lg; + } + } +} + +// ---------------------------------------- +// +// ---------------------------------------- diff --git a/assets/css/modules/_forms.scss b/assets/css/modules/_forms.scss index 227fe17..cacc6cb 100644 --- a/assets/css/modules/_forms.scss +++ b/assets/css/modules/_forms.scss @@ -15,6 +15,9 @@ max-width: 530px; } +form { + font-size: 16px; +} .form-body { @@ -36,15 +39,14 @@ div.mce_inline_error { } - #mce-success-response { color: var(--color-scale-green-5) !important; } .response#mce-error-response { - font-size: 11px; + font-size: 16px; margin-top: 8px; - color: var(--color-scale-red-4); + color: $error; a { text-decoration: underline; @@ -52,80 +54,211 @@ div.mce_inline_error { } .response#mce-success-response { - font-size: 14px; + font-size: 24px; margin-top: 8px; - color: var(--color-scale-green-5); + a { text-decoration: underline; } } +// ---------------------------------------- +// Groups and labels +// ---------------------------------------- -.field-group { +.field-group, +.mc-field-group { display: block; flex-grow: 1; position: relative; - margin-bottom: 12px; + margin-bottom: 24px; + width: 100%; label { font-family: $sans-serif; font-weight: 700; font-size: 16px; + + span { + display: block; + font-weight: 400; + } } } +.field-group-two { -.subscribe-form { - button { + @include start-at($medium) { + display: flex; + align-items: flex-start; + justify-content: space-between; - @include btn; - width: 240px; - min-width: 240px !important; - max-width: 240px; + > * { + width: calc(50% - 18px); + max-width: calc(50% - 18px); + margin-top: 0 !important; + } - height: 56px; - - padding: 0; - margin-top: 36px; + } +} - &:focus { - outline: none; - } +// ---------------------------------------- +// Inputs +// ---------------------------------------- + +input[type="text"], +input[type="email"], +textarea { + appearance: none; + font-family: $sans-serif; + display: block; + text-align: left; + flex-grow: 1; + padding: 0; + font-size: 16px; + font-weight: 400; + overflow: hidden; + box-shadow: none; + border: none; + width: 100%; + border-radius: 0; + border-bottom: 1px solid $border; + height: 44px; + color: $black; + background: transparent; + transition: border-color $trans; + margin-bottom: 24px; + + &:focus { + outline: none; + border-color: $gray-darkest; } - input { - appearance: none; - font-family: $sans-serif; - display: block; - text-align: left; - flex-grow: 1; - padding: 0; - font-size: 16px; - font-weight: 400; - overflow: hidden; - box-shadow: none; - border: none; - width: 100%; - border-radius: 0; - border-bottom: 1px solid var(--color-scale-gray-6); - height: 56px; - color: var(--color-scale-gray-2); + &.mce_inline_error { + border-color: $error !important; + } +} + +textarea { + border: 1px solid $border; + min-height: 120px; + margin-top: 8px; + padding: 12px; + +} + +button[type="submit"], +input[type="submit"] { + margin-top: 36px; + + &:hover, + &:active, + &:focus { + outline: none; background: transparent; - transition: border-color $trans; - margin-bottom: 24px; + color: $black; + } +} + +// ---------------------------------------- +// Radios & Checkboxes +// ---------------------------------------- + +.radio, +.checkbox { + + .radio, + + .checkbox { + margin-top: 24px; + } + + input { + @include visually-hidden; + } + + label { + position: relative; + font-weight: 700; + display: flex; + align-items: flex-start; + justify-content: flex-start; + z-index: 1; + + b { + display: block; + margin-bottom: 4px; + } + + span { + font-weight: 400; + } + + &:hover { + cursor: pointer; + } + + &:before { + content: ""; + display: block; + width: 24px; + min-width: 24px; + height: 24px; + z-index: 2; + border: 1px solid $black; + background: transparent; + cursor: pointer; + margin-right: 16px; + + @include start-at($large) { + width: 32px; + min-width: 32px; + height: 32px; + } + } - &:focus { - outline: none; - border-color: var(--color-scale-gray-5); + &:after { + content: ""; + display: block; + position: absolute; + width: 12px; + height: 12px; + left: 6px; + top: 6px; + z-index: 3; + background: $brand; + transform: scale(0); + transition: transform .35s cubic-bezier(0.68,-0.55,0.27,1.75); + cursor: pointer; + + @include start-at($large) { + width: 16px; + left: 8px; + top: 8px; + height: 16px; + } } + } - &.mce_inline_error { - border-color: var(--color-scale-red-4) !important; + input:checked + label { + &:after { + transform: scale(1); } } } +.radio label:before, +.radio label:after { + border-radius: 50%; +} + +.radio--center label { + align-items: center; + + &:before { + margin-right: 10px; + } +} + // ---------------------------------------- // Placeholders diff --git a/assets/css/modules/_heros.scss b/assets/css/modules/_heros.scss index cb98d52..1cdc1b0 100644 --- a/assets/css/modules/_heros.scss +++ b/assets/css/modules/_heros.scss @@ -2,16 +2,8 @@ // Hero // --------------------------------------------------------------------- -body.home { - background: $black url('../img/hero.jpg') top center / auto 800px no-repeat; - @include start-at($large) { - background: $black url('../img/hero.jpg') top center / 100% auto no-repeat; - } - -} - .hero { position: relative; z-index: 1; @@ -19,28 +11,41 @@ body.home { display: flex; align-items: center; justify-content: center; - padding: 140px 0; + padding: 180px 0 48px; + background: url('../img/direction/static.jpg') center / cover no-repeat; - p { - // color: var(--color-scale-gray-4); - } + .btns { + justify-content: center; + @include start-at($medium) { + justify-content: flex-start; + } + } + @include stop-at($small) { + .btn { + width: 100%; + } + } @include start-at($medium) { - padding: 180px 0; + padding: 120px 0; min-height: 608px; } + + @include start-at($xlarge) { + padding: 192px 0 140px; + min-height: 764px; + } } -.hero-side { - position: absolute; - right: 0; - top: 100px; - display: none; +.hero--video { + padding-bottom: 48px; - @include start-at(1400px) { - display: block; + @include start-at($large) { + padding-bottom: 72px; } + + } .hero--dark { @@ -52,7 +57,9 @@ body.home { width: 100%; position: relative; z-index: 1; - max-width: 836px; + margin: 0 auto; + + p { max-width: 1113px; @@ -61,6 +68,29 @@ body.home { } } +.hero-content__media { + position: relative; + max-width: 1032px; + margin: 36px auto 0; + width: $wrapper-percentage; + + .orb { + position: absolute; + z-index: -1; + bottom: 0; + left: 0; + transform: translate3d(-24px, -36px, 0) rotate(145deg); + + @include start-at($large) { + transform: translate3d(-50%, -100%, 0) rotate(145deg); + } + } + + @include start-at($large) { + margin: 48px auto 0; + } +} + .hero__pattern { position: absolute; bottom: -2px; @@ -68,6 +98,18 @@ body.home { z-index: -1; } +.hero__img { + position: absolute; + z-index: -1; + top: 0; + left: 0; + width: 100%; + + img { + width: 100%; + } +} + .hero__ft { position: absolute; bottom: 0; @@ -106,6 +148,33 @@ body.home { } } +.hero__pattern { + position: absolute; + width: 100%; + height: auto; + max-width: 10000%; + z-index: -1; + bottom: 0; + left: 0; + + width: 260%; + left: -80%; + + @include start-at($small) { + width: 200%; + left: -50%; + } + + @include start-at($large) { + width: 140%; + left: -20%; + } + + @include start-at($xlarge) { + width: 100%; + left: 0; + } +} // ---------------------------------------- // diff --git a/assets/css/modules/_impact.scss b/assets/css/modules/_impact.scss deleted file mode 100644 index a69856e..0000000 --- a/assets/css/modules/_impact.scss +++ /dev/null @@ -1,547 +0,0 @@ -// --------------------------------------------------------------------- -// -// --------------------------------------------------------------------- - -.impact { - position: relative; - background: $black; - padding: 120px 0 200px; - color: $white; - overflow: hidden; - - @include start-at($large) { - padding: 180px 0 290px; - } -} - -.impact__hd { - * { - max-width: 600px; - } -} - - -.impact__hd, -.impact__ft { - // * { - // max-width: 600px; - // } - - @include start-at($small) { - padding-left: 60px; - } - @include start-at($medium) { - padding-left: 88px; - } - @include start-at($large) { - padding-left: 200px; - } -} - -.quote { - * { - // max-width: 492px; - } - .h1 { - line-height: 1; - max-height: 44px; - } - - p { - color: $white; - - @include start-at($large) { - - } - } - - figure { - margin-top: 12px; - width: 48px; - height: 48px; - min-width: 48px; - overflow: hidden; - border-radius: 50%; - - img { - object-fit: cover; - width: 100%; - height: 100%; - } - } -} - -.impact__bd { - text-align: center; - - @include start-at($medium) { - text-align: left; - } -} - -.impact__top { - position: absolute; - top: -2px; - width: 100%; - z-index: 1; - pointer-events: none; -} -.impact__bottom { - position: absolute; - bottom: -4px; - left: 0; - width: 100%; - z-index: 1; - max-width: 343px; - width: 20%; - pointer-events: none; -} - -.impact__top-dots { - position: absolute; - top: 0; - left: 0; - max-width: 343px; - width: 20%; - opacity: 0; - z-index: 3; - transition: opacity 1s ease, transform 1.4s ease-in-out; - transform: translate3d(-40%, 0, 0); - - &.in-view { - transition-delay: 0.4s; - opacity: .4; - transform: translate3d(0, 0, 0); - } - - &:hover, - &.in-view:hover { - opacity: 1; - } -} -.impact__bottom-dots { - position: absolute; - bottom: 24px; - right: 0; - max-width: 680px; - width: 40%; - - opacity: 0; - transition: opacity 1s ease, transform 1.4s ease-in-out; - transform: translate3d(40%, 0, 0); - - &.in-view { - transition-delay: 0.4s; - opacity: .4; - transform: translate3d(0, 0, 0); - - &:hover { - opacity: 1; - } - } - - @include start-at($medium) { - bottom: 100px; - } -} - - - -// ---------------------------------------- -// tech for good -// ---------------------------------------- - -.img-right-funk { - position: relative; - z-index: 1; - margin-bottom: 60px; - - @include start-at($large) { - margin-bottom: 94px; - min-height: 400px; - } -} - -.img-right-funk__img { - width: 100%; - position: relative; - overflow: hidden; - - // &:after { - // content: ''; - // width: 100%; - // height: 100%; - // z-index: 2; - // display: block; - // background: url('../img/direction/io-1.svg') center / cover no-repeat; - // position: absolute; - // top: 0; - // right: 0; - // } - - img:not(.overlay) { - height: 140%; - } - - .overlay { - width: calc(100% + 10px); - height: calc(100% + 10px); - z-index: 2; - display: block; - position: absolute; - top: -5px; - right: -5px; - max-width: 1000%; - } - - img { - width: 100%; - } - - @include start-at($large) { - width: 50%; - position: absolute; - height: 100%; - max-height: 680px; - right: 0; - top: 0; - - img { - object-fit: cover; - height: 100%; - } - - // img:not(.overlay) { - // height: 140%; - // margin-top: -20%; - // } - } -} - -.img-right-funk__content { - padding: 48px 0; - - @include start-at($large) { - padding: 94px 0; - width: 50%; - padding-right: 24px; - max-width: 640px; - - } -} - - -.img-right-funk--alt { - overflow: hidden; - - .shapes-top { - position: absolute; - top: -40px; - left: -50%; - width: 280%; - z-index: 2; - max-width: 2000%; - - @include start-at($large) { - width: 100%; - left: 0; - } - } - - .img-right-funk__img { - &:after { - display: none; - } - @include start-at($large) { - width: 44%; - } - } - - .img-right-funk__content { - - @include start-at($large) { - position: relative; - z-index: 2; - background: $white; - width: 68%; - padding: 280px 0 140px; - max-width: 820px; - - p { - max-width: 640px; - } - } - } -} - - -.img-right-funk--flip { - overflow: hidden; - - .img-right-funk__img { - &:after { - display: none; - } - - img { - object-fit: cover; - width: auto; - height: auto; - } - - @include start-at($large) { - width: 34%; - left: 0; - } - - @include start-at($xlarge) { - width: 48%; - } - } - - .img-right-funk__content { - - @include start-at($large) { - padding: 68px 0; - width: 70%; - margin-left: auto; - padding-left: 24px; - max-width: 640px; - } - - @include start-at($xlarge) { - padding: 68px 0; - width: 50%; - margin-left: auto; - padding-left: 24px; - max-width: 640px; - } - } -} - -// ---------------------------------------- -// Employee giving -// ---------------------------------------- - -.employee-giving { - padding: 60px 0; - position: relative; - z-index: 1; - - &:after { - content:''; - @include cover-parent; - z-index: -2; - background: url('../img/direction/dots-pattern.svg') top left / 22px repeat; - opacity: 0; - transition: opacity 1s linear; - } - - @include start-at($large) { - padding: 80px 0; - } - - &.in-view { - &:after { - transition-delay: 0.5s; - opacity: 1; - } - } -} - -.employee-giving__content { - background: $white; - width: 100%; - max-width: 820px; - padding: 16px 24px; - margin: 0 auto; - - - @include start-at($large) { - padding: 48px 60px; - } - - h2, h4, p { - max-width: 600px; - margin: 0 auto; - } -} - -.employee-giving__content--wide { - max-width: 1436px; -} - - -// ---------------------------------------- -// Highlighted programs -// ---------------------------------------- - -.highlighted-programs { - margin: 140px 0; - position: relative; - overflow: hidden; - width: 100%; - // max-width: 1800px; - // margin: 0 auto; - z-index: 1; - - &:after { - content: ''; - position: absolute; - top: 228px; - left: 0; - height: 100%; - width: 20%; - background: url('../img/direction/dots-pattern.svg') top left / 22px repeat; - z-index: -1; - opacity: 0; - transition: opacity 1s linear; - - @include start-at(1258px) { - left: auto; - right: 1258px; - width: 100%; - } - } - - &.in-view { - &:after { - transition-delay: 0.5s; - opacity: 0.2; - - @include start-at(1258px) { - opacity: 1; - } - } - } - - @include start-at($large) { - margin: 180px 0; - } -} - -.hp-content { - position: relative; - overflow: hidden; - z-index: 2; - - figure { - position: relative; - overflow: hidden; - } - - div { - padding: 36px $wrapper-padding 72px; - } - - @include start-at($medium) { - display: flex; - align-items: center; - justify-content: space-between; - max-width: 1258px; - - &.ml-auto { - align-items: flex-end; - figure { - order: 2; - } - div { - order: 1; - } - } - - figure { - flex-grow: 1; - } - div { - width: 480px; - min-width: 480px; - padding: 90px 48px; - } - } - -} - - -// ---------------------------------------- -// Latest Insights -// ---------------------------------------- - -#lastest-insights { - .border-bottom { - border-color: $black !important; - } -} - -.shapes-section { - position: relative; - padding: 80px 0; - z-index: 1; - background: $black; - overflow: hidden; - - @include start-at($large) { - padding: 160px 0; - } - - .wrapper-thin { - position: relative; - z-index: 3; - max-width: 820px; - - @include start-at($medium) { - width: 80%; - } - @include start-at($large) { - width: 94%; - } - } - - .wrapper-wide, .wrapper { - position: relative; - z-index: 3; - } -} - -.shapes-section--short-btm { - padding: 80px 0 40px; - - @include start-at($large) { - padding: 140px 0 100px; - } -} - -.shapes-section__bg { - position: absolute; - z-index: 2; - top: -3px; - left: 0; -} - -.shapes-section__bgbtm { - position: absolute; - z-index: 2; - bottom: -3px; - left: 0; -} - - - -.program-list { - - figure { - position: relative; - overflow: hidden; - height: 0; - width: 100%; - padding-bottom: 58%; - margin-bottom: 16px; - - img, iframe { - object-fit: cover; - width: 100%; - height: 100%; - position: absolute; - } - } -} diff --git a/assets/css/modules/_insights.scss b/assets/css/modules/_insights.scss deleted file mode 100644 index 5421a17..0000000 --- a/assets/css/modules/_insights.scss +++ /dev/null @@ -1,376 +0,0 @@ -// --------------------------------------------------------------------- -// -// --------------------------------------------------------------------- - - -.hero--insights { - - > img { - position: absolute; - bottom: -4px; - width: 33%; - } - .left-img { - left: 0; - max-width: 224px; - } - - .right-img { - right: 0; - max-width: 416px; - } -} - -// ---------------------------------------- -// nav -// ---------------------------------------- - -.insights-nav { - width: 100%; - background: $white; - z-index: 7; - position: relative; - padding: 16px 0; - transition: top $trans; - display: none; - - @include start-at($header-breakpoint) { - z-index: 11; - position: -webkit-sticky; - position: sticky; - top: 0; - min-height: $header-height; - display: flex; - align-items: center; - justify-content: center; - } - - ul { - display: flex; - align-items: center; - justify-content: space-between; - } - - a { - font-weight: 600; - position: relative; - padding: 6px 0; - - &:after { - content: ''; - position: absolute; - bottom: 0; - left: 15%; - width: 70%; - height: 2px; - display: block; - transform: scaleX(0); - transform-origin: center; - background: $black; - transition: transform $trans; - } - - &.is-active, - &:hover { - &:after { - transform: scaleX(1); - } - } - } -} - - -body.scrolling-up { - .insights-nav { - top: $header-height; - } -} - - - -// ---------------------------------------- -// Tag list -// ---------------------------------------- - -.tag-list { - display: flex; - align-items: center; - justify-content: flex-start; - flex-wrap: wrap; - - li { - margin: 0 12px 16px 0; - - @include start-at($large) { - margin: 0 20px 16px 0; - } - } - - a { - display: inline-flex; - align-items: center; - justify-content: center; - height: auto; - width: auto; - border: 1px solid $black; - border-radius: 50px; - font-weight: 600; - transition: color $trans, background $trans; - - font-size: 12px; - padding: 6px 16px; - - @include start-at($large) { - font-size: 16px; - padding: 8px 24px; - } - - &:hover { - color: $white; - background: $black; - } - - &.is-active { - color: $white; - background: $black; - } - } -} - - -// ---------------------------------------- -// Insight list -// ---------------------------------------- - -.insight-list { - display: flex; - align-items: stretch; - justify-content: space-between; - flex-wrap: wrap; - - > * { - width: 100%; - margin-bottom: 36px; - - &.spacer { - margin-bottom: 0; - } - - @include start-at($medium) { - width: calc(50% - 16px); - } - @include start-at($large) { - width: calc(33% - 16px); - } - @include start-at($xlarge) { - width: calc(33% - 24px); - } - } -} - -.insight-list.insight-list--sm > * { - @include start-at($large) { - width: calc(25% - 16px); - } - @include start-at($xlarge) { - width: calc(25% - 24px); - } -} - -.js-filtered-list { - position: relative; - z-index: 1; - - &:after { - content: ''; - width: 36px; - height: 36px; - top: 120px; - left: calc(50% - 18px); - background: url('../img/svgs/sync.svg') center / cover no-repeat; - position: absolute; - transition: transform 2s ease-in-out, opacity 0.3s ease; - opacity: 0; - pointer-events: none; - } - - .insight-list { - opacity: 1; - transition: opacity $trans; - } - - &.is-thinking { - - &:after { - opacity: 1; - transform: rotate(-720deg); - } - - .insight-list { - opacity: 0.2; - } - } - - &.is-filtered { - .insight-preview { - display: none; - - &.has-active-filter { - display: block; - } - } - } -} - -// ---------------------------------------- -// Preview -// ---------------------------------------- - -.insight-preview { - display: block; - position: relative; - padding-bottom: 48px; - - .date { - color: var(--color-scale-gray-5); - } - - .shapes-section & { - p { - color: var(--color-scale-gray-4); - } - - .icon-link { - color: $white; - } - } - - - > figure { - position: relative; - z-index: 1; - width: 100%; - height: 0; - padding-bottom: 56%; - margin-bottom: 24px; - overflow: hidden; - - img { - position: absolute; - object-fit: cover; - width: 100%; - height: 100%; - } - } - - &:after { - content: ''; - width: 100%; - height: 1px; - position: absolute; - bottom: 0; - left: 0; - background: $black; - transition: transform $trans; - transform: scaleY(1); - transform-origin: bottom; - } - - .icon-link { - position: absolute; - bottom: 12px; - left: 0; - } - - &:hover { - - &:after { - transform: scaleY(4); - } - } -} - -.author { - display: flex; - align-items: center; - justify-content: flex-start; - margin-bottom: 16px; - - - span { - font-size: 14px !important; - font-weight: 400; - line-height: 1.4; - color: var(--color-text-secondary); - display: inline-block !important; - } - - p { - font-size: 14px !important; - font-weight: 500; - color: $black; - margin: 0 !important; - line-height: .8; - } - - figure { - position: relative; - z-index: 1; - width: 32px; - height: 32px; - min-width: 32px; - overflow: hidden; - border-radius: 50%; - margin-right: 8px; - - img { - object-fit: cover; - width: 100%; - height: 100%; - } - - + figure { - margin-left: -18px; - } - } -} - -.authors .author { - margin-bottom: 16px; -} -@include start-at($small) { -.authors { - display: flex; - align-items: flex-start; - - .author { - flex-grow: 1; - flex-basis: 0; - margin-bottom: 0; - } - - .author + .author { - margin-left: 24px; - } - } -} - -.insight__tags { - - &p { - color: var(--color-text-secondary); - font-size: 16px; - font-weight: 500; - } - - &span { - - } - - - span + span { - &:before { - content: ' • '; - } - } -} diff --git a/assets/css/modules/_list.scss b/assets/css/modules/_list.scss new file mode 100644 index 0000000..d12c8d4 --- /dev/null +++ b/assets/css/modules/_list.scss @@ -0,0 +1,41 @@ +// --------------------------------------------------------------------- +// +// --------------------------------------------------------------------- + +// ---------------------------------------- +// Logo list +// ---------------------------------------- + +.logo-list { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + + > * { + width: calc(100% / 3); + margin: 12px 0; + + @include start-at($small) { + width: calc(100% / 5); + } + + @include start-at($medium) { + width: calc(100% / 6); + } + } + + img { + max-width: 70%; + margin: 0 auto; + max-height: 110px; + + @include start-at($large) { + max-width: 80%; + } + } +} + +// ---------------------------------------- +// +// ---------------------------------------- diff --git a/assets/css/modules/_media.scss b/assets/css/modules/_media.scss index 3065986..b698c8f 100644 --- a/assets/css/modules/_media.scss +++ b/assets/css/modules/_media.scss @@ -2,6 +2,90 @@ // Media Styles // --------------------------------------------------------------------- + + +.video-wrap, +.video-wrapper { + position: relative; + padding-bottom: 56.25%; /* 16:9 */ + height: 0; + overflow: hidden; + + border-radius: 16px; + + + &.video-playing, + &.is-playing { + .video-wrap__poster { + opacity: 0; + pointer-events: none; + } + } + + .video-wrapper__poster, + video, + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +.video-wrap__poster { + @include cover-parent; + z-index: 2; + background: $black; + + img { + opacity: 0.8; + } + + &:hover { + cursor: pointer; + + img { + opacity: 0.6; + } + + svg { + fill: $brand; + } + } + + figcaption { + position: absolute; + bottom: 0; + left: 0; + z-index: 3; + font-size: 16px; + width: 100%; + padding: 24px; + color: $white; + text-align: left; + } + + svg { + position: absolute; + z-index: 2; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + fill: $white; + transition: fill $trans; + } + + > img { + object-fit: cover; + width: 100%; + height: 100%; + z-index: -1; + transition: opacity $trans; + } +} + + .img-overlay { position: relative; overflow: hidden; diff --git a/assets/css/modules/_oneoffs.scss b/assets/css/modules/_oneoffs.scss index b0fad66..313a90c 100644 --- a/assets/css/modules/_oneoffs.scss +++ b/assets/css/modules/_oneoffs.scss @@ -2,10 +2,161 @@ // One Offs // --------------------------------------------------------------------- +// ---------------------------------------- +// Bullet +// ---------------------------------------- + +.bullet { + position: relative; + padding-left: 24px; + + &:before { + content: ''; + width: 12px; + height: 12px; + border: 4px solid $brand; + border-radius: 50%; + display: block; + position: absolute; + top: 3px; + left: 0; + } + + @include start-at($medium) { + padding-left: 36px; + + &:before { + width: 20px; + height: 20px; + border: 6px solid $brand; + top: 3px; + } + } +} + + +// ---------------------------------------- +// Home section +// ---------------------------------------- + +$hc-bp: $large; + +.home-cray { + position: relative; + z-index: 5; + background: $gray-darkest url('../img/direction/static.jpg') center / cover no-repeat; + padding-bottom: 100px; + + .wrapper { + display: flex; + flex-wrap: wrap; + } + + @include start-at($hc-bp) { + padding-bottom: 140px; + } + + .home-cray__graph { + @include stop-at($hc-bp) { + order: 4; + + } + } + + .home-cray__text > * { + @include stop-at($hc-bp) { + order: 2; + margin: 24px 0 48px; + } + + > * { + max-width: 534px; + margin-left: auto; + } + } +} + +.home-cray-img-1 { + position: relative; + max-width: 429px; + padding-bottom: 50px; + z-index: 2; + transform: translate3d(0, -40px, 0); + + + + @include start-at($hc-bp) { + transform: translate3d(0, -60px, 0); + } + + img:first-child { + max-width: 378px; + margin-left: 20px; + + @include stop-at(600px) { + max-width: calc(100% - 40px); + } + } + .bl { + position: absolute; + top: 60px; + left: 0; + } + .br { + position: absolute; + top: 60px; + right: 0; + } + .orb { + position: absolute; + bottom: 0; + right: 0; + z-index: -1; + } +} + +.home-cray-img-2 { + position: relative; + max-width: 456px; + padding-top: 40px; + padding-left: 40px; + z-index: 2; + margin-left: auto; + transform: translate3d(0, -20px, 0); + + @include start-at($hc-bp) { + + } + + img:first-child { + max-width: 378px; + + } + .bl { + position: absolute; + top: 100px; + left: 0; + } + .br { + position: absolute; + top: 100px; + right: 0; + } + .orb { + position: absolute; + top: 0; + left: 0; + z-index: -1; + } +} + + + // ---------------------------------------- // Share list // ---------------------------------------- + .site-share { display: flex; align-items: center; diff --git a/assets/css/modules/_utils.scss b/assets/css/modules/_utils.scss index 85125ad..5a4b43c 100644 --- a/assets/css/modules/_utils.scss +++ b/assets/css/modules/_utils.scss @@ -2,6 +2,11 @@ // Utility Classes // --------------------------------------------------------------------- +.text-left-md { + @include start-at($medium) { + text-align: left !important; + } +} .has-accent { @@ -61,11 +66,7 @@ .text-white { color: $white; - * { - color: $white; - } - - p a { + p { color: var(--color-scale-blue-4); } } @@ -95,6 +96,56 @@ background: var(--color-scale-gray-5); } +.bg-white { + background-color: $white; + color: $black; +} + +.bg-pattern { + position: relative; + z-index: 1; + overflow: hidden; + + .bg-pattern__img { + position: absolute; + width: 100%; + height: auto; + max-width: 10000%; + z-index: -1; + top: 0; + left: 0; + bottom: 0; + + width: 260%; + left: -80%; + + @include start-at($small) { + width: 200%; + left: -50%; + } + + @include start-at($large) { + width: 140%; + left: -20%; + } + + @include start-at($xlarge) { + width: 100%; + left: 0; + } + } +} + +.bg-pattern-right { + position: relative; + z-index: 1; + background: $white url('../img/direction/pattern-right.svg') 90% top / auto 100% no-repeat; +} + +.bg-static { + background: $gray-darkest url('../img/direction/static.jpg') center / cover no-repeat; +} + .bg-black { background: $black; color: $white; @@ -128,3 +179,73 @@ .screen-reader-text { @include visually-hidden; } + + + + +$p7s: 60px; +$p7: 80px; + +.py-7 { + padding-top: $p7s; + padding-bottom: $p7s; + @include start-at($medium) { + padding-top: $p7; + padding-bottom: $p7; + } +} +.pb-7 { + padding-bottom: $p7s; + @include start-at($medium) { + padding-bottom: $p7; + } +} +.pt-7 { + padding-top: $p7s; + @include start-at($medium) { + padding-top: $p7; + } +} +.my-7 { + margin-top: $p7s; + margin-bottom: $p7s; + @include start-at($medium) { + margin-top: $p7; + margin-bottom: $p7; + } +} +.mb-7 { + margin-bottom: $p7s; + @include start-at($medium) { + margin-bottom: $p7; + } +} +.mt-7 { + margin-top: $p7s; + @include start-at($medium) { + margin-top: $p7; + } +} + +$p8s: 80px; +$p8: 140px; +.py-8 { + padding-top: $p8s; + padding-bottom: $p8s; + @include start-at($medium) { + padding-top: $p8; + padding-bottom: $p8; + } +} +.pb-8 { + padding-bottom: $p8s; + @include start-at($medium) { + padding-bottom: $p8; + } +} +.pt-8 { + padding-top: $p8s; + @include start-at($medium) { + padding-top: $p8; + } +} diff --git a/assets/fonts/NoeDisplay-Bold.woff b/assets/fonts/NoeDisplay-Bold.woff new file mode 100644 index 0000000..0bb79e1 Binary files /dev/null and b/assets/fonts/NoeDisplay-Bold.woff differ diff --git a/assets/fonts/NoeDisplay-Bold.woff2 b/assets/fonts/NoeDisplay-Bold.woff2 new file mode 100644 index 0000000..a5c2a68 Binary files /dev/null and b/assets/fonts/NoeDisplay-Bold.woff2 differ diff --git a/assets/fonts/Theinhardt-Bold-Italic.woff b/assets/fonts/Theinhardt-Bold-Italic.woff new file mode 100644 index 0000000..5a8b644 Binary files /dev/null and b/assets/fonts/Theinhardt-Bold-Italic.woff differ diff --git a/assets/fonts/Theinhardt-Bold-Italic.woff2 b/assets/fonts/Theinhardt-Bold-Italic.woff2 new file mode 100644 index 0000000..e7f71fe Binary files /dev/null and b/assets/fonts/Theinhardt-Bold-Italic.woff2 differ diff --git a/assets/fonts/Theinhardt-Bold.woff b/assets/fonts/Theinhardt-Bold.woff new file mode 100644 index 0000000..7d0b64f Binary files /dev/null and b/assets/fonts/Theinhardt-Bold.woff differ diff --git a/assets/fonts/Theinhardt-Bold.woff2 b/assets/fonts/Theinhardt-Bold.woff2 new file mode 100644 index 0000000..2f5c09b Binary files /dev/null and b/assets/fonts/Theinhardt-Bold.woff2 differ diff --git a/assets/fonts/Theinhardt-Italic.woff b/assets/fonts/Theinhardt-Italic.woff new file mode 100644 index 0000000..def0f0e Binary files /dev/null and b/assets/fonts/Theinhardt-Italic.woff differ diff --git a/assets/fonts/Theinhardt-Italic.woff2 b/assets/fonts/Theinhardt-Italic.woff2 new file mode 100644 index 0000000..0f49eea Binary files /dev/null and b/assets/fonts/Theinhardt-Italic.woff2 differ diff --git a/assets/fonts/Theinhardt-Medium.woff b/assets/fonts/Theinhardt-Medium.woff new file mode 100644 index 0000000..794d568 Binary files /dev/null and b/assets/fonts/Theinhardt-Medium.woff differ diff --git a/assets/fonts/Theinhardt-Medium.woff2 b/assets/fonts/Theinhardt-Medium.woff2 new file mode 100644 index 0000000..58b8446 Binary files /dev/null and b/assets/fonts/Theinhardt-Medium.woff2 differ diff --git a/assets/fonts/Theinhardt-Regular.woff b/assets/fonts/Theinhardt-Regular.woff new file mode 100644 index 0000000..d79eabf Binary files /dev/null and b/assets/fonts/Theinhardt-Regular.woff differ diff --git a/assets/fonts/Theinhardt-Regular.woff2 b/assets/fonts/Theinhardt-Regular.woff2 new file mode 100644 index 0000000..d63028b Binary files /dev/null and b/assets/fonts/Theinhardt-Regular.woff2 differ diff --git a/assets/fonts/alliance-no-2-bold.woff b/assets/fonts/alliance-no-2-bold.woff deleted file mode 100644 index 2e82de9..0000000 Binary files a/assets/fonts/alliance-no-2-bold.woff and /dev/null differ diff --git a/assets/fonts/alliance-no-2-bold.woff2 b/assets/fonts/alliance-no-2-bold.woff2 deleted file mode 100644 index ca3ea8a..0000000 Binary files a/assets/fonts/alliance-no-2-bold.woff2 and /dev/null differ diff --git a/assets/fonts/alliance-no-2-extrabold.woff b/assets/fonts/alliance-no-2-extrabold.woff deleted file mode 100644 index 58fa070..0000000 Binary files a/assets/fonts/alliance-no-2-extrabold.woff and /dev/null differ diff --git a/assets/fonts/alliance-no-2-extrabold.woff2 b/assets/fonts/alliance-no-2-extrabold.woff2 deleted file mode 100644 index da3822b..0000000 Binary files a/assets/fonts/alliance-no-2-extrabold.woff2 and /dev/null differ diff --git a/assets/fonts/alliance-no-2-light-italic.woff b/assets/fonts/alliance-no-2-light-italic.woff deleted file mode 100644 index 8a2ee36..0000000 Binary files a/assets/fonts/alliance-no-2-light-italic.woff and /dev/null differ diff --git a/assets/fonts/alliance-no-2-light-italic.woff2 b/assets/fonts/alliance-no-2-light-italic.woff2 deleted file mode 100644 index 914a161..0000000 Binary files a/assets/fonts/alliance-no-2-light-italic.woff2 and /dev/null differ diff --git a/assets/fonts/alliance-no-2-light.woff b/assets/fonts/alliance-no-2-light.woff deleted file mode 100644 index 304b4d7..0000000 Binary files a/assets/fonts/alliance-no-2-light.woff and /dev/null differ diff --git a/assets/fonts/alliance-no-2-light.woff2 b/assets/fonts/alliance-no-2-light.woff2 deleted file mode 100644 index a6c933d..0000000 Binary files a/assets/fonts/alliance-no-2-light.woff2 and /dev/null differ diff --git a/assets/fonts/alliance-no-2-medium.woff b/assets/fonts/alliance-no-2-medium.woff deleted file mode 100644 index 5f9ef2a..0000000 Binary files a/assets/fonts/alliance-no-2-medium.woff and /dev/null differ diff --git a/assets/fonts/alliance-no-2-medium.woff2 b/assets/fonts/alliance-no-2-medium.woff2 deleted file mode 100644 index 4a22bc4..0000000 Binary files a/assets/fonts/alliance-no-2-medium.woff2 and /dev/null differ diff --git a/assets/fonts/alliance-no-2-regular-italic.woff b/assets/fonts/alliance-no-2-regular-italic.woff deleted file mode 100644 index 2fb291c..0000000 Binary files a/assets/fonts/alliance-no-2-regular-italic.woff and /dev/null differ diff --git a/assets/fonts/alliance-no-2-regular-italic.woff2 b/assets/fonts/alliance-no-2-regular-italic.woff2 deleted file mode 100644 index 638c532..0000000 Binary files a/assets/fonts/alliance-no-2-regular-italic.woff2 and /dev/null differ diff --git a/assets/fonts/alliance-no-2-regular.woff b/assets/fonts/alliance-no-2-regular.woff deleted file mode 100644 index 888025c..0000000 Binary files a/assets/fonts/alliance-no-2-regular.woff and /dev/null differ diff --git a/assets/fonts/alliance-no-2-regular.woff2 b/assets/fonts/alliance-no-2-regular.woff2 deleted file mode 100644 index b8c9225..0000000 Binary files a/assets/fonts/alliance-no-2-regular.woff2 and /dev/null differ diff --git a/assets/fonts/alliance-no-2-semibold.woff b/assets/fonts/alliance-no-2-semibold.woff deleted file mode 100644 index ffb36c6..0000000 Binary files a/assets/fonts/alliance-no-2-semibold.woff and /dev/null differ diff --git a/assets/fonts/alliance-no-2-semibold.woff2 b/assets/fonts/alliance-no-2-semibold.woff2 deleted file mode 100644 index ef4bb56..0000000 Binary files a/assets/fonts/alliance-no-2-semibold.woff2 and /dev/null differ diff --git a/assets/fonts/fira/FiraCode-Bold.woff b/assets/fonts/fira/FiraCode-Bold.woff deleted file mode 100755 index 394ff01..0000000 Binary files a/assets/fonts/fira/FiraCode-Bold.woff and /dev/null differ diff --git a/assets/fonts/fira/FiraCode-Bold.woff2 b/assets/fonts/fira/FiraCode-Bold.woff2 deleted file mode 100755 index 810cfae..0000000 Binary files a/assets/fonts/fira/FiraCode-Bold.woff2 and /dev/null differ diff --git a/assets/fonts/fira/FiraCode-Light.woff b/assets/fonts/fira/FiraCode-Light.woff deleted file mode 100755 index a4cc0f5..0000000 Binary files a/assets/fonts/fira/FiraCode-Light.woff and /dev/null differ diff --git a/assets/fonts/fira/FiraCode-Light.woff2 b/assets/fonts/fira/FiraCode-Light.woff2 deleted file mode 100755 index 5575bdb..0000000 Binary files a/assets/fonts/fira/FiraCode-Light.woff2 and /dev/null differ diff --git a/assets/fonts/fira/FiraCode-Medium.woff b/assets/fonts/fira/FiraCode-Medium.woff deleted file mode 100755 index 957a767..0000000 Binary files a/assets/fonts/fira/FiraCode-Medium.woff and /dev/null differ diff --git a/assets/fonts/fira/FiraCode-Medium.woff2 b/assets/fonts/fira/FiraCode-Medium.woff2 deleted file mode 100755 index 0b92534..0000000 Binary files a/assets/fonts/fira/FiraCode-Medium.woff2 and /dev/null differ diff --git a/assets/fonts/fira/FiraCode-Regular.woff b/assets/fonts/fira/FiraCode-Regular.woff deleted file mode 100755 index 8b98535..0000000 Binary files a/assets/fonts/fira/FiraCode-Regular.woff and /dev/null differ diff --git a/assets/fonts/fira/FiraCode-Regular.woff2 b/assets/fonts/fira/FiraCode-Regular.woff2 deleted file mode 100755 index 1e4f274..0000000 Binary files a/assets/fonts/fira/FiraCode-Regular.woff2 and /dev/null differ diff --git a/assets/fonts/inter/Inter-Light-BETA.woff b/assets/fonts/inter/Inter-Light-BETA.woff deleted file mode 100644 index 8817913..0000000 Binary files a/assets/fonts/inter/Inter-Light-BETA.woff and /dev/null differ diff --git a/assets/fonts/inter/Inter-Light-BETA.woff2 b/assets/fonts/inter/Inter-Light-BETA.woff2 deleted file mode 100644 index 00e5e60..0000000 Binary files a/assets/fonts/inter/Inter-Light-BETA.woff2 and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-Black.woff b/assets/fonts/inter/Inter-UI-Black.woff deleted file mode 100755 index c456f0d..0000000 Binary files a/assets/fonts/inter/Inter-UI-Black.woff and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-Black.woff2 b/assets/fonts/inter/Inter-UI-Black.woff2 deleted file mode 100755 index ca99ae3..0000000 Binary files a/assets/fonts/inter/Inter-UI-Black.woff2 and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-BlackItalic.woff b/assets/fonts/inter/Inter-UI-BlackItalic.woff deleted file mode 100755 index 609f1b0..0000000 Binary files a/assets/fonts/inter/Inter-UI-BlackItalic.woff and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-BlackItalic.woff2 b/assets/fonts/inter/Inter-UI-BlackItalic.woff2 deleted file mode 100755 index 538414d..0000000 Binary files a/assets/fonts/inter/Inter-UI-BlackItalic.woff2 and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-Bold.woff b/assets/fonts/inter/Inter-UI-Bold.woff deleted file mode 100755 index f1350ee..0000000 Binary files a/assets/fonts/inter/Inter-UI-Bold.woff and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-Bold.woff2 b/assets/fonts/inter/Inter-UI-Bold.woff2 deleted file mode 100755 index bb570a2..0000000 Binary files a/assets/fonts/inter/Inter-UI-Bold.woff2 and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-BoldItalic.woff b/assets/fonts/inter/Inter-UI-BoldItalic.woff deleted file mode 100755 index 9260375..0000000 Binary files a/assets/fonts/inter/Inter-UI-BoldItalic.woff and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-BoldItalic.woff2 b/assets/fonts/inter/Inter-UI-BoldItalic.woff2 deleted file mode 100755 index abd6f4b..0000000 Binary files a/assets/fonts/inter/Inter-UI-BoldItalic.woff2 and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-ExtraBold.woff b/assets/fonts/inter/Inter-UI-ExtraBold.woff deleted file mode 100755 index 766e19a..0000000 Binary files a/assets/fonts/inter/Inter-UI-ExtraBold.woff and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-ExtraBold.woff2 b/assets/fonts/inter/Inter-UI-ExtraBold.woff2 deleted file mode 100755 index 8a90dcd..0000000 Binary files a/assets/fonts/inter/Inter-UI-ExtraBold.woff2 and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-ExtraBoldItalic.woff b/assets/fonts/inter/Inter-UI-ExtraBoldItalic.woff deleted file mode 100755 index cb8dadc..0000000 Binary files a/assets/fonts/inter/Inter-UI-ExtraBoldItalic.woff and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-ExtraBoldItalic.woff2 b/assets/fonts/inter/Inter-UI-ExtraBoldItalic.woff2 deleted file mode 100755 index 4b4412d..0000000 Binary files a/assets/fonts/inter/Inter-UI-ExtraBoldItalic.woff2 and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-Italic.woff b/assets/fonts/inter/Inter-UI-Italic.woff deleted file mode 100755 index 69d4299..0000000 Binary files a/assets/fonts/inter/Inter-UI-Italic.woff and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-Italic.woff2 b/assets/fonts/inter/Inter-UI-Italic.woff2 deleted file mode 100755 index 019ef84..0000000 Binary files a/assets/fonts/inter/Inter-UI-Italic.woff2 and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-Medium.woff b/assets/fonts/inter/Inter-UI-Medium.woff deleted file mode 100755 index 9fcabdd..0000000 Binary files a/assets/fonts/inter/Inter-UI-Medium.woff and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-Medium.woff2 b/assets/fonts/inter/Inter-UI-Medium.woff2 deleted file mode 100755 index 7878abe..0000000 Binary files a/assets/fonts/inter/Inter-UI-Medium.woff2 and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-MediumItalic.woff b/assets/fonts/inter/Inter-UI-MediumItalic.woff deleted file mode 100755 index 9d28b54..0000000 Binary files a/assets/fonts/inter/Inter-UI-MediumItalic.woff and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-MediumItalic.woff2 b/assets/fonts/inter/Inter-UI-MediumItalic.woff2 deleted file mode 100755 index 9581d85..0000000 Binary files a/assets/fonts/inter/Inter-UI-MediumItalic.woff2 and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-Regular.woff b/assets/fonts/inter/Inter-UI-Regular.woff deleted file mode 100755 index 8888d9d..0000000 Binary files a/assets/fonts/inter/Inter-UI-Regular.woff and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-Regular.woff2 b/assets/fonts/inter/Inter-UI-Regular.woff2 deleted file mode 100755 index 8493d15..0000000 Binary files a/assets/fonts/inter/Inter-UI-Regular.woff2 and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-SemiBold.woff b/assets/fonts/inter/Inter-UI-SemiBold.woff deleted file mode 100755 index f7cd585..0000000 Binary files a/assets/fonts/inter/Inter-UI-SemiBold.woff and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-SemiBold.woff2 b/assets/fonts/inter/Inter-UI-SemiBold.woff2 deleted file mode 100755 index bf08df5..0000000 Binary files a/assets/fonts/inter/Inter-UI-SemiBold.woff2 and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-SemiBoldItalic.woff b/assets/fonts/inter/Inter-UI-SemiBoldItalic.woff deleted file mode 100755 index 6257a08..0000000 Binary files a/assets/fonts/inter/Inter-UI-SemiBoldItalic.woff and /dev/null differ diff --git a/assets/fonts/inter/Inter-UI-SemiBoldItalic.woff2 b/assets/fonts/inter/Inter-UI-SemiBoldItalic.woff2 deleted file mode 100755 index 5ad9722..0000000 Binary files a/assets/fonts/inter/Inter-UI-SemiBoldItalic.woff2 and /dev/null differ diff --git a/assets/img/All-In-icon.svg b/assets/img/All-In-icon.svg new file mode 100644 index 0000000..f536027 --- /dev/null +++ b/assets/img/All-In-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/img/direction/access-icon.svg b/assets/img/direction/access-icon.svg new file mode 100644 index 0000000..209d509 --- /dev/null +++ b/assets/img/direction/access-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/img/direction/access.svg b/assets/img/direction/access.svg new file mode 100644 index 0000000..96c6a00 --- /dev/null +++ b/assets/img/direction/access.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/direction/bracket-left.svg b/assets/img/direction/bracket-left.svg new file mode 100644 index 0000000..2e1d414 --- /dev/null +++ b/assets/img/direction/bracket-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/direction/bracket-right.svg b/assets/img/direction/bracket-right.svg new file mode 100644 index 0000000..803a2d4 --- /dev/null +++ b/assets/img/direction/bracket-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/direction/community-icon.svg b/assets/img/direction/community-icon.svg new file mode 100644 index 0000000..93c8d0e --- /dev/null +++ b/assets/img/direction/community-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/img/direction/community.svg b/assets/img/direction/community.svg new file mode 100644 index 0000000..e729bcf --- /dev/null +++ b/assets/img/direction/community.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/direction/data.svg b/assets/img/direction/data.svg new file mode 100644 index 0000000..4300ee6 --- /dev/null +++ b/assets/img/direction/data.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/assets/img/direction/equity.png b/assets/img/direction/equity.png new file mode 100644 index 0000000..a547c61 Binary files /dev/null and b/assets/img/direction/equity.png differ diff --git a/assets/img/direction/equity.svg b/assets/img/direction/equity.svg new file mode 100644 index 0000000..b5c0331 --- /dev/null +++ b/assets/img/direction/equity.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/direction/graph.svg b/assets/img/direction/graph.svg new file mode 100644 index 0000000..ff55626 --- /dev/null +++ b/assets/img/direction/graph.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/direction/hero-pattern-light.svg b/assets/img/direction/hero-pattern-light.svg new file mode 100644 index 0000000..b5c0026 --- /dev/null +++ b/assets/img/direction/hero-pattern-light.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + diff --git a/assets/img/direction/hero-pattern.svg b/assets/img/direction/hero-pattern.svg new file mode 100644 index 0000000..6e5d0af --- /dev/null +++ b/assets/img/direction/hero-pattern.svg @@ -0,0 +1,36 @@ + + + + + diff --git a/assets/img/direction/maintainer.png b/assets/img/direction/maintainer.png new file mode 100644 index 0000000..fc6ae07 Binary files /dev/null and b/assets/img/direction/maintainer.png differ diff --git a/assets/img/direction/man-on-computer.png b/assets/img/direction/man-on-computer.png new file mode 100644 index 0000000..3733c00 Binary files /dev/null and b/assets/img/direction/man-on-computer.png differ diff --git a/assets/img/direction/orb-blue.svg b/assets/img/direction/orb-blue.svg new file mode 100644 index 0000000..916171b --- /dev/null +++ b/assets/img/direction/orb-blue.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/img/direction/orb-green.svg b/assets/img/direction/orb-green.svg new file mode 100644 index 0000000..0d265fd --- /dev/null +++ b/assets/img/direction/orb-green.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/img/direction/pattern-dark.svg b/assets/img/direction/pattern-dark.svg new file mode 100644 index 0000000..ff7a67e --- /dev/null +++ b/assets/img/direction/pattern-dark.svg @@ -0,0 +1,33 @@ + + + + + + diff --git a/assets/img/direction/pattern-right.svg b/assets/img/direction/pattern-right.svg new file mode 100644 index 0000000..c062c6c --- /dev/null +++ b/assets/img/direction/pattern-right.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/img/direction/static.jpg b/assets/img/direction/static.jpg new file mode 100644 index 0000000..fbd98e8 Binary files /dev/null and b/assets/img/direction/static.jpg differ diff --git a/assets/img/direction/student-on-computer.png b/assets/img/direction/student-on-computer.png new file mode 100644 index 0000000..d6547eb Binary files /dev/null and b/assets/img/direction/student-on-computer.png differ diff --git a/assets/img/direction/video-poster.png b/assets/img/direction/video-poster.png new file mode 100644 index 0000000..30b3882 Binary files /dev/null and b/assets/img/direction/video-poster.png differ diff --git a/assets/img/direction/woman-on-computer.png b/assets/img/direction/woman-on-computer.png new file mode 100644 index 0000000..f2a265f Binary files /dev/null and b/assets/img/direction/woman-on-computer.png differ diff --git a/assets/img/favicons/android-favicon.png b/assets/img/favicons/android-favicon.png index f8a0d71..367668c 100644 Binary files a/assets/img/favicons/android-favicon.png and b/assets/img/favicons/android-favicon.png differ diff --git a/assets/img/favicons/apple-touch-icon.png b/assets/img/favicons/apple-touch-icon.png index f8a0d71..f10835c 100644 Binary files a/assets/img/favicons/apple-touch-icon.png and b/assets/img/favicons/apple-touch-icon.png differ diff --git a/assets/img/favicons/favicon.png b/assets/img/favicons/favicon.png index 9b000a8..c084117 100644 Binary files a/assets/img/favicons/favicon.png and b/assets/img/favicons/favicon.png differ diff --git a/assets/img/hero.jpg b/assets/img/hero.jpg deleted file mode 100644 index a3f9b85..0000000 Binary files a/assets/img/hero.jpg and /dev/null differ diff --git a/assets/img/hero.png b/assets/img/hero.png deleted file mode 100644 index 290c202..0000000 Binary files a/assets/img/hero.png and /dev/null differ diff --git a/assets/img/logos/Chaoss_Logo.png b/assets/img/logos/Chaoss_Logo.png new file mode 100644 index 0000000..d66f722 Binary files /dev/null and b/assets/img/logos/Chaoss_Logo.png differ diff --git a/assets/img/logos/Huston-Tillotson-logo-Transparent.png b/assets/img/logos/Huston-Tillotson-logo-Transparent.png new file mode 100644 index 0000000..392837c Binary files /dev/null and b/assets/img/logos/Huston-Tillotson-logo-Transparent.png differ diff --git a/assets/img/logos/Linux-Foundation.svg b/assets/img/logos/Linux-Foundation.svg new file mode 100644 index 0000000..bc3abca --- /dev/null +++ b/assets/img/logos/Linux-Foundation.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/logos/NCCU.jpeg b/assets/img/logos/NCCU.jpeg new file mode 100644 index 0000000..a54ad82 Binary files /dev/null and b/assets/img/logos/NCCU.jpeg differ diff --git a/assets/img/logos/NCCU.png b/assets/img/logos/NCCU.png new file mode 100644 index 0000000..ccb1023 Binary files /dev/null and b/assets/img/logos/NCCU.png differ diff --git a/assets/img/logos/ato.png b/assets/img/logos/ato.png new file mode 100644 index 0000000..b04d7ad Binary files /dev/null and b/assets/img/logos/ato.png differ diff --git a/assets/img/logos/cisco.png b/assets/img/logos/cisco.png new file mode 100644 index 0000000..dedc2b8 Binary files /dev/null and b/assets/img/logos/cisco.png differ diff --git a/assets/img/logos/cisco.svg b/assets/img/logos/cisco.svg new file mode 100644 index 0000000..e571bca --- /dev/null +++ b/assets/img/logos/cisco.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/logos/clack-atlanta-univesity.png b/assets/img/logos/clack-atlanta-univesity.png new file mode 100644 index 0000000..8f28e6a Binary files /dev/null and b/assets/img/logos/clack-atlanta-univesity.png differ diff --git a/assets/img/logos/fidelity.png b/assets/img/logos/fidelity.png new file mode 100644 index 0000000..f2c9392 Binary files /dev/null and b/assets/img/logos/fidelity.png differ diff --git a/assets/img/logos/fidelity.svg b/assets/img/logos/fidelity.svg new file mode 100644 index 0000000..2728521 --- /dev/null +++ b/assets/img/logos/fidelity.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/logos/github.png b/assets/img/logos/github.png new file mode 100644 index 0000000..21e2c51 Binary files /dev/null and b/assets/img/logos/github.png differ diff --git a/assets/img/logos/github.svg b/assets/img/logos/github.svg new file mode 100644 index 0000000..b0f661c --- /dev/null +++ b/assets/img/logos/github.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/logos/intel.png b/assets/img/logos/intel.png new file mode 100644 index 0000000..34c7605 Binary files /dev/null and b/assets/img/logos/intel.png differ diff --git a/assets/img/logos/intel.svg b/assets/img/logos/intel.svg new file mode 100644 index 0000000..ccafaed --- /dev/null +++ b/assets/img/logos/intel.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/logos/microsoft.png b/assets/img/logos/microsoft.png new file mode 100644 index 0000000..24b8ecb Binary files /dev/null and b/assets/img/logos/microsoft.png differ diff --git a/assets/img/logos/microsoft.svg b/assets/img/logos/microsoft.svg new file mode 100644 index 0000000..bb1571d --- /dev/null +++ b/assets/img/logos/microsoft.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/logos/mlh-logo-color.svg b/assets/img/logos/mlh-logo-color.svg new file mode 100644 index 0000000..2e976fc --- /dev/null +++ b/assets/img/logos/mlh-logo-color.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/logos/redhat.png b/assets/img/logos/redhat.png new file mode 100644 index 0000000..a570430 Binary files /dev/null and b/assets/img/logos/redhat.png differ diff --git a/assets/img/logos/redhat.svg b/assets/img/logos/redhat.svg new file mode 100644 index 0000000..24f4b93 --- /dev/null +++ b/assets/img/logos/redhat.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/logos/shaw-university.png b/assets/img/logos/shaw-university.png new file mode 100644 index 0000000..03eb1d8 Binary files /dev/null and b/assets/img/logos/shaw-university.png differ diff --git a/assets/img/logos/stauglogo.png b/assets/img/logos/stauglogo.png new file mode 100644 index 0000000..0691511 Binary files /dev/null and b/assets/img/logos/stauglogo.png differ diff --git a/assets/img/logos/uncpembroke.png b/assets/img/logos/uncpembroke.png new file mode 100644 index 0000000..b00b998 Binary files /dev/null and b/assets/img/logos/uncpembroke.png differ diff --git a/assets/img/logos/wssu.png b/assets/img/logos/wssu.png new file mode 100644 index 0000000..48f2224 Binary files /dev/null and b/assets/img/logos/wssu.png differ diff --git a/assets/img/partners.svg b/assets/img/partners.svg deleted file mode 100644 index 16cd6eb..0000000 --- a/assets/img/partners.svg +++ /dev/null @@ -1,128 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/img/side-imgs.png b/assets/img/side-imgs.png deleted file mode 100644 index 0da2c52..0000000 Binary files a/assets/img/side-imgs.png and /dev/null differ diff --git a/assets/img/social-card.png b/assets/img/social-card.png index 9600277..31c57cc 100644 Binary files a/assets/img/social-card.png and b/assets/img/social-card.png differ diff --git a/assets/img/students.svg b/assets/img/students.svg deleted file mode 100644 index 9a60e6d..0000000 --- a/assets/img/students.svg +++ /dev/null @@ -1,122 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/img/svgs/arrow.svg b/assets/img/svgs/arrow.svg new file mode 100644 index 0000000..de80d32 --- /dev/null +++ b/assets/img/svgs/arrow.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/assets/img/svgs/burger.svg b/assets/img/svgs/burger.svg index db9f201..9a447c2 100644 --- a/assets/img/svgs/burger.svg +++ b/assets/img/svgs/burger.svg @@ -1,11 +1,3 @@ - - - - - - - + + diff --git a/assets/img/svgs/close.svg b/assets/img/svgs/close.svg index c6cd3cd..2513681 100644 --- a/assets/img/svgs/close.svg +++ b/assets/img/svgs/close.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/img/svgs/github.svg b/assets/img/svgs/github.svg new file mode 100644 index 0000000..fcb73c2 --- /dev/null +++ b/assets/img/svgs/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/svgs/linkedin.svg b/assets/img/svgs/linkedin.svg index ba22e5e..0235b71 100644 --- a/assets/img/svgs/linkedin.svg +++ b/assets/img/svgs/linkedin.svg @@ -1,10 +1,3 @@ - - - - - - - - - + + diff --git a/assets/img/svgs/play-btn.svg b/assets/img/svgs/play-btn.svg new file mode 100644 index 0000000..47cdda1 --- /dev/null +++ b/assets/img/svgs/play-btn.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/js/main.js b/assets/js/main.js index 4196607..90e888b 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -59,18 +59,6 @@ APP.Global = { document.body.classList.add('localhost'); } - var reportBtn = $('#download-report'); - reportBtnText = $('#download-report > span'), - reportNote = $('#downloaded-note'); - reportBtn.click(function(){ - setTimeout(function(){ - reportBtn.addClass('btn--completed'); - reportBtnText.html('Downloaded'); - reportNote.removeClass('d-none'); - }, 1000); - - }); - $('.js-menu-trigger').click(function(e){ e.preventDefault(); if( $('body').hasClass('menu-is-active') ) { @@ -83,8 +71,8 @@ APP.Global = { $(window).keyup(function (e) { var code = (e.keyCode ? e.keyCode : e.which); if (code == 9){ - if ($(window).width() < 768) { - if ( $('.navigation__inner a:focus, .navigation__inner input:focus').length) { + if ($(window).width() < 1012) { + if ( $('.navigation-drawer a:focus, .navigation-drawer input:focus').length) { $('body').addClass('menu-is-active'); } else { $('body').removeClass('menu-is-active'); @@ -97,6 +85,10 @@ APP.Global = { e.preventDefault(); }); + $('.js-close-nav').click(function(){ + $('body').removeClass('menu-is-active'); + }); + $(window).keyup(function (e) { var code = (e.keyCode ? e.keyCode : e.which); if (code == 9){ @@ -109,31 +101,6 @@ APP.Global = { //} } }); - - // report redirect - - let hash = window.location.hash.replace('#', ''); - $(document).ready(function(){ - if(hash === 'report') { - window.location.href = '/insights/#research'; - } - }); - - var morePosts = $('.js-show-more'); - var allPosts = $('#more-posts'); - allPosts.hide(); - morePosts.click(function(e){ - e.preventDefault(); - allPosts.slideDown(400); - morePosts.parent('.text-center').hide(); - // $(window).trigger('resize'); - // $(window).trigger('scroll'); - - $('html, body').animate({ - scrollTop: allPosts.offset().top - 148 - }, 1000); - }); - } } @@ -150,13 +117,12 @@ APP.Header = { var lastScrollTop = 0; - document.addEventListener("scroll", function(){ + function checkHPos(){ if (w.scrollTop() >= 120) { b.addClass('is-sticky'); } else { b.removeClass('is-sticky'); } - var st = window.pageYOffset || document.documentElement.scrollTop; if (st > lastScrollTop){ if( b.hasClass('scrolling-up') ){ @@ -169,8 +135,14 @@ APP.Header = { } } lastScrollTop = st <= 0 ? 0 : st; - }, false); + } + document.addEventListener("scroll", function(){ + checkHPos(); + }, false); + window.onload = function(event) { + checkHPos(); + }; $('.js-menu-trigger').click(function(e){ e.preventDefault(); @@ -180,27 +152,6 @@ APP.Header = { $('body').addClass('menu-is-open'); } }); - - - // var playBtn = document.getElementById('arctic-vault-video-play'); - // if( playBtn ) { - // video = document.getElementById('arctic-vault-video'); - // bd = document.body; - // safari = false; - // - // if(document.body.classList.contains('browser-safari')){ - // safari = true; - // } - // - // playBtn.onclick = function() { - // if(safari){ - // video.webkitRequestFullscreen(); - // } else { - // video.requestFullscreen(); - // } - // video.play(); - // } - // } } } diff --git a/become-a-maintainer.html b/become-a-maintainer.html new file mode 100644 index 0000000..5ff586b --- /dev/null +++ b/become-a-maintainer.html @@ -0,0 +1,180 @@ +--- +layout: default +id: all-in-for-maintainers-listening-tour +permalink: /all-in-for-maintainers-listening-tour/ +title: All In for Maintainers +--- + +
+
+
+

All In for Maintainers

+

{ All In for Maintainers Listening Tour }

+

Thank you for agreeing to participate in the All In for Maintainers Listening Tour.

+

All In for Maintainers is a program that is being designed to support maintainers with advancing diversity and inclusion within their communities through training and direct technical support. As part of this process, the Maintainers Listening Tour seeks to better understand what maintainers are doing to advance diversity, inclusion, and belonging within their communities, and the challenges they are facing along the way.

+

All inputs from the Listening Tour will be analyzed in the aggregate, and you will have the opportunity to approve quotations prior to publication, or to contribute anonymously. A summary report is expected to be shared January/February 2022.

+ +

For questions, please contact info@allinopensource.org.

+
+
+
+
+

Maintainers Listening Tour

+
+ + +
+
+
+ + + +
+ + +
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + +
+ +
+ + +
+ +
+ Please answer these questions based on what you have seen or done within or outside your community: +
+ +
+

New contributors

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

Repeat Contributors

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

Community Culture

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

Availability of Resources

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

The Future

+
+ + +
+
+ +
+ + +
+ +
+ + +
+ + + +
+
+ +
+
+
diff --git a/become-a-partner.html b/become-a-partner.html new file mode 100644 index 0000000..6244205 --- /dev/null +++ b/become-a-partner.html @@ -0,0 +1,114 @@ +--- +layout: default +id: become-a-partner +permalink: /become-a-partner/ +title: Become a partner +--- + +
+
+
+

Become a Partner

+

{ Our goal }

+

All In is a community of dedicated people, companies and organizations committed to advancing diversity, equity and inclusion within open source. We invite you to join corporate partners, industry leaders, researchers, and foundations, to build upon existing research and initiatives in order to create a more inclusive environment within open source for developers everywhere.

+
+
+
+
+

If you're a university, organization or corporation and you’d like to partner, please start by filling out the form below.

+
+ +
+
+
+ + + +
+
+
+ + +
+
+
+
+ + +
+
+
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+ + +
+
+ +
+ +
+
diff --git a/community.html b/community.html new file mode 100644 index 0000000..18d8d8f --- /dev/null +++ b/community.html @@ -0,0 +1,100 @@ +--- +layout: default +id: community +permalink: /community/ +title: Community Programs +--- + +
+
+
+
+
+ community icon +
+
+

{ All In Community }

+

All In for Maintainers

+
+ + About the All In for Maintainers Listening Tour + {% include arrow.html %} + + + About the All in for Maintainers Pilot + {% include arrow.html %} + +
+
+
+
+
+
+ + +
+
+
+ {% include video-community.html %} + +
+

Preliminary Findings:

+ +
+ + + Part 1 + + + + Part 2 + +
+
+
+
+
+

Maintainers Listening Tour

+

The Maintainers Listening Tour is a series of focus groups and individual interviews with maintainers who are interested in attracting and retaining new contributors with diverse backgrounds.

+

We will be collecting best practices, lessons learned, and stories that highlight:

+
    +
  • What maintainers are doing to advance diversity, equity and inclusion within their communities
    • +
  • What is working well
    • +
  • What is not working well
    • +
  • Challenges that may be prohibiting them from creating a culture of inclusion within their communities
    • +
+
+ +
+

Participate in the Maintainers Listening Tour

+ + Visit the online form + {% include arrow.html %} + +
+ + +
+
+
+ + +
+
+
+ person holding coffee working +
+
+

All In for Maintainers

+

An immersive program that provides training and technical support to maintainers who want to drive diversity and inclusion in their communities. Participants will receive programming and tools for attracting and maintaining contributors of diverse backgrounds, including accessibility audits, community hospitality techniques, code of conduct analysis, and inclusive language scans and updates.

+

The design for the All In for Maintainers pilot will be developed using the data from the Open Source DEI Survey and the Maintainers Listening Tour.

+ +
+

Coming soon: 2022 All In for Maintainers Pilot

+
+ Selection Process Opens Spring 2022 +
+
+
+
+
diff --git a/index.html b/index.html index 24ffadf..db6b19d 100644 --- a/index.html +++ b/index.html @@ -3,65 +3,125 @@ id: home --- +
+
+
+

We are All In.

+

A community dedicated to advancing diversity, equity, and inclusion within open source.

+
+

Learn more about our community.

+ + Visit our GitHub repo + {% include arrow.html %} + +
+
+
+ {% include video.html %} -
-
-
-

A community dedicated to advancing diversity, equity, and inclusion within open source.

+ green orb +
+
-
- - Learn More - {% octicon arrow-right height:16 %} - + curly bracket pattern +
- - Join the Community - {% octicon arrow-right height:16 %} - -
+
+
+

{ Our mission }

+

To open source
diversity & inclusion

-
-
+

Currently, diversity and inclusion is being approached in the same way that software development used to be prior to the creation of open source. Many efforts, in spite of significant resources and financial investment, are fragmented, not openly shared, only address part of the challenges, and are not collaborative with those outside of a single organization or very few partnerships.

+

To create a more inclusive open source community for developers everywhere, we will bring together corporate partners, industry leaders, researchers, and foundations to build upon existing research and initiatives. We invite you to join us.

+
+ + Become a partner + {% include arrow.html %} + +
- 3 images of students on a computer - -
-
-
-
-

Our missions is to “open source diversity and inclusion.”

-
-
-

Currently, diversity and inclusion within open source is being approached in the same way that software development used to be. Most efforts are fragmented, only address part of the challenges, and critically, are not openly shared.

-

We will bring together corporate partners, industry leaders, researchers, and foundations, and build upon existing research and initiatives, to create a more inclusive open source for developers everywhere.

-
-
+
+

Founding Partners

+ {% include logo-list.html %} +
+ + curly bracket pattern +
+ + +
+
+
+
+ woman on a computer + curly bracket open + curly bracket close + green orb +
+
+
+
+ man on a computer + curly bracket open + curly bracket close + blue orb +
-
- -
-
-
-
- - Fill out the Join the community form - -
- - -
- - Fill out the Maintainers Listening tour form - -
+
+ What we do graph: Academia, Social sector, Philanthropy, Government, Open Source DEI Leaders, Foundations, Corporate +
+
+
+

All In brings together corporate partners, industry leaders, researchers, and foundations to build upon existing research and initiatives to create a more inclusive open source community for developers everywhere.

-
+
+ + + + +
+
+

The goals of All In will be aligned across four pillars:

+
+
+ access icon +

Access

+

All In will seek to lower barriers to access and provide an on-ramp and clear pathways to success for future developers from underrepresented backgrounds and regions. Our programs will provide support to increase contributors to open source in various stages of their journey and from all walks of life - students, military veterans, career changers, retirees, and formerly or currently incarcerated.

+

We will also address infrastructure challenges such as inequities in course curriculum at some Minority Serving Institutions and challenges to access such as lack of reliable internet connectivity or cost to connect to the internet.

+ + Explore All In Access + {% include arrow.html %} + +
+
+ community icon +

Community

+

Inclusion happens at the community level. Maintainers and community leaders are largely responsible for setting the tone for a culture of inclusion within their communities. All In will engage with maintainers to understand their experiences, challenges, and what support they need to advance diversity, equity, and inclusion within their communities. Our efforts will center on providing resources, tools and direct technical assistance.

+

We will also partner with the CHAOSS Project to establish an All In badging program for maintainers, communities, and projects to publicly signal which communities are going beyond a stated commitment by doing the work to drive inclusion.

+ + Explore All In Community + {% include arrow.html %} + +
+ +
+ equity icon +

Equity

+

All In will leverage GitHub Sponsors to provide direct financial support to maintainers from marginalized and/or historically excluded backgrounds, and projects that serve under-resourced communities.

+

We will also seek to amplify underrepresented voices through the creation of the All In Speakers Bureau to increase the representation of open source speakers at conferences and events. We will also help connect new voices to opportunities to contribute to articles and podcasts.

+
- {% include students.html %} - {% include partners.html %} +
+ data icon +

Data

+

All In will provide insight into the current state of diversity, equity, and inclusion within open source, challenges that need to be addressed, and strengths that can be leveraged to create a more inclusive culture within our communities. We will make informed, data-driven decisions, ensure we have short term metrics of success, and monitor longitudinal data to measure long-term impact.

+

Our first initiative was to create the 2021 Open Source Diversity, Equity, and Inclusion Survey and partner with the Linux Foundation to survey across the open source ecosystem. View the final report here. We are now collaborating with corporate partners to research inequities in computer science and other technical education programs.

+
+
+
+