You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@incubator.apache.org by yu...@apache.org on 2016/12/21 02:25:55 UTC

[10/12] incubator-rocketmq-site git commit: Finish code dump.

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/_forms.scss
----------------------------------------------------------------------
diff --git a/_sass/_forms.scss b/_sass/_forms.scss
new file mode 100644
index 0000000..a1f0f14
--- /dev/null
+++ b/_sass/_forms.scss
@@ -0,0 +1,391 @@
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+form {
+  margin: 0 0 5px 0;
+
+  fieldset {
+    margin-bottom: 5px;
+    padding: 0;
+    border-width: 0;
+  }
+
+  legend {
+    display: block;
+    width: 100%;
+    margin-bottom: 5px * 2;
+    *margin-left: -7px;
+    padding: 0;
+    color: $text-color;
+    border: 0;
+    border-bottom: 1px solid mix(#fff, #000, 80%);
+    white-space: normal;
+  }
+
+  p {
+    margin-bottom: 5px / 2;
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0 0 5px 0;
+    padding: 0;
+  }
+
+  br {
+    display: none;
+  }
+}
+
+label,
+input,
+button,
+select,
+textarea {
+  vertical-align: baseline;
+  *vertical-align: middle;
+}
+
+input,
+button,
+select,
+textarea {
+  box-sizing: border-box;
+  font-family: $sans-serif;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.25em;
+  color: $text-color;
+  cursor: pointer;
+
+  small {
+    font-size: $type-size-6;
+  }
+
+  input,
+  textarea,
+  select {
+    display: block;
+  }
+}
+
+input,
+textarea,
+select {
+  display: inline-block;
+  width: 100%;
+  padding: 0.25em;
+  margin-bottom: 0.5em;
+  color: $text-color;
+  background-color: #fff;
+  border: 1px solid mix(#fff, #000, 80%);
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+
+  &:hover {
+    border-color: mix(#fff, $primary-color, 50%);
+  }
+}
+
+.input-mini {
+  width: 60px;
+}
+
+.input-small {
+  width: 90px;
+}
+
+input[type="image"],
+input[type="checkbox"],
+input[type="radio"] {
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 3px 0;
+  *margin-top: 0;
+  line-height: normal;
+  cursor: pointer;
+  border-radius: 0;
+  border: 0 \9;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  *width: 13px;
+  *height: 13px;
+}
+
+input[type="image"] {
+  border: 0;
+  box-shadow: none;
+}
+
+input[type="file"] {
+  width: auto;
+  padding: initial;
+  line-height: initial;
+  border: initial;
+  background-color: transparent;
+  background-color: initial;
+  box-shadow: none;
+}
+
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  width: auto;
+  height: auto;
+  cursor: pointer;
+  *overflow: visible;
+}
+
+select,
+input[type="file"] {
+  *margin-top: 4px;
+}
+
+select {
+  width: auto;
+  background-color: #fff;
+}
+
+select[multiple],
+select[size] {
+  height: auto;
+}
+
+textarea {
+  resize: vertical;
+  height: auto;
+  overflow: auto;
+  vertical-align: top;
+}
+
+input[type="hidden"] {
+  display: none;
+}
+
+.form {
+  position: relative;
+}
+
+.radio,
+.checkbox {
+  padding-left: 18px;
+  font-weight: normal;
+}
+
+.radio input[type="radio"],
+.checkbox input[type="checkbox"] {
+  float: left;
+  margin-left: -18px;
+}
+
+.radio.inline,
+.checkbox.inline {
+  display: inline-block;
+  padding-top: 5px;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline {
+  margin-left: 10px;
+}
+
+
+/*
+   Disabled state
+   ========================================================================== */
+
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+
+/*
+   Focus & active state
+   ========================================================================== */
+
+input:focus,
+textarea:focus {
+  border-color: $primary-color;
+  outline: 0;
+  outline: thin dotted \9;
+}
+
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus,
+select:focus {
+  box-shadow: none;
+}
+
+
+/*
+   Help text
+   ========================================================================== */
+
+.help-block,
+.help-inline {
+  color: $info-color;
+}
+
+.help-block {
+  display: block;
+  margin-bottom: 1em;
+  line-height: 1em;
+}
+
+.help-inline {
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 5px;
+}
+
+
+/*
+   .form-inline
+   ========================================================================== */
+
+.form-inline input,
+.form-inline textarea,
+.form-inline select {
+  display: inline-block;
+  margin-bottom: 0;
+}
+
+.form-inline label {
+  display: inline-block;
+}
+
+.form-inline .radio,
+.form-inline .checkbox,
+.form-inline .radio {
+  padding-left: 0;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"] {
+  float: left;
+  margin-left: 0;
+  margin-right: 3px; }
+
+
+/*
+   .form-search
+   ========================================================================== */
+
+.form-search input,
+.form-search textarea,
+.form-search select {
+  display: inline-block;
+  margin-bottom: 0;
+}
+
+.form-search .search-query {
+  padding-left: 14px;
+  padding-right: 14px;
+  margin-bottom: 0;
+  border-radius: 14px;
+}
+
+.form-search label {
+  display: inline-block;
+}
+
+.form-search .radio,
+.form-search .checkbox,
+.form-inline .radio {
+  padding-left: 0;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.form-search .radio input[type="radio"],
+.form-search .checkbox input[type="checkbox"] {
+  float: left;
+  margin-left: 0;
+  margin-right: 3px;
+}
+
+
+/*
+   .form--loading
+   ========================================================================== */
+
+.form--loading:before {
+  content: '';
+}
+
+.form--loading .form__spinner {
+  display: block;
+}
+
+.form:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 10;
+}
+
+.form__spinner {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 11;
+}
+
+
+
+/*
+   Google search form
+   ========================================================================== */
+
+#goog-fixurl {
+  ul {
+    list-style: none;
+    margin-left: 0;
+    padding-left: 0;
+    li {
+      list-style-type: none;
+    }
+  }
+}
+
+#goog-wm-qt {
+  width: auto;
+  margin-right: 10px;
+  margin-bottom: 20px;
+  padding: 8px 20px;
+  display: inline-block;
+  font-size: $type-size-6;
+  background-color: #fff;
+  color: #000;
+  border-width: 2px !important;
+  border-style: solid !important;
+  border-color: lighten(#000,50);
+  border-radius: $border-radius;
+}
+
+#goog-wm-sb {
+  @extend .btn;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/_masthead.scss
----------------------------------------------------------------------
diff --git a/_sass/_masthead.scss b/_sass/_masthead.scss
new file mode 100644
index 0000000..dec55cd
--- /dev/null
+++ b/_sass/_masthead.scss
@@ -0,0 +1,53 @@
+/* ==========================================================================
+   MASTHEAD
+   ========================================================================== */
+
+.masthead {
+  position: relative;
+  border-bottom: 1px solid $border-color;
+  -webkit-animation: intro 0.3s both;
+          animation: intro 0.3s both;
+  -webkit-animation-delay: 0.15s;
+          animation-delay: 0.15s;
+  z-index: 20;
+
+  &__inner-wrap {
+    @include container;
+    @include clearfix;
+    padding: 1em 1em 1em;
+    font-family: $sans-serif-narrow;
+
+    @include breakpoint($x-large) {
+      max-width: $x-large;
+    }
+
+    nav {
+      z-index: 10;
+    }
+
+    a {
+      text-decoration: none;
+    }
+  }
+}
+
+.masthead__menu {
+
+  ul {
+    margin: 0;
+    padding: 0;
+    clear: both;
+    list-style-type: none;
+  }
+}
+
+.masthead__menu-item {
+  display: block;
+  list-style-type: none;
+  white-space: nowrap;
+
+  &--lg {
+    padding-right: 2em;
+    font-weight: 700;
+  }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/_mixins.scss
----------------------------------------------------------------------
diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss
new file mode 100644
index 0000000..14782b1
--- /dev/null
+++ b/_sass/_mixins.scss
@@ -0,0 +1,53 @@
+/* ==========================================================================
+   MIXINS
+   ========================================================================== */
+
+%tab-focus {
+  /* Default*/
+  outline: thin dotted $warning-color;
+  /* Webkit*/
+  outline: 5px auto $warning-color;
+  outline-offset: -2px;
+}
+
+/*
+   em function
+   ========================================================================== */
+
+@function em($target, $context: $doc-font-size) {
+  @return ($target / $context) * 1em;
+}
+
+
+/*
+   Bourbon clearfix
+   ========================================================================== */
+
+/*
+  * Provides an easy way to include a clearfix for containing floats.
+  * link http://cssmojo.com/latest_new_clearfix_so_far/
+  *
+  * example scss - Usage
+  *
+  * .element {
+  *   @include clearfix;
+  * }
+  *
+  * example css - CSS Output
+  *
+  * .element::after {
+  *   clear: both;
+  *   content: "";
+  *   display: table;
+  * }
+*/
+
+@mixin clearfix {
+  clear: both;
+
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/_navigation.scss
----------------------------------------------------------------------
diff --git a/_sass/_navigation.scss b/_sass/_navigation.scss
new file mode 100644
index 0000000..a5da695
--- /dev/null
+++ b/_sass/_navigation.scss
@@ -0,0 +1,544 @@
+/* ==========================================================================
+   NAVIGATION
+   ========================================================================== */
+
+/*
+   Breadcrumb navigation links
+   ========================================================================== */
+
+.breadcrumbs {
+  @include container;
+  @include clearfix;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 2em;
+  padding-right: 2em;
+  font-family: $sans-serif;
+  -webkit-animation: intro 0.3s both;
+          animation: intro 0.3s both;
+  -webkit-animation-delay: 0.30s;
+          animation-delay: 0.30s;
+
+  @include breakpoint($large) {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
+  @include breakpoint($x-large) {
+    max-width: $x-large;
+  }
+
+  ol {
+    padding: 0;
+    list-style: none;
+    font-size: $type-size-6;
+
+    @include breakpoint($large) {
+      @include span(10 of 12 last);
+    }
+
+    @include breakpoint($x-large) {
+      @include prefix(0.5 of 12);
+    }
+  }
+
+  li {
+    display: inline;
+  }
+
+  .current {
+    font-weight: bold;
+  }
+}
+
+
+/*
+   Post pagination navigation links
+   ========================================================================== */
+
+.pagination {
+  @include full();
+  @include clearfix();
+  margin-top: 1em;
+  padding-top: 1em;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    font-family: $sans-serif;
+  }
+
+  li {
+    display: block;
+    float: left;
+    margin-left: -1px;
+
+    a {
+      display: block;
+      margin-bottom: 0.25em;
+      padding: 0.5em 1em;
+      font-family: $sans-serif;
+      font-size: 14px;
+      font-weight: bold;
+      line-height: 1.5;
+      text-align: center;
+      text-decoration: none;
+      color: mix(#fff, $gray, 25%);
+      border: 1px solid $light-gray;
+      border-radius: 0;
+
+      &:hover {
+        color: $link-color-hover;
+      }
+
+      &.current {
+        color: #fff;
+        background: $primary-color;
+      }
+
+      &.disabled {
+        color: mix(#fff, $gray, 75%);
+        pointer-events: none;
+        cursor: not-allowed;
+      }
+    }
+
+    &:first-child {
+      margin-left: 0;
+
+      a {
+        border-top-left-radius: $border-radius;
+        border-bottom-left-radius: $border-radius;
+      }
+    }
+
+    &:last-child {
+      a {
+        border-top-right-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+    }
+  }
+
+  /* next/previous buttons */
+  &--pager {
+    display: block;
+    padding: 1em 2em;
+    float: left;
+    width: 50%;
+    font-family: $sans-serif;
+    font-size: $type-size-5;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    color: $link-color;
+    border: 1px solid $light-gray;
+    border-radius: $border-radius;
+
+    &:hover {
+      color: $link-color-hover;
+    }
+
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child {
+      margin-left: -1px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &.disabled {
+      color: mix(#fff, $gray, 75%);
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.page__content + .pagination,
+.page__meta + .pagination,
+.page__share + .pagination,
+.page__comments + .pagination {
+  margin-top: 2em;
+  padding-top: 2em;
+  border-top: 1px solid $border-color;
+}
+
+
+/*
+   Priority plus navigation
+   ========================================================================== */
+
+.greedy-nav {
+  position: relative;
+  min-width: 250px;
+  background: $background-color;
+
+  a {
+    display: block;
+    margin: 0 1rem;
+    padding: 0.5rem 0;
+    color: $masthead-link-color;
+    text-decoration: none;
+
+    &:hover {
+      color: $masthead-link-color-hover;
+    }
+  }
+
+  button {
+    position: absolute;
+    height: 100%;
+    right: 0;
+    padding: 0 0.5rem;
+    border: 0;
+    outline: none;
+    background-color: $primary-color;
+    color: #fff;
+    cursor: pointer;
+  }
+
+  .visible-links {
+    display: table;
+
+    li {
+      display: table-cell;
+      vertical-align: middle;
+
+      &:first-child {
+        font-weight: bold;
+
+        a {
+          margin-left: 0;
+        }
+      }
+
+      &:last-child {
+        a {
+          margin-right: 0;
+        }
+      }
+    }
+
+    a {
+      position: relative;
+
+      &:before {
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 4px;
+        background: mix(#fff, $primary-color, 50%);
+        width: 100%;
+        -webkit-transition: $global-transition;
+        transition: $global-transition;
+        -webkit-transform: scaleX(0) translate3d(0, 0 , 0);
+            -ms-transform: scaleX(0) translate3d(0, 0 , 0);
+                transform: scaleX(0) translate3d(0, 0 , 0); /* hide*/
+      }
+
+      &:hover:before {
+        -webkit-transform: scaleX(1);
+            -ms-transform: scaleX(1);
+                transform: scaleX(1); /* reveal*/
+      }
+    }
+  }
+
+  .hidden-links {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 15px;
+    padding: 5px;
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
+    background: #fff;
+    box-shadow: 0 0 10px rgba(#000, 0.25);
+
+    a {
+      margin: 0;
+      padding: 10px 20px;
+      font-size: $type-size-5;
+
+      &:hover {
+        color: $masthead-link-color-hover;
+        background: mix(#fff, $primary-color, 75%);
+      }
+    }
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: -11px;
+      right: 10px;
+      width: 0;
+      border-style: solid;
+      border-width: 0 10px 10px;
+      border-color: $border-color transparent;
+      display: block;
+      z-index: 0;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: -10px;
+      right: 10px;
+      width: 0;
+      border-style: solid;
+      border-width: 0 10px 10px;
+      border-color: #fff transparent;
+      display: block;
+      z-index: 1;
+    }
+
+    li {
+      display: block;
+      border-bottom: 1px solid $border-color;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+
+/*
+   Navigation list
+   ========================================================================== */
+
+.nav__list {
+  margin-bottom: 1.5em;
+
+  input[type="checkbox"],
+  label {
+    display: none;
+  }
+
+  @include breakpoint(max-width ($large - 1px)) {
+
+    label {
+      position: relative;
+      display: inline-block;
+      padding: 0.5em 2.5em 0.5em 1em;
+      color: $gray;
+      font-size: $type-size-6;
+      font-weight: bold;
+      border: 1px solid $light-gray;
+      border-radius: $border-radius;
+      z-index: 20;
+      -webkit-transition: 0.2s ease-out;
+      transition: 0.2s ease-out;
+      cursor: pointer;
+
+      &:before,
+      &:after {
+        content: '';
+        position: absolute;
+        right: 1em;
+        top: 1.25em;
+        width: 0.75em;
+        height: 0.125em;
+        line-height: 1;
+        background-color: $gray;
+        transition: 0.2s ease-out;
+      }
+
+      &:after {
+        transform: rotate(90deg);
+      }
+
+      &:hover {
+        color: #fff;
+        border-color: $gray;
+        background-color: mix(white, #000, 20%);
+
+        &:before,
+        &:after {
+          background-color: #fff;
+        }
+      }
+    }
+
+    /* selected*/
+    input:checked + label {
+      color: white;
+      background-color: mix(white, #000, 20%);
+
+      &:before,
+      &:after {
+        background-color: #fff;
+      }
+    }
+
+    // on hover show expand
+    label:hover:after {
+      transform: rotate(90deg);
+    }
+
+    input:checked + label:hover:after {
+      transform: rotate(0);
+    }
+
+    ul {
+      margin-bottom: 1em;
+    }
+
+    a {
+      display: block;
+      padding: 0.25em 0;
+
+      @include breakpoint($large) {
+        padding-top: 0.125em;
+        padding-bottom: 0.125em;
+      }
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.nav__list .nav__items {
+  margin: 0;
+  font-size: 1.25rem;
+
+  a {
+    color: inherit;
+  }
+
+  .active {
+    margin-left: -0.5em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    color: #fff;
+    font-weight: bold;
+    background: $primary-color;
+    border-radius: $border-radius;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  @include breakpoint(max-width ($large - 1px)) {
+    position: relative;
+    max-height: 0;
+    opacity: 0%;
+    overflow: hidden;
+    z-index: 10;
+    -webkit-transition: 0.3s ease-in-out;
+    transition: 0.3s ease-in-out;
+    -webkit-transform: translate(0, 10%);
+        -ms-transform: translate(0, 10%);
+            transform: translate(0, 10%);
+  }
+}
+
+@include breakpoint(max-width ($large - 1px)) {
+  .nav__list input:checked ~ .nav__items {
+    -webkit-transition: 0.5s ease-in-out;
+    transition: 0.5s ease-in-out;
+    max-height: 9999px; // exaggerate max-height to accommodate tall lists
+    overflow: visible;
+    opacity: 1;
+    margin-top: 1em;
+    -webkit-transform: translate(0, 0);
+        -ms-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+}
+
+.nav__title {
+  margin: 0;
+  padding: 0.5rem 1rem;
+  font-family: $sans-serif-narrow;
+  font-size: $type-size-5;
+  font-weight: bold;
+}
+
+.nav__sub-title {
+  display: block;
+  margin: 0.5rem 0;
+  padding: 0.5rem 0;
+  font-family: $sans-serif-narrow;
+  font-size: $type-size-6;
+  font-weight: bold;
+  text-transform: uppercase;
+  border-bottom: 1px solid $border-color;
+}
+
+
+/*
+   Table of contents navigation
+   ========================================================================== */
+
+.toc {
+  font-family: $sans-serif-narrow;
+  color: $gray;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  background-color: #fff;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+
+  .nav__title {
+    color: #fff;
+    font-size: $type-size-6;
+    background: $primary-color;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+  }
+}
+
+.toc__menu {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  list-style: none;
+  font-size: 0.8rem;
+
+  a {
+    display: block;
+    padding: 0.5rem 1rem;
+    color: $gray;
+    font-size: $type-size-7;
+    font-weight: bold;
+    line-height: 1.5;
+    border-bottom: 1px solid $border-color;
+
+    &:hover {
+      color: #000;
+      background: $lighter-gray;
+    }
+  }
+
+  > li:last-child {
+    a {
+      border-bottom: none;
+    }
+  }
+
+  li ul > li a {
+    padding-left: 2rem;
+    font-weight: normal;
+  }
+
+  /* hide sub sub links on small screens*/
+  li > ul li {
+    display: none;
+
+    @include breakpoint($medium) {
+      display: block;
+    }
+  }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/_notices.scss
----------------------------------------------------------------------
diff --git a/_sass/_notices.scss b/_sass/_notices.scss
new file mode 100644
index 0000000..26afa31
--- /dev/null
+++ b/_sass/_notices.scss
@@ -0,0 +1,99 @@
+/* ==========================================================================
+   NOTICE TEXT BLOCKS
+   ========================================================================== */
+
+/**
+ *  Default Kramdown usage (no indents!):
+ *  <div class="notice" markdown="1">
+ *  #### Headline for the Notice
+ *  Text for the notice
+ *  </div>
+ */
+
+@mixin notice($notice-color) {
+  margin: 2em 0 !important;  /* override*/
+  padding: 1em;
+  font-family: $global-font-family;
+  font-size: $type-size-6 !important;
+  text-indent: initial; /* override*/
+  background-color: mix(#fff, $notice-color, 90%);
+  border-radius: $border-radius;
+  box-shadow: 0 1px 1px rgba($notice-color, 0.25);
+
+  h4 {
+    margin-top: 0 !important; /* override*/
+    margin-bottom: 0.75em;
+  }
+
+  @at-root .page__content #{&} h4 {
+    /* using at-root to override .page-content h4 font size*/
+    margin-bottom: 0;
+    font-size: 1em;
+  }
+
+  p {
+    &:last-child {
+      margin-bottom: 0 !important; /* override*/
+    }
+  }
+
+  h4 + p {
+    /* remove space above paragraphs that appear directly after notice headline*/
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  a {
+    color: $notice-color;
+
+    &:hover {
+      color: mix(#000, $notice-color, 40%);
+    }
+  }
+
+  code {
+    background-color: mix(#fff, $notice-color, 95%)
+  }
+
+  ul {
+    &:last-child {
+      margin-bottom: 0; /* override*/
+    }
+  }
+}
+
+/* Default notice */
+
+.notice {
+  @include notice($light-gray);
+}
+
+/* Primary notice */
+
+.notice--primary {
+  @include notice($primary-color);
+}
+
+/* Info notice */
+
+.notice--info {
+  @include notice($info-color);
+}
+
+/* Warning notice */
+
+.notice--warning {
+  @include notice($warning-color);
+}
+
+/* Success notice */
+
+.notice--success {
+  @include notice($success-color);
+}
+
+/* Danger notice */
+
+.notice--danger {
+  @include notice($danger-color);
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/_page.scss
----------------------------------------------------------------------
diff --git a/_sass/_page.scss b/_sass/_page.scss
new file mode 100644
index 0000000..1c82239
--- /dev/null
+++ b/_sass/_page.scss
@@ -0,0 +1,401 @@
+/* ==========================================================================
+   SINGLE PAGE/POST
+   ========================================================================== */
+
+#main {
+  @include container;
+  @include clearfix;
+  margin-top: 2em;
+  padding-left: 1em;
+  padding-right: 1em;
+  animation: intro 0.3s both;
+  animation-delay: 0.35s;
+
+  @include breakpoint($x-large) {
+    max-width: $x-large;
+  }
+}
+
+.page {
+  @include breakpoint($large) {
+    @include span(10 of 12 last);
+    @include prefix(0.5 of 12);
+    @include suffix(2 of 12);
+  }
+
+  .page__inner-wrap {
+    @include full();
+
+    .page__content,
+    .page__meta,
+    .page__share {
+      @include full();
+    }
+  }
+}
+
+.page__title {
+  margin-top: 0;
+  line-height: 1;
+
+  & + .page__meta {
+    margin-top: -0.5em;
+  }
+}
+
+.page__lead {
+  font-family: $global-font-family;
+  font-size: $type-size-4;
+}
+
+.page__content {
+
+  h2 {
+    padding-bottom: 0.5em;
+    border-bottom: 1px solid $border-color;
+  }
+
+  p, li, dl {
+    font-size: 1em;
+  }
+
+  /* paragraph indents */
+  p {
+    margin: 0 0 $indent-var;
+
+    /* sibling indentation*/
+    @if $paragraph-indent == true {
+      & + p {
+        text-indent: $indent-var;
+        margin-top: -($indent-var);
+      }
+    }
+  }
+
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+
+      img {
+        box-shadow: 0 0 10px rgba(#000, 0.25);
+      }
+    }
+  }
+
+  dt {
+    margin-top: 1em;
+    font-family: $sans-serif;
+    font-weight: bold;
+  }
+
+  dd {
+    margin-left: 1em;
+    font-family: $sans-serif;
+    font-size: $type-size-6;
+  }
+
+  .small {
+    font-size: $type-size-6;
+  }
+
+  /* blockquote citations */
+  blockquote + .small {
+    margin-top: -1.5em;
+    padding-left: 1.25rem;
+  }
+}
+
+.page__hero {
+  position: relative;
+  margin-bottom: 2em;
+  @include clearfix;
+  animation: intro 0.3s both;
+  animation-delay: 0.25s;
+
+  &--overlay {
+    position: relative;
+    margin-bottom: 2em;
+    padding: 3em 0;
+    @include clearfix;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    animation: intro 0.3s both;
+    animation-delay: 0.25s;
+
+    a {
+      color: #fff;
+    }
+
+    .wrapper {
+      padding-left: 1em;
+      padding-right: 1em;
+
+      @include breakpoint($x-large) {
+        max-width: $x-large;
+      }
+    }
+
+    .page__title,
+    .page__meta,
+    .page__lead,
+    .btn {
+      color: #fff;
+      text-shadow: 1px 1px 4px rgba(#000, 0.5);
+    }
+
+    .page__lead {
+      max-width: $medium;
+    }
+
+    .page__title {
+      font-size: $type-size-2;
+
+      @include breakpoint($small) {
+        font-size: $type-size-1;
+      }
+    }
+  }
+}
+
+.page__hero-image {
+  width: 100%;
+  height: auto;
+  -ms-interpolation-mode: bicubic;
+}
+
+.page__hero-caption {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 0 auto;
+  padding: 2px 5px;
+  color: #fff;
+  font-family: $caption-font-family;
+  font-size: $type-size-7;
+  background: #000;
+  text-align: right;
+  z-index: 5;
+  opacity: 0.5;
+  border-radius: $border-radius 0 $border-radius 0;
+
+  @include breakpoint($large) {
+    padding: 5px 10px;
+  }
+
+  a {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
+/*
+   Social sharing
+   ========================================================================== */
+
+.page__share {
+  margin-top: 2em;
+  padding-top: 1em;
+  border-top: 1px solid $border-color;
+
+  @include breakpoint(max-width $small) {
+    .btn span {
+      border: 0;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      width: 1px;
+    }
+  }
+}
+
+.page__share-title {
+  margin-bottom: 10px;
+  font-size: $type-size-6;
+  text-transform: uppercase;
+}
+
+
+/*
+   Page meta
+   ========================================================================== */
+
+.page__meta {
+  margin-top: 2em;
+  color: mix(#fff, $gray, 25%);
+  font-family: $sans-serif;
+  font-size: $type-size-6;
+
+  p {
+    margin: 0;
+  }
+
+  a {
+    color: inherit;
+  }
+}
+
+.page__meta-title {
+  margin-bottom: 10px;
+  font-size: $type-size-6;
+  text-transform: uppercase;
+}
+
+
+/*
+   Page taxonomy
+   ========================================================================== */
+
+.page__taxonomy {
+  .sep {
+    display: none;
+  }
+
+  strong {
+    margin-right: 10px;
+  }
+}
+
+.page__taxonomy-item {
+  display: inline-block;
+  margin-right: 5px;
+  margin-bottom: 8px;
+  padding: 5px 10px;
+  text-decoration: none;
+  border: 1px solid $light-gray;
+  border-radius: $border-radius;
+
+  &:hover {
+    text-decoration: none;
+    color: $link-color-hover;
+  }
+}
+
+
+/*
+   Comments
+   ========================================================================== */
+
+.page__comments {
+  @include full();
+}
+
+.page__comments-title {
+  margin-top: 2rem;
+  margin-bottom: 10px;
+  padding-top: 2rem;
+  font-size: $type-size-6;
+  border-top: 1px solid $border-color;
+  text-transform: uppercase;
+}
+
+.page__comments-form {
+  padding: 1em;
+  background: $lighter-gray;
+  transition: $global-transition;
+
+  &.disabled {
+    input,
+    button,
+    textarea,
+    label {
+      pointer-events: none;
+      cursor: not-allowed;
+      filter: alpha(opacity=65);
+      box-shadow: none;
+      opacity: 0.65;
+    }
+  }
+}
+
+.comment {
+  @include clearfix();
+  margin: 1em 0;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $border-color;
+  }
+}
+
+.comment__avatar-wrapper {
+  float: left;
+  width: 60px;
+  height: 60px;
+
+  @include breakpoint($large) {
+    width: 100px;
+    height: 100px;
+  }
+}
+
+.comment__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+
+  @include breakpoint($large) {
+    width: 80px;
+    height: 80px;
+    padding: 5px;
+    border: 1px solid $border-color;
+  }
+}
+
+.comment__content-wrapper {
+  float: right;
+  width: calc(100% - 60px);
+
+  @include breakpoint($large) {
+    width: calc(100% - 100px);
+  }
+}
+
+.comment__author {
+  margin: 0;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.comment__date {
+  @extend .page__meta;
+  margin: 0;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+
+/*
+   Related
+   ========================================================================== */
+
+.page__related {
+  margin-top: 2em;
+  padding-top: 1em;
+  border-top: 1px solid $border-color;
+  @include clearfix();
+  float: left;
+
+  @include breakpoint($large) {
+    @include pre(2.5 of 12);
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.page__related-title {
+  margin-bottom: 10px;
+  font-size: $type-size-6;
+  text-transform: uppercase;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/_print.scss
----------------------------------------------------------------------
diff --git a/_sass/_print.scss b/_sass/_print.scss
new file mode 100644
index 0000000..04201cd
--- /dev/null
+++ b/_sass/_print.scss
@@ -0,0 +1,18 @@
+/* ==========================================================================
+   PRINT STYLES
+   ========================================================================== */
+
+/*
+   Hide the following elements on print
+   ========================================================================== */
+
+@media print {
+  .masthead,
+  .toc,
+  .page__share,
+  .page__related,
+  .ads,
+  .page__footer {
+    display: none;
+  }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/_reset.scss
----------------------------------------------------------------------
diff --git a/_sass/_reset.scss b/_sass/_reset.scss
new file mode 100644
index 0000000..2b3b0cf
--- /dev/null
+++ b/_sass/_reset.scss
@@ -0,0 +1,187 @@
+/* ==========================================================================
+   STYLE RESETS
+   ========================================================================== */
+
+@include border-box-sizing;
+
+html {
+  /* apply a natural box layout model to all elements */
+  box-sizing: border-box;
+  background-color: $background-color;
+  font-size: 16px;
+
+  @include breakpoint($medium) {
+    font-size: 18px;
+  }
+
+  @include breakpoint($large) {
+    font-size: 20px;
+  }
+
+  @include breakpoint($x-large) {
+    font-size: 22px;
+  }
+
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+/* Remove margin */
+
+body { margin: 0; }
+
+/* Selected elements */
+
+::-moz-selection {
+  color: #fff;
+  background: #000;
+}
+
+::selection {
+  color: #fff;
+  background: #000;
+}
+
+/* Display HTML5 elements in IE6-9 and FF3 */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section {
+  display: block;
+}
+
+/* Display block in IE6-9 and FF3 */
+
+audio,
+canvas,
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+
+/* Prevents modern browsers from displaying 'audio' without controls */
+
+audio:not([controls]) {
+  display: none;
+}
+
+a {
+  color: $link-color;
+}
+
+/* Apply focus state */
+
+a:focus {
+  @extend %tab-focus;
+}
+
+/* Remove outline from links */
+
+a:hover,
+a:active {
+  outline: 0;
+}
+
+/* Prevent sub and sup affecting line-height in all browsers */
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* img border in anchor's and image quality */
+
+img {
+  /* Responsive images (ensure images don't scale beyond their parents) */
+  max-width: 100%; /* part 1: Set a maximum relative to the parent*/
+  width: auto\9; /* IE7-8 need help adjusting responsive images*/
+  height: auto; /* part 2: Scale the height according to the width, otherwise you get stretching*/
+
+  vertical-align: middle;
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+}
+
+/* Prevent max-width from affecting Google Maps */
+
+#map_canvas img,
+.google-maps img {
+  max-width: none;
+}
+
+/* Consistent form font size in all browsers, margin changes, misc */
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  font-size: 100%;
+  vertical-align: middle;
+}
+
+button,
+input {
+  *overflow: visible; /* inner spacing ie IE6/7*/
+  line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet*/
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner { /* inner padding and border oddities in FF3/4*/
+  padding: 0;
+  border: 0;
+}
+
+button,
+html input[type="button"], // avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* corrects inability to style clickable `input` types in iOS*/
+    cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/
+}
+
+label,
+select,
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+input[type="radio"],
+input[type="checkbox"] {
+    cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/
+}
+
+input[type="search"] { /* Appearance in Safari/Chrome*/
+  box-sizing: content-box;
+  -webkit-appearance: textfield;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none; /* inner-padding issues in Chrome OSX, Safari 5*/
+}
+
+textarea {
+  overflow: auto; /* remove vertical scrollbar in IE6-9*/
+  vertical-align: top; /* readability and alignment cross-browser*/
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/_sidebar.scss
----------------------------------------------------------------------
diff --git a/_sass/_sidebar.scss b/_sass/_sidebar.scss
new file mode 100644
index 0000000..8938060
--- /dev/null
+++ b/_sass/_sidebar.scss
@@ -0,0 +1,231 @@
+/* ==========================================================================
+   SIDEBAR
+   ========================================================================== */
+
+/*
+   Default
+   ========================================================================== */
+
+.sidebar {
+  -webkit-transform: translate3d(0, 0 , 0);
+          transform: translate3d(0, 0 , 0);
+
+  @include clearfix();
+  margin-bottom: 1em;
+
+  @include breakpoint($large) {
+    @include span(2 of 12);
+    opacity: 0.75;
+    -webkit-transition: opacity 0.2s ease-in-out;
+            transition: opacity 0.2s ease-in-out;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  @include breakpoint($x-large) {
+    padding-right: 0;
+  }
+
+  h2, h3, h4, h5, h6 {
+    margin-bottom: 0;
+    font-family: $sans-serif-narrow;
+  }
+
+  p, li {
+    font-family: $sans-serif;
+    font-size: $type-size-6;
+    line-height: 1.5;
+  }
+
+  img {
+    width: 100%;
+  }
+}
+
+.sidebar__right {
+  margin-bottom: 1em;
+
+  @include breakpoint($large) {
+    position: relative;
+    float: right;
+    width: $right-sidebar-width-narrow;
+    margin-left: span(0.5 of 12);
+    z-index: 10;
+  }
+
+  @include breakpoint($x-large) {
+    width: $right-sidebar-width;
+  }
+}
+
+/*
+   Author profile and links
+   ========================================================================== */
+
+.author__avatar {
+  display: table-cell;
+  vertical-align: top;
+  width: 36px;
+  height: 36px;
+
+  @include breakpoint($large) {
+    display: block;
+    width: auto;
+    height: auto;
+  }
+
+  img {
+    max-width: 110px;
+    border-radius: 50%;
+
+    @include breakpoint($large) {
+      padding: 5px;
+      border: 1px solid $border-color;
+    }
+  }
+}
+
+.author__content {
+  display: table-cell;
+  vertical-align: top;
+  padding-left: 15px;
+  padding-right: 25px;
+  line-height: 1;
+
+  @include breakpoint($large) {
+    display: block;
+    width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.author__name {
+  margin: 0;
+
+  @include breakpoint($large) {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+}
+.sidebar .author__name {
+  font-family: $sans-serif;
+  font-size: $type-size-5;
+}
+
+.author__bio {
+  margin: 0;
+
+  @include breakpoint($large) {
+    margin-top: 10px;
+    margin-bottom: 20px;
+  }
+}
+
+.author__urls-wrapper {
+  position: relative;
+  display: table-cell;
+  vertical-align: middle;
+  font-family: $sans-serif;
+  z-index: 10;
+  position: relative;
+  cursor: pointer;
+
+  li:last-child {
+    a {
+      margin-bottom: 0;
+    }
+  }
+
+  @include breakpoint($large) {
+    display: block;
+  }
+
+  button {
+    margin-bottom: 0;
+
+    @include breakpoint($large) {
+      display: none;
+    }
+  }
+}
+
+.author__urls {
+  display: none;
+  position: absolute;
+  right: 0;
+  margin-top: 15px;
+  padding: 10px;
+  list-style-type: none;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  background: #fff;
+  z-index: -1;
+  box-shadow: 0 0 10px rgba(#000, 0.25);
+  cursor: default;
+
+  @include breakpoint($large) {
+    display: block;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  &:before {
+    display: block;
+    content: "";
+    position: absolute;
+    top: -11px;
+    left: calc(50% - 10px);
+    width: 0;
+    border-style: solid;
+    border-width: 0 10px 10px;
+    border-color: $border-color transparent;
+    z-index: 0;
+
+    @include breakpoint($large) {
+      display: none;
+    }
+  }
+
+  &:after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: -10px;
+    left: calc(50% - 10px);
+    width: 0;
+    border-style: solid;
+    border-width: 0 10px 10px;
+    border-color: #fff transparent;
+    z-index: 1;
+
+    @include breakpoint($large) {
+      display: none;
+    }
+  }
+
+  li {
+    white-space: nowrap;
+  }
+
+  a {
+    display: block;
+    margin-bottom: 5px;
+    padding-right: 5px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    color: inherit;
+    font-size: $type-size-5;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/_syntax.scss
----------------------------------------------------------------------
diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss
new file mode 100644
index 0000000..fb13b73
--- /dev/null
+++ b/_sass/_syntax.scss
@@ -0,0 +1,146 @@
+/* ==========================================================================
+   Syntax highlighting
+   ========================================================================== */
+
+div.highlighter-rouge,
+figure.highlight {
+  position: relative;
+  margin-bottom: 1em;
+  font-family: $monospace;
+  font-size: $type-size-7;
+  line-height: 1.8;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  background-color: $code-background-color;
+  box-shadow: $box-shadow;
+
+  &:before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.5em;
+    background-color: $lighter-gray;
+    content: "\f121";
+    font-family: "fontawesome" !important;
+    line-height: 1;
+    text-transform: none;
+    speak: none;
+  }
+
+  .highlight {
+    margin: 0;
+    padding: 1em;
+  }
+}
+
+figure.highlight {
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.highlight table {
+  font-size: 1em;
+  border: 0;
+
+  td {
+    padding: 5px;
+    border: 0;
+
+    // line numbers
+    &.gutter {
+      padding-right: 1em;
+      color: $light-gray;
+    }
+  }
+
+  pre {
+    margin: 0;
+  }
+}
+
+.highlight pre { width: 100%; }
+
+/*
+   Solarized Light
+   http://ethanschoonover.com/solarized
+
+   SOLARIZED HEX      ROLE
+   --------- -------- ------------------------------------------
+   base01    #586e75  body text / default code / primary content
+   base1     #93a1a1  comments / secondary content
+   base3     #fdf6e3  background
+   orange    #cb4b16  constants
+   red       #dc322f  regex, special keywords
+   blue      #22b3eb  reserved keywords
+   cyan      #2aa198  strings, numbers
+   green     #859900  operators, other keywords
+   ========================================================================== */
+
+.highlight .c { color: #93a1a1 } /* Comment */
+.highlight .err { color: #586e75 } /* Error */
+.highlight .g { color: #586e75 } /* Generic */
+.highlight .k { color: #859900 } /* Keyword */
+.highlight .l { color: #586e75 } /* Literal */
+.highlight .n { color: #586e75 } /* Name */
+.highlight .o { color: #859900 } /* Operator */
+.highlight .x { color: #cb4b16 } /* Other */
+.highlight .p { color: #586e75 } /* Punctuation */
+.highlight .cm { color: #93a1a1 } /* Comment.Multiline */
+.highlight .cp { color: #859900 } /* Comment.Preproc */
+.highlight .c1 { color: #93a1a1 } /* Comment.Single */
+.highlight .cs { color: #859900 } /* Comment.Special */
+.highlight .gd { color: #2aa198 } /* Generic.Deleted */
+.highlight .ge { color: #586e75; font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #dc322f } /* Generic.Error */
+.highlight .gh { color: #cb4b16 } /* Generic.Heading */
+.highlight .gi { color: #859900 } /* Generic.Inserted */
+.highlight .go { color: #586e75 } /* Generic.Output */
+.highlight .gp { color: #586e75 } /* Generic.Prompt */
+.highlight .gs { color: #586e75; font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #cb4b16 } /* Generic.Subheading */
+.highlight .gt { color: #586e75 } /* Generic.Traceback */
+.highlight .kc { color: #cb4b16 } /* Keyword.Constant */
+.highlight .kd { color: #22b3eb } /* Keyword.Declaration */
+.highlight .kn { color: #859900 } /* Keyword.Namespace */
+.highlight .kp { color: #859900 } /* Keyword.Pseudo */
+.highlight .kr { color: #22b3eb } /* Keyword.Reserved */
+.highlight .kt { color: #dc322f } /* Keyword.Type */
+.highlight .ld { color: #586e75 } /* Literal.Date */
+.highlight .m { color: #2aa198 } /* Literal.Number */
+.highlight .s { color: #2aa198 } /* Literal.String */
+.highlight .na { color: #586e75 } /* Name.Attribute */
+.highlight .nb { color: #B58900 } /* Name.Builtin */
+.highlight .nc { color: #22b3eb } /* Name.Class */
+.highlight .no { color: #cb4b16 } /* Name.Constant */
+.highlight .nd { color: #22b3eb } /* Name.Decorator */
+.highlight .ni { color: #cb4b16 } /* Name.Entity */
+.highlight .ne { color: #cb4b16 } /* Name.Exception */
+.highlight .nf { color: #22b3eb } /* Name.Function */
+.highlight .nl { color: #586e75 } /* Name.Label */
+.highlight .nn { color: #586e75 } /* Name.Namespace */
+.highlight .nx { color: #586e75 } /* Name.Other */
+.highlight .py { color: #586e75 } /* Name.Property */
+.highlight .nt { color: #22b3eb } /* Name.Tag */
+.highlight .nv { color: #22b3eb } /* Name.Variable */
+.highlight .ow { color: #859900 } /* Operator.Word */
+.highlight .w { color: #586e75 } /* Text.Whitespace */
+.highlight .mf { color: #2aa198 } /* Literal.Number.Float */
+.highlight .mh { color: #2aa198 } /* Literal.Number.Hex */
+.highlight .mi { color: #2aa198 } /* Literal.Number.Integer */
+.highlight .mo { color: #2aa198 } /* Literal.Number.Oct */
+.highlight .sb { color: #93a1a1 } /* Literal.String.Backtick */
+.highlight .sc { color: #2aa198 } /* Literal.String.Char */
+.highlight .sd { color: #586e75 } /* Literal.String.Doc */
+.highlight .s2 { color: #2aa198 } /* Literal.String.Double */
+.highlight .se { color: #cb4b16 } /* Literal.String.Escape */
+.highlight .sh { color: #586e75 } /* Literal.String.Heredoc */
+.highlight .si { color: #2aa198 } /* Literal.String.Interpol */
+.highlight .sx { color: #2aa198 } /* Literal.String.Other */
+.highlight .sr { color: #dc322f } /* Literal.String.Regex */
+.highlight .s1 { color: #2aa198 } /* Literal.String.Single */
+.highlight .ss { color: #2aa198 } /* Literal.String.Symbol */
+.highlight .bp { color: #22b3eb } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #22b3eb } /* Name.Variable.Class */
+.highlight .vg { color: #22b3eb } /* Name.Variable.Global */
+.highlight .vi { color: #22b3eb } /* Name.Variable.Instance */
+.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/_tables.scss
----------------------------------------------------------------------
diff --git a/_sass/_tables.scss b/_sass/_tables.scss
new file mode 100644
index 0000000..d31dc24
--- /dev/null
+++ b/_sass/_tables.scss
@@ -0,0 +1,38 @@
+/* ==========================================================================
+   TABLES
+   ========================================================================== */
+
+table {
+  margin-bottom: 1em;
+  width: 100%;
+  font-family: $global-font-family;
+  font-size: $type-size-6;
+  border-collapse: collapse;
+  border: 1px solid $light-gray;
+
+  & + table {
+    margin-top: 1em;
+  }
+}
+
+thead {
+  background-color: $lighter-gray;
+  border-bottom: 1px solid $light-gray;
+}
+
+th {
+  padding: 0.5em;
+  font-weight: bold;
+  text-align: left;
+  border-right: 1px solid $light-gray;
+}
+
+td {
+  padding: 0.5em;
+  border-bottom: 1px solid $light-gray;
+  border-right: 1px solid $light-gray;
+}
+
+tr, td, th {
+  vertical-align: middle;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/_utilities.scss
----------------------------------------------------------------------
diff --git a/_sass/_utilities.scss b/_sass/_utilities.scss
new file mode 100644
index 0000000..7ffae3b
--- /dev/null
+++ b/_sass/_utilities.scss
@@ -0,0 +1,470 @@
+/* ==========================================================================
+   UTILITY CLASSES
+   ========================================================================== */
+
+/*
+   Visibility
+   ========================================================================== */
+
+/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
+
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+/* for preloading images */
+
+.load {
+  display: none;
+}
+
+.transparent {
+  opacity: 0;
+}
+
+/* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */
+
+.visually-hidden,
+.screen-reader-text,
+.screen-reader-text span,
+.screen-reader-shortcut {
+  position: absolute !important;
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px !important;
+  width: 1px !important;
+  border: 0 !important;
+  overflow: hidden;
+}
+
+body:hover .visually-hidden a,
+body:hover .visually-hidden input,
+body:hover .visually-hidden button {
+  display: none !important;
+}
+
+/* screen readers */
+
+.screen-reader-text:focus,
+.screen-reader-shortcut:focus  {
+  clip: auto !important;
+  height: auto !important;
+  width: auto !important;
+  display: block;
+  font-size: 1em;
+  font-weight: bold;
+  padding: 15px 23px 14px;
+  background: #fff;
+  z-index: 100000;
+  text-decoration: none;
+  box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
+}
+
+
+/*
+   Skip links
+   ========================================================================== */
+
+.skip-link {
+  position: fixed;
+  z-index: 20;
+  margin: 0;
+  font-family: $sans-serif;
+  white-space: nowrap;
+}
+
+.skip-link li {
+  height: 0;
+  width: 0;
+  list-style: none;
+}
+
+
+/*
+   Type
+   ========================================================================== */
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.text-nowrap {
+  white-space: nowrap;
+}
+
+
+/*
+   Alignment
+   ========================================================================== */
+
+/* clearfix */
+
+.cf { clear: both; }
+
+.wrapper {
+  @include container();
+}
+
+
+/*
+   Images
+   ========================================================================== */
+
+/* image align left */
+
+.align-left {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+
+  @include breakpoint($small) {
+    float: left;
+    margin-right: 1em;
+  }
+}
+
+/* image align right */
+
+.align-right {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+
+  @include breakpoint($small) {
+    float: right;
+    margin-left: 1em;
+  }
+}
+
+/* image align center */
+
+.align-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* file page content container */
+
+.full {
+  @include breakpoint($large){
+    margin-right: -1 * span(2.5 of 12) !important;
+  }
+}
+
+/*
+   Icons
+   ========================================================================== */
+
+.icon {
+  display: inline-block;
+  fill: currentColor;
+  width: 1em;
+  height: 1.1em;
+  line-height: 1;
+  position: relative;
+  top: -0.1em;
+  vertical-align: middle;
+}
+
+/* social icons*/
+
+.social-icons {
+  .fa {
+    color: #000;
+  }
+
+  .fa-behance,
+  .fa-behance-square {
+    color: $behance-color;
+  }
+
+  .fa-dribbble {
+    color: $dribbble-color;
+  }
+
+  .fa-facebook,
+  .fa-facebook-square {
+    color: $facebook-color;
+  }
+
+  .fa-flickr {
+    color: $flickr-color;
+  }
+
+  .fa-foursquare {
+    color: $foursquare-color;
+  }
+
+  .fa-github,
+  .fa-github-alt,
+  .fa-github-square {
+    color: $github-color;
+  }
+
+  .fa-google-plus,
+  .fa-google-plus-square {
+    color: $google-plus-color;
+  }
+
+  .fa-instagram {
+    color: $instagram-color;
+  }
+
+  .fa-lastfm,
+  .fa-lastfm-square {
+    color: $lastfm-color;
+  }
+
+  .fa-linkedin,
+  .fa-linkedin-square {
+    color: $linkedin-color;
+  }
+
+  .fa-pinterest,
+  .fa-pinterest-p,
+  .fa-pinterest-square {
+    color: $pinterest-color;
+  }
+
+  .fa-rss,
+  .fa-rss-square {
+    color: $rss-color;
+  }
+
+  .fa-soundcloud {
+    color: $soundcloud-color;
+  }
+
+  .fa-stack-exchange,
+  .fa-stack-overflow {
+    color: $stackoverflow-color;
+  }
+
+  .fa-tumblr,
+  .fa-tumblr-square {
+    color: $tumblr-color;
+  }
+
+  .fa-twitter,
+  .fa-twitter-square {
+    color: $twitter-color;
+  }
+
+  .fa-vimeo,
+  .fa-vimeo-square {
+    color: $vimeo-color;
+  }
+
+  .fa-vine {
+    color: $vine-color;
+  }
+
+  .fa-youtube,
+  .fa-youtube-square,
+  .fa-youtube-play {
+    color: $youtube-color;
+  }
+
+  .fa-xing,
+  .fa-xing-square {
+    color: $xing-color;
+  }
+}
+
+
+/*
+   Navicons
+   ========================================================================== */
+
+.navicon {
+  position: relative;
+  width: $navicon-width;
+  height: $navicon-height;
+  background: #fff;
+  margin: auto;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: $navicon-width;
+    height: $navicon-height;
+    background: #fff;
+    -webkit-transition: 0.3s;
+    transition: 0.3s;
+  }
+
+  &:before {
+    top: (-2 * $navicon-height);
+  }
+
+  &:after {
+    bottom: (-2 * $navicon-height);
+  }
+}
+
+.close .navicon {
+  /* hide the middle line*/
+  background: transparent;
+
+  /* overlay the lines by setting both their top values to 0*/
+  &:before, &:after{
+    -webkit-transform-origin: 50% 50%;
+        -ms-transform-origin: 50% 50%;
+            transform-origin: 50% 50%;
+    top: 0;
+    width: $navicon-width;
+  }
+
+  /* rotate the lines to form the x shape*/
+  &:before{
+    -webkit-transform: rotate3d(0,0,1,45deg);
+            transform: rotate3d(0,0,1,45deg);
+  }
+  &:after{
+    -webkit-transform: rotate3d(0,0,1,-45deg);
+            transform: rotate3d(0,0,1,-45deg);
+  }
+}
+
+
+/*
+   Sticky, fixed to top content
+   ========================================================================== */
+
+.sticky {
+  @include breakpoint($large) {
+    @include clearfix();
+    position: -webkit-sticky;
+    position: sticky;
+    top: 2em;
+
+    > * {
+      display: block;
+    }
+  }
+}
+
+
+/*
+   Wells
+   ========================================================================== */
+
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border: 1px solid #e3e3e3;
+  border-radius: $border-radius;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+
+/*
+   Modals
+   ========================================================================== */
+
+.show-modal {
+  overflow: hidden;
+  position: relative;
+
+  &:before {
+    position: absolute;
+    content: "";
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    background-color: rgba(255, 255, 255, 0.85);
+  }
+
+  .modal {
+    display: block;
+  }
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  width: 300px;
+  top: 50%;
+  left: 50%;
+  margin-left: -150px;
+  margin-top: -150px;
+  min-height: 0;
+  z-index: 9999;
+  background: #fff;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+
+  &__title {
+    margin: 0;
+    padding: 0.5em 1em;
+  }
+
+  &__supporting-text {
+    padding: 0 1em 0.5em 1em;
+  }
+
+  &__actions {
+    padding: 0.5em 1em;
+    border-top: 1px solid $border-color;
+  }
+}
+
+
+/*
+   Footnotes
+   ========================================================================== */
+
+.footnote {
+  color: mix(#fff, $gray, 25%);
+  text-decoration: none;
+}
+
+.footnotes {
+  color: mix(#fff, $gray, 25%);
+
+  ol, li, p {
+    margin-bottom: 0;
+    font-size: $type-size-6;
+  }
+}
+
+a.reversefootnote {
+  color: $gray;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+
+/*
+   Required
+   ========================================================================== */
+
+.required {
+  color: $danger-color;
+  font-weight: bold;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/_variables.scss
----------------------------------------------------------------------
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
new file mode 100644
index 0000000..b662d7f
--- /dev/null
+++ b/_sass/_variables.scss
@@ -0,0 +1,128 @@
+/* ==========================================================================
+   Variables
+   ========================================================================== */
+
+/*
+   Typography
+   ========================================================================== */
+
+$doc-font-size              : 16 !default;
+
+/* paragraph indention */
+$paragraph-indent           : false !default; // true, false (default)
+$indent-var                 : 1.3em !default;
+
+/* system typefaces */
+$serif                      : Georgia, Times, serif !default;
+$sans-serif                 : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
+$monospace                  : Monaco, Consolas, "Lucida Console", monospace !default;
+
+/* sans serif typefaces */
+$sans-serif-narrow          : $sans-serif !default;
+$helvetica                  : Helvetica, "Helvetica Neue", Arial, sans-serif !default;
+
+/* serif typefaces */
+$georgia                    : Georgia, serif !default;
+$times                      : Times, serif !default;
+$bodoni                     : "Bodoni MT", serif !default;
+$calisto                    : "Calisto MT", serif !default;
+$garamond                   : Garamond, serif !default;
+
+$global-font-family         : $sans-serif !default;
+$header-font-family         : $sans-serif !default;
+$caption-font-family        : $serif !default;
+
+/* type scale */
+$type-size-1                : 2.441em !default;  // ~39.056px
+$type-size-2                : 1.953em !default;  // ~31.248px
+$type-size-3                : 1.563em !default;  // ~25.008px
+$type-size-4                : 1.25em !default;   // ~20px
+$type-size-5                : 1em !default;      // ~16px
+$type-size-6                : 0.75em !default;   // ~12px
+$type-size-7                : 0.6875em !default; // ~11px
+$type-size-8                : 0.625em !default;  // ~10px
+
+
+/*
+   Colors
+   ========================================================================== */
+
+$gray                       : #7a8288 !default;
+$dark-gray                  : mix(#000, $gray, 40%) !default;
+$darker-gray                : mix(#000, $gray, 60%) !default;
+$light-gray                 : mix(#fff, $gray, 50%) !default;
+$lighter-gray               : mix(#fff, $gray, 90%) !default;
+
+$body-color                 : #fff !default;
+$background-color           : #fff !default;
+$code-background-color      : #fafafa !default;
+$code-background-color-dark : $light-gray !default;
+$text-color                 : $dark-gray !default;
+$border-color               : $lighter-gray !default;
+
+$primary-color              : #7a8288 !default;
+$success-color              : #62c462 !default;
+$warning-color              : #f89406 !default;
+$danger-color               : #ee5f5b !default;
+$info-color                 : #52adc8 !default;
+
+/* brands */
+$behance-color              : #1769FF !default;
+$dribbble-color             : #ea4c89 !default;
+$facebook-color             : #3b5998 !default;
+$flickr-color               : #ff0084 !default;
+$foursquare-color           : #0072b1 !default;
+$github-color               : #171516 !default;
+$google-plus-color          : #dd4b39 !default;
+$instagram-color            : #517fa4 !default;
+$lastfm-color               : #d51007 !default;
+$linkedin-color             : #007bb6 !default;
+$pinterest-color            : #cb2027 !default;
+$rss-color                  : #fa9b39 !default;
+$soundcloud-color           : #ff3300 !default;
+$stackoverflow-color        : #fe7a15 !default;
+$tumblr-color               : #32506d !default;
+$twitter-color              : #55acee !default;
+$vimeo-color                : #1ab7ea !default;
+$vine-color                 : #00bf8f !default;
+$youtube-color              : #bb0000 !default;
+$xing-color                 : #006567 !default;
+
+
+/* links */
+$link-color                 : $info-color !default;
+$link-color-hover           : mix(#000, $link-color, 25%) !default;
+$link-color-visited         : mix(#fff, $link-color, 25%) !default;
+$masthead-link-color        : $primary-color !default;
+$masthead-link-color-hover  : mix(#000, $primary-color, 25%) !default;
+
+
+/*
+   Breakpoints
+   ========================================================================== */
+
+$small                      : 600px !default;
+$medium                     : 768px !default;
+$medium-wide                : 900px !default;
+$large                      : 1024px !default;
+$x-large                    : 1280px !default;
+
+
+/*
+   Grid
+   ========================================================================== */
+
+$right-sidebar-width-narrow : 200px !default;
+$right-sidebar-width        : 300px !default;
+$right-sidebar-width-wide   : 400px !default;
+
+
+/*
+   Other
+   ========================================================================== */
+
+$border-radius              : 4px !default;
+$box-shadow                 : 0 1px 1px rgba(0, 0, 0, 0.125) !default;
+$navicon-width              : 28px !default;
+$navicon-height             : 4px !default;
+$global-transition          : all 0.2s ease-in-out !default;
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/vendor/breakpoint/_breakpoint.scss
----------------------------------------------------------------------
diff --git a/_sass/vendor/breakpoint/_breakpoint.scss b/_sass/vendor/breakpoint/_breakpoint.scss
new file mode 100644
index 0000000..a0528eb
--- /dev/null
+++ b/_sass/vendor/breakpoint/_breakpoint.scss
@@ -0,0 +1,114 @@
+//////////////////////////////
+// Default Variables
+//////////////////////////////
+$Breakpoint-Settings: (
+  'default media': all,
+  'default feature': min-width,
+  'default pair': width,
+
+  'force all media type': false,
+  'to ems': false,
+  'transform resolutions': true,
+
+  'no queries': false,
+  'no query fallbacks': false,
+
+  'base font size': 16px,
+
+  'legacy syntax': false
+);
+
+$breakpoint: () !default;
+
+//////////////////////////////
+// Imports
+//////////////////////////////
+@import "settings";
+@import "context";
+@import "helpers";
+@import "parsers";
+@import "no-query";
+
+@import "respond-to";
+
+@import "legacy-settings";
+
+//////////////////////////////
+// Breakpoint Mixin
+//////////////////////////////
+
+@mixin breakpoint($query, $no-query: false) {
+  @include legacy-settings-warning;
+
+  // Reset contexts
+  @include private-breakpoint-reset-contexts();
+
+  $breakpoint: breakpoint($query, false);
+
+  $query-string: map-get($breakpoint, 'query');
+  $query-fallback: map-get($breakpoint, 'fallback');
+
+  $private-breakpoint-context-holder: map-get($breakpoint, 'context holder') !global;
+  $private-breakpoint-query-count: map-get($breakpoint, 'query count') !global;
+
+  // Allow for an as-needed override or usage of no query fallback.
+  @if $no-query != false {
+    $query-fallback: $no-query;
+  }
+
+  @if $query-fallback != false {
+    $context-setter: private-breakpoint-set-context('no-query', $query-fallback);
+  }
+
+  // Print Out Query String
+  @if not breakpoint-get('no queries') {
+    @media #{$query-string} {
+      @content;
+    }
+  }
+
+  @if breakpoint-get('no query fallbacks') != false or breakpoint-get('no queries') == true {
+
+    $type: type-of(breakpoint-get('no query fallbacks'));
+    $print: false;
+
+    @if ($type == 'bool') {
+      $print: true;
+    }
+    @else if ($type == 'string') {
+      @if $query-fallback == breakpoint-get('no query fallbacks') {
+        $print: true;
+      }
+    }
+    @else if ($type == 'list') {
+      @each $wrapper in breakpoint-get('no query fallbacks') {
+        @if $query-fallback == $wrapper {
+          $print: true;
+        }
+      }
+    }
+
+    // Write Fallback
+    @if ($query-fallback != false) and ($print == true) {
+      $type-fallback: type-of($query-fallback);
+
+      @if ($type-fallback != 'bool') {
+        #{$query-fallback} & {
+          @content;
+        }
+      }
+      @else {
+        @content;
+      }
+    }
+  }
+
+  @include private-breakpoint-reset-contexts();
+}
+
+
+@mixin mq($query, $no-query: false) {
+  @include breakpoint($query, $no-query) {
+    @content;
+  }
+}

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/vendor/breakpoint/_context.scss
----------------------------------------------------------------------
diff --git a/_sass/vendor/breakpoint/_context.scss b/_sass/vendor/breakpoint/_context.scss
new file mode 100644
index 0000000..57947f5
--- /dev/null
+++ b/_sass/vendor/breakpoint/_context.scss
@@ -0,0 +1,95 @@
+//////////////////////////////
+// Private Breakpoint Variables
+//////////////////////////////
+$private-breakpoint-context-holder: ();
+$private-breakpoint-query-count: 0 !default;
+
+//////////////////////////////
+// Breakpoint Has Context
+// Returns whether or not you are inside a Breakpoint query
+//////////////////////////////
+@function breakpoint-has-context() {
+  @if length($private-breakpoint-query-count) {
+    @return true;
+  }
+  @else {
+    @return false;
+  }
+}
+
+//////////////////////////////
+// Breakpoint Get Context
+// $feature: Input feature to get it's current MQ context. Returns false if no context
+//////////////////////////////
+@function breakpoint-get-context($feature) {
+  @if map-has-key($private-breakpoint-context-holder, $feature) {
+    $get: map-get($private-breakpoint-context-holder, $feature);
+    // Special handling of no-query from get side so /false/ prepends aren't returned
+    @if $feature == 'no-query' {
+      @if type-of($get) == 'list' and length($get) > 1 and nth($get, 1) == false {
+        $get: nth($get, length($get));
+      }
+    }
+    @return $get;
+  }
+  @else {
+    @if breakpoint-has-context() and $feature == 'media' {
+      @return breakpoint-get('default media');
+    }
+    @else {
+      @return false;
+    }
+  }
+}
+
+//////////////////////////////
+// Private function to set context
+//////////////////////////////
+@function private-breakpoint-set-context($feature, $value) {
+  @if $value == 'monochrome' {
+    $feature: 'monochrome';
+  }
+
+  $current: map-get($private-breakpoint-context-holder, $feature);
+  @if $current and length($current) == $private-breakpoint-query-count {
+    @warn "You have already queried against `#{$feature}`. Unexpected things may happen if you query against the same feature more than once in the same `and` query. Breakpoint is overwriting the current context with `#{$value}`";
+  }
+
+  @if not map-has-key($private-breakpoint-context-holder, $feature) {
+    $v-holder: ();
+    @for $i from 1 to $private-breakpoint-query-count {
+      @if $feature == 'media' {
+        $v-holder: append($v-holder, breakpoint-get('default media'));
+      }
+      @else {
+        $v-holder: append($v-holder, false);
+      }
+    }
+    $v-holder: append($v-holder, $value);
+    $private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($feature: $v-holder)) !global;
+  }
+  @else {
+    $v-holder: map-get($private-breakpoint-context-holder, $feature);
+    $length: length($v-holder);
+    @for $i from $length to $private-breakpoint-query-count - 1 {
+      @if $feature == 'media' {
+        $v-holder: append($v-holder, breakpoint-get('default media'));
+      }
+      @else {
+        $v-holder: append($v-holder, false);
+      }
+    }
+    $v-holder: append($v-holder, $value);
+    $private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($feature: $v-holder)) !global;
+  }
+
+  @return true;
+}
+
+//////////////////////////////
+// Private function to reset context
+//////////////////////////////
+@mixin private-breakpoint-reset-contexts {
+  $private-breakpoint-context-holder: () !global;
+  $private-breakpoint-query-count: 0 !global;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/vendor/breakpoint/_helpers.scss
----------------------------------------------------------------------
diff --git a/_sass/vendor/breakpoint/_helpers.scss b/_sass/vendor/breakpoint/_helpers.scss
new file mode 100644
index 0000000..97e522d
--- /dev/null
+++ b/_sass/vendor/breakpoint/_helpers.scss
@@ -0,0 +1,151 @@
+//////////////////////////////
+// Converts the input value to Base EMs
+//////////////////////////////
+@function breakpoint-to-base-em($value) {
+  $value-unit: unit($value);
+
+  // Will convert relative EMs into root EMs.
+  @if breakpoint-get('base font size') and type-of(breakpoint-get('base font size')) == 'number' and $value-unit == 'em' {
+    $base-unit: unit(breakpoint-get('base font size'));
+
+    @if $base-unit == 'px' or $base-unit == '%' or $base-unit == 'em' or $base-unit == 'pt' {
+      @return base-conversion($value) / base-conversion(breakpoint-get('base font size')) * 1em;
+    }
+    @else {
+      @warn '#{breakpoint-get(\'base font size\')} is not set in valid units for font size!';
+      @return false;
+    }
+  }
+  @else {
+    @return base-conversion($value);
+  }
+}
+
+@function base-conversion($value) {
+  $unit: unit($value);
+
+  @if $unit == 'px' {
+    @return $value / 16px * 1em;
+  }
+  @else if $unit == '%' {
+    @return $value / 100% * 1em;
+  }
+  @else if $unit == 'em' {
+    @return $value;
+  }
+  @else if $unit == 'pt' {
+    @return $value / 12pt * 1em;
+  }
+  @else {
+    @return $value;
+//    @warn 'Everything is terrible! What have you done?!';
+  }
+}
+
+//////////////////////////////
+// Returns whether the feature can have a min/max pair
+//////////////////////////////
+$breakpoint-min-max-features: 'color',
+                              'color-index',
+                              'aspect-ratio',
+                              'device-aspect-ratio',
+                              'device-height',
+                              'device-width',
+                              'height',
+                              'monochrome',
+                              'resolution',
+                              'width';
+
+@function breakpoint-min-max($feature) {
+  @each $item in $breakpoint-min-max-features {
+    @if $feature == $item {
+      @return true;
+    }
+  }
+  @return false;
+}
+
+//////////////////////////////
+// Returns whether the feature can have a string value
+//////////////////////////////
+$breakpoint-string-features:  'orientation',
+                              'scan',
+                              'color',
+                              'aspect-ratio',
+                              'device-aspect-ratio',
+                              'pointer',
+                              'luminosity';
+
+@function breakpoint-string-value($feature) {
+  @each $item in $breakpoint-string-features {
+    @if breakpoint-min-max($item) {
+      @if $feature == 'min-#{$item}' or $feature == 'max-#{$item}' {
+        @return true;
+      }
+    }
+    @else if $feature == $item {
+      @return true;
+    }
+  }
+  @return false;
+}
+
+//////////////////////////////
+// Returns whether the feature is a media type
+//////////////////////////////
+$breakpoint-media-types:  'all',
+                          'braille',
+                          'embossed',
+                          'handheld',
+                          'print',
+                          'projection',
+                          'screen',
+                          'speech',
+                          'tty',
+                          'tv';
+
+@function breakpoint-is-media($feature) {
+  @each $media in $breakpoint-media-types {
+    @if ($feature == $media) or ($feature == 'not #{$media}') or ($feature == 'only #{$media}') {
+      @return true;
+    }
+  }
+
+  @return false;
+}
+
+//////////////////////////////
+// Returns whether the feature can stand alone
+//////////////////////////////
+$breakpoint-single-string-features: 'color',
+                                    'color-index',
+                                    'grid',
+                                    'monochrome';
+
+@function breakpoint-single-string($feature) {
+  @each $item in $breakpoint-single-string-features {
+    @if $feature == $item {
+      @return true;
+    }
+  }
+  @return false;
+}
+
+//////////////////////////////
+// Returns whether the feature
+//////////////////////////////
+@function breakpoint-is-resolution($feature) {
+  $resolutions: 'device-pixel-ratio', 'dpr';
+
+  @if breakpoint-get('transform resolutions') {
+    $resolutions: append($resolutions, 'resolution');
+  }
+
+  @each $reso in $resolutions {
+    @if index($feature, $reso) or index($feature, 'min-#{$reso}') or index($feature, 'max-#{$reso}') {
+      @return true;
+    }
+  }
+
+  @return false;
+}

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/vendor/breakpoint/_legacy-settings.scss
----------------------------------------------------------------------
diff --git a/_sass/vendor/breakpoint/_legacy-settings.scss b/_sass/vendor/breakpoint/_legacy-settings.scss
new file mode 100644
index 0000000..e060ebe
--- /dev/null
+++ b/_sass/vendor/breakpoint/_legacy-settings.scss
@@ -0,0 +1,50 @@
+@mixin legacy-settings-warning {
+  $legacyVars: (
+    'default-media': 'default media',
+    'default-feature': 'default feature',
+    'force-media-all': 'force all media type',
+    'to-ems': 'to ems',
+    'resolutions': 'transform resolutions',
+    'no-queries': 'no queries',
+    'no-query-fallbacks': 'no query fallbacks',
+    'base-font-size': 'base font size',
+    'legacy-syntax': 'legacy syntax'
+  );
+
+  @each $legacy, $new in $legacyVars {
+    @if global-variable-exists('breakpoint-' + $legacy) {
+      @warn "In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of `$breakpoint-#{$legacy}: {{setting}}` to `@include breakpoint-set('#{$new}', {{setting}})`. Variable settings, as well as this warning will be deprecated in a future release."
+    }
+  };
+
+  //////////////////////////////
+  // Hand correct each setting
+  //////////////////////////////
+  @if global-variable-exists('breakpoint-default-media') and $breakpoint-default-media != breakpoint-get('default media') {
+    @include breakpoint-set('default media', $breakpoint-default-media);
+  }
+  @if global-variable-exists('breakpoint-default-feature') and $breakpoint-default-feature != breakpoint-get('default feature') {
+    @include breakpoint-set('default feature', $breakpoint-default-feature);
+  }
+  @if global-variable-exists('breakpoint-force-media-all') and $breakpoint-force-media-all != breakpoint-get('force all media type') {
+    @include breakpoint-set('force all media type', $breakpoint-force-media-all);
+  }
+  @if global-variable-exists('breakpoint-to-ems') and $breakpoint-to-ems != breakpoint-get('to ems') {
+    @include breakpoint-set('to ems', $breakpoint-to-ems);
+  }
+  @if global-variable-exists('breakpoint-resolutions') and $breakpoint-resolutions != breakpoint-get('transform resolutions') {
+    @include breakpoint-set('transform resolutions', $breakpoint-resolutions);
+  }
+  @if global-variable-exists('breakpoint-no-queries') and $breakpoint-no-queries != breakpoint-get('no queries') {
+    @include breakpoint-set('no queries', $breakpoint-no-queries);
+  }
+  @if global-variable-exists('breakpoint-no-query-fallbacks') and $breakpoint-no-query-fallbacks != breakpoint-get('no query fallbacks') {
+    @include breakpoint-set('no query fallbacks', $breakpoint-no-query-fallbacks);
+  }
+  @if global-variable-exists('breakpoint-base-font-size') and $breakpoint-base-font-size != breakpoint-get('base font size') {
+    @include breakpoint-set('base font size', $breakpoint-base-font-size);
+  }
+  @if global-variable-exists('breakpoint-legacy-syntax') and $breakpoint-legacy-syntax != breakpoint-get('legacy syntax') {
+    @include breakpoint-set('legacy syntax', $breakpoint-legacy-syntax);
+  }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/vendor/breakpoint/_no-query.scss
----------------------------------------------------------------------
diff --git a/_sass/vendor/breakpoint/_no-query.scss b/_sass/vendor/breakpoint/_no-query.scss
new file mode 100644
index 0000000..0b5a81f
--- /dev/null
+++ b/_sass/vendor/breakpoint/_no-query.scss
@@ -0,0 +1,15 @@
+@function breakpoint-no-query($query) {
+  @if type-of($query) == 'list' {
+    $keyword: nth($query, 1);
+
+    @if type-of($keyword) == 'string' and ($keyword == 'no-query' or $keyword == 'no query' or $keyword == 'fallback') {
+      @return nth($query, 2);
+    }
+    @else {
+      @return false;
+    }
+  }
+  @else {
+    @return false;
+  }
+}

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/vendor/breakpoint/_parsers.scss
----------------------------------------------------------------------
diff --git a/_sass/vendor/breakpoint/_parsers.scss b/_sass/vendor/breakpoint/_parsers.scss
new file mode 100644
index 0000000..f0b053f
--- /dev/null
+++ b/_sass/vendor/breakpoint/_parsers.scss
@@ -0,0 +1,215 @@
+//////////////////////////////
+// Import Parser Pieces
+//////////////////////////////
+@import "parsers/query";
+@import "parsers/single";
+@import "parsers/double";
+@import "parsers/triple";
+@import "parsers/resolution";
+
+$Memo-Exists: function-exists(memo-get) and function-exists(memo-set);
+
+//////////////////////////////
+// Breakpoint Function
+//////////////////////////////
+@function breakpoint($query, $contexts...) {
+  $run: true;
+  $return: ();
+
+  // Grab the Memo Output if Memoization can be a thing
+  @if $Memo-Exists {
+    $return: memo-get(breakpoint, breakpoint $query $contexts);
+
+    @if $return != null {
+      $run: false;
+    }
+  }
+
+  @if not $Memo-Exists or $run {
+    // Internal Variables
+    $query-string: '';
+    $query-fallback: false;
+    $return: ();
+
+    // Reserve Global Private Breakpoint Context
+    $holder-context: $private-breakpoint-context-holder;
+    $holder-query-count: $private-breakpoint-query-count;
+
+    // Reset Global Private Breakpoint Context
+    $private-breakpoint-context-holder: () !global;
+    $private-breakpoint-query-count: 0 !global;
+
+
+    // Test to see if it's a comma-separated list
+    $or-list: if(list-separator($query) == 'comma', true, false);
+
+
+    @if ($or-list == false and breakpoint-get('legacy syntax') == false) {
+      $query-string: breakpoint-parse($query);
+    }
+    @else {
+      $length: length($query);
+
+      $last: nth($query, $length);
+      $query-fallback: breakpoint-no-query($last);
+
+      @if ($query-fallback != false) {
+        $length: $length - 1;
+      }
+
+      @if (breakpoint-get('legacy syntax') == true) {
+        $mq: ();
+
+        @for $i from 1 through $length {
+          $mq: append($mq, nth($query, $i), comma);
+        }
+
+        $query-string: breakpoint-parse($mq);
+      }
+      @else {
+        $query-string: '';
+        @for $i from 1 through $length {
+          $query-string: $query-string + if($i == 1, '', ', ') + breakpoint-parse(nth($query, $i));
+        }
+      }
+    }
+
+    $return: ('query': $query-string,
+        'fallback': $query-fallback,
+        'context holder': $private-breakpoint-context-holder,
+        'query count': $private-breakpoint-query-count
+    );
+    @if length($contexts) > 0 and nth($contexts, 1) != false {
+      @if $query-fallback != false {
+        $context-setter: private-breakpoint-set-context('no-query', $query-fallback);
+      }
+      $context-map: ();
+      @each $context in $contexts {
+        $context-map: map-merge($context-map, ($context: breakpoint-get-context($context)));
+      }
+      $return: map-merge($return, (context: $context-map));
+    }
+
+    // Reset Global Private Breakpoint Context
+    $private-breakpoint-context-holder: () !global;
+    $private-breakpoint-query-count: 0 !global;
+
+    @if $Memo-Exists {
+      $holder: memo-set(breakpoint, breakpoint $query $contexts, $return);
+    }
+  }
+
+  @return $return;
+}
+
+//////////////////////////////
+// General Breakpoint Parser
+//////////////////////////////
+@function breakpoint-parse($query) {
+  // Increase number of 'and' queries
+  $private-breakpoint-query-count: $private-breakpoint-query-count + 1 !global;
+
+  // Set up Media Type
+  $query-print: '';
+
+  $force-all: ((breakpoint-get('force all media type') == true) and (breakpoint-get('default media') == 'all'));
+  $empty-media: true;
+  @if ($force-all == true) or (breakpoint-get('default media') != 'all') {
+    // Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all)
+    $query-print: breakpoint-get('default media');
+    $empty-media: false;
+  }
+
+
+  $query-resolution: false;
+
+  $query-holder: breakpoint-parse-query($query);
+
+
+
+  // Loop over each parsed out query and write it to $query-print
+  $first: true;
+
+  @each $feature in $query-holder {
+    $length: length($feature);
+
+    // Parse a single feature
+    @if ($length == 1) {
+      // Feature is currently a list, grab the actual value
+      $feature: nth($feature, 1);
+
+      // Media Type must by convention be the first item, so it's safe to flat override $query-print, which right now should only be the default media type
+      @if (breakpoint-is-media($feature)) {
+        @if ($force-all == true) or ($feature != 'all') {
+          // Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all)
+          $query-print: $feature;
+          $empty-media: false;
+
+          // Set Context
+          $context-setter: private-breakpoint-set-context(media, $query-print);
+        }
+      }
+      @else {
+        $parsed: breakpoint-parse-single($feature, $empty-media, $first);
+        $query-print: '#{$query-print} #{$parsed}';
+        $first: false;
+      }
+    }
+    // Parse a double feature
+    @else if ($length == 2) {
+      @if (breakpoint-is-resolution($feature) != false) {
+        $query-resolution: $feature;
+      }
+      @else {
+        $parsed: null;
+        // If it's a string/number pair,
+        // we check to see if one is a single-string value,
+        // then we parse it as a normal double
+        $alpha: nth($feature, 1);
+        $beta: nth($feature, 2);
+        @if breakpoint-single-string($alpha) or breakpoint-single-string($beta) {
+          $parsed: breakpoint-parse-single($alpha, $empty-media, $first);
+          $query-print: '#{$query-print} #{$parsed}';
+          $first: false;
+          $parsed: breakpoint-parse-single($beta, $empty-media, $first);
+          $query-print: '#{$query-print} #{$parsed}';
+        }
+        @else {
+          $parsed: breakpoint-parse-double($feature, $empty-media, $first);
+          $query-print: '#{$query-print} #{$parsed}';
+          $first: false;
+        }
+      }
+    }
+    // Parse a triple feature
+    @else if ($length == 3) {
+      $parsed: breakpoint-parse-triple($feature, $empty-media, $first);
+      $query-print: '#{$query-print} #{$parsed}';
+      $first: false;
+    }
+
+  }
+
+  @if ($query-resolution != false) {
+    $query-print: breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first);
+  }
+
+  // Loop through each feature that's been detected so far and append 'false' to the the value list to increment their counters
+  @each $f, $v in $private-breakpoint-context-holder {
+    $v-holder: $v;
+    $length: length($v-holder);
+    @if length($v-holder) < $private-breakpoint-query-count {
+      @for $i from $length to $private-breakpoint-query-count {
+        @if $f == 'media' {
+          $v-holder: append($v-holder, breakpoint-get('default media'));
+        }
+        @else {
+          $v-holder: append($v-holder, false);
+        }
+      }
+    }
+    $private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($f: $v-holder)) !global;
+  }
+
+  @return $query-print;
+}

http://git-wip-us.apache.org/repos/asf/incubator-rocketmq-site/blob/e1829bac/_sass/vendor/breakpoint/_respond-to.scss
----------------------------------------------------------------------
diff --git a/_sass/vendor/breakpoint/_respond-to.scss b/_sass/vendor/breakpoint/_respond-to.scss
new file mode 100644
index 0000000..e2462c5
--- /dev/null
+++ b/_sass/vendor/breakpoint/_respond-to.scss
@@ -0,0 +1,82 @@
+////////////////////////
+// Default the Breakpoints variable
+////////////////////////
+$breakpoints: () !default;
+$BREAKPOINTS: () !default;
+
+////////////////////////
+// Respond-to API Mixin
+////////////////////////
+@mixin respond-to($context, $no-query: false) {
+  @if length($breakpoints) > 0 and length($BREAKPOINTS) == 0 {
+    @warn "In order to avoid variable namespace collisions, we have updated the way to add breakpoints for respond-to. Please change all instances of `$breakpoints: add-breakpoint()` to `@include add-breakpoint()`. The `add-breakpoint()` function will be deprecated in a future release.";
+    $BREAKPOINTS: $breakpoints !global;
+    $breakpoints: () !global;
+  }
+
+  @if type-of($BREAKPOINTS) != 'map' {
+    // Just in case someone writes gibberish to the $breakpoints variable.
+    @warn "Your breakpoints aren't a map! `respond-to` expects a map. Please check the value of $BREAKPOINTS variable.";
+    @content;
+  }
+  @else if map-has-key($BREAKPOINTS, $context) {
+    @include breakpoint(map-get($BREAKPOINTS, $context), $no-query) {
+      @content;
+    }
+  }
+  @else if not map-has-key($BREAKPOINTS, $context) {
+    @warn "`#{$context}` isn't a defined breakpoint! Please add it using `$breakpoints: add-breakpoint(`#{$context}`, $value);`";
+    @content;
+  }
+  @else {
+    @warn "You haven't created any breakpoints yet! Make some already! `@include add-breakpoint($name, $bkpt)`";
+    @content;
+  }
+}
+
+//////////////////////////////
+// Add Breakpoint to Breakpoints
+// TODO: Remove function in next release
+//////////////////////////////
+@function add-breakpoint($name, $bkpt, $overwrite: false) {
+  $output: ($name: $bkpt);
+
+  @if length($breakpoints) == 0 {
+    @return $output;
+  }
+  @else {
+    @if map-has-key($breakpoints, $name) and $overwrite != true {
+      @warn "You already have a breakpoint named `#{$name}`, please choose another breakpoint name, or pass in `$overwrite: true` to overwrite the previous breakpoint.";
+      @return $breakpoints;
+    }
+    @else if not map-has-key($breakpoints, $name) or $overwrite == true {
+      @return map-merge($breakpoints, $output);
+    }
+  }
+}
+
+@mixin add-breakpoint($name, $bkpt, $overwrite: false) {
+  $output: ($name: $bkpt);
+
+  @if length($BREAKPOINTS) == 0 {
+    $BREAKPOINTS: $output !global;
+  }
+  @else {
+    @if map-has-key($BREAKPOINTS, $name) and $overwrite != true {
+      @warn "You already have a breakpoint named `#{$name}`, please choose another breakpoint name, or pass in `$overwrite: true` to overwrite the previous breakpoint.";
+      $BREAKPOINTS: $BREAKPOINTS !global;
+    }
+    @else if not map-has-key($BREAKPOINTS, $name) or $overwrite == true {
+      $BREAKPOINTS: map-merge($BREAKPOINTS, $output) !global;
+    }
+  }
+}
+
+@function get-breakpoint($name: false) {
+  @if $name == false {
+    @return $BREAKPOINTS;
+  }
+  @else {
+    @return map-get($BREAKPOINTS, $name);
+  }
+}