[BEAM-11182][Website revamp] Implemented Stay up to date with Beam and Changed Works with components

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;
+          }
+        }
+      }
+    }
+  }
+}

website/www/site/assets/scss/_logos.sass → 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;
+      }
+    }
+  }
+}