[beam] 01/01: Add banner highlighting beam ml

[da...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

damccorm pushed a commit to branch users/damccorm/ml-banner
in repository https://gitbox.apache.org/repos/asf/beam.git

commit 210f913792d1f8cdfaa08b3b8f8411559a4b451c
Author: Danny McCormick <da...@google.com>
AuthorDate: Fri Feb 3 14:23:35 2023 -0500

    Add banner highlighting beam ml
---
 website/www/site/assets/scss/_banner.sass         |  43 ++++++++++++++++++++++
 website/www/site/assets/scss/_hero.scss           |   3 +-
 website/www/site/assets/scss/_navbar-desktop.scss |   3 +-
 website/www/site/assets/scss/main.scss            |   1 +
 website/www/site/layouts/partials/header.html     |   6 +++
 website/www/site/static/images/banner_desktop.jpg | Bin 0 -> 111671 bytes
 website/www/site/static/images/banner_mobile.jpg  | Bin 0 -> 59518 bytes
 7 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/website/www/site/assets/scss/_banner.sass b/website/www/site/assets/scss/_banner.sass
new file mode 100644
index 00000000000..162f6638be6
--- /dev/null
+++ b/website/www/site/assets/scss/_banner.sass
@@ -0,0 +1,43 @@
+/*!
+ *  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.
+ */
+
+.banner-container
+  height: 96px
+  background-color: #000954
+  margin-top: 0
+  padding-top: 5px
+  display: flex
+  justify-content: center
+  align-items: center
+  @media (max-width: $ak-breakpoint-lg)
+    height: 176px
+    margin-top: 64px
+    padding-top: 0
+
+  .banner-img-desktop
+    display: block
+    width: 100%
+    @media (max-width: $ak-breakpoint-lg)
+      display: none
+
+  .banner-img-mobile
+    display: none
+    width: auto
+    @media (max-width: $ak-breakpoint-lg)
+      display: block
+    @media (max-width: $ak-breakpoint-sm)
+      width: 100%
\ No newline at end of file
diff --git a/website/www/site/assets/scss/_hero.scss b/website/www/site/assets/scss/_hero.scss
index a8f6d1ac473..6e9318e2d1d 100644
--- a/website/www/site/assets/scss/_hero.scss
+++ b/website/www/site/assets/scss/_hero.scss
@@ -24,7 +24,8 @@
    width: 100%;
    height: 100%;
    display: inherit;
-   margin-top: -30px;
+   // TODO - revert margin-top to -30px after summit is over when removing banner
+   margin-top: 0;
    min-height: 361px;
    .hero-content {
      position: absolute;
diff --git a/website/www/site/assets/scss/_navbar-desktop.scss b/website/www/site/assets/scss/_navbar-desktop.scss
index 4df67c9507b..1a6f090ddcc 100644
--- a/website/www/site/assets/scss/_navbar-desktop.scss
+++ b/website/www/site/assets/scss/_navbar-desktop.scss
@@ -33,7 +33,8 @@
    height: 96px;
    width: 100%;
    align-items: center;
-   margin-bottom: 30px;
+   // TODO - revert margin-bottom to 30px after summit is over when removing banner
+   margin-bottom: 0;
    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
diff --git a/website/www/site/assets/scss/main.scss b/website/www/site/assets/scss/main.scss
index 0c924e47eb6..9fc1d0f36bd 100644
--- a/website/www/site/assets/scss/main.scss
+++ b/website/www/site/assets/scss/main.scss
@@ -57,3 +57,4 @@
 @import "_pipelines.scss";
 @import "_about.sass";
 @import "_local.scss";
+@import "_banner.sass";
diff --git a/website/www/site/layouts/partials/header.html b/website/www/site/layouts/partials/header.html
index 76735af60da..6e93edeb088 100644
--- a/website/www/site/layouts/partials/header.html
+++ b/website/www/site/layouts/partials/header.html
@@ -202,6 +202,12 @@
 </div>
 </div>
 </nav>
+<div class="banner-container">
+  <a href="https://beam.apache.org/documentation/ml/overview/">
+    <img class="banner-img-desktop" src="/images/banner_desktop.jpg" alt="banner-desktop">
+    <img class="banner-img-mobile" src="/images/banner_mobile.jpg" alt="banner-mobile">
+  </a>
+</div>
 <script>
  function showSearch() {
    addPlaceholder();
diff --git a/website/www/site/static/images/banner_desktop.jpg b/website/www/site/static/images/banner_desktop.jpg
new file mode 100644
index 00000000000..74c522bbe8b
Binary files /dev/null and b/website/www/site/static/images/banner_desktop.jpg differ
diff --git a/website/www/site/static/images/banner_mobile.jpg b/website/www/site/static/images/banner_mobile.jpg
new file mode 100644
index 00000000000..a9dc0f13669
Binary files /dev/null and b/website/www/site/static/images/banner_mobile.jpg differ