make buttons colorful

customize.dist/pages.js

@@ -267,15 +267,18 @@ define([
                         /*userForm(),*/
                         h('div.col-6.col-xs-6', [
                             h('div.bs-callout.cp-callout-pad', [
-                                h('h4', 'TODO Rich Text Pad'),
+                                h('i.fa.fa-file-word-o'),
+                                h('div', [h('h4', 'TODO Rich Text Pad')]),
                    //             "TODO Collaborate in realtime on notes and ideas."
                             ]),
                             h('div.bs-callout.cp-callout-code', [
-                                h('h4', 'TODO Markdown/Code Pad'),
+                                h('i.fa.fa-file-code-o'),
+                                h('div', [h('h4', 'TODO Markdown/Code Pad')]),
                      //           "TODO Edit Markdown with realtime visual rendering."
                             ]),
                             h('div.bs-callout.cp-callout-slide', [
-                                h('h4', 'TODO Markdown Presentation'),
+                                h('i.fa.fa-file-powerpoint-o'),
+                                h('div', [h('h4', 'TODO Markdown Presentation')]),
                        //         "TODO Make quick presentations with Markdown slides."
                             ]),
                             /*h('div.bs-callout.cp-callout-recent', [

customize.dist/src/less2/pages/page-index.less

@@ -40,43 +40,54 @@
 }
 
 
+@callout-padding: 15px;
+
 .bs-callout {
-    padding: 15px;
+    display: flex;
+    align-items: stretch;
     margin: 25px 0;
-    border: 1px solid #eee;
-    border-left-width: 5px;
-    border-radius: 3px;
     background:rgba(255,255,255,0.6);
     color: black;
     transition: all .1s ease-in-out;
+    box-sizing: border-box;
+    height: 5em;
+    position: relative;
 }
-.bs-callout h4 {
-    margin-top: 0;
-    margin-bottom: 5px;
+h4 {
+    margin: 0;
 }
-.bs-callout p:last-child {
-    margin-bottom: 0;
+.bs-callout div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    position: absolute;
+    left: 5em;
 }
 .bs-callout+.bs-callout {
     margin-top: -5px;
 }
 
 .bs-callout:hover {
-    //background:rgba(255,255,255,0.8);
-    transform: scale(1.05);
+    
+}
+.bs-callout:hover .fa {
+    width: 100%;
 }
 
-.cp-callout-pad { border-left-color: @colortheme_pad-bg; }
-//.cp-callout-pad h4 { color: @colortheme_pad-bg; }
+.bs-callout .fa {
+    display: flex;
+    align-items: center;
+    font-size: 2em;
+    padding-left: 0.5em;
+    width: 2em;
+    transition: width 0.3s;
+}
 
-.cp-callout-code { border-left-color: @colortheme_code-bg; }
-//.cp-callout-code h4 { color: @colortheme_code-bg; }
+.cp-callout-pad .fa { background-color: @colortheme_pad-bg; }
 
-.cp-callout-pad { border-left-color: @colortheme_pad-bg; }
-//.cp-callout-pad h4 { color: @colortheme_pad-bg; }
+.cp-callout-code .fa { background-color: @colortheme_code-bg; }
 
-.cp-callout-slide { border-left-color: @colortheme_slide-bg; }
-//.cp-callout-slide h4 { color: @colortheme_slide-bg; }
+.cp-callout-slide .fa { background-color: @colortheme_slide-bg; }
 
 .cp-callout-recent { border-left-color: @colortheme_drive-bg; }
-//.cp-callout-recent h4 { color: @colortheme_drive-bg; }