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/25 00:32:59 UTC

[beam] branch website-revamp updated: [BEAM-11182][Website revamp] Implemented Stay up to date with Beam and Changed Works with components (#13406)

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 1f790fc  [BEAM-11182][Website revamp] Implemented Stay up to date with Beam and Changed Works with components (#13406)
1f790fc is described below

commit 1f790fcd92e66a808cf2099aa86adeaa2bf1c5ab
Author: Nam Bui <bn...@gmail.com>
AuthorDate: Wed Nov 25 07:27:51 2020 +0700

    [BEAM-11182][Website revamp] Implemented Stay up to date with Beam and Changed Works with components (#13406)
    
    * Implemented About social media component
    
    * Implemented About social media component
    
    * Implemented Stay up to date component
    
    * Updated supported integrations component
    
    * Review: Added comments
---
 website/www/site/assets/icons/calendar-icon.svg    |  23 ++
 website/www/site/assets/scss/_calendar.scss        | 238 +++++++++++++++++++++
 .../site/assets/scss/{_logos.sass => _logos.scss}  |  73 +++++--
 website/www/site/assets/scss/_typography.scss      |  48 ++++-
 website/www/site/assets/scss/_vars.sass            |   3 +
 website/www/site/assets/scss/main.scss             |   3 +-
 website/www/site/data/en/calendar_events.yaml      |  27 +++
 website/www/site/i18n/home/calendar/en.yaml        |  44 ++++
 website/www/site/i18n/home/en.yaml                 |   2 -
 website/www/site/i18n/home/logos/en.yaml           |  14 ++
 website/www/site/layouts/_default/baseof.html      |   1 +
 website/www/site/layouts/index.html                |  73 ++++++-
 .../layouts/partials/calendar/calendar-events.html |  33 +++
 .../layouts/partials/pillars/pillars-social.html   |   2 +-
 14 files changed, 555 insertions(+), 29 deletions(-)

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 0000000..1aa91dd
--- /dev/null
+++ b/website/www/site/assets/icons/calendar-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="44" height="44" fill="none" viewBox="0 0 44 44">
+    <path stroke="#FF6D00" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.75" d="M33 9.166H11c-2.024 0-3.666 1.642-3.666 3.667v22c0 2.025 1.642 3.667 3.667 3.667h22c2.025 0 3.666-1.642 3.666-3.667v-22c0-2.025-1.641-3.667-3.666-3.667zM29.334 5.5v7.333M14.666 5.5v7.333M7.334 20.166h29.333"/>
+    <path stroke="#FF6D00" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.75" d="M18.333 27.5h-3.667v3.667h3.667V27.5z"/>
+</svg>
diff --git a/website/www/site/assets/scss/_calendar.scss b/website/www/site/assets/scss/_calendar.scss
new file mode 100644
index 0000000..69e2bf8
--- /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 fd0f6f3..33cd632 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 d093140..99eacfe 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 6a98df4..df4276a 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 8007760..e4075a1 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 0000000..865542f
--- /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 0000000..948854e
--- /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 43a3fea..8a1ac53 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 0000000..7ed599a
--- /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 f8fbfb6..6c245c5 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 f173e41..bbfdf71 100644
--- a/website/www/site/layouts/index.html
+++ b/website/www/site/layouts/index.html
@@ -89,14 +89,79 @@
   </div>
 {{ 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" }}
+  <div class="calendar">
+    <h2 class="calendar-title">
+      {{ T "home-calendar-title" }}
+    </h2>
+    <div class="calendar-content">
+      <a href="#">
+        <div class="calendar-card-big calendar-card-big-left">
+            <div class="calendar-category">
+              <p class="calendar-category-tag">{{ T "home-calendar-category-tag-first" }}</p>
+              <p class="calendar-category-date">{{ T "home-calendar-category-date-first" }}</p>
+            </div>
+            <h4 class="calendar-card-big-title">
+              {{ T "home-calendar-card-title-first" }}
+            </h4>
+            <p class="calendar-card-author">{{ T "home-calendar-card-author-first" }}</p>
+        </div>
+      </a>
+      <div class="calendar-card-box">
+        <a href="#">
+          <div class="calendar-card-small">
+            <div class="calendar-category">
+              <p class="calendar-category-tag">{{ T "home-calendar-category-tag-second" }}</p>
+              <p class="calendar-category-date">{{ T "home-calendar-category-date-second" }}</p>
+            </div>
+            <h4 class="calendar-card-small-title">
+              {{ T "home-calendar-card-title-second" }}
+            </h4>
+            <p class="calendar-card-author">{{ T "home-calendar-card-author-second" }}</p>
+          </div>
+        </a>
+        <a href="#">
+          <div class="calendar-card-small">
+            <div class="calendar-category">
+              <p class="calendar-category-tag">{{ T "home-calendar-category-tag-third" }}</p>
+              <p class="calendar-category-date">{{ T "home-calendar-category-date-third" }}</p>
+            </div>
+            <h4 class="calendar-card-small-title">
+              {{ T "home-calendar-card-title-third" }}
+            </h4>
+            <p class="calendar-card-author">{{ T "home-calendar-card-author-third" }}</p>
+          </div>
+        </a>
+      </div>
+      <div class="calendar-card-big calendar-card-big-right">
+        <p class="calendar-card-event-title">{{ T "home-calendar-card-events-title" }}</p>
+        <div class="calendar-card-events">
+          {{ $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 }}
+        </div>
+        <a href="">
+          <button class="calendar-card-events-button"><span>{{ T "home-calendar-card-events-button" }}</span></button>
+        </a>
+      </div>
+    </div>
+  </div>
+{{ end }}
+
 {{ define "logos-section" }}
-  <div class="logos section">
-    <div class="logos__title">
+  <div class="logos">
+    <div class="logos-title">
       {{ T "home-logos-title" }}
     </div>
-    <div class="logos__logos">
+    <div class="logos-logos">
       {{ range $logo := $.Site.Data.works_with }}
-      <div class="logos__logos__logo">
+      <div class="logos-logo">
         <a href="{{ $logo.url }}"><img src="{{ $logo.image_url }}" alt="{{ $logo.title }}"></a>
       </div>
       {{ end }}
diff --git a/website/www/site/layouts/partials/calendar/calendar-events.html b/website/www/site/layouts/partials/calendar/calendar-events.html
new file mode 100644
index 0000000..055b1b1
--- /dev/null
+++ b/website/www/site/layouts/partials/calendar/calendar-events.html
@@ -0,0 +1,33 @@
+{{/*
+  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.
+*/}}
+
+<a href="{{ .url }}">
+  <div class="calendar-event">
+    <div class="calendar-event-icon">
+      {{ with resources.Get .icon }}
+        {{ .Content | safeHTML }}
+      {{ end }}
+    </div>
+    <div class="calendar-event-description">
+      <p class="calendar-event-title">
+        {{ .title | markdownify }}
+      </p>
+      <span class="calendar-event-place">
+        {{ .place | markdownify }}
+        &nbsp;&nbsp;•&nbsp;&nbsp;
+      </span>  
+      <span class="calendar-event-time">
+        {{ .time | markdownify }}
+      </span>
+    </div>
+  </div>
+</a>
\ No newline at end of file
diff --git a/website/www/site/layouts/partials/pillars/pillars-social.html b/website/www/site/layouts/partials/pillars/pillars-social.html
index 76f6a50..17f0e61 100644
--- a/website/www/site/layouts/partials/pillars/pillars-social.html
+++ b/website/www/site/layouts/partials/pillars/pillars-social.html
@@ -16,4 +16,4 @@
       {{ .Content | safeHTML }}
     {{ end }}
   </a>
-</div>
\ No newline at end of file
+</div>