Docs: update some style

c99d1f10 · afc163 · e5f7c8b4 · c99d1f10 · c99d1f10 · c99d1f10
4 changed file
--- a/docs/pattern/table.md
+++ b/docs/pattern/table.md
@@ -71,9 +71,9 @@

 <img class="preview-img" align="right" alt="状态一" src="https://os.alipayobjects.com/rmsportal/QqafGErOPnuDKyy.png">

-<img class="preview-img" align="right" alt="状态二" description="点击 Table 顶部的复选框，出现『Alert』" src="https://os.alipayobjects.com/rmsportal/qwRSMFNilVCNoym.png">
+<img class="preview-img" align="right" alt="状态二：点击 Table 顶部的复选框，出现『Alert』" src="https://os.alipayobjects.com/rmsportal/qwRSMFNilVCNoym.png">

-<img class="preview-img" align="right" alt="状态三" description="点击『选择全部』后" src="https://os.alipayobjects.com/rmsportal/POvEJGjMYAexGut.png">
+<img class="preview-img" align="right" alt="状态三：点击『选择全部』后" src="https://os.alipayobjects.com/rmsportal/POvEJGjMYAexGut.png">

 当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。


--- a/docs/resource/download.md
+++ b/docs/resource/download.md
@@ -7,6 +7,7 @@

 这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。

+<div class="resource-cards">
 <a target="_blank" href="https://github.com/ant-design/ant-design/files/69428/Ant_Design_Components.rplib.zip" class="resource-card">
  <img src="https://os.alipayobjects.com/rmsportal/cnmjGfbBWUZPFiO.png">
  <span class="resource-card-content">
@@ -42,69 +43,4 @@
    <span class="resource-card-description">一个机智的设计资源共享工具</span>
  </span>
 </a>
