You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@beam.apache.org by bh...@apache.org on 2020/11/16 18:45:49 UTC
[beam] branch website-revamp updated: [BEAM-11219][Website revamp]
Development of All about Apache Beam component (#13331)
This is an automated email from the ASF dual-hosted git repository.
bhulette pushed a commit to branch website-revamp
in repository https://gitbox.apache.org/repos/asf/beam.git
The following commit(s) were added to refs/heads/website-revamp by this push:
new e5c599a [BEAM-11219][Website revamp] Development of All about Apache Beam component (#13331)
e5c599a is described below
commit e5c599a54bb0ff8f1804c0123ece8b6d3292735a
Author: Nam Bui <bn...@gmail.com>
AuthorDate: Tue Nov 17 01:45:11 2020 +0700
[BEAM-11219][Website revamp] Development of All about Apache Beam component (#13331)
* Implemented About social media component
* Review: refactored social icons component & added licenses to svg icons
---
website/www/site/assets/icons/extensive-icon.svg | 26 ++++
website/www/site/assets/icons/github-icon.svg | 29 ++++
website/www/site/assets/icons/open-source-icon.svg | 31 +++++
website/www/site/assets/icons/portable-icon.svg | 27 ++++
website/www/site/assets/icons/twitter-icon.svg | 30 ++++
website/www/site/assets/icons/unified-icon.svg | 26 ++++
website/www/site/assets/icons/youtube-icon.svg | 23 ++++
website/www/site/assets/scss/_global.sass | 1 -
.../assets/scss/{_pillars.sass => _media.scss} | 31 +----
website/www/site/assets/scss/_pillars.scss | 151 +++++++++++++++++++++
.../scss/{_pillars.sass => _typography.scss} | 57 ++++----
website/www/site/assets/scss/_vars.sass | 3 +
website/www/site/assets/scss/main.scss | 4 +-
website/www/site/data/en/pillars.yaml | 10 +-
.../data/en/{pillars.yaml => pillars_social.yaml} | 15 +-
website/www/site/i18n/home/en.yaml | 2 -
.../en/pillars.yaml => i18n/home/pillars/en.yaml} | 10 +-
website/www/site/layouts/index.html | 28 ++--
website/www/site/layouts/partials/head.html | 2 +-
.../layouts/partials/pillars/pillars-item.html | 23 ++++
.../layouts/partials/pillars/pillars-social.html | 19 +++
21 files changed, 467 insertions(+), 81 deletions(-)
diff --git a/website/www/site/assets/icons/extensive-icon.svg b/website/www/site/assets/icons/extensive-icon.svg
new file mode 100644
index 0000000..76e680d
--- /dev/null
+++ b/website/www/site/assets/icons/extensive-icon.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ 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.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="112" height="112" fill="none" viewBox="0 0 112 112">
+ <path fill="#FFE5D9" d="M56 112c30.928 0 56-25.072 56-56S86.928 0 56 0 0 25.072 0 56s25.072 56 56 56z"/>
+ <path fill="#FBC23E" d="M78.354 38.556v-7.83h-7.537C70.744 27.553 68.252 25 65.177 25c-3.07 0-5.568 2.553-5.64 5.726H52v7.83c3.118 0 5.646 2.63 5.646 5.871 0 3.242-2.528 5.871-5.646 5.871v7.83h7.53c0 3.243 2.529 5.872 5.647 5.872 3.118 0 5.646-2.63 5.646-5.871h7.53v-7.83c3.119 0 5.647-2.63 5.647-5.872s-2.522-5.87-5.646-5.87z"/>
+ <path fill="#FF570B" d="M71.084 83.584l7.496.027-.064-7.305c3.041-.061 5.46-2.466 5.437-5.441-.024-2.976-2.49-5.401-5.53-5.49l-.064-7.304-7.495-.027c.025 3.024-2.469 5.46-5.576 5.453-3.106-.013-5.639-2.472-5.67-5.498l-7.496-.027.066 7.3c-3.106-.014-5.602 2.428-5.576 5.452.025 3.024 2.564 5.484 5.67 5.497l.065 7.299 7.496.027c.025 3.024 2.564 5.484 5.67 5.497 3.101.006 5.597-2.436 5.571-5.46z"/>
+ <path fill="#fff" d="M52.177 38.556v-7.83h-7.772C44.33 27.553 41.754 25 38.59 25c-3.166 0-5.742 2.553-5.817 5.726H25v7.83c3.215 0 5.823 2.63 5.823 5.871 0 3.242-2.608 5.871-5.823 5.871v7.83h7.766c0 3.243 2.607 5.872 5.823 5.872 3.215 0 5.822-2.63 5.822-5.871h7.766v-7.83c3.216 0 5.823-2.63 5.823-5.872s-2.607-5.87-5.823-5.87z"/>
+ <path stroke="#000" stroke-linecap="round" stroke-width="3" d="M84 54l5-3M84.405 62.473l4.192 4.053M86 58.306l7.423.394"/>
+</svg>
diff --git a/website/www/site/assets/icons/github-icon.svg b/website/www/site/assets/icons/github-icon.svg
new file mode 100644
index 0000000..ba80c82
--- /dev/null
+++ b/website/www/site/assets/icons/github-icon.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ 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.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32">
+ <g clip-path="url(#clip0)">
+ <path fill="#191717" fill-rule="evenodd" d="M15.854.703C7.094.703 0 7.797 0 16.556 0 23.563 4.545 29.5 10.842 31.602c.788.146 1.08-.34 1.08-.769 0-.38-.01-1.372-.02-2.695-4.408.953-5.343-2.122-5.343-2.122-.72-1.83-1.761-2.326-1.761-2.326-1.44-.983.107-.964.107-.964 1.586.117 2.433 1.635 2.433 1.635 1.411 2.424 3.708 1.723 4.613 1.314.146-1.022.555-1.722 1.002-2.121-3.513-.39-7.211-1.752-7.211-7.825 0-1.732.613-3.143 1.635-4.253-.166-.409-.71-2.014.146-4.194 0 0 1.333-.429 4.36 1. [...]
+ </g>
+ <defs>
+ <clipPath id="clip0">
+ <path fill="#fff" d="M0 0H31.707V30.919H0z" transform="translate(0 .703)"/>
+ </clipPath>
+ </defs>
+</svg>
diff --git a/website/www/site/assets/icons/open-source-icon.svg b/website/www/site/assets/icons/open-source-icon.svg
new file mode 100644
index 0000000..d6afab7
--- /dev/null
+++ b/website/www/site/assets/icons/open-source-icon.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ 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.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="112" height="112" fill="none" viewBox="0 0 112 112">
+ <path fill="#FFE5D9" d="M56 112c30.928 0 56-25.072 56-56S86.928 0 56 0 0 25.072 0 56s25.072 56 56 56z"/>
+ <path fill="#FF570B" d="M76.344 52.516s-7.312-19.178-20.61-31.439c-.089-.12-.221-.2-.369-.223-.147-.022-.297.016-.417.105-.12.09-.2.223-.221.37-.022.15.015.3.104.42 2.925 5.381 9.93 17.97 16.8 28.74"/>
+ <path fill="#FF570B" d="M52.953 85.709S32.288 83.09 33.913 63.53c.966-11.442 2.709-12.97 1.22-19.45-.06-.269-.057-.548.007-.816.064-.268.187-.518.361-.73.174-.213.394-.383.643-.498.248-.115.52-.17.794-.164 8.802.2 39.289 1.917 43.839 15.633 4.667 14.042 1.083 29.22-17.252 28.857.009 0-7.9-.091-10.572-.654z"/>
+ <path fill="#1D1D1B" d="M73.637 79.565c-.584-.005-1.164-.106-1.715-.3-.713-.237-3.485-1.654-3.467-3 .005-.357.15-.698.404-.949.253-.25.595-.39.95-.387.203.002.403.05.584.142.182.091.34.223.464.385.772.793 1.8 1.283 2.897 1.382.417-.05.817-.196 1.168-.428.35-.232.644-.543.855-.908.105-.145.238-.267.39-.36.153-.092.322-.154.498-.18.176-.028.355-.02.528.023.173.043.336.12.48.226.143.106.264.24.356.393.093.154.154.324.18.501.028.177.02.358-.023.532-.043.174-.119.338-.225.483-.468.73-1.10 [...]
+ <path fill="#fff" d="M78.639 67.749c.108 4.399.442 8.453 2.14 8.516.848-.645 2.915-3.508 3.114-8.398 0-5.453-1.472-8.907-3.476-10.343-2.121 1.554-1.634 6.808-1.778 10.225z"/>
+ <path fill="#1D1D1B" d="M82.737 66.213c0 3.826-1.201 6.934-2.709 6.934-1.507 0-2.329-2.899-2.329-6.725 0-3.827.849-7.144 2.33-7.144 1.48 0 2.708 3.1 2.708 6.935z"/>
+ <path fill="#fff" d="M80.375 62.936c.547-.428.532-1.37-.035-2.103-.566-.733-1.469-.98-2.016-.551-.547.428-.53 1.37.035 2.103.567.733 1.47.98 2.016.551zM65.185 75.522c3.747-2.966 3.758-9.245.026-14.023-3.732-4.778-9.795-6.247-13.542-3.281-3.747 2.966-3.759 9.245-.026 14.023 3.732 4.778 9.795 6.247 13.542 3.281z"/>
+ <path fill="#1D1D1B" d="M63.34 71.87c2.508-2.488 2.172-6.924-.75-9.91-2.923-2.985-7.324-3.389-9.832-.901-2.507 2.487-2.17 6.924.752 9.91 2.922 2.985 7.324 3.388 9.83.9z"/>
+ <path fill="#fff" d="M53.38 64.356c.719-.434.889-1.477.381-2.33-.508-.852-1.502-1.19-2.22-.757-.718.434-.889 1.477-.38 2.33.507.851 1.501 1.19 2.22.757z"/>
+ <path fill="#FF570B" d="M59.38 51.907S52.8 33.11 32.885 19.096c-.106-.071-.233-.104-.36-.094-.127.01-.247.063-.34.15-.094.087-.156.203-.177.33-.02.126.003.256.064.368 3.693 6.244 16.666 24.431 20.8 29.721"/>
+</svg>
diff --git a/website/www/site/assets/icons/portable-icon.svg b/website/www/site/assets/icons/portable-icon.svg
new file mode 100644
index 0000000..7718916
--- /dev/null
+++ b/website/www/site/assets/icons/portable-icon.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ 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.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="112" height="112" fill="none" viewBox="0 0 112 112">
+ <path fill="#FFE5D9" d="M56 112c30.928 0 56-25.072 56-56S86.928 0 56 0 0 25.072 0 56s25.072 56 56 56z"/>
+ <path stroke="#1D1D1B" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M40 27v5.719C40 36.188 43.475 39 47.762 39h17.475C69.526 39 73 36.188 73 32.719V27M57 22v44M73 87v-5.719C73 77.812 69.525 75 65.238 75H47.763C43.474 75 40 77.812 40 81.281V87M57 90V48"/>
+ <path fill="#FBC23E" d="M61 20h-8c-1.105 0-2 .895-2 2v8c0 1.105.895 2 2 2h8c1.105 0 2-.895 2-2v-8c0-1.105-.895-2-2-2zM40 33c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z"/>
+ <path fill="#FF570B" d="M68 92h10c1.105 0 2-.895 2-2v-5c0-1.105-.895-2-2-2H68c-1.105 0-2 .895-2 2v5c0 1.105.895 2 2 2zM35 92h10c1.105 0 2-.895 2-2v-5c0-1.105-.895-2-2-2H35c-1.105 0-2 .895-2 2v5c0 1.105.895 2 2 2zM52 92h10c1.105 0 2-.895 2-2v-5c0-1.105-.895-2-2-2H52c-1.105 0-2 .895-2 2v5c0 1.105.895 2 2 2z"/>
+ <path fill="#fff" d="M57 70c7.18 0 13-5.82 13-13s-5.82-13-13-13-13 5.82-13 13 5.82 13 13 13z"/>
+ <path fill="#FBC23E" d="M71.792 21.802c.78-1.279 2.636-1.279 3.416 0l4.666 7.657c.812 1.333-.147 3.041-1.708 3.041h-9.332c-1.561 0-2.52-1.708-1.708-3.04l4.666-7.658z"/>
+</svg>
diff --git a/website/www/site/assets/icons/twitter-icon.svg b/website/www/site/assets/icons/twitter-icon.svg
new file mode 100644
index 0000000..e23e821
--- /dev/null
+++ b/website/www/site/assets/icons/twitter-icon.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ 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.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" fill="none" viewBox="0 0 34 34" id="about-twitter-icon">
+ <g>
+ <path fill="#1DA1F2" d="M17.486 33.027c9.12 0 16.514-7.393 16.514-16.514C34 7.394 26.606 0 17.486 0S.973 7.393.973 16.514c0 9.12 7.393 16.513 16.513 16.513z"/>
+ <path fill="#fff" d="M14.464 25.224c7.324 0 11.328-6.068 11.328-11.328 0-.173 0-.347-.008-.512.776-.561 1.453-1.263 1.99-2.064-.71.314-1.478.529-2.287.628.826-.496 1.453-1.272 1.75-2.205-.767.454-1.618.784-2.526.966-.727-.776-1.759-1.255-2.907-1.255-2.196 0-3.98 1.784-3.98 3.98 0 .314.034.62.108.908-3.311-.165-6.242-1.75-8.207-4.161-.339.586-.537 1.271-.537 1.998 0 1.379.702 2.6 1.775 3.31-.652-.016-1.263-.197-1.8-.495v.05c0 1.932 1.37 3.534 3.196 3.905-.33.091-.686.14-1.049.14-. [...]
+ </g>
+ <defs>
+ <clipPath id="clip0">
+ <path fill="#fff" d="M0 0H33.027V33.027H0z" transform="translate(.973)"/>
+ </clipPath>
+ </defs>
+</svg>
diff --git a/website/www/site/assets/icons/unified-icon.svg b/website/www/site/assets/icons/unified-icon.svg
new file mode 100644
index 0000000..6dc75d2
--- /dev/null
+++ b/website/www/site/assets/icons/unified-icon.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ 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.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="112" height="112" fill="none" viewBox="0 0 112 112">
+ <path fill="#FFE5D9" d="M56 112c30.928 0 56-25.072 56-56S86.928 0 56 0 0 25.072 0 56s25.072 56 56 56z"/>
+ <path fill="#FF570B" d="M51.413 81.43c11.869-2.347 19.269-15.483 16.529-29.34-2.74-13.857-14.583-23.187-26.452-20.84C29.62 33.597 22.22 46.733 24.962 60.59c2.74 13.856 14.583 23.187 26.451 20.84z"/>
+ <path fill="#FFC400" d="M89.034 59.006C90.869 45 82.632 32.373 70.636 30.802 58.641 29.23 47.43 39.31 45.594 53.315 43.759 67.32 51.996 79.947 63.99 81.519 75.987 83.09 87.2 73.01 89.034 59.006z"/>
+ <path fill="#fff" fill-rule="evenodd" d="M57.19 79.268c8.366-4.793 13.013-15.74 10.751-27.178-1.519-7.68-5.834-13.971-11.4-17.653-5.68 3.978-9.885 10.77-10.947 18.878C44.132 64.47 49.06 74.752 57.19 79.268z" clip-rule="evenodd"/>
+ <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M92.28 55.712h-15.5M77.113 50.212l-3.334 5.824 4 5.176"/>
+</svg>
diff --git a/website/www/site/assets/icons/youtube-icon.svg b/website/www/site/assets/icons/youtube-icon.svg
new file mode 100644
index 0000000..3cf47d8
--- /dev/null
+++ b/website/www/site/assets/icons/youtube-icon.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ 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.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="43" height="31" fill="none" viewBox="0 0 43 31">
+ <path fill="red" d="M42.1 4.84c-.493-1.905-1.951-3.405-3.8-3.915C34.946 0 21.5 0 21.5 0S8.053 0 4.7.925c-1.849.51-3.307 2.01-3.8 3.915C0 8.295 0 15.5 0 15.5s0 7.205.9 10.66c.493 1.905 1.951 3.405 3.8 3.915C8.054 31 21.5 31 21.5 31s13.447 0 16.8-.925c1.849-.51 3.307-2.01 3.8-3.915.9-3.455.9-10.66.9-10.66s0-7.205-.9-10.66z"/>
+ <path fill="#fff" d="M17.102 22.043L28.34 15.5 17.102 8.958v13.085z"/>
+</svg>
diff --git a/website/www/site/assets/scss/_global.sass b/website/www/site/assets/scss/_global.sass
index db0deb2..a4dd355 100644
--- a/website/www/site/assets/scss/_global.sass
+++ b/website/www/site/assets/scss/_global.sass
@@ -25,7 +25,6 @@ body
.body
background: #fff
- max-width: 1440px
margin: 0 auto
padding-top: 130px
diff --git a/website/www/site/assets/scss/_pillars.sass b/website/www/site/assets/scss/_media.scss
similarity index 63%
copy from website/www/site/assets/scss/_pillars.sass
copy to website/www/site/assets/scss/_media.scss
index 220e7ce..b1146a5 100644
--- a/website/www/site/assets/scss/_pillars.sass
+++ b/website/www/site/assets/scss/_media.scss
@@ -14,30 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
-.pillars
- margin: $pad-xl 0
- text-align: center
-
- .pillars__title
- +type-h2
- margin-bottom: $pad
-
- .pillars__cols
- +type-body
- +md
- display: flex
- justify-content: center
-
- .pillars__cols__col
- .pillars__cols__col__title
- font-weight: 600
- margin-bottom: $pad/2
-
- .pillars__cols__col__body
- max-width: 350px
- margin: 0 auto $pad-sm
-
- +md
- padding: 0 $pad
- margin: 0 auto
+
+$mobile: 640px;
+$tablet: 1280px;
+$fullhd: 1920px;
diff --git a/website/www/site/assets/scss/_pillars.scss b/website/www/site/assets/scss/_pillars.scss
new file mode 100644
index 0000000..47c95d1
--- /dev/null
+++ b/website/www/site/assets/scss/_pillars.scss
@@ -0,0 +1,151 @@
+/*!
+ * 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";
+
+.pillars {
+ padding: $pad-l $pad;
+
+ .pillars-title {
+ @extend .component-title;
+
+ text-align: center;
+ border: none;
+ }
+
+ .pillars-content {
+ display: grid;
+ grid-template-columns: 443px 443px;
+ grid-gap: 50px 89px;
+ justify-content: center;
+ margin-top: 84px;
+
+ .pillars-item {
+ display: flex;
+ align-items: center;
+
+ .pillars-item-icon {
+ margin-right: 47px;
+ }
+
+ .pillars-item-description {
+ width: 100%;
+ max-width: 284px;
+
+ .pillars-item-header {
+ @extend .component-header;
+ }
+
+ .pillars-item-text {
+ @extend .component-text;
+ }
+ }
+ }
+ }
+
+ .pillars-social {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ margin-top: 117px;
+
+ .pillars-social-icons {
+ display: flex;
+ align-items: center;
+ margin-bottom: 45px;
+
+ svg {
+ height: 41px;
+ width: auto;
+ }
+
+ #about-twitter-icon {
+ height: 45px;
+ }
+
+ a {
+ filter: grayscale(100%);
+ opacity: 0.7;
+
+ &:hover {
+ filter: grayscale(0);
+ opacity: 1;
+ }
+ }
+
+ .pillars-youtube-icon {
+ margin: 0 80px;
+ }
+ }
+
+ .pillars-social-text {
+ @extend .component-text;
+ max-width: 285px;
+ }
+ }
+}
+
+@media (max-width: $tablet) {
+ .pillars {
+ padding: $pad-md $pad-s;
+
+ .pillars-content {
+ grid-template-columns: 330px;
+ grid-column-gap: 47px;
+ margin-top: 62px;
+
+ .pillars-item {
+ align-items: flex-start;
+
+ .pillars-item-icon {
+ margin-right: 17px;
+ margin-top: 12px;
+ }
+
+ svg {
+ width: 64px;
+ height: 64px;
+ }
+ }
+ }
+
+ .pillars-social {
+ margin-top: 91px;
+
+ .pillars-social-icons {
+ svg {
+ height: 34px;
+ width: auto;
+ }
+
+ #about-twitter-icon {
+ height: 37px;
+ }
+
+ a {
+ filter: none;
+ opacity: 1;
+ }
+
+ .pillars-youtube-icon {
+ margin: 0 60px;
+ }
+ }
+ }
+ }
+}
diff --git a/website/www/site/assets/scss/_pillars.sass b/website/www/site/assets/scss/_typography.scss
similarity index 57%
rename from website/www/site/assets/scss/_pillars.sass
rename to website/www/site/assets/scss/_typography.scss
index 220e7ce..d093140 100644
--- a/website/www/site/assets/scss/_pillars.sass
+++ b/website/www/site/assets/scss/_typography.scss
@@ -14,30 +14,41 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
+ @import "media";
-.pillars
- margin: $pad-xl 0
- text-align: center
+.component-title {
+ font-size: 36px;
+ font-weight: normal;
+ font-style: normal;
+ line-height: 1.1;
+ letter-spacing: normal;
+ color: $color-gray;
+}
- .pillars__title
- +type-h2
- margin-bottom: $pad
+.component-header {
+ font-size: 22px;
+ font-weight: 500;
+ font-style: normal;
+ line-height: 1.45;
+ letter-spacing: 0.43px;
+ color: $color-gray;
+}
- .pillars__cols
- +type-body
- +md
- display: flex
- justify-content: center
+.component-text {
+ font-size: 16px;
+ font-weight: normal;
+ font-style: normal;
+ line-height: 1.63;
+ letter-spacing: 0.43px;
+ color: $color-gray;
+}
- .pillars__cols__col
- .pillars__cols__col__title
- font-weight: 600
- margin-bottom: $pad/2
-
- .pillars__cols__col__body
- max-width: 350px
- margin: 0 auto $pad-sm
-
- +md
- padding: 0 $pad
- margin: 0 auto
+@media (max-width: $tablet) {
+ .component-title {
+ font-size: 28px;
+ }
+ .component-header {
+ font-weight: normal;
+ }
+}
\ 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 a5dd998..6a98df4 100644
--- a/website/www/site/assets/scss/_vars.sass
+++ b/website/www/site/assets/scss/_vars.sass
@@ -20,10 +20,13 @@ $color-dark: #37424B
$color-white: #FFF
$color-light-gray: #F7F7F7
$color-dark-gray: #555
+$color-gray: #333333
$pad-sm: 15px
+$pad-s: 24px
$pad: 30px
$pad-md: 60px
+$pad-l: 84px
$pad-xl: 100px
$box-shadow: 0px 3px 20px 0 rgba(0,0,0,0.075)
diff --git a/website/www/site/assets/scss/main.scss b/website/www/site/assets/scss/main.scss
index a2983ad..8007760 100644
--- a/website/www/site/assets/scss/main.scss
+++ b/website/www/site/assets/scss/main.scss
@@ -24,6 +24,8 @@
@import "_type.sass";
@import "_global.sass";
@import "_navbar.sass";
+@import "_typography.scss";
+@import "_media.scss";
// Components.
@import "_button.sass";
@@ -36,7 +38,7 @@
@import "_header.sass";
@import "_hero.sass";
@import "_logos.sass";
-@import "_pillars.sass";
+@import "_pillars.scss";
@import "_section-nav.sass";
@import "_page-nav.sass";
@import "_table-wrapper.sass";
diff --git a/website/www/site/data/en/pillars.yaml b/website/www/site/data/en/pillars.yaml
index d2138bd..de864bc 100644
--- a/website/www/site/data/en/pillars.yaml
+++ b/website/www/site/data/en/pillars.yaml
@@ -12,7 +12,13 @@
- title: Unified
body: Use a single programming model for both batch and streaming use cases.
-- title: Portable
- body: Execute pipelines on multiple execution environments.
+ icon: icons/unified-icon.svg
- title: Extensible
body: Write and share new SDKs, IO connectors, and transformation libraries.
+ icon: icons/extensive-icon.svg
+- title: Portable
+ body: Execute pipelines on multiple execution environments.
+ icon: icons/portable-icon.svg
+- title: Open Source
+ body: Use a single programming model for both batch and streaming use cases.
+ icon: icons/open-source-icon.svg
diff --git a/website/www/site/data/en/pillars.yaml b/website/www/site/data/en/pillars_social.yaml
similarity index 63%
copy from website/www/site/data/en/pillars.yaml
copy to website/www/site/data/en/pillars_social.yaml
index d2138bd..2ed3ff6 100644
--- a/website/www/site/data/en/pillars.yaml
+++ b/website/www/site/data/en/pillars_social.yaml
@@ -10,9 +10,12 @@
# See the License for the specific language governing permissions and
# limitations under the License.
-- title: Unified
- body: Use a single programming model for both batch and streaming use cases.
-- title: Portable
- body: Execute pipelines on multiple execution environments.
-- title: Extensible
- body: Write and share new SDKs, IO connectors, and transformation libraries.
+- name: pillars-github-icon
+ icon: icons/github-icon.svg
+ url: https://github.com/apache/beam
+- name: pillars-youtube-icon
+ icon: icons/youtube-icon.svg
+ url: https://www.youtube.com/channel/UChNnb_YO_7B0HlW6FhAXZZQ
+- name: pillars-twitter-icon
+ icon: icons/twitter-icon.svg
+ url: https://twitter.com/apachebeam
\ No newline at end of file
diff --git a/website/www/site/i18n/home/en.yaml b/website/www/site/i18n/home/en.yaml
index cbb3f23..43a3fea 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-pillars-title
- translation: "All about Apache Beam"
- id: home-logos-title
translation: "Works with"
- id: home-cards-title
diff --git a/website/www/site/data/en/pillars.yaml b/website/www/site/i18n/home/pillars/en.yaml
similarity index 66%
copy from website/www/site/data/en/pillars.yaml
copy to website/www/site/i18n/home/pillars/en.yaml
index d2138bd..ab8a6d1 100644
--- a/website/www/site/data/en/pillars.yaml
+++ b/website/www/site/i18n/home/pillars/en.yaml
@@ -10,9 +10,7 @@
# See the License for the specific language governing permissions and
# limitations under the License.
-- title: Unified
- body: Use a single programming model for both batch and streaming use cases.
-- title: Portable
- body: Execute pipelines on multiple execution environments.
-- title: Extensible
- body: Write and share new SDKs, IO connectors, and transformation libraries.
+- id: home-pillars-title
+ translation: "All about Apache Beam"
+- id: home-pillars-social-text
+ translation: "Check out our social media to learn more about the community!"
\ No newline at end of file
diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html
index e1f69be..f173e41 100644
--- a/website/www/site/layouts/index.html
+++ b/website/www/site/layouts/index.html
@@ -57,23 +57,27 @@
{{ end }}
{{ define "pillars-section" }}
- <div class="pillars section">
- <div class="pillars__title">
+ <div class="pillars">
+ <h2 class="pillars-title">
{{ T "home-pillars-title" }}
- </div>
- <div class="pillars__cols">
+ </h2>
+ <div class="pillars-content">
{{ $data := index $.Site.Data .Site.Language.Lang }}
{{ range $pillar := $data.pillars }}
- <div class="pillars__cols__col">
- <div class="pillars__cols__col__title">
- {{ $pillar.title }}
- </div>
- <div class="pillars__cols__col__body">
- {{ $pillar.body }}
- </div>
- </div>
+ {{ partial "pillars/pillars-item" (dict "logo" $pillar.icon "header" $pillar.title "text" $pillar.body) }}
{{ end }}
</div>
+ <div class="pillars-social">
+ <div class="pillars-social-icons">
+ {{ $data := index $.Site.Data .Site.Language.Lang }}
+ {{ range $pillars_social := $data.pillars_social }}
+ {{ partial "pillars/pillars-social" (dict "icon" $pillars_social.icon "url" $pillars_social.url "name" $pillars_social.name) }}
+ {{ end }}
+ </div>
+ <p class="pillars-social-text">
+ {{ T "home-pillars-social-text" }}
+ </p>
+ </div>
</div>
{{ end }}
diff --git a/website/www/site/layouts/partials/head.html b/website/www/site/layouts/partials/head.html
index 1430d9a..b377332 100644
--- a/website/www/site/layouts/partials/head.html
+++ b/website/www/site/layouts/partials/head.html
@@ -17,7 +17,7 @@
<title>{{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}</title>
<meta name="description" content="{{ .Description | default $.Site.Params.description }}">
-<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">
{{ $scssMain := "scss/main.scss"}}
{{ if .Site.IsServer }}
diff --git a/website/www/site/layouts/partials/pillars/pillars-item.html b/website/www/site/layouts/partials/pillars/pillars-item.html
new file mode 100644
index 0000000..84be04b
--- /dev/null
+++ b/website/www/site/layouts/partials/pillars/pillars-item.html
@@ -0,0 +1,23 @@
+{{/*
+ 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.
+*/}}
+
+<div class="pillars-item">
+ <div class="pillars-item-icon">
+ {{ with resources.Get .logo }}
+ {{ .Content | safeHTML }}
+ {{ end }}
+ </div>
+ <div class="pillars-item-description">
+ <h5 class="pillars-item-header">{{ .header | markdownify }}</h5>
+ <p class="pillars-item-text">{{ .text | markdownify }}</p>
+ </div>
+</div>
diff --git a/website/www/site/layouts/partials/pillars/pillars-social.html b/website/www/site/layouts/partials/pillars/pillars-social.html
new file mode 100644
index 0000000..76f6a50
--- /dev/null
+++ b/website/www/site/layouts/partials/pillars/pillars-social.html
@@ -0,0 +1,19 @@
+{{/*
+ 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.
+*/}}
+
+<div class="{{ .name }}">
+ <a href="{{ .url }}" target="_blank">
+ {{ with resources.Get .icon }}
+ {{ .Content | safeHTML }}
+ {{ end }}
+ </a>
+</div>
\ No newline at end of file