Translated into Chinese for section "flex".

CNAME

@@ -1 +1 @@
-cssreference.io
+cssreference.parryqiu.com

README.md

@@ -1,6 +1,6 @@
-# [CSS Reference](http://cssreference.io): a free visual guide to the most popular CSS properties
+# [CSS Reference](http://cssreference.parryqiu.com): a free visual guide to the most popular CSS properties
 
-[![CSS Reference screenshot](https://raw.github.com/jgthms/css-reference/master/images/css-reference-share.png)](http://cssreference.io)
+[![CSS Reference screenshot](https://raw.github.com/jgthms/css-reference/master/images/css-reference-share.png)](http://cssreference.parryqiu.com)
 
 # License
 

_config.local.yml

@@ -1,5 +1,5 @@
 title: CSS Reference
-subtitle: "A free visual guide to the most popular CSS properties"
+subtitle: "免费的 CSS 属性可视化文档"
 description: "CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples."
 share: "CSS Reference: a free visual guide to the most popular CSS properties."
 url: http://localhost:4000

_config.yml

@@ -1,8 +1,8 @@
-title: CSS Reference
-subtitle: "A free visual guide to the most popular CSS properties"
-description: "CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples."
+title: CSS Reference | 免费的 CSS 属性可视化文档
+subtitle: "免费的 CSS 属性可视化文档"
+description: "cssreference.parryqiu.com 是一个免费的 CSS 可视化文档。文档使用了大量的可视化图形以及动画对属性进行了解释。"
 share: "CSS Reference: a free visual guide to the most popular CSS properties."
-url: http://cssreference.io
+url: http://cssreference.parryqiu.com
 markdown: kramdown
 permalink: pretty
 exclude: ['node_modules']

_includes/google-fonts.html

@@ -1,9 +1,9 @@
-<script async type="text/javascript">
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-  ga('create', 'UA-82634666-3', 'auto');
-  ga('send', 'pageview');
+<script>
+var _hmt = _hmt || [];
+(function() {
+  var hm = document.createElement("script");
+  hm.src = "https://hm.baidu.com/hm.js?684fa3aa500a316fea3d4fd079888e48";
+  var s = document.getElementsByTagName("script")[0];
+  s.parentNode.insertBefore(hm, s);
+})();
 </script>

_includes/menu.html

@@ -5,25 +5,25 @@
   window.carbonLoaded = true;
 }
 
-document.addEventListener('DOMContentLoaded', function() {
-  var $menuHello = document.getElementById('menuHello');
-  var $huggingFace = document.getElementById('huggingFace');
-  var $carbon = document.getElementById('carbon');
-  var $placeholder = document.getElementById('placeholder');
-
-  setTimeout(function() {
-    if (window.carbonLoaded) {
-      $menuHello.style.minHeight = '218px';
-      $huggingFace.style.display = 'none';
-      $carbon.style.display = 'block';
-    } else {
-      $menuHello.style.minHeight = '0';
-      $huggingFace.style.display = 'block';
-      $carbon.style.display = 'none';
-    }
-    $placeholder.style.display = 'none';
-  }, 2000);
-});
+// document.addEventListener('DOMContentLoaded', function() {
+//   var $menuHello = document.getElementById('menuHello');
+//   var $huggingFace = document.getElementById('huggingFace');
+//   var $carbon = document.getElementById('carbon');
+//   var $placeholder = document.getElementById('placeholder');
+//
+//   setTimeout(function() {
+//     if (window.carbonLoaded) {
+//       $menuHello.style.minHeight = '218px';
+//       $huggingFace.style.display = 'none';
+//       $carbon.style.display = 'block';
+//     } else {
+//       $menuHello.style.minHeight = '0';
+//       $huggingFace.style.display = 'block';
+//       $carbon.style.display = 'none';
+//     }
+//     $placeholder.style.display = 'none';
+//   }, 2000);
+// });
 </script>
 
 <aside class="menu">
@@ -50,7 +50,7 @@
   {% if page.template != "index" %}
     <nav id="menu-nav" class="menu-nav">
       <div class="menu-search">
-        <input id="menu-search-input" type="search" autocomplete="off" placeholder="Search for a property">
+        <input id="menu-search-input" type="search" autocomplete="off" placeholder="属性搜索">
         <i class="icon is-search"></i>
       </div>
       <div id="menu-list" class="menu-list">
@@ -70,8 +70,8 @@
       </a>
     </nav>
   {% endif %}
-  <footer id="menuHello" class="menu-hello">
-    <div id="huggingFace">
+  <!-- <footer id="menuHello" class="menu-hello"> -->
+    <!-- <div id="huggingFace">
       <p>
         CSS Reference is <strong>free</strong> and <br>
         always will be!
@@ -83,24 +83,24 @@
       <p>
         Thank you! <img src="{{site.url}}/images/hugging-face.png" alt="Hugging face emoji">
       </p>
-    </div>
-    <div id="placeholder" class="placeholder">
+    </div> -->
+    <!-- <div id="placeholder" class="placeholder">
       <div class="placeholder-image"><div></div></div>
       <div class="placeholder-content"><div></div><div></div><div></div></div>
       <div class="placeholder-footer"><div></div></div>
-    </div>
-    <div id="carbon">
+    </div> -->
+    <!-- <div id="carbon">
       <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=cssreferenceio" id="_carbonads_js" onload ="window.helloCarbon()"></script>
-    </div>
-  </footer>
+    </div> -->
+  <!-- </footer> -->
 </aside>
 
 <footer class="footer">
   <p class="footer-title">
-    <strong>{{site.subtitle}}</strong> <small>Created by <a href="https://twitter.com/jgthms">@jgthms</a></small>
+    <strong>{{site.subtitle}}</strong> <small>Created by <a target="_blank" href="https://twitter.com/jgthms">@jgthms</a></small> <small>Translated into Chinese by <a target="_blank" href="http://weibo.com/parryqiu">@Parry</a></small>
   </p>
   <p class="footer-share footer-share--social">
-    <strong class="footer-share-label">Share</strong>
+    <!-- <strong class="footer-share-label">Share</strong>
     <a class="footer-share-button is-twitter"
       data-social-network="Twitter"
       data-social-action="tweet"
@@ -116,13 +116,13 @@
       target="_blank">
       {% include svg/facebook.html %}
     </a>
-    <a id="menu-nav-open" class="footer-share-nav">Menu</a>
+    <a id="menu-nav-open" class="footer-share-nav">Menu</a> -->
   </p>
-  <div class="footer-facebook">
+  <!-- <div class="footer-facebook">
     <iframe class="footer-iframe" data-src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fcssreference%2F&width=100&layout=button_count&action=like&size=small&show_faces=false&share=false&height=20&appId=1212191075486670" width="100" height="20" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
-  </div>
+  </div> -->
   <div class="footer-github">
-    <iframe class="footer-iframe" data-src="https://ghbtns.com/github-btn.html?user=jgthms&repo=css-reference&type=star&count=true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
+    <iframe class="footer-iframe" data-src="https://ghbtns.com/github-btn.html?user=ParryQiu&repo=css-reference&type=star&count=true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
   </div>
   <!-- <p class="footer-share footer-share--contribute">
     <strong class="footer-share-label">Contribute</strong>

_includes/modals/share.html

@@ -1,14 +1,14 @@
 <div id="modal-share" class="modal">
   <div class="modal-box">
-    <p class="modal-title">Share this CSS property</p>
+    <p class="modal-title">分享给其他好友</p>
     <p class="modal-url">
       <input id="modal-input" class="input" type="text" value="{{site.url}}/" readonly>
-      <button id="modal-copy" class="button is-primary" data-clipboard-target="#modal-input">Copy</button>
-    </p>
-    <p class="modal-social">
-      <a id="modal-twitter" class="button is-twitter" href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fcssreference.io&text=CSS%20Reference%3A%20a%20visual%20guide%20to%20the%20most%20popular%20%23CSS%20properties">Share on Twitter</a>
-      <a id="modal-facebook" class="button is-facebook" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcssreference.io">Share on Facebook</a>
+      <button id="modal-copy" class="button is-primary" data-clipboard-target="#modal-input">复制链接</button>
     </p>
+    <!-- <p class="modal-social">
+      <a id="modal-twitter" class="button is-twitter" href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fcssreference.parryqiu.com&text=CSS%20Reference%3A%20a%20visual%20guide%20to%20the%20most%20popular%20%23CSS%20properties">Share on Twitter</a>
+      <a id="modal-facebook" class="button is-facebook" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcssreference.parryqiu.com">Share on Facebook</a>
+    </p> -->
     <a id="modal-close" class="modal-close"></a>
   </div>
-</div>
+</div>

_layouts/collection.html

@@ -34,9 +34,9 @@
           <h1 class="heading-title">
             <strong>{{page.collection_name}}</strong> in CSS
           </h1>
-          <p class="heading-description">The CSS properties that allow you to {{page.description}}</p>
+          <p class="heading-description">在 CSS 中可{{page.description}}</p>
         </div>
-        <p class="heading-share">
+        <!-- <p class="heading-share">
           <strong class="heading-share-label">Share this page</strong>
           <a class="heading-share-button is-twitter"
             data-social-network="Twitter"
@@ -53,7 +53,7 @@ <h1 class="heading-title">
             target="_blank">
             {% include svg/facebook.html %}
           </a>
-        </p>
+        </p> -->
       </header>
       <section class="properties">
         {{content}}

flexbox.html

@@ -2,7 +2,7 @@
 layout: collection
 collection_name: "Flexbox"
 menu_list: "flexbox-list"
-description: "use the CSS3 Flexbox capabilities"
+description: "使用的 CSS3 Flexbox 特性"
 ---
 
 {% include collections/flexbox.html %}

index.html

@@ -43,7 +43,14 @@ <h2 class="header-title">
             A free visual guide to CSS
           </h2>
           <p class="header-subtitle">
-            <strong>Learn by example</strong>: <a href="{{site.url}}">cssreference.io</a> is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
+            <a href="{{site.url}}">cssreference.parryqiu.com</a> 是一个免费的 CSS 可视化文档。
+          </p>
+          <p class="header-subtitle">文档使用了大量的可视化图形以及动画对属性进行了解释。</p>
+          <p class="header-subtitle">
+            项目 fork 于<a href="http://cssreference.io/">cssreference.io</a>，翻译成中文的工作正在进行中。
+          </p>
+          <p class="header-subtitle">
+            [2017-01-08] Flexbox 的部分已完成。
           </p>
         </div>
       </header>

javascript/main.js

@@ -169,9 +169,9 @@ document.addEventListener('DOMContentLoaded', function() {
   var $menuNavOpen = document.getElementById('menu-nav-open');
   var $menuNavClose = document.getElementById('menu-nav-close');
 
-  $menuNavOpen.addEventListener('click', function(event) {
-    $menuNav.classList.add('is-active');
-  });
+  // $menuNavOpen.addEventListener('click', function(event) {
+  //   $menuNav.classList.add('is-active');
+  // });
 
   $menuNavClose.addEventListener('click', function(event) {
     $menuNav.classList.remove('is-active');
@@ -203,34 +203,34 @@ document.addEventListener('DOMContentLoaded', function() {
   var $propertyShares = document.querySelectorAll('.property-share');
   var $modalInput = document.getElementById('modal-input');
   var baseURL = '' + window.location.origin + window.location.pathname;
-  baseURL = 'http://cssreference.io/';
-  var facebookURL = 'https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcssreference.io';
-  var twitterURL = 'https://twitter.com/intent/tweet?url=http%3A%2F%2Fcssreference.io&text=CSS%20Reference%3A%20a%20visual%20guide%20to%20the%20most%20popular%20%23CSS%20properties';
+  baseURL = 'http://cssreference.parryqiu.com/';
+  // var facebookURL = 'https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcssreference.parryqiu.com';
+  // var twitterURL = 'https://twitter.com/intent/tweet?url=http%3A%2F%2Fcssreference.parryqiu.com&text=CSS%20Reference%3A%20a%20visual%20guide%20to%20the%20most%20popular%20%23CSS%20properties';
 
   Array.prototype.forEach.call($propertyShares, function($el, index) {
     $el.addEventListener('click', function(e) {
       var propertyName = $el.dataset.propertyName;
       var shareURL = baseURL + 'property/' + propertyName;
       $modalInput.value = shareURL;
       encodedURL = encodeURIComponent(shareURL);
-      facebookURL = 'https://www.facebook.com/sharer.php?u=' + encodedURL;
-      twitterURL = buildTwitterURL(encodedURL, propertyName);
+      // facebookURL = 'https://www.facebook.com/sharer.php?u=' + encodedURL;
+      // twitterURL = buildTwitterURL(encodedURL, propertyName);
       openModal();
     });
   });
 
-  var $modalTwitter = document.getElementById('modal-twitter');
-  var $modalFacebook = document.getElementById('modal-facebook');
-
-  $modalTwitter.addEventListener('click', function(event) {
-    event.preventDefault();
-    window.open(twitterURL);
-  });
-
-  $modalFacebook.addEventListener('click', function(event) {
-    event.preventDefault();
-    window.open(facebookURL);
-  });
+  // var $modalTwitter = document.getElementById('modal-twitter');
+  // var $modalFacebook = document.getElementById('modal-facebook');
+  //
+  // $modalTwitter.addEventListener('click', function(event) {
+  //   event.preventDefault();
+  //   window.open(twitterURL);
+  // });
+  //
+  // $modalFacebook.addEventListener('click', function(event) {
+  //   event.preventDefault();
+  //   window.open(facebookURL);
+  // });
 
   // Modal
   var $modalShare = document.getElementById('modal-share');
@@ -258,16 +258,16 @@ document.addEventListener('DOMContentLoaded', function() {
   function closeModal() {
     isModaling = false;
     $modalShare.classList.remove('is-active');
-    facebookURL = 'https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcssreference.io';
-    twitterURL = 'https://twitter.com/intent/tweet?url=http%3A%2F%2Fcssreference.io&text=CSS%20Reference%3A%20a%20visual%20guide%20to%20the%20most%20popular%20%23CSS%20properties';
+    facebookURL = 'https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcssreference.parryqiu.com';
+    twitterURL = 'https://twitter.com/intent/tweet?url=http%3A%2F%2Fcssreference.parryqiu.com&text=CSS%20Reference%3A%20a%20visual%20guide%20to%20the%20most%20popular%20%23CSS%20properties';
   }
 
   var modalClipboard = new Clipboard('#modal-copy');
 
   modalClipboard.on('success', function(e) {
     e.clearSelection();
-    e.trigger.innerHTML = 'Copied';
-    setTimeout(function() { e.trigger.innerHTML = 'Copy'; }, 500);
+    e.trigger.innerHTML = '已复制';
+    setTimeout(function() { e.trigger.innerHTML = '复制链接'; }, 500);
   });
 
   // Property: Launch animations