first load

styles/_home-page.scss

@@ -0,0 +1,81 @@
+/***** Homepage *****/
+
+.section {
+  @include tablet {
+    margin-bottom: 60px;
+  }
+
+  margin-bottom: 40px;
+}
+
+.home-section h2 {
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+/***** Promoted articles *****/
+
+.promoted-articles {
+  @include desktop { flex-direction: row; }
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+
+  &-item {
+    @include desktop {
+      align-self: flex-end;
+      flex: 0 0 auto;
+      padding-right: 30px;
+      width: 33%; /* Three columns on desktop */
+
+      [dir="rtl"] & { padding: 0 0 0 30px; }
+    }
+
+    flex: 1 0 auto;
+
+    &:nth-child(3n) {
+      padding-right: 0;
+    }
+
+    a {
+      display: block;
+      border-bottom: 1px solid $low-contrast-border-color;
+      padding: 15px 0;
+    }
+
+    .icon-lock {
+      vertical-align: baseline;
+    }
+
+    &:last-child a {
+      @include desktop {
+        border-bottom: 1px solid $low-contrast-border-color;
+      }
+
+      border: 0;
+    }
+  }
+
+}
+
+/***** Community section in homepage *****/
+.community {
+  text-align: center;
+
+  &-image {
+    min-height: 300px;
+    margin-top: 32px;
+    background-image: url($community_image);
+    background-position: center;
+    background-repeat: no-repeat;
+    max-width: 100%;
+  }
+
+  @include standalone-link;
+}
+
+.community,
+.activity {
+  border-top: 1px solid $low-contrast-border-color;
+  padding: 30px 0;
+}