-
-<style>
-.resource-card {
-  max-width: 350px;
-  width: 40%;
-  height: 130px;
-  border: 1px solid #e9e9e9;
-  border-radius: 6px;
-  font-size: 12px;
-  color: #777;
-  display: inline-block;
-  margin: 20px 40px 10px 0;
-  vertical-align: middle;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-.resource-card:hover {
-  box-shadow: 0 1px 4px rgba(64,64,64,.2);
-}
-
-.resource-card:hover .resource-card-title {
-  color: #2db7f5;
-}
-
-.resource-card.disabled {
-  opacity: 0.45;
-  pointer-events: none;
-}
-
-.resource-card img {
-  display: inline-block;
-  vertical-align: middle;
-  width: 50px;
-  margin: 0 20px 0 24px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.resource-card-content {
-  display: inline-block;
-  vertical-align: middle;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 92px;
-}
-
-.resource-card-title {
-  display: block;
-  font-size: 16px;
-  color: #666;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  line-height: 1;
-  margin-bottom: 8px;
-}
-
-.resource-card-description {
-  display: block;
-  color: #999;
-}
-</style>
+</div>
--- a/docs/resource/reference.md
+++ b/docs/resource/reference.md
@@ -5,8 +5,9 @@

 ---

-在进行模式、组件和语言的整理中，《About Face 4》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。
+在进行模式、组件和语言的整理中，《About Face 4》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web 表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。

+<div class="resource-cards">
 <a target="_blank" href="http://book.douban.com/subject/26642302/" class="resource-card">
  <img src="https://os.alipayobjects.com/rmsportal/PeeRQQIGQJCswxe.png">
  <span class="resource-card-content">
@@ -58,74 +59,9 @@
 <a target="_blank" href="http://book.douban.com/subject/4886100/" class="resource-card">
  <img src="https://os.alipayobjects.com/rmsportal/moeFnnuXrputdag.png">
  <span class="resource-card-content">
-    <span class="resource-card-title">Web表单设计：点石成金的艺术</span>
+    <span class="resource-card-title">Web 表单设计：点石成金的艺术</span>
    <span class="resource-card-description">作者: Luke Wroblewski</span>
    <span class="resource-card-description">出版社: 清华大学出版社</span>
  </span>
 </a>
-
-<style>
-.resource-card {
-  max-width: 350px;
-  width: 40%;
-  height: 130px;
-  border: 1px solid #e9e9e9;
-  border-radius: 6px;
-  font-size: 12px;
-  color: #777;
-  display: inline-block;
-  margin: 20px 40px 10px 0;
-  vertical-align: middle;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-.resource-card:hover {
-  box-shadow: 0 1px 4px rgba(64,64,64,.2);
-}
-
-.resource-card:hover .resource-card-title {
-  color: #2db7f5;
-}
-
-.resource-card.disabled {
-  opacity: 0.45;
-  pointer-events: none;
-}
-
-.resource-card img {
-  display: inline-block;
-  vertical-align: middle;
-  width: 64px;
-  margin: 0 20px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.resource-card-content {
-  display: inline-block;
-  vertical-align: middle;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 106px;
-}
-
-.resource-card-title {
-  display: block;
-  font-size: 16px;
-  color: #666;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  line-height: 1;
-  margin-bottom: 8px;
-}
-
-.resource-card-description {
-  display: block;
-  color: #999;
-}
-</style>
+</div>
--- a/site/static/style.css
+++ b/site/static/style.css
@@ -1028,110 +1028,6 @@ a.entry-link:hover .anticon-smile {
  right: -32px;
 }

-@media only screen and (min-width: 320px) and (max-width: 1024px) {
-  .code-boxes-col-2-1 {
-    float: none;
-    width: 100%;
-  }
-  .search {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 320px) and (max-width: 767px) {
-  .nav, .search {
-    display: none;
-  }
-
-  .logo {
-    margin: 10px;
-    height: auto;
-  }
-
-  .banner-entry {
-    position: relative;
-    top: 30px;
-    left: 0;
-    text-align: center;
-  }
-
-  .nav {
-    position: absolute;
-    z-index: 1000;
-    top: 50px;
-    right: 0;
-    background: #fff;
-    overflow: hidden;
-    height: auto;
-    line-height: 50px;
-    margin-right: 0;
-    border: 1px solid #e9e9e9;
-    width: 50%;
-  }
-
-  .nav .bar {
-    display: none!important;
-  }
-
-  .nav ul li {
-    width: 100%;
-  }
-
-  .toc {
-    display: none;
-  }
-
-  .nav-phone-icon {
-    display: block;
-    width: 49px;
-    height: 49px;
-    float: right;
-    cursor: pointer;
-    background: #BEC4C8;
-  }
-
-  .nav-phone-icon:before,
-  .nav-phone-icon:after {
-    content: "";
-    display: block;
-    border-radius: 1px;
-    width: 15px;
-    height: 2px;
-    background: #EBEDEE;
-    margin: 20px 0 0 18px;
-  }
-
-  .nav-phone-icon:after {
-    margin-top: 5px;
-  }
-
-  .main {
-    height: calc(100% - 86px);
-  }
-
-  .aside-container {
-    float: none;
-    width: auto;
-  }
-
-  .main-container {
-    margin-left: 0;
-  }
-
-  .markdown {
-    width: 100%;
-  }
-
-  footer {
-    text-align: center;
-  }
-
-  footer ul li {
-    float: none;
-    width: auto;
-  }
-}
-
 #instantclick {
  top: 80px!important;
  position: absolute!important;
@@ -1278,6 +1174,7 @@ a.entry-link:hover .anticon-smile {
  float: right;
  margin: 0 0 110px 60px;
  width: 616px;
+  overflow: hidden;
 }

 .preview-image-boxes + .preview-image-boxes {
@@ -1459,3 +1356,188 @@ a.entry-link:hover .anticon-smile {
  max-width: 100%;
  display: inline-block;
 }
+
+.resource-cards {
+  width: 100%;
+}
+
+.resource-card {
+  max-width: 350px;
+  width: 40%;
+  min-width: 300px;;
+  height: 130px;
+  border: 1px solid #e9e9e9;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #777;
+  display: inline-block;
+  margin: 20px 40px 10px 0;
+  vertical-align: middle;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.resource-card:hover {
+  box-shadow: 0 1px 4px rgba(64,64,64,.2);
+}
+
+.resource-card:hover .resource-card-title {
+  color: #2db7f5;
+}
+
+.resource-card.disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.resource-card img {
+  display: inline-block;
+  vertical-align: middle;
+  width: 50px;
+  margin: 0 20px 0 24px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.resource-card-content {
+  display: inline-block;
+  vertical-align: middle;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 92px;
+}
+
+.resource-card-title {
+  display: block;
+  font-size: 16px;
+  color: #666;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 1;
+  margin-bottom: 8px;
+}
+
+.resource-card-description {
+  display: block;
+  color: #999;
+  padding-right: 8px;
+}
+
+
+/* responsive style */
+@media only screen and (min-width: 320px) and (max-width: 1024px) {
+  .code-boxes-col-2-1 {
+    float: none;
+    width: 100%;
+  }
+  .search {
+    display: none;
+  }
+  .preview-image-boxes {
+    margin: 0!important;
+    float: none;
+    width: 100%;
+  }
+
+  .preview-image-box {
+    padding-left: 0;
+  }
+}
+
+@media only screen and (min-width: 320px) and (max-width: 767px) {
+  .nav, .search {
+    display: none;
+  }
+
+  .logo {
+    margin: 10px;
+    height: auto;
+  }
+
+  .banner-entry {
+    position: relative;
+    top: 30px;
+    left: 0;
+    text-align: center;
+  }
+
+  .nav {
+    position: absolute;
+    z-index: 1000;
+    top: 50px;
+    right: 0;
+    background: #fff;
+    overflow: hidden;
+    height: auto;
+    line-height: 50px;
+    margin-right: 0;
+    border: 1px solid #e9e9e9;
+    width: 50%;
+  }
+
+  .nav .bar {
+    display: none!important;
+  }
+
+  .nav ul li {
+    width: 100%;
+  }
+
+  .toc {
+    display: none;
+  }
+
+  .nav-phone-icon {
+    display: block;
+    width: 49px;
+    height: 49px;
+    float: right;
+    cursor: pointer;
+    background: #BEC4C8;
+  }
+
+  .nav-phone-icon:before,
+  .nav-phone-icon:after {
+    content: "";
+    display: block;
+    border-radius: 1px;
+    width: 15px;
+    height: 2px;
+    background: #EBEDEE;
+    margin: 20px 0 0 18px;
+  }
+
+  .nav-phone-icon:after {
+    margin-top: 5px;
+  }
+
+  .main {
+    height: calc(100% - 86px);
+  }
+
+  .aside-container {
+    float: none;
+    width: auto;
+  }
+
+  .main-container {
+    margin-left: 0;
+  }
+
+  .markdown {
+    width: 100%;
+  }
+
+  footer {
+    text-align: center;
+  }
+
+  footer ul li {
+    float: none;
+    width: auto;
+  }
+}