site: update site style

docs/spec/alignment.md

@@ -12,8 +12,8 @@
 
 ## 文案类对齐
 
-<img class="preview-img" align="right" alt="推荐示例" description="标题和正文左对齐，使用了一个视觉起点。" good src="https://os.alipayobjects.com/rmsportal/xvmiAZAIxrEcqdP.png">
-<img class="preview-img" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。" bad src="https://os.alipayobjects.com/rmsportal/qvycImsTiDGVgLJ.png">
+<img class="preview-img good" align="right" alt="推荐示例" description="标题和正文左对齐，使用了一个视觉起点。" src="https://os.alipayobjects.com/rmsportal/xvmiAZAIxrEcqdP.png">
+<img class="preview-img bad" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。" src="https://os.alipayobjects.com/rmsportal/qvycImsTiDGVgLJ.png">
 
 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
 
@@ -31,7 +31,7 @@
 
 ## 数字类对齐
 
-<img class="preview-img" align="right" alt="正确示例" good src="https://os.alipayobjects.com/rmsportal/hCSQTEmahFyQcWk.png">
-<img class="preview-img" align="right" alt="错误示例" bad src="https://os.alipayobjects.com/rmsportal/FDjScmPlWFPxkxL.png">
+<img class="preview-img good" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/hCSQTEmahFyQcWk.png">
+<img class="preview-img bad" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/FDjScmPlWFPxkxL.png">
 
 为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。

docs/spec/contrast.md

@@ -12,8 +12,8 @@
 
 ## 主次关系对比
 
-<img class="preview-img" align="right" alt="正确示例" good src="https://os.alipayobjects.com/rmsportal/RruKZUSYEwauGdF.png">
-<img class="preview-img" align="right" alt="错误示例" bad src="https://os.alipayobjects.com/rmsportal/TOupLSPNQkBTmYw.png">
+<img class="preview-img good" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/RruKZUSYEwauGdF.png">
+<img class="preview-img bad" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/TOupLSPNQkBTmYw.png">
 
 为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。
 

site/common/styles/common.less

+html {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body {
+  height: 100%;
+}
+
 body {
+  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",SimSun,sans-serif;
+  line-height: 1.5;
+  color: #666;
+  font-size: 14px;
   background: #ECECEC;
+  transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
+  overflow-x: hidden;
 }
 
 .main-wrapper {

site/common/styles/demo.less

@@ -13,15 +13,20 @@
   }
 }
 
-.demo-list-left,
-.demo-list-right {
-  width: 49%;
+.code-boxes-col-1-1 {
+  width: 80%;
 }
-.demo-list-left {
-  margin-right: 1%;
+
+.code-boxes-col-2-1 {
+  width: 48%;
+  display: inline-block;
+  vertical-align: top;
+  padding-right: 8px;
 }
-.demo-list-right {
-  margin-left: 1%;
+
+.code-boxes-col-2-1:last-child {
+  padding-right: 0;
+  padding-left: 8px;
 }
 
 .code-box {
@@ -127,6 +132,7 @@
   margin: 0.5em 0;
   padding-right: 25px;
   width: 100%;
+  word-break: break-word;
 }
 
 .code-box .collapse {
@@ -145,6 +151,7 @@
   transition: all 0.3s ease;
   color: #999;
   background: #fff;
+  user-select: none;
 }
 
 .code-box.expand .collapse {

site/common/styles/footer.less

@@ -6,6 +6,7 @@ footer {
   position: relative;
   z-index: 1;
   color: #666;
+  box-shadow: 0 1000px 0 1000px #fff;
 }
 
 footer ul {

site/common/styles/markdown.less

@@ -4,8 +4,8 @@
   line-height: 1.8;
 }
 
-.markdown > * {
-  // width: 100%!important;
+.highlight {
+  line-height: 1.5;
 }
 
 .markdown img {
@@ -143,6 +143,7 @@
   border-left: 4px solid #e9e9e9;
   padding-left: 0.8em;
   margin: 1em 0;
+  font-style: italic;
 }
 
 .markdown blockquote p {
@@ -155,6 +156,10 @@
   margin-left: 8px;
 }
 
+.markdown .waiting {
+  color: #ccc;
+}
+
 .markdown h1:hover .anchor,
 .markdown h2:hover .anchor,
 .markdown h3:hover .anchor,
@@ -168,8 +173,4 @@
 .markdown > br,
 .markdown > p > br {
   clear: both;
-}
-
-.markdown .waiting {
-  color: #ccc;
 }
\ No newline at end of file

site/common/styles/preview-img.less

 .preview-image-boxes {
   float: right;
-  margin: 0 0 110px 60px;
+  margin: 0 0 70px 28px;
   width: 616px;
-
-  &-with-popup {
-    width: 420px;
-  }
+  clear: both;
 }
 
 .preview-image-boxes + .preview-image-boxes {
-  margin-top: -75px;
+  margin-top: -35px;
 }
 
 .preview-image-box {
@@ -27,6 +24,22 @@
   position: relative;
 }
 
+.preview-image-wrapper.video {
+  padding: 0;
+  background: 0;
+  display: block;
+}
+
+.preview-image-wrapper video {
+  width: 100%;
+  display: block;
+  + svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
 .preview-image-wrapper.good:after {
   content: '';
   width: 100%;

site/component/ComponentDoc/index.jsx

@@ -87,10 +87,18 @@ export default class ComponentDoc extends React.Component {
           </h2>
         </section>
         <Row>
-          <Col span={ isSingleCol ? '24' : '12' } className={ isSingleCol ? '' : 'demo-list-left'}>
+          <Col span={ isSingleCol ? '24' : '12' }
+            className={ isSingleCol ?
+              'code-boxes-col-1-1' :
+              'code-boxes-col-2-1'
+            }
+          >
             { leftChildren }
           </Col>
-          { isSingleCol ? null : <Col className="demo-list-right" span="12">{ rightChildren }</Col> }
+          {
+            isSingleCol ? null :
+            <Col className="code-boxes-col-2-1" span="12">{ rightChildren }</Col>
+          }
         </Row>
         <section className="markdown">
           { (doc.api || []).map(utils.objectToComponent.bind(null, location.pathname)) }