first load

styles/_community.scss

@@ -0,0 +1,147 @@
+/***** Community *****/
+.community {
+  &-hero {
+    background-image: url($community_background_image);
+    margin-bottom: 10px;
+  }
+
+  &-footer {
+    padding-top: 50px;
+    text-align: center;
+
+    &-title {
+      font-size: 16px;
+      margin-bottom: 20px;
+    }
+  }
+
+  &-featured-posts .title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  &-featured-posts,
+  &-activity {
+    padding-top: 40px;
+    width: 100%;
+  }
+
+  &-header {
+    margin-bottom: 30px;
+
+    .title {
+      margin-bottom: 0;
+      font-size: 16px;
+    }
+  }
+}
+
+.post-to-community {
+  @include tablet { margin: 0; }
+  margin-top: 10px;
+}
+
+/* Community topics grid */
+.topics {
+  max-width: none;
+  width: 100%;
+
+  &-item {
+    .meta-group {
+      justify-content: center;
+      margin-top: 20px;
+    }
+  }
+}
+
+/* Community topic page */
+
+.topic-header {
+  @include tablet { padding-bottom: 10px; }
+  border-bottom: 1px solid $low-contrast-border-color;
+  font-size: $font-size-small;
+
+  .dropdown {
+    @include tablet {
+      border-top: 0;
+      display: inline-block;
+      margin-right: 20px;
+      padding: 0;
+    }
+
+    display: block;
+    border-top: 1px solid $low-contrast-border-color;
+    padding: 10px 0;
+  }
+}
+
+.no-posts-with-filter {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+/* Topic, post and user follow button */
+.community-follow {
+  @include tablet {
+    margin-bottom: 0;
+    width: auto;
+  }
+
+  margin-bottom: 10px;
+  width: 100%;
+
+  button {
+    @extend .button;
+    @include tablet { width: auto;}
+
+    line-height: 30px;
+    padding: 0 10px 0 15px;
+    position: relative;
+    width: 100%;
+
+    &:hover { background-color: $brand_color; }
+
+    &:hover::after, &:focus::after {
+      border-color: $brand_text_color;
+      color: $brand_text_color;
+    }
+
+    &[data-selected="true"] {
+      background-color: $brand_color;
+      color: $brand_text_color;
+
+      &::after {
+        border-left: 1px solid $brand_text_color;
+        color: $brand_text_color;
+      }
+
+      &:hover {
+        background-color: $hover-button-color;
+        border-color: $hover-button-color;
+      }
+    }
+
+    &::after {
+      @include tablet {
+        position: static;
+      }
+
+      border-left: 1px solid $button-color;
+      content: attr(data-follower-count);
+      color: $button-color;
+      display: inline-block;
+      font-family: $heading_font;
+      margin-left: 15px;
+      padding-left: 10px;
+      position: absolute;
+      right: 10px;
+
+      [dir="rtl"] & {
+        border-left: 0;
+        border-right: 1px solid $button-color;
+        margin: 0 10px 0 0;
+        padding: 0 10px 0 0;
+      }
+    }
+  }
+}