diff --git a/website/www/site/assets/icons/community/bee-icon.svg b/website/www/site/assets/icons/community/bee-icon.svg new file mode 100644 index 000000000000..d04da17d1006 --- /dev/null +++ b/website/www/site/assets/icons/community/bee-icon.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/community/box-icon.svg b/website/www/site/assets/icons/community/box-icon.svg new file mode 100644 index 000000000000..572896e70ec2 --- /dev/null +++ b/website/www/site/assets/icons/community/box-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/calendar-icon.svg b/website/www/site/assets/icons/community/calendar-icon.svg new file mode 100644 index 000000000000..18229ffe4836 --- /dev/null +++ b/website/www/site/assets/icons/community/calendar-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/bug.svg b/website/www/site/assets/icons/community/contact-us/bug.svg new file mode 100644 index 000000000000..62267024ea72 --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/bug.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/discussion.svg b/website/www/site/assets/icons/community/contact-us/discussion.svg new file mode 100644 index 000000000000..dc9c94e95d50 --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/discussion.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/gitArrows.svg b/website/www/site/assets/icons/community/contact-us/gitArrows.svg new file mode 100644 index 000000000000..30a857d94adc --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/gitArrows.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/knot.svg b/website/www/site/assets/icons/community/contact-us/knot.svg new file mode 100644 index 000000000000..e47af8cd8ca2 --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/knot.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/messages.svg b/website/www/site/assets/icons/community/contact-us/messages.svg new file mode 100644 index 000000000000..43806ca5bc3a --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/messages.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/notification.svg b/website/www/site/assets/icons/community/contact-us/notification.svg new file mode 100644 index 000000000000..3b2976ad87ff --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/notification.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/question-mark.svg b/website/www/site/assets/icons/community/contact-us/question-mark.svg new file mode 100644 index 000000000000..bb230303a16b --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/question-mark.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/envelope-icon.svg b/website/www/site/assets/icons/community/envelope-icon.svg new file mode 100644 index 000000000000..6ced3b9edd59 --- /dev/null +++ b/website/www/site/assets/icons/community/envelope-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/message-icon.svg b/website/www/site/assets/icons/community/message-icon.svg new file mode 100644 index 000000000000..466af8040595 --- /dev/null +++ b/website/www/site/assets/icons/community/message-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/scss/_global.sass b/website/www/site/assets/scss/_global.sass index 2410e0d64693..5d8367e45a7c 100644 --- a/website/www/site/assets/scss/_global.sass +++ b/website/www/site/assets/scss/_global.sass @@ -29,9 +29,11 @@ body &:not(.body--index) .body__contained + @media (max-width: $ak-breakpoint-lg) + padding: 0 padding: 0 30px max-width: 1280px - + figure img width: 100% @@ -65,9 +67,13 @@ body width: 100% .container-main-content - padding: 0 20px + @media (max-width: $ak-breakpoint-lg) + padding: 0 24px + + padding: 0 22px position: relative + background-color: #fff margin-top: 85px @media (min-width: $tablet) - margin-top: 0 \ No newline at end of file + margin-top: 0 diff --git a/website/www/site/assets/scss/_hero.scss b/website/www/site/assets/scss/_hero.scss index e204d1bf015d..e803db45c09e 100644 --- a/website/www/site/assets/scss/_hero.scss +++ b/website/www/site/assets/scss/_hero.scss @@ -15,111 +15,116 @@ * limitations under the License. */ -@import "media"; - -.hero-desktop { - position: relative; - margin-bottom: 0; - width: 100%; - height: 100%; - display: inherit; - margin-top: -30px; - - .hero-content { - position: absolute; - z-index: 1; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; - - h3 { - @extend .hero-title; - - text-transform: uppercase; - margin: 0 auto 24px auto; - } - - h1 { - @extend .hero-heading; - width: 506px; - - margin: 0 auto 36px auto; - } - - h2 { - @extend .hero-subheading; - - width: 344px; - margin: 0 auto 56px auto; - } - - a { - text-decoration: none; - } - - button { - width: 184px; - height: 46px; - padding: 15px 28px 15px 26px; - border-radius: 100px; - box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), - 0 4px 4px 0 rgba(0, 0, 0, 0.06); - background-color: $color-white; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto; - border: none; - outline: none; - - span { - text-transform: uppercase; - font-size: 14px; - font-weight: bold; - letter-spacing: 0.6px; - color: $color-sun; - } - } - - button:hover { - background-color: $color-white; - box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), - 0 4px 6px 0 rgba(0, 0, 0, 0.24); - } - - button:focus { - box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), - 0 4px 4px 0 rgba(0, 0, 0, 0.06); - } - } -} - -@media (max-width: $tablet) { - .hero-desktop { - margin-top: 70px; - - .hero-content { - h3 { - margin: 0 auto 16px auto; - } - - h1 { - width: 300px; - margin: 0 auto 24px auto; - } - - h2 { - width: 300px; - margin: 0 auto; - } - - button { - display: none; - } - } - } -} + @import "media"; + @import "typography"; + + .hero-desktop { + position: relative; + margin-bottom: 0; + width: 100%; + height: 100%; + display: inherit; + margin-top: -30px; + min-height: 361px; + .hero-content { + position: absolute; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + + h3 { + @extend .hero-title; + text-transform: uppercase; + margin: 0 auto 24px auto; + } + + h1 { + @extend .hero-heading; + width: 506px; + height: 92px; + font-size: 46px; + margin: 0 auto 36px auto; + } + + h2 { + @extend .hero-subheading; + width: 344px; + margin: 0 auto 56px auto; + } + + a { + text-decoration: none; + } + + button { + width: 184px; + height: 46px; + border-radius: 100px; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + background-color: $color-white; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + border: none; + outline: none; + svg { + width: 14px; + height: 16px; + } + span { + text-transform: uppercase; + font-size: 14px; + font-weight: bold; + letter-spacing: 0.6px; + line-height: 1.14; + color: $color-sun; + margin-left: 12px; + } + } + + button:hover { + background-color: $color-white; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } + + button:focus { + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + } + } + } + + @media (max-width: $tablet) { + .hero-desktop { + margin-top: 64px; + + .hero-content { + h3 { + margin: 0 auto 16px auto; + } + + h1 { + width: 300px; + margin: 0 auto 24px auto; + font-size: 32px; + } + + h2 { + width: 300px; + margin: 0 auto; + } + + button { + display: none; + } + } + } + } @media (max-width: $mobile) { .hero-desktop { diff --git a/website/www/site/assets/scss/_lists.scss b/website/www/site/assets/scss/_lists.scss new file mode 100644 index 000000000000..c2bdc03d6ef6 --- /dev/null +++ b/website/www/site/assets/scss/_lists.scss @@ -0,0 +1,285 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +@import "media"; + +.arrow-list { + margin-top: 26px; + h3 { + max-width: 555px; + } + ul { + font-size: 16px; + font-weight: normal; + line-height: 1.63; + letter-spacing: 0.43px; + position: relative; + padding-left: 26px; + li::marker { + content: "\2192"; + color: #ff6d05; + font-size: 24px; + } + li { + list-style-type: none; + list-style-position: outside; + padding-left: 8px; + margin-bottom: -2px; + } + li:last-of-type { + margin-bottom: 25px; + } + } + figure { + width: 112px; + height: 112px; + margin-top: 64px; + } + a { + color: #333333; + } +} + +.arrow-list-header { + color: #333333; + text-decoration: none; + display: flex; + max-height: 40px; + margin-bottom: 74px; + &:hover { + cursor: default; + text-decoration: none; + } + @media (max-width: $mobile) { + margin-bottom: 50px; + &:hover { + cursor: pointer; + text-decoration: underline; + } + h2 { + font-size: 24px; + line-height: 1.25; + font-weight: 500; + letter-spacing: normal; + margin-top: 46px; + } + } + figure { + margin-top: 40px; + margin-right: 5px; + width: auto; + height: auto; + @media (min-width: $mobile) { + display: none; + } + img { + width: 18px; + height: 18px; + padding-right: 16px; + transform: rotate(-90deg); + } + } +} +.rotate { + img { + transform: rotate(0deg) !important; + margin-top: 10px; + } +} +.list { + margin-top: 32px; + max-width: 640px; +} +.icon-list { + .list-item { + display: flex; + margin-bottom: 38px; + position: relative; + + img { + position: absolute; + top: 7px; + z-index: 2; + } + .reverse { + transform: rotate(-180deg); + } + + .cirkle { + width: 24px; + height: 24px; + background: #ff6d05; + border-radius: 50%; + text-align: center; + z-index: 5; + position: relative; + i { + vertical-align: bottom; + color: #fff; + } + } + .list-item-icon { + width: 44px; + height: 44px; + display: block; + margin-right: 25px; + } + .list-item-header { + font-size: 22px; + font-weight: 500; + letter-spacing: normal; + line-height: 1.36; + margin-top: 10px; + a { + color: #333333; + } + @media (max-width: $mobile) { + font-weight: 500; + } + } + .list-item-description { + @media (max-width: $mobile) { + position: absolute; + left: 55px; + } + } + } + .pillars-item { + display: flex; + align-items: center; + margin-bottom: 14px; + .pillars-item-icon { + margin-right: 28px; + } + + .pillars-item-description { + width: 100%; + max-width: 684px; + + .pillars-item-header { + font-size: 16px; + font-weight: bold; + line-height: 1.2; + letter-spacing: 0.43px; + margin-bottom: 6px; + margin-top: 10px; + } + + .pillars-item-text { + font-size: 14px; + font-weight: normal; + line-height: 1.57; + letter-spacing: 0.43px; + } + } + } +} +.documentation-list { + padding-left: 12px; + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + max-width: 895px; + .row { + display: flex; + flex-direction: column; + margin-top: 63px; + @media (max-width: $mobile) { + max-width: 260px; + } + + .item-icon { + height: 93px; + max-width: 260px; + display: flex; + align-items: center; + @media (max-width: $mobile) { + justify-content: center; + } + } + a { + font-size: 16px; + font-weight: bold; + line-height: 1.63; + letter-spacing: 0.43px; + color: #333333; + } + .item-description { + max-width: 260px; + margin-right: 32px; + margin-top: 20px; + @media (max-width: $mobile) { + margin-right: 0; + width: auto; + } + } + } +} +.sdks { + max-width: 635px; + .column { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .row { + margin-top: 48px; + .item-description { + margin-right: 0; + } + } +} +.collapsable-list { + margin: 52px 0; + a { + font-size: 14px; + font-weight: bold; + font-stretch: normal; + font-style: normal; + line-height: 1.14; + letter-spacing: 0.6px; + color: #f26628; + } + li { + a { + font-size: 16px; + line-height: 1.63; + letter-spacing: 0.43px; + color: #333333; + } + } +} +.mobile-column { + @media (max-width: $mobile) { + flex-direction: column; + align-items: center; + text-align: center; + } +} +.margin-50 { + margin-top: 50px; +} +@media (min-width: 768px) { + .arrow-list { + .collapse.dont-collapse-sm { + display: block; + height: auto !important; + visibility: visible; + } + } +} diff --git a/website/www/site/assets/scss/_navbar-desktop.scss b/website/www/site/assets/scss/_navbar-desktop.scss index 57eb63350808..d3eb4e9832f3 100644 --- a/website/www/site/assets/scss/_navbar-desktop.scss +++ b/website/www/site/assets/scss/_navbar-desktop.scss @@ -19,43 +19,57 @@ .navigation-bar-mobile { display: none; + .arrow-icon { + display: flex; + align-items: baseline; + margin-left: 10px; + } +} +.nav-tabs { + border-bottom: none; } - .navigation-bar-desktop { display: flex; height: 96px; width: 100%; align-items: center; - justify-content: space-between; margin-bottom: 30px; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06); background-color: $color-white; z-index: 10000; // just to make sure that navbar always on top of other elements + #iconsBar { + display: flex; + } + a { @extend .component-text; - + font-weight: 500; color: $color-dark-gray; - letter-spacing: 0.2; - margin-right: 56px; + letter-spacing: 0.2px; + line-height: 1.63; + margin-right: 39px; text-decoration: none; cursor: pointer; } .navbar-logo { margin-left: 58px; - + margin-bottom: 4px; img { width: 88px; } } - + .navbar-bar-left { + display: flex; + justify-content: space-between; + width: 100%; + } .navbar-links { display: flex; align-items: center; justify-content: space-between; z-index: 10000; - :last-child { margin-right: 0; } @@ -96,9 +110,14 @@ box-shadow: none; padding-top: 34px; padding-bottom: 0; - + border-radius: 0; + li { + height: 36px; + } a { @extend .component-text; + line-height: 1.63; + letter-spacing: 0.2px; } } } @@ -121,7 +140,10 @@ box-shadow: none; padding-top: 35px; padding-bottom: 0; - + border-radius: 0; + li { + height: 36px; + } a { @extend .component-text; @@ -163,7 +185,7 @@ .navigation-bar-desktop { display: none; } - + .navigation-bar-mobile { display: block; } @@ -171,4 +193,4 @@ .page-nav { margin-top: 30px; } -} \ No newline at end of file +} diff --git a/website/www/site/assets/scss/_navbar-mobile.sass b/website/www/site/assets/scss/_navbar-mobile.sass index 762b5e517b9a..198ced5f9443 100644 --- a/website/www/site/assets/scss/_navbar-mobile.sass +++ b/website/www/site/assets/scss/_navbar-mobile.sass @@ -16,16 +16,31 @@ */ .navbar - padding: 15px 0 - + padding: 0 !important + min-height: 64px + ::before + display: none + ::after + display: none .navbar-nav > li > a text-transform: uppercase - + .navbar-link + font-size: 16px + font-weight: 500 + line-height: normal + letter-spacing: normal .navbar-header - margin-left: $pad float: none + display: flex + align-items: center + justify-content: space-between + height: 100% + margin-top: 5px .navbar-brand + padding: 0 + display: flex + align-items: center +md margin-right: $pad @@ -41,11 +56,12 @@ color: $color-dark-gray .navbar-toggle - margin-right: 24px + margin-right: 16px !important .icon-bar background-color: $color-sun height: 3px + width: 20px @media (max-width: $tablet) display: block @@ -55,16 +71,38 @@ background-color: $color-white bottom: 0 min-height: 100vh - max-width: 256px + max-width: 303px padding: 15px position: fixed top: 0 transition: transform 100ms linear - width: calc(100% - 32px) + width: calc(100% - 72px) right: 0 - + overflow-y: auto + + .navbar-toggle + margin: 0 + .dropdown-toggle + display: flex + align-items: center + .navbar-nav + margin-top: 58px .navbar-nav > li width: 100% + padding: 5px 0 + + span.navbar-link + padding: 10px 15px + color: #555555 + ul + list-style: none !important + li + padding: 9px 0 + a + letter-spacing: 0.2px + + .navbar-link + text-transform: none &.closed transform: translateX(100%) @@ -91,7 +129,12 @@ &.open opacity: 0.5 width: 100% + overflow-y: auto @media (max-width: $tablet) .navbar-right margin-right: -15px + margin-top: 0 !important + +.fixedPosition + position: fixed diff --git a/website/www/site/assets/scss/_search.scss b/website/www/site/assets/scss/_search.scss new file mode 100644 index 000000000000..a035df1566eb --- /dev/null +++ b/website/www/site/assets/scss/_search.scss @@ -0,0 +1,81 @@ +/** + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.searchBar { + width: 297px; + margin-right: 30px; + display: flex; + align-items: center; + table { + margin: 0; + } + div { + padding: 0; + svg { + padding-top: 2px; + } + } + .gsc-search-button { + display: none; + } + #__gcse_1 { + max-width: 213px; + } + .gsib_b { + display: none; + } + .gsc-input-box { + border-radius: 100px; + background-color: #f1f1f2; + table { + margin: 0; + } + input { + background-color: #f1f1f2; + min-width: 213px; + font-size: 12px; + font-weight: 400; + line-height: 1.83; + letter-spacing: normal; + } + } +} +.disappear { + display: none !important; +} +.searchBar-mobile { + width: 100%; + table { + margin: 0; + } + .gsc-input-box { + border-radius: 100px; + max-height: 36px; + background-color: #f1f1f2; + padding-top: 2px; + input { + background-color: #f1f1f2; + transform: translateY(-2px); + } + } + .gsc-search-button { + background-color: #fff; + border: none; + svg { + fill: #ff6d00; + } + &:focus { + background-color: #fff; + } + } +} diff --git a/website/www/site/assets/scss/_section-nav.sass b/website/www/site/assets/scss/_section-nav.sass index d8c4ed195b83..0712b6acec56 100644 --- a/website/www/site/assets/scss/_section-nav.sass +++ b/website/www/site/assets/scss/_section-nav.sass @@ -14,7 +14,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - .section-nav max-width: 250px position: fixed @@ -114,6 +113,3 @@ &.open transform: translateX(0) - - - diff --git a/website/www/site/assets/scss/_table-wrapper.sass b/website/www/site/assets/scss/_table-wrapper.sass deleted file mode 100644 index 299b0019f62c..000000000000 --- a/website/www/site/assets/scss/_table-wrapper.sass +++ /dev/null @@ -1,24 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.table-wrapper - > table - @extend .table - -.table-bordered-wrapper - > table - @extend .table-bordered diff --git a/website/www/site/assets/scss/_table-wrapper.scss b/website/www/site/assets/scss/_table-wrapper.scss new file mode 100644 index 000000000000..3a7512266b81 --- /dev/null +++ b/website/www/site/assets/scss/_table-wrapper.scss @@ -0,0 +1,107 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +$padding: 24px; +.table-wrapper { + margin-top: 64px; + + table { + @extend .table; + max-width: 853px; + } + th:nth-child(1) { + @media (max-width: $mobile) { + padding-left: 0 !important; + width: 115px; + } + padding-left: 67px + $padding !important; + width: 491px; + } + th:nth-child(2) { + @media (max-width: $mobile) { + width: 111px; + } + width: 181px; + } + th { + padding: 14px 14px 17px 14px !important; + border: none !important; + border-bottom: 1px solid #ff6d05 !important; + letter-spacing: 2px; + line-height: normal !important; + text-transform: uppercase; + } + td { + @media (max-width: $mobile) { + padding: $padding/4 !important; + } + padding: $padding !important; + border-bottom: 1px solid rgba(255, 109, 5, 0.24); + div { + display: flex; + position: relative; + } + img, + svg { + @media (max-width: $mobile) { + display: none; + } + position: absolute; + top: 50%; + transform: translateY(-60%); + } + p { + @media (max-width: $mobile) { + margin: 0; + } + margin-left: 67px; + font-size: 14px; + line-height: 1.57; + } + } + td:nth-child(3) { + @media (max-width: $mobile) { + padding: $padding/3 !important; + padding-left: $padding/4 !important; + } + padding: $padding/3 !important; + padding-left: $padding !important; + div { + flex-direction: column; + } + a { + text-decoration: underline; + line-height: 2; + letter-spacing: 0.43px; + } + } + td:nth-child(2) { + background-color: rgba(255, 109, 0, 0.04); + padding-left: $padding/2 !important; + padding-right: 0 !important; + line-height: 1.57; + letter-spacing: 0.43px; + } + a { + color: #f26628; + } +} + +.table-bordered-wrapper { + table { + @extend .table-bordered; + } +} diff --git a/website/www/site/assets/scss/_typography.scss b/website/www/site/assets/scss/_typography.scss index 807619cadd05..a4d8877f3199 100644 --- a/website/www/site/assets/scss/_typography.scss +++ b/website/www/site/assets/scss/_typography.scss @@ -19,7 +19,7 @@ .component-title { font-size: 36px; - font-weight: normal; + font-weight: 500; font-style: normal; line-height: 1.1; letter-spacing: normal; @@ -129,11 +129,73 @@ @media (max-width: $tablet) { .component-title { font-size: 28px; + line-height: 1.29; } .component-large-header { font-size: 24px; } - .hero-heading { - font-size: 32px; - } +} + +h1 { + font-size: 36px; + font-weight: 500; + line-height: 1.1; + letter-spacing: normal; + margin-bottom: 24px; + margin-top: 64px; +} +h2 { + font-size: 30px; + font-weight: 500; + line-height: 1.2; + letter-spacing: normal; + margin-bottom: 24px; + margin-top: 56px; +} +h3 { + font-size: 24px; + font-weight: 500; + line-height: 1.25; + letter-spacing: normal; + margin-bottom: 16px; + margin-top: 48px; +} +h4 { + font-size: 22px; + font-weight: 500; + line-height: 1.36; + letter-spacing: normal; + margin-bottom: 12px; + margin-top: 48px; +} +h5 { + font-size: 18px; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.43px; + margin-bottom: 12px; + margin-top: 32px; +} +h6 { + font-size: 16px; + font-weight: bold; + line-height: 1.2; + letter-spacing: 0.43px; + margin-bottom: 12px; + margin-top: 32px; +} + +p { + font-size: 16px; + font-weight: normal; + line-height: 1.63; + letter-spacing: 0.43px; +} +.hero-heading { + font-size: 32px; +} +li { + font-size: 16px; + letter-spacing: 0.43px; + line-height: 1.63; } diff --git a/website/www/site/assets/scss/bootstrap/_navbar.scss b/website/www/site/assets/scss/bootstrap/_navbar.scss index 11e5c01c1585..ee2bb17a847b 100755 --- a/website/www/site/assets/scss/bootstrap/_navbar.scss +++ b/website/www/site/assets/scss/bootstrap/_navbar.scss @@ -210,7 +210,7 @@ // Bars .icon-bar { display: block; - width: 22px; + width: 20px; height: 2px; border-radius: 1px; } diff --git a/website/www/site/assets/scss/main.scss b/website/www/site/assets/scss/main.scss index b40befd414cd..b38b7e8a9736 100644 --- a/website/www/site/assets/scss/main.scss +++ b/website/www/site/assets/scss/main.scss @@ -41,7 +41,9 @@ @import "_pillars.scss"; @import "_section-nav.sass"; @import "_page-nav.sass"; -@import "_table-wrapper.sass"; +@import "_table-wrapper.scss"; @import "_calendar.scss"; +@import "_lists.scss"; @import "_quotes.scss"; -@import "navbar-desktop.scss"; \ No newline at end of file +@import "_navbar-desktop.scss"; +@import "_search.scss"; diff --git a/website/www/site/content/en/community/_index.md b/website/www/site/content/en/community/_index.md new file mode 100644 index 000000000000..917bc1ef6065 --- /dev/null +++ b/website/www/site/content/en/community/_index.md @@ -0,0 +1,28 @@ +--- +title: "Community Beam" +aliases: + - /use/issue-tracking/ + - /use/mailing-lists/ + - /get-started/support/ +--- + + + +# Welcome to the Beam Community! + +Beam is a tool created by community for community. We tirelessly work to make it better and you can do it too! +If you are a data or software developer this is a place for you. + +{{< community/list_with_icons community_list >}} diff --git a/website/www/site/content/en/community/contact-us.md b/website/www/site/content/en/community/contact-us.md index cca25cda1224..b59cc06662fa 100644 --- a/website/www/site/content/en/community/contact-us.md +++ b/website/www/site/content/en/community/contact-us.md @@ -6,6 +6,7 @@ aliases: - /use/mailing-lists/ - /get-started/support/ --- + -# Contact Us +# Contact us! + +The Apache Beam community is friendly and welcoming. We are glad to help with any +question, suggestion or idea you have. Contact us in the following channels: + +## Available contact channels + +{{< community/table_with_icons contact_us >}} + +## Mailing list, what are they and how they work -There are many ways to reach the Beam user and developer communities - use -whichever one seems best. +The official communication channels for Apache projects are their mailing lists, and Apache Beam has two main lists: [user@beam.apache.org](user@beam.apache.org) and [dev@beam.apache.org](dev@beam.apache.org). The topics for each of them can be seen in the section above. - -
+### Subsribe and Unsubscribe: -| How to contact us | When to use it | -| ----------------- | ---------------| -| [user@](https://lists.apache.org/list.html?user@beam.apache.org) mailing list | User support and questions ([Subscribe](mailto:user-subscribe@beam.apache.org)[^1], [Unsubscribe](mailto:user-unsubscribe@beam.apache.org)[^1], [Archives](https://lists.apache.org/list.html?user@beam.apache.org)) | -| [dev@](https://lists.apache.org/list.html?dev@beam.apache.org) mailing list | Development discussions ([Subscribe](mailto:dev-subscribe@beam.apache.org)[^1], [Unsubscribe](mailto:dev-unsubscribe@beam.apache.org)[^1], [Archives](https://lists.apache.org/list.html?dev@beam.apache.org)) | -| [commits@](https://lists.apache.org/list.html?commits@beam.apache.org) mailing list | Firehose of commits, bugs, pull requests, etc. ([Subscribe](mailto:commits-subscribe@beam.apache.org)[^1], [Unsubscribe](mailto:commits-unsubscribe@beam.apache.org)[^1], [Archives](https://lists.apache.org/list.html?commits@beam.apache.org)) | -| [builds@](https://lists.apache.org/list.html?builds@beam.apache.org) mailing list | Firehose of build notifications from Jenkins ([Subscribe](mailto:builds-subscribe@beam.apache.org)[^1], [Unsubscribe](mailto:builds-unsubscribe@beam.apache.org)[^1], [Archives](https://lists.apache.org/list.html?builds@beam.apache.org)) | -| [JIRA bug tracker](https://issues.apache.org/jira/browse/BEAM) | Report bugs / discover known issues | -| [StackOverflow](https://stackoverflow.com/questions/tagged/apache-beam) | Ask and answer user support questions | -| [Slack](https://s.apache.org/beam-slack-channel) | Chat with users and developers in the ASF Slack. Note: Please [join the #beam channel](https://s.apache.org/beam-slack-channel) after you [created an account](https://s.apache.org/slack-invite). Please do not ask Beam questions in #general. | +Prior to sending emails to these lists, you need to subscribe. To subscribe, send a blank email to [user-subscribe@beam.apache.org](user-subscribe@beam.apache.org) or [dev-subscribe@beam.apache.org](dev-subscribe@beam.apache.org) depending on the list you want to write to. -
+### Useful Tips for Sending Emails -If you have questions about how to use Apache Beam, we recommend you try out the [user@](https://lists.apache.org/list.html?user@beam.apache.org) mailing list, and [StackOverflow](https://stackoverflow.com/questions/tagged/apache-beam). +Tip 1: Use tags in your subject line. +A tag is a word within a pair of brackets [] that indicate the type of message you’re sending. For example: [Bug] or [Proposal] or [Question] or [Idea]. Tags help folks navigate emails easier. -[^1]: To subscribe or unsubscribe, a blank email is fine. +Tip 2: If you’re asking a troubleshooting question, provide as much information as possible to help others replicate your issue or find possible solutions. -If you wish to report a security vulnerability, please contact [security@apache.org](mailto:security@apache.org). Apache Beam follows the typical [Apache vulnerability handling process](https://apache.org/security/committers.html#vulnerability-handling). +Tip 3: Share complete links instead of hyperlinks. A common practice in Apache is adding a number tag like [1] to indicate a word is a link or an attachment, and use the tag as a footnote to add the complete link at the end of your message. diff --git a/website/www/site/data/authors.yml b/website/www/site/data/authors.yml index 24e90c5999f3..6f97254bc04a 100644 --- a/website/www/site/data/authors.yml +++ b/website/www/site/data/authors.yml @@ -213,4 +213,4 @@ ilyakozyrev: alexkosolapov: name: Alex Kosolapov email: alex.kosolapov@akvelon.com - twitter: \ No newline at end of file + twitter: diff --git a/website/www/site/data/en/community_list.yaml b/website/www/site/data/en/community_list.yaml new file mode 100644 index 000000000000..9a6b9e787489 --- /dev/null +++ b/website/www/site/data/en/community_list.yaml @@ -0,0 +1,27 @@ +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +- title: Join Beam Community + body: Learn more about the contribution pathway you can take to become a committer or PMC member. + icon: icons/community/bee-icon.svg +- title: Contact us + body: Here’s a list of channels that the Apache Beam community and Project Management Committee (PMC) monitor and interact in. We look forward to seeing you! + icon: icons/community/envelope-icon.svg +- title: Keep up with Beam news and updates + body: Follow our official Twitter account and subscribe to our YouTube channel to stay up-to-date with project updates and the latest training. + icon: icons/community/message-icon.svg +- title: Meet with the community + body: Check out our calendar of events in the homepage, we update it frequently so you know where to meet us. + icon: icons/community/calendar-icon.svg +- title: Promotional assets + body: Looking for some marketing material for your next Beam talk or pitch? Here’s a list of our brand assets including logos, presentations, and the firefly mascot! + icon: icons/community/box-icon.svg diff --git a/website/www/site/data/en/contact_us.yaml b/website/www/site/data/en/contact_us.yaml new file mode 100644 index 000000000000..c5e09e35411f --- /dev/null +++ b/website/www/site/data/en/contact_us.yaml @@ -0,0 +1,114 @@ +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +- columns: + - purpose + - channel + - action + data: + - purpose: Get user support, ask general questions and stay up-to-date with project news + contact: + { + email: user@beam.apache.org, + link: "https://lists.apache.org/list.html?user@beam.apache.org", + add: "User mailing list:" + } + icon: icons/community/contact-us/question-mark.svg + actions: + [ + { + action: Subscribe, + link: "mailto:user-subscribe@beam.apache.org" + }, + { + action: Archives, + link: "https://lists.apache.org/list.html?user@beam.apache.org", + }, + { + action: Read tips below, + } + ] + - purpose: Developer and contributor discussions + contact: + { + email: dev@beam.apache.org, + link: "https://lists.apache.org/list.html?dev@beam.apache.org", + add: "Developer mailing list:" + } + icon: icons/community/contact-us/discussion.svg + actions: + [ + { + action: Subscribe, + link: "mailto:dev-subscribe@beam.apache.org" + }, + { + action: Archives, + link: "https://lists.apache.org/list.html?dev@beam.apache.org", + }, + { + action: Read tips below, + } + ] + - purpose: Report bugs, request features, follow known issues + contact: + { + email: Apache Beam Jira Tracker, + link: "https://issues.apache.org/jira/browse/BEAM", + } + icon: icons/community/contact-us/bug.svg + actions: + [ + { + action: To create an issue you need a Jira account. Open one here., + link: "https://issues.apache.org/jira/secure/Signup!default.jspa", + }, + ] + - purpose: Ask and answer community questions + contact: + { + email: "Apache Beam category in Stackoverflow.", + link: "https://stackoverflow.com/questions/tagged/apache-beam", + } + icon: icons/community/contact-us/messages.svg + actions: [{ action: "‐" }] + - purpose: Contact users and contributors in real time through the ASF slack workspace. + contact: + { + email: The ASF slack workspace, + link: "https://s.apache.org/beam-slack-channel", + } + icon: icons/community/contact-us/knot.svg + actions: [{ action: "Join the #beam chanel and browse other available channels. Don’t ask Beam questions in #general, we don’t monitor it." }] + - purpose: Firehose of commits, bugs, pull requests, etc. + contact: + { + email: builds@beam.apache.org, + link: "https://lists.apache.org/list.html?builds@beam.apache.org", + add: Build mailing list, + } + icon: icons/community/contact-us/gitArrows.svg + actions: [{ + action: Archives, + link: "https://lists.apache.org/list.html?commits@beam.apache.org", + }] + - purpose: 'Firehose of build notifications from Jenkins' + contact: { + email: commits@beam.apache.org, + link: "https://s.apache.org/beam-slack-channel", + add: Commits mailing list + } + icon: icons/community/contact-us/notification.svg + actions: [{ + action: Archives, + link: "https://lists.apache.org/list.html?commits@beam.apache.org", + }] diff --git a/website/www/site/i18n/navbar/en.yaml b/website/www/site/i18n/navbar/en.yaml index ae6255e50683..74cc78caf1f3 100644 --- a/website/www/site/i18n/navbar/en.yaml +++ b/website/www/site/i18n/navbar/en.yaml @@ -9,7 +9,7 @@ # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. - + - id: nav-toggle-navigation translation: "Toggle navigation" - id: nav-get-started @@ -42,3 +42,5 @@ translation: "Sponsorship" - id: nav-code-of-conduct translation: "Code of Conduct" +- id: nav-powered-by + translation: "Powered by" diff --git a/website/www/site/layouts/partials/head.html b/website/www/site/layouts/partials/head.html index b3773320be6d..c017268175e8 100644 --- a/website/www/site/layouts/partials/head.html +++ b/website/www/site/layouts/partials/head.html @@ -45,7 +45,7 @@ - + + + +
  • - {{ T "nav-get-started" }} -
    • -
  • - {{ T "nav-documentation" }} + {{ T "nav-get-started" }}
  • - {{ T "nav-languages" }} + Documentation +
  • - {{ T "nav-runners" }} + {{ T "nav-roadmap" }}
  • - {{ T "nav-roadmap" }} -
    • -
  • - {{ T "nav-contribute" }} -
    • -
  • - {{ T "nav-community" }} -
    • -
  • {{ T "nav-blog" }}
    • + {{ T "nav-community" }} + +
  • + {{ T "nav-contribute" }} +
    • +
  • {{ T "nav-blog" }}
    • +
  • + {{ T "nav-powered-by" }} +
    • @@ -97,28 +118,44 @@ -
    - {{ T "nav-get-started" }} -
  • - - -
    • - {{ T "nav-roadmap" }} - {{ T "nav-community" }} - {{ T "nav-contribute" }} - {{ T "nav-blog" }} -
    +
    +
    + {{ T "nav-get-started" }} +
  • + + +
    • + {{ T "nav-roadmap" }} + {{ T "nav-community" }} + {{ T "nav-contribute" }} + {{ T "nav-blog" }} + {{ T "nav-powered-by" }} +
    +
    + + {{ with resources.Get "icons/search-icon.svg" }} + {{ .Content | safeHTML }} + {{ end }} + + + + + {{ with resources.Get "icons/edit-icon.svg" }} + {{ .Content | safeHTML }} + {{ end }} + +
    • +
    +
    + + + + {{ with resources.Get "icons/close-icon.svg" }} + {{ .Content | safeHTML }} + {{ end }} + +
    +
    + diff --git a/website/www/site/layouts/partials/section-menu/en/community.html b/website/www/site/layouts/partials/section-menu/en/community.html index cbefd010143a..2034d12c8b62 100644 --- a/website/www/site/layouts/partials/section-menu/en/community.html +++ b/website/www/site/layouts/partials/section-menu/en/community.html @@ -9,7 +9,6 @@ See the License for the specific language governing permissions and limitations under the License. See accompanying LICENSE file. */}} -
  • Community
  • Integrations
  • Contact Us
    • @@ -31,3 +30,4 @@ width="14" height="14" alt="External link to Beam roster"> + diff --git a/website/www/site/layouts/shortcodes/community/list_with_icons.html b/website/www/site/layouts/shortcodes/community/list_with_icons.html new file mode 100644 index 000000000000..fe0ca575c210 --- /dev/null +++ b/website/www/site/layouts/shortcodes/community/list_with_icons.html @@ -0,0 +1,28 @@ +{{/* + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. + */}} + +{{ $data := index $.Site.Data .Site.Language.Lang (.Get 0) }} +
    + {{ range $item := $data }} +
    +
    + {{ with resources.Get .icon }} + {{ .Content | safeHTML }} + {{ end }} +
    +
    +

    {{ .title }}

    +

    {{ .body | safeHTML }}

    +
    +
    + {{ end }} +
    diff --git a/website/www/site/layouts/shortcodes/community/table_with_icons.html b/website/www/site/layouts/shortcodes/community/table_with_icons.html new file mode 100644 index 000000000000..d136493e2c1f --- /dev/null +++ b/website/www/site/layouts/shortcodes/community/table_with_icons.html @@ -0,0 +1,53 @@ +{{/* + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. +*/}} +{{ $data := index $.Site.Data .Site.Language.Lang (.Get 0) }} +{{ range $list := $data }} +
    + + + {{ range $item := $list.columns }} + + {{ end }} + + {{ range $item := $list.data }} + + + + + + {{ end }} +
    {{ . }}
    +
    + {{ with resources.Get .icon }} + {{ .Content | safeHTML }} + {{ end }} +

    {{.purpose | safeHTML}}

    +
    +     		+ + {{ if .contact.add }} + {{ .contact.add }} + {{end}} + {{.contact.email}} + +
    + {{ range .actions }} + {{ if .link }} + {{.action |safeHTML }} + {{ else }} + {{ .action | safeHTML }} + {{end}} + {{ end }} +
    +
    +
    +{{ end }} diff --git a/website/www/site/static/images/beam_logo_navbar_mobile.png b/website/www/site/static/images/beam_logo_navbar_mobile.png new file mode 100644 index 000000000000..bbc0ffe0edc7 Binary files /dev/null and b/website/www/site/static/images/beam_logo_navbar_mobile.png differ diff --git a/website/www/site/static/js/section-nav.js b/website/www/site/static/js/section-nav.js index 1d40720f2202..34b3d59add23 100644 --- a/website/www/site/static/js/section-nav.js +++ b/website/www/site/static/js/section-nav.js @@ -101,15 +101,23 @@ $(document).ready(function () { var sectionNavHeight = $(sectionNavEl).height(); var mainContent = $(".container-main-content"); - mainContent.css({"min-height": sectionNavHeight}); - sectionNavEl.css({"max-height": mainContent.css("height")}); - + $(window).load(function () { + var url = window.location.href; + var links = $("." + idSectionNav+' a'); + for(var i = 0; i < links.length; i++){ + if(links[i].classList.contains('underline')) + links[i].removeClass('underline'); + } + for(var i = 0; i < links.length; i++){ + if(url.includes(links[i].href)) + links[i].classList.add('underline'); + } + }); $(window).resize(function () { if ($(window).width() > CONST.DESKTOP_BREAKPOINT) { var sectionNavHeight = $(sectionNavEl).height(); - $(".container-main-content").css({"min-height": sectionNavHeight}); } else { - $(".container-main-content").css({"min-height": ''}); + $(".container-main-content").css({"min-height": '100vh'}); } }); @@ -133,9 +141,20 @@ $(document).ready(function () { $("." + _self.idNavMask).click(function (el) { $("." + _self.idNavMask).removeClass(CONST.OPEN_CLASS); $("." + _self.idContainer).removeClass(CONST.OPEN_CLASS); + $("body").removeClass("fixedPosition"); + if (_self.hasSectionNav) { + $("." + _self.idSectionNav).removeClass(CONST.OPEN_CLASS); + $("body").removeClass("fixedPosition"); + } + }); + $("#closeMenu").click(function (el) { + $("." + _self.idNavMask).removeClass(CONST.OPEN_CLASS); + $("." + _self.idContainer).removeClass(CONST.OPEN_CLASS); + $("body").removeClass("fixedPosition"); if (_self.hasSectionNav) { $("." + _self.idSectionNav).removeClass(CONST.OPEN_CLASS); + $("body").removeClass("fixedPosition"); } }); @@ -166,7 +185,7 @@ $(document).ready(function () { "classNameContainer": "navbar-container", "classNameSectionNav": "section-nav", "classNameBackCTA": "section-nav-back", - "classNameCTA": "navbar-toggle", + "classNameCTA": "menu-open", "classNameMask": "navbar-mask", "classNameNavItemTitleCollapsible": "section-nav-item--collapsible span", "classNameNavItemCollapsible": ".section-nav-item--collapsible",