Tweaks to footer

server/files/stylesheets/semantic.css

@@ -1434,6 +1434,18 @@ body.progress .ui.progress .bar {
       Definition Container
 *******************************/
 
+#example .pusher > .page {
+  display: table;
+  width: 100%;
+  height: 100%;
+}
+#example .pusher > .page > .full.height {
+  display: table-row;
+  height: 100%;
+}
+#example .pusher > .page > .footer {
+  clear: both;
+}
 
 #example .main.container {
   z-index: 1;

server/layouts/default.html.eco

@@ -253,15 +253,12 @@
   </div>
   <div class="pusher">
     <div class="page">
-      <%- @content %>
+      <div class="full height">
+        <%- @content %>
+      </div>
       <div class="ui vertical inverted black footer segment">
-        <div class="ui stackable page grid">
-          <div class="eight wide column">
-            <h3 class="ui inverted header">Keep Semantic UI Alive</h3>
-            <p>Donate money today to help fund the costs of development for Semantic UI</p>
-            <div class="ui inverted blue button">Donate</div>
-          </div>
-          <div class="four wide column">
+        <div class="ui stackable inverted divided page grid">
+          <div class="three wide right floated column">
             <h5 class="ui inverted header">Contribute</h5>
             <div class="ui inverted link list">
               <a class="item">Translate</a>
@@ -269,7 +266,7 @@
               <a class="item">Create Themes</a>
             </div>
           </div>
-          <div class="four wide column">
+          <div class="three wide right floated column">
             <h5 class="ui inverted header">Semantic Network</h5>
             <div class="ui inverted link list">
               <a class="item">Semantic UI</a>
@@ -277,6 +274,12 @@
               <a class="item">Semantic Themes</a>
             </div>
           </div>
+          <div class="eight wide column">
+            <h3 class="ui inverted header">Contribute to Our Growth</h3>
+            <p>Only you can help preserve the future development of Semantic UI, donate today</p>
+            <div class="ui inverted blue button">Donate</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>