dash index item style and layout tweaks

brain/views/partials/front.pug

@@ -15,7 +15,7 @@
     - for ( index; index < pages.length; index++)
       a.post-link(href="/@/dashboard/page/edit/"+pages[index].page.metadata.uuid id=pages[index].page.metadata.uuid style="background:url("+pages[index].page.metadata.feature+") no-repeat center center / cover")
         div
-          span= pages[index].date
+          
           label= pages[index].page.metadata.title
           #options
             - var menu = String(pages[index].page.metadata.menu)
@@ -24,4 +24,7 @@
             span.item-options(data-active=menu) MENU ITEM
             span.item-options(data-active=published)  PUBLISHED
             span.item-options(data-active=featured)  FEATURED
+          span= pages[index].date
+          
+            
 

src/styles/main/_index.styl

@@ -122,50 +122,62 @@
             position relative
 
             label
-              font-size 1.2em
+              font-size 1.4em
               font-weight 700
-              color $primary - 60%
+              color $white
               padding 5px
               vertical-align top
               display inline-block
               word-wrap break-word
               width 100%
               text-align center
+              text-drop-shadow($black, 1, 2px, 2px, 0)
 
             span
               vertical-align top
-              width 100%
+              margin 0 auto
-              display inline-block
+              width 300px
+              display block
               font-family $monoType
               font-size 0.5em
               padding 7px
-              color $primary - 60%
+              color $white
               text-align: center
+              //background $primary - 60%
+              border-radius 0 0 3px 3px 
 
             div
               width 100%
-              background $white
               position absolute
               bottom 0
               border-radius 0 0 3px 3px
+              //background-opacity($black, .35)
+              /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
+              background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
+              background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
+              background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+
               #options
-                display inline-block
+                display block
                 vertical-align: top
-                width: 100%
+                width 300px
                 position relative
                 text-align: center
+                margin 0 auto
+                background none
+                .item-options
+                  border-radius 3px
+                  margin 5px
+                  display inline-block
                 .item-options[data-active='false']
                   width 65px
                   background $primary - 60%
                   color $white
-                  border-radius 3px
+                  
-                  margin 5px
                 .item-options[data-active='true']
                   width 70px
                   background $tertiary + 50%
                   color $primary - 60%
-                  border-radius 3px
-                  margin 5px
 
           a:nth-child(3)
             width 100%