Update donate page

site/_includes/icons/facebook.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z"></path></svg>

site/_includes/icons/linkedin.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z"></path></svg>

site/_includes/stylesheet.html

@@ -7,6 +7,6 @@
 {% endif %}
 {% if page.layout != "examples" %}
 <link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
-<link href="{{ site.baseurl }}/assets/css/style.css" rel="stylesheet">
+<link href="{{ site.baseurl }}/assets/css/style.css?m=1" rel="stylesheet">
 {% endif %}
 {%- endif -%}

site/assets/css/style.css

@@ -13,19 +13,78 @@
 
 .donate td {
   text-align: center;
+  vertical-align: middle !important;
 }
 
-.donate .paypal {
-  margin-top: 70px;
-  display: block;
+.donate svg.navbar-nav-svg {
+  width: 96px;
 }
 
-.donate svg {
-  width: 96px;
+#share-buttons {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+#share-buttons > a {
+  position: relative;
+  text-align: left;
+  height: 36px;
+  width: 32px;
+  float: left;
+  text-align: center;
+  color: silver;
+}
+
+#share-buttons > a {
+  position: relative;
+  text-align: left;
+  height: 36px;
+  width: 32px;
+  float: left;
+  text-align: center;
+  color: silver;
+}
+
+#share-buttons > a > svg {
+  height: 18px;
+  fill: #d5d5d5;
+  margin-top: 9px;
+}
+
+#share-buttons > .github:hover,
+#share-buttons > .github:hover svg {
+  color: #000;
+  fill: #000;
+}
+
+#share-buttons > .twitter:hover,
+#share-buttons > .twitter:hover svg {
+  color: #55acee;
+  fill: #55acee;
+}
+
+#share-buttons > .facebook:hover,
+#share-buttons > .facebook:hover svg {
+  color: #3b5998;
+  fill: #3b5998;
+}
+
+#share-buttons > .linkedin:hover,
+#share-buttons > .linkedin:hover svg {
+  color: #0077b5;
+  fill: #0077b5;
+}
+
+#share-buttons > .mail:hover,
+#share-buttons > .mail:hover svg {
+  color: #7d7d7d;
+  fill: #7d7d7d;
 }
 
-.donate .btn-primary {
-  margin-top: 75px;
+.share-desc {
+  font-size: 12px;
+  color: #777;
+  text-align: left;
 }
 
 .post-date {

site/donate.md

@@ -7,31 +7,54 @@ redirect_from:
   - "/es/donate/"
 ---
 
-Bootstrap Table is a free plug-in which is made in my spare time.
-
-If your project gets the help from Bootstrap Table, you can donate to Bootstrap Table.
-
-With your help, I believe that I will continue to strive to let Bootstrap Table be better.
+Bootstrap Table is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support Bootstrap Table development via the following methods:
 
 <table class="table donate">
 <tbody>
   <tr>
+    <td><h2>Share The Love</h2></td>
     <td><img src="{{ site.base_url }}/assets/images/paypalLogo.png"></td>
-    <td>{%- include icons/opencollective.svg class="navbar-nav-svg" -%}</td>
     <td><img src="{{ site.base_url }}/assets/images/alipayLogo.png"></td>
     <td><img src="{{ site.base_url }}/assets/images/weixinLogo.png"></td>
   </tr>
   <tr>
     <td>
+      <span style="color: silver;">Share on: </span>
+      <div id="share-buttons">
+        <a class="github" href="{{ site.repo }}" target="_blank" title="Star this on GitHub">
+          {% include icons/github.svg %}
+        </a>
+
+        <a class="twitter" href="http://twitter.com/home?status={{ site.url }}" target="_blank" title="Share this on Twitter">
+          {% include icons/twitter.svg %}
+        </a>
+
+        <a class="facebook" href="http://www.facebook.com/share.php?u={{ site.url }}" target="_blank" title="Share this on Facebook">
+          {% include icons/facebook.svg %}
+        </a>
+
+        <a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ site.url }}&amp;title=&amp;summary=&amp;source=" target="_blank" title="Share this on Linkedin">
+          {% include icons/linkedin.svg %}
+        </a>
+
+        <a class="mail" href="mailto:?&amp;body={{ site.url }}" target="_blank" title="Share this through Email">
+          {% include icons/mail.svg %}
+        </a>
+      </div>
+
+      <p class="share-desc">
+      If you like Bootstrap Table, but you do not have any money to spare, please share the love by posting something about this website on social media. You can use the buttons above. They will share the homepage. Thank you, you are the best!
+      </p>
+    </td>
+    <td>
       <a class="paypal" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ZDHP676FQDUT6">
         <img src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif">
       </a>
     </td>
-    <td>
-      <a class="btn btn-primary" href="https://opencollective.com/bootstrap-table">Contribute</a>
-    </td>
     <td><img src="{{ site.base_url }}/assets/images/alipay.jpg"></td>
     <td><img src="{{ site.base_url }}/assets/images/weixin.png"></td>
   </tr>
 </tbody>
 </table>
+
+{% include opencollective.html %}