💄 Optimize footer of site (#15612)

site/theme/static/footer.less

@@ -7,12 +7,20 @@ footer {
   z-index: 9;
   clear: both;
   margin-left: -1px;
-  color: rgba(255, 255, 255, 0.65);
+  color: rgba(255, 255, 255, 0.4);
   font-size: 14px;
   background-color: #000;
 
-  .ant-row {
+  .footer-wrap {
+    position: relative;
+    padding: 86px @padding-space 93px @padding-space;
     text-align: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+
+    > .ant-row {
+      display: inline-block;
+    }
+
     .footer-center {
       display: inline-block;
       text-align: left;
@@ -36,14 +44,15 @@ footer {
       }
       > div {
         margin: 12px 0;
+
+        > span {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+        }
       }
     }
   }
-  .footer-wrap {
-    position: relative;
-    padding: 86px @padding-space 93px @padding-space;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
-  }
+
   .bottom-bar {
     margin: 0;
     padding: 16px @padding-space;

site/theme/template/Layout/Footer.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Modal, message, Row, Col, Badge, Icon } from 'antd';
+import { Modal, message, Row, Col, Icon } from 'antd';
 import { Link } from 'bisheng/router';
 import { isLocalStorageNameSupported, loadScript, getLocalizedPathname } from '../utils';
 import ColorPicker from '../Color/ColorPicker';
@@ -105,7 +105,7 @@ class Footer extends React.Component {
     return (
       <footer id="footer">
         <div className="footer-wrap">
-          <Row>
+          <Row gutter={16}>
             <Col md={6} sm={24} xs={24}>
               <div className="footer-center">
                 <h2>
@@ -120,7 +120,7 @@ class Footer extends React.Component {
                 <div>
                   <a href="http://ng.ant.design">NG-ZORRO</a>
                   <span> - </span>
-                  Ant Design of Angular
+                  <span>Ant Design of Angular</span>
                 </div>
                 <div>
                   <a href="http://ng.mobile.ant.design">NG-ZORRO-MOBILE</a>
@@ -136,13 +136,11 @@ class Footer extends React.Component {
                   <FormattedMessage id="app.footer.kitchen" />
                 </div>
                 <div>
-                  <Badge dot offset={[3, 0]}>
-                    <a target="_blank" rel="noopener noreferrer" href="http://landing.ant.design">
-                      Ant Design Landing
-                    </a>
-                    <span> - </span>
-                    <FormattedMessage id="app.footer.landing" />
-                  </Badge>
+                  <a target="_blank" rel="noopener noreferrer" href="http://landing.ant.design">
+                    Ant Design Landing
+                  </a>
+                  <span> - </span>
+                  <FormattedMessage id="app.footer.landing" />
                 </div>
                 <div>
                   <a href="http://scaffold.ant.design">Scaffolds</a>