diff --git a/website/www/site/assets/icons/calendar-icon.svg b/website/www/site/assets/icons/calendar-icon.svg new file mode 100644 index 000000000000..1aa91dd4d3f8 --- /dev/null +++ b/website/www/site/assets/icons/calendar-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/scss/_calendar.scss b/website/www/site/assets/scss/_calendar.scss new file mode 100644 index 000000000000..69e2bf81a291 --- /dev/null +++ b/website/www/site/assets/scss/_calendar.scss @@ -0,0 +1,238 @@ +/*! + * 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"; + +.calendar { + padding: $pad-l $pad; + + .calendar-title { + @extend .component-title; + + text-align: center; + } + + .calendar-content { + display: flex; + justify-content: center; + align-items: flex-start; + margin-top: 84px; + + a { + text-decoration: none; + } + + // Left card + .calendar-card-big { + width: 100%; + max-width: 381px; + height: 468px; + border-radius: 16px; + 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; + padding: 32px 24px; + transition: 0.2s; + + .calendar-card-big-title { + @extend .component-large-header; + + margin-top: 48px; + margin-bottom: 24px; + } + } + + .calendar-card-big-left:hover { + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } + + // Middle cards + .calendar-card-box { + margin: 0 37px; + min-height: 468px; + display: flex; + flex-direction: column; + justify-content: space-between; + + .calendar-card-small { + width: 100%; + max-width: 381px; + height: 216px; + border-radius: 16px; + 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; + padding: 32px 24px; + transition: 0.2s; + + .calendar-card-small-title { + @extend .component-small-header; + + margin-top: 40px; + margin-bottom: 12px; + } + } + + .calendar-card-small:hover { + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } + } + + // Right card + .calendar-card-big-right { + .calendar-card-event-title { + @extend .component-header; + } + + .calendar-card-events { + margin-top: 30px; + margin-bottom: 70px; + + .calendar-event { + display: flex; + padding: 14px; + + .calendar-event-icon { + margin-right: 12px; + } + + .calendar-event-description { + .calendar-event-title { + @extend .component-label; + } + + .calendar-event-place { + @extend .component-tag; + } + + .calendar-event-time { + @extend .component-tag; + } + } + } + + .calendar-event:hover { + background-color: rgba(196, 196, 196, 0.16); + border-radius: 16px; + } + + :last-child { + margin-bottom: 0; + } + } + + .calendar-card-events-button { + width: 115px; + height: 36px; + border-radius: 100px; + background-color: $color-sun; + border: none; + outline: none; + float: right; + + span { + @extend .component-label; + + font-size: 14px; + color: $color-white; + } + } + + button:hover { + opacity: 0.84; + } + } + } +} + +// Category for left and middle cards +.calendar-category { + display: flex; + justify-content: space-between; + + .calendar-category-tag { + @extend .component-tag; + + font-size: 14px; + font-weight: 500; + text-transform: uppercase; + } + + .calendar-category-date { + @extend .component-tag; + } +} + +// Author for left and middle cards +.calendar-card-author { + @extend .component-tag; +} + +@media (max-width: $tablet) { + .calendar { + padding: $pad-md $pad-s; + + .calendar-content { + flex-direction: column; + align-items: center; + margin-top: 64px; + + .calendar-card-big { + max-width: 327px; + height: 356px; + padding: 32px 20px; + + .calendar-card-big-title { + margin-top: 35px; + margin-bottom: 16px; + } + } + + .calendar-card-box { + margin: 24px 0px; + min-height: 456px; + + .calendar-card-small { + max-width: 327px; + height: 216px; + padding: 24px 20px; + + .calendar-card-small-title { + margin-top: 30px; + margin-bottom: 10px; + width: 280px; + } + } + } + + .calendar-card-big-right { + height: 404px; + + .calendar-card-events { + margin-top: 20px; + margin-bottom: 15px; + + .calendar-event { + padding: 14px 5px; + } + } + } + } + } +} diff --git a/website/www/site/assets/scss/_logos.sass b/website/www/site/assets/scss/_logos.scss similarity index 50% rename from website/www/site/assets/scss/_logos.sass rename to website/www/site/assets/scss/_logos.scss index fd0f6f30058c..33cd632d1fb8 100644 --- a/website/www/site/assets/scss/_logos.sass +++ b/website/www/site/assets/scss/_logos.scss @@ -15,22 +15,57 @@ * limitations under the License. */ -.logos - text-align: center - margin: $pad-xl 0 - - .logos__title - +type-h2 - margin-bottom: $pad-md - - .logos__logos - display: flex - justify-content: center - - .logos__logos__logo - line-height: 0 - margin: 0 $pad - +md - margin: 0 $pad-md - img - max-height: 70px +@import "media"; + +.logos { + padding: $pad-l $pad; + + .logos-title { + @extend .component-title; + + text-align: center; + } + + .logos-logos { + display: flex; + justify-content: space-between; + width: 100%; + max-width: 1111px; + margin: 70px auto 60px; + + .logos-logo { + line-height: 0; + + img { + max-height: 70px; + } + } + } +} + +@media (max-width: $tablet) { + .logos { + padding: $pad-md $pad-s; + + .logos-logos { + max-width: 360px; + flex-wrap: wrap; + justify-content: center; + margin: 50px auto 20px; + + .logos-logo { + margin-right: 60px; + margin-bottom: 50px; + + img { + max-height: 45px; + } + } + + :nth-child(3), + :last-child { + margin-right: 0; + } + } + } +} diff --git a/website/www/site/assets/scss/_typography.scss b/website/www/site/assets/scss/_typography.scss index d093140ace72..99eacfe4ca04 100644 --- a/website/www/site/assets/scss/_typography.scss +++ b/website/www/site/assets/scss/_typography.scss @@ -23,6 +23,17 @@ font-style: normal; line-height: 1.1; letter-spacing: normal; + margin: 0; + color: $color-gray; +} + +.component-large-header { + font-size: 30px; + font-weight: 500; + font-style: normal; + line-height: 1.4; + letter-spacing: normal; + margin: 0; color: $color-gray; } @@ -32,6 +43,17 @@ font-style: normal; line-height: 1.45; letter-spacing: 0.43px; + margin: 0; + color: $color-gray; +} + +.component-small-header { + font-size: 18px; + font-weight: 500; + font-style: normal; + line-height: 1.56; + letter-spacing: 0.43px; + margin: 0; color: $color-gray; } @@ -41,14 +63,36 @@ font-style: normal; line-height: 1.63; letter-spacing: 0.43px; + margin: 0; color: $color-gray; } +.component-label { + font-size: 16px; + font-weight: bold; + font-stretch: normal; + font-style: normal; + line-height: 1.5; + letter-spacing: 0.43px; + margin: 0; + color: $color-gray; +} + +.component-tag { + font-size: 16px; + font-weight: normal; + font-style: normal; + line-height: 1.63; + letter-spacing: 0.43px; + margin: 0; + color: $color-smoke; +} + @media (max-width: $tablet) { .component-title { font-size: 28px; } - .component-header { - font-weight: normal; + .component-large-header { + font-size: 24px; } } \ No newline at end of file diff --git a/website/www/site/assets/scss/_vars.sass b/website/www/site/assets/scss/_vars.sass index 6a98df42306a..df4276a042b1 100644 --- a/website/www/site/assets/scss/_vars.sass +++ b/website/www/site/assets/scss/_vars.sass @@ -21,6 +21,9 @@ $color-white: #FFF $color-light-gray: #F7F7F7 $color-dark-gray: #555 $color-gray: #333333 +$color-smoke: #8C8B8E +$color-sun: #F26628 +$color-silver: #C4C4C4 $pad-sm: 15px $pad-s: 24px diff --git a/website/www/site/assets/scss/main.scss b/website/www/site/assets/scss/main.scss index 8007760cbbbd..e4075a1fe51a 100644 --- a/website/www/site/assets/scss/main.scss +++ b/website/www/site/assets/scss/main.scss @@ -37,8 +37,9 @@ @import "_graphic.sass"; @import "_header.sass"; @import "_hero.sass"; -@import "_logos.sass"; +@import "_logos.scss"; @import "_pillars.scss"; @import "_section-nav.sass"; @import "_page-nav.sass"; @import "_table-wrapper.sass"; +@import "_calendar.scss"; \ No newline at end of file diff --git a/website/www/site/data/en/calendar_events.yaml b/website/www/site/data/en/calendar_events.yaml new file mode 100644 index 000000000000..865542f9c637 --- /dev/null +++ b/website/www/site/data/en/calendar_events.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: This is the title + place: Data Con LA + time: 2020/02/21 + icon: icons/calendar-icon.svg + url: # +- title: This is the title + place: Data Con LA + time: 2020/02/21 + icon: icons/calendar-icon.svg + url: # +- title: This is the title + place: Data Con LA + time: 2020/02/21 + icon: icons/calendar-icon.svg + url: # \ No newline at end of file diff --git a/website/www/site/i18n/home/calendar/en.yaml b/website/www/site/i18n/home/calendar/en.yaml new file mode 100644 index 000000000000..948854e1a09d --- /dev/null +++ b/website/www/site/i18n/home/calendar/en.yaml @@ -0,0 +1,44 @@ +# 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. + +# TODO: +# Placeholder texts should be updated later +- id: home-calendar-title + translation: "Stay up to date with Beam" +- id: home-calendar-category-tag-first + translation: "Category" +- id: home-calendar-category-date-first + translation: "2020/02/21" +- id: home-calendar-card-title-first + translation: "Performance-Driven Runtime Type Checking for the Python SDK" +- id: home-calendar-card-author-first + translation: "Saavan Nanavati" +- id: home-calendar-category-tag-second + translation: "Category" +- id: home-calendar-category-date-second + translation: "2020/02/21" +- id: home-calendar-card-title-second + translation: "Performance-Driven Runtime Type Checking for the Python SDK" +- id: home-calendar-card-author-second + translation: "Saavan Nanavati" +- id: home-calendar-category-tag-third + translation: "Category" +- id: home-calendar-category-date-third + translation: "2020/02/21" +- id: home-calendar-card-title-third + translation: "Performance-Driven Runtime Type Checking for the Python SDK" +- id: home-calendar-card-author-third + translation: "Saavan Nanavati" +- id: home-calendar-card-events-title + translation: "Upcoming events" +- id: home-calendar-card-events-button + translation: "SEE MORE" diff --git a/website/www/site/i18n/home/en.yaml b/website/www/site/i18n/home/en.yaml index 43a3fea9bbc8..8a1ac53eecf8 100644 --- a/website/www/site/i18n/home/en.yaml +++ b/website/www/site/i18n/home/en.yaml @@ -28,8 +28,6 @@ translation: "Go Quickstart" - id: home-hero-blog-title translation: "The latest from the blog" -- id: home-logos-title - translation: "Works with" - id: home-cards-title translation: "Testimonials" - id: home-cards-body diff --git a/website/www/site/i18n/home/logos/en.yaml b/website/www/site/i18n/home/logos/en.yaml new file mode 100644 index 000000000000..7ed599a42ab5 --- /dev/null +++ b/website/www/site/i18n/home/logos/en.yaml @@ -0,0 +1,14 @@ +# 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. + +- id: home-logos-title + translation: "Supported runners" \ No newline at end of file diff --git a/website/www/site/layouts/_default/baseof.html b/website/www/site/layouts/_default/baseof.html index f8fbfb6c04b1..6c245c51ac9f 100644 --- a/website/www/site/layouts/_default/baseof.html +++ b/website/www/site/layouts/_default/baseof.html @@ -21,6 +21,7 @@ {{ block "hero-section" . }}{{ end }} {{ block "pillars-section" . }}{{ end }} {{ block "graphic-section" . }}{{ end }} + {{ block "calendar-section" . }}{{ end }} {{ block "logos-section" . }}{{ end }} {{ block "cards-section" . }}{{ end }} {{ block "ctas-section" . }}{{ end }} diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html index f173e4103a71..bbfdf71b9132 100644 --- a/website/www/site/layouts/index.html +++ b/website/www/site/layouts/index.html @@ -89,14 +89,79 @@

{{ end }} +{{/* + TODO: + This is the implementation of the design. + The event sync functionality will be implemented when we have the event page. +*/}} +{{ define "calendar-section" }} +
+

+ {{ T "home-calendar-title" }} +

+
+ +
+
+

{{ T "home-calendar-category-tag-first" }}

+

{{ T "home-calendar-category-date-first" }}

+
+

+ {{ T "home-calendar-card-title-first" }} +

+

{{ T "home-calendar-card-author-first" }}

+
+ +
+ +
+
+

{{ T "home-calendar-category-tag-second" }}

+

{{ T "home-calendar-category-date-second" }}

+
+

+ {{ T "home-calendar-card-title-second" }} +

+

{{ T "home-calendar-card-author-second" }}

+
+ + +
+
+

{{ T "home-calendar-category-tag-third" }}

+

{{ T "home-calendar-category-date-third" }}

+
+

+ {{ T "home-calendar-card-title-third" }} +

+

{{ T "home-calendar-card-author-third" }}

+
+ +
+
+

{{ T "home-calendar-card-events-title" }}

+
+ {{ $data := index $.Site.Data .Site.Language.Lang }} + {{ range $event := $data.calendar_events }} + {{ partial "calendar/calendar-events" (dict "icon" $event.icon "title" $event.title "place" $event.place "time" $event.time "url" $event.url) }} + {{ end }} +
+ + + +
+
+
+{{ end }} + {{ define "logos-section" }} -
-
+
+
{{ T "home-logos-title" }}
-
+
{{ range $logo := $.Site.Data.works_with }} - \ No newline at end of file +