responsive for posts index plugged in

themes/dash/assets/css/dash.css

@@ -2120,6 +2120,7 @@ select {
 }
 #post-index #post-index-wrapper {
   padding: 0.75rem;
+  overflow: hidden;
 }
 #post-index #post-index-wrapper #post-index-menu {
   color: #f2f1ef;
@@ -2152,15 +2153,16 @@ select {
   text-decoration: none;
   margin: 0 0 20px 0;
   border-radius: 3px;
+  overflow: hidden;
   color: #161d23;
 }
 #post-index #post-index-wrapper #posts-list a.post-link label {
-  font-size: 1.3em;
+  font-size: 2em;
   font-weight: 500;
   padding: 10px;
   display: inline-block;
   vertical-align: top;
-  width: 45%;
+  width: 100%;
 }
 #post-index #post-index-wrapper #posts-list a.post-link span {
   display: inline-block;
@@ -2168,8 +2170,7 @@ select {
   font-size: 0.8em;
   font-family: 'Apercu-Mono';
   width: 50%;
-  text-align: right;
-  padding: 10px;
+  padding: 0 0 0 10px;
 }
 #post-index #post-index-wrapper #posts-list a.post-link div.post-bg {
   width: 100%;
@@ -2177,7 +2178,7 @@ select {
   background-color: #fc6399;
 }
 #post-index #post-index-wrapper #posts-list a.post-link p {
-  padding: 10px;
+  padding: 5px 10px 5px 10px;
   font-size: 1.2em;
   font-weight: 400;
 }
@@ -2609,6 +2610,15 @@ select {
     padding: 8px;
   }
 }
+@media only screen and (max-width: 480px) {
+  #post-index #post-index-wrapper #post-index-menu a {
+    font-size: 0.95em;
+  }
+  #post-index #post-index-wrapper #post-index-menu a label {
+    display: none;
+    visibility: hidden;
+  }
+}
 @-moz-keyframes slide-up {
   0% {
     transform: translate(-50%, 100%);

themes/dash/posts-index.pug

@@ -18,14 +18,16 @@ block main-content
                 - else
                     a(href="/@/dashboard/posts/list/deleted")= "Deleted ("+page_info.deleted+")"
 
-                a.add-new-post(href="/@/dashboard/posts/add/new") + Create New Post
+                a.add-new-post(href="/@/dashboard/posts/add/new") + 
+                    label Create New Post
             #posts-list
                 - var index = 0;			
                 - for ( index; index < items.length; index++)
                     a.post-link(href="/@/dashboard/posts/edit/"+items[index].post.uuid id=items[index].post.uuid)
+                        
+                        div.post-bg(style="background: #fc6399 url("+items[index].post.feature.substr(8)+") no-repeat center center / cover")
                         label= items[index].post.title
                         span= items[index].post.created
-                        div.post-bg(style="background: #fc6399 url("+items[index].post.feature.substr(8)+") no-repeat center center / cover")
                         p= items[index].post.plaintext.substr(0, 200)+"..."
 
                 - var next = parseInt(page_index, 10) + 1

themes/dash/src/styles/main/_posts.styl

@@ -5,6 +5,7 @@
 
     #post-index-wrapper
         padding 0.75rem
+        overflow hidden
 
         #post-index-menu
             color $white
@@ -37,15 +38,16 @@
                 text-decoration none
                 margin 0 0 20px 0
                 border-radius 3px
+                overflow hidden
                 color $primary - 60%
 
                 label
-                    font-size 1.3em
+                    font-size 2em
                     font-weight 500
                     padding 10px
                     display inline-block
                     vertical-align top
-                    width 45%
+                    width 100%
 
                 span
                     display inline-block
@@ -53,8 +55,7 @@
                     font-size 0.8em
                     font-family 'Apercu-Mono'
                     width 50%
-                    text-align right
-                    padding 10px
+                    padding 0 0 0 10px
 
                 div.post-bg
                     width 100%
@@ -62,7 +63,7 @@
                     background-color $highlight
 
                 p
-                    padding 10px
+                    padding 5px 10px 5px 10px
                     font-size 1.2em
                     font-weight 400
 
@@ -442,7 +443,11 @@
     top 50%
     left 50%
 
-/* Responsive overrides */
+/**
+-------------------------------
+-- Responsive
+-------------------------------
+* */
 @media (max-width: 480px), (max-height: 480px)
     .dp-modal .dp
         font-size 0.9em
@@ -458,3 +463,14 @@
 
     100%
         transform translate(-50%, -50%)
+
+@media only screen and (max-width: 480px)
+    #post-index
+        #post-index-wrapper
+            #post-index-menu
+                a
+                    font-size 0.95em
+
+                    label
+                        display none
+                        visibility hidden