wip

customize.dist/pages.js

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

customize.dist/src/less2/include/infopages.less

@@ -5,8 +5,8 @@
 
     a {
         color: #FFF;
-        opacity: 0.8;
-        transition: opacity 0.2s;
+        //opacity: 0.8;
+        //transition: opacity 0.2s;
     }
     a:hover {
         opacity: 1;

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

@@ -40,43 +40,76 @@
 }
 
 
+@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);
+    //color: white;
     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.57em;
+    width: 2em;
+    transition: width 0.1s;
+}
 
-.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; }
+
+.cp-callout-more {
+    width: auto;
+    display: inline-block;
+    align-content: center;
+    height: 2em;
+    border-radius: 1em;
+    margin-left: auto;
+    margin-right: auto;
+    div {
+        left: auto;
+        margin-right: auto;
+        margin-left: auto;
+        position: relative;
+        .fa {
+            font-size: inherit;
+            padding: 0;
+            width: 1em;
+        }
+    }
+}