responsive style for post editor, navigation, and settingsk

themes/dash/assets/css/dash.css

@@ -1884,7 +1884,7 @@ svg.icons {
   display: none;
 }
 #settings-index {
-  width: 100%;
+  width: 94%;
   max-width: 900px;
   margin: 0 auto;
 }
@@ -2047,6 +2047,30 @@ svg.icons {
   font-size: 0.8em;
   margin: 0 0 0 10px;
 }
+@media only screen and (max-width: 375px) {
+  #nav-index #nav-index-wrapper #nav-pages .nav-item {
+    width: 94.5%;
+    font-size: 1em;
+  }
+  #nav-index #nav-index-wrapper #nav-pages .nav-item label {
+    width: 47%;
+    vertical-align: top;
+    margin-top: 0px;
+    line-height: 1em;
+  }
+}
+@media only screen and (max-width: 320px) {
+  #nav-index #nav-index-wrapper #nav-pages .nav-item {
+    width: 94.5%;
+    font-size: 1em;
+  }
+  #nav-index #nav-index-wrapper #nav-pages .nav-item label {
+    width: 37%;
+    vertical-align: top;
+    margin-top: 0px;
+    line-height: 1em;
+  }
+}
 /**
 -------------------------------
 -- Forms
@@ -2184,6 +2208,7 @@ select {
 }
 #post-edit-index {
   width: 100%;
+  overflow: hidden;
 }
 #post-edit-index #post-edit-index-wrapper {
   width: 100%;
@@ -2206,20 +2231,19 @@ select {
 #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
   background: #32414e;
   border-radius: 0 3px 3px 0;
-  width: 105px;
+  width: 39.5%;
   font-family: 'Apercu';
   color: #fc6399;
   height: 30px;
   vertical-align: top;
   text-align: center;
 }
-#post-edit-index #post-edit-index-wrapper #post-header #post-title label {
+#post-edit-index #post-edit-index-wrapper #post-header #post-title #calendar-icon {
   background: #2f3d4a;
   border-radius: 3px 0 0 3px;
   display: inline-block;
-  padding: 5px;
+  padding: 2.9px;
   color: #b2cce5;
-  line-height: 30px;
 }
 #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options {
   display: inline-block;
@@ -2333,6 +2357,84 @@ select {
   width: 100%;
   max-width: 900px;
 }
+@media only screen and (max-width: 800px) {
+  #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
+    width: 37.6%;
+  }
+}
+@media only screen and (max-width: 768px) {
+  #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
+    width: 43.1%;
+  }
+  #post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control {
+    max-width: 100%;
+  }
+  #post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control button {
+    width: 9.91%;
+  }
+}
+@media only screen and (max-width: 640px) {
+  #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
+    width: 42%;
+  }
+}
+@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;
+  }
+  #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options {
+    margin: 5px 0 0 0;
+    width: 100%;
+    padding: 0;
+  }
+  #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
+    width: 89.2%;
+  }
+  #post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control button {
+    width: 9.91%;
+  }
+}
+@media only screen and (max-width: 320px) {
+  #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;
+  }
+  #post-edit-index #post-edit-index-wrapper #post-header #post-title #post_title {
+    width: 96.4%;
+  }
+  #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options {
+    margin: 5px 0 0 0;
+    width: 100%;
+    padding: 0;
+  }
+  #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
+    width: 83.1%;
+  }
+  #post-edit-index #post-edit-index-wrapper #post-header #post-meta #post_tags {
+    width: 96.4%;
+  }
+  #post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control .content-editor-btn-icon svg.icons {
+    width: 20px;
+  }
+  #post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control .post-sumbit-btn svg.icons {
+    width: 20px;
+  }
+  #post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control button {
+    width: 10%;
+  }
+}
+/**
+-------------------------------
+-- Editor
+-------------------------------
+* */
 .dp-modal {
   position: fixed;
   top: 0;
@@ -2378,7 +2480,7 @@ select {
   position: absolute;
   font-size: 0.8em;
   width: 400px;
-  max-width: 100vw;
+  max-width: 90vw;
 }
 .dp-permanent {
   position: relative;
@@ -2576,14 +2678,14 @@ select {
 .dp-month:focus,
 .dp-year:focus {
   outline: none;
-  background: #bad1e8;
+  background: #212b34;
   color: #f2f1ef;
 }
 .dp-selected:hover,
 .dp-selected:focus,
 .dp-selected {
-  background: #b2cce5;
+  background: #fc6399;
-  color: #f2f1ef;
+  color: #161d23;
 }
 .dp-day-disabled {
   background: transparent;
@@ -2610,15 +2712,6 @@ 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%);
@@ -2651,11 +2744,6 @@ select {
     transform: translate(-50%, -50%);
   }
 }
-/**
--------------------------------
--- Editor
--------------------------------
-* */
 #edit-control {
   top: 1px;
   border-radius: 3px;

themes/dash/assets/js/dash.min.js

@@ -9020,7 +9020,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "56361" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "55275" + '/');
 
   ws.onmessage = function (event) {
     var data = JSON.parse(event.data);

themes/dash/post-edit.pug

@@ -39,7 +39,9 @@ block main-content
                 #post-title.column
                     textarea(id="post_title" type='text', name='post_title' class='post-edit', placeholder='title', required, autofocus)
                         =post_title
-                    label Date Posted
+                    #calendar-icon
+                        svg(viewBox="0 0 20 20" class="icons")
+                            use(xlink:href='/dash/assets/images/sprite.svg#entypo-calendar')
                     input(id="post-date" type="text" value=post_date)
                     #post-options
                         button#option-page.option-inactive.post-option-btn(data-active= status[0])

themes/dash/src/styles/dash.styl

@@ -70,5 +70,6 @@
 -- Editor
 -------------------------------
 * */
+@import 'main/_calendar'
 @import 'main/_editor'
 @import 'main/_editor-highlight'

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

@@ -0,0 +1,245 @@
+// TINY DATE
+.dp-modal
+    position fixed
+    top 0
+    left 0
+    right 0
+    bottom 0
+    // background rgba(255, 255, 255, 0.75)
+    background-opacity($primary - 70%, 0.75)
+    z-index 2000
+
+.dp
+    position relative
+    background $primary // #FFF
+    box-shadow 2px 2px 16px rgba(0, 0, 0, 0.25)
+    line-height 1.4
+    border-radius 4px
+    max-height 400px
+    z-index 5000
+    padding-top 6px
+    overflow hidden
+    -webkit-tap-highlight-color transparent
+
+.dp:before
+    content ' '
+    height 6px
+    position absolute
+    top 0
+    left 0
+    right 0
+    background $highlight
+    // background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%)
+
+.dp-permanent .dp
+    padding-top 0
+    border 1px solid #EEE
+    box-shadow none
+
+.dp-permanent .dp:before
+    display none
+
+.dp-cal
+    min-height 300px
+
+.dp-below
+    position absolute
+    font-size 0.8em
+    width 400px
+    max-width 90vw
+
+.dp-permanent
+    position relative
+    font-size 0.8em
+    width 400px
+    max-width 100vw
+
+.dp-permanent .dp
+    z-index 0
+
+.dp-modal .dp
+    position absolute
+    top 50%
+    left 50%
+    max-width 600px
+    width calc(100% - 4em)
+    transform translate(-50%, -50%)
+    animation slide-up 0.3s forwards
+
+.dp-months
+    padding 24px
+
+.dp-years
+    box-sizing border-box
+    max-height 400px
+    padding 8px 0
+    overflow auto !important /* HACK for Chrome on Android */
+
+.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year
+    box-sizing border-box
+    text-align center
+    text-decoration none
+    position relative
+    color $white
+    border-radius 2px
+    border 0
+    background transparent
+
+.dp-cal-header
+    position relative
+    text-align center
+    padding-bottom 16px
+    background $primary - 10%
+
+.dp-next, .dp-prev
+    position absolute
+    width 30px
+    height 30px
+    overflow hidden
+    top 14px
+    color $primary - 50%
+    border-radius 2px
+    border 0
+    background transparent
+
+.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover
+    outline none
+    color inherit
+
+.dp-prev
+    left 24px
+
+.dp-next
+    right 24px
+
+.dp-prev:before, .dp-next:before
+    content ''
+    border 2px solid
+    width 10px
+    height 10px
+    display inline-block
+    transform rotate(-45deg)
+    transition border-color 0.2s
+    margin 9px 0 40px 4px
+
+.dp-prev:before
+    border-right 0
+    border-bottom 0
+
+.dp-next:before
+    border-left 0
+    border-top 0
+    margin-left 0
+    margin-right 4px
+
+.dp-cal-month, .dp-cal-year
+    display inline-block
+    font-size 1.4em
+    padding 16px 8px 8px
+    outline none
+
+.dp-cal-footer
+    text-align center
+    background $primary - 10%
+
+.dp-day-today:after
+    content ''
+    height 0
+    width 0
+    border 7px solid $highlight
+    border-bottom-color transparent
+    border-left-color transparent
+    position absolute
+    top 0
+    right 0
+
+.dp-close, .dp-clear, .dp-today
+    box-sizing border-box
+    display inline-block
+    width 33%
+    padding 8px
+    text-decoration none
+    color $primary - 50%
+    border 0
+    background transparent
+
+.dp-permanent .dp-close, .dp-permanent .dp-clear
+    display none
+
+.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active
+    background $highlight
+    color $white
+
+@media screen and (min-device-width: 1200px)
+    .dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus
+        background $highlight
+        color $white
+
+.dp-col-header, .dp-day
+    width 14.28571429%
+    display inline-block
+    padding 8px
+    text-align center
+
+.dp-col-header
+    color #AAA
+    text-transform uppercase
+    font-weight 300
+    font-size 0.8em
+    padding 8px 0
+
+.dp-month
+    width 33%
+    display inline-block
+    padding 8px
+
+.dp-year
+    display block
+    padding 8px 40px
+    width 100%
+
+.dp-edge-day
+    color #AAA
+
+.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus
+    outline none
+    background $primary - 40%
+    color $white
+
+.dp-selected:hover, .dp-selected:focus, .dp-selected
+    background $highlight
+    color $primary - 60%
+
+.dp-day-disabled
+    background transparent
+    color #DDD
+
+.dp-day-disabled:focus, .dp-day-disabled:hover
+    background #DDD
+
+.dp-focuser
+    position absolute
+    z-index 0
+    top 50%
+    left 50%
+
+/**
+-------------------------------
+-- Responsive
+-------------------------------
+* */
+@media (max-width: 480px), (max-height: 480px)
+    .dp-modal .dp
+        font-size 0.9em
+        width auto
+        width 100%
+
+    .dp-day-of-week, .dp-day
+        padding 8px
+
+@keyframes slide-up
+    0%
+        transform translate(-50%, 100%)
+
+    100%
+        transform translate(-50%, -50%)

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

@@ -32,3 +32,31 @@
                 button
                     font-size 0.8em
                     margin 0 0 0 10px
+
+@media only screen and (max-width: 375px)
+    #nav-index
+        #nav-index-wrapper
+            #nav-pages
+                .nav-item
+                    width 94.5%
+                    font-size 1em
+
+                    label
+                        width 47%
+                        vertical-align top
+                        margin-top 0px
+                        line-height 1em
+
+@media only screen and (max-width: 320px)
+    #nav-index
+        #nav-index-wrapper
+            #nav-pages
+                .nav-item
+                    width 94.5%
+                    font-size 1em
+
+                    label
+                        width 37%
+                        vertical-align top
+                        margin-top 0px
+                        line-height 1em

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

@@ -69,6 +69,7 @@
 
 #post-edit-index
     width 100%
+    overflow hidden
 
     #post-edit-index-wrapper
         width 100%
@@ -93,20 +94,19 @@
                 #post-date
                     background $primary - 10%
                     border-radius 0 3px 3px 0
-                    width 105px
+                    width 39.5%
                     font-family 'Apercu'
                     color $highlight
                     height 30px
                     vertical-align top
                     text-align center
 
-                label
+                #calendar-icon
                     background $primary - 15%
                     border-radius 3px 0 0 3px
                     display inline-block
-                    padding 5px
+                    padding 2.9px
                     color $secondary
-                    line-height 30px
 
                 #post-options
                     display inline-block
@@ -218,251 +218,41 @@
                         width 100%
                         max-width 900px
 
-// TINY DATE
-.dp-modal
-    position fixed
-    top 0
-    left 0
-    right 0
-    bottom 0
-    // background rgba(255, 255, 255, 0.75)
-    background-opacity($primary - 70%, 0.75)
-    z-index 2000
-
-.dp
-    position relative
-    background $primary // #FFF
-    box-shadow 2px 2px 16px rgba(0, 0, 0, 0.25)
-    line-height 1.4
-    border-radius 4px
-    max-height 400px
-    z-index 5000
-    padding-top 6px
-    overflow hidden
-    -webkit-tap-highlight-color transparent
-
-.dp:before
-    content ' '
-    height 6px
-    position absolute
-    top 0
-    left 0
-    right 0
-    background $highlight
-    // background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%)
-
-.dp-permanent .dp
-    padding-top 0
-    border 1px solid #EEE
-    box-shadow none
-
-.dp-permanent .dp:before
-    display none
-
-.dp-cal
-    min-height 300px
-
-.dp-below
-    position absolute
-    font-size 0.8em
-    width 400px
-    max-width 100vw
-
-.dp-permanent
-    position relative
-    font-size 0.8em
-    width 400px
-    max-width 100vw
-
-.dp-permanent .dp
-    z-index 0
-
-.dp-modal .dp
-    position absolute
-    top 50%
-    left 50%
-    max-width 600px
-    width calc(100% - 4em)
-    transform translate(-50%, -50%)
-    animation slide-up 0.3s forwards
-
-.dp-months
-    padding 24px
-
-.dp-years
-    box-sizing border-box
-    max-height 400px
-    padding 8px 0
-    overflow auto !important /* HACK for Chrome on Android */
-
-.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year
-    box-sizing border-box
-    text-align center
-    text-decoration none
-    position relative
-    color $white
-    border-radius 2px
-    border 0
-    background transparent
-
-.dp-cal-header
-    position relative
-    text-align center
-    padding-bottom 16px
-    background $primary - 10%
-
-.dp-next, .dp-prev
-    position absolute
-    width 30px
-    height 30px
-    overflow hidden
-    top 14px
-    color $primary - 50%
-    border-radius 2px
-    border 0
-    background transparent
-
-.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover
-    outline none
-    color inherit
-
-.dp-prev
-    left 24px
-
-.dp-next
-    right 24px
-
-.dp-prev:before, .dp-next:before
-    content ''
-    border 2px solid
-    width 10px
-    height 10px
-    display inline-block
-    transform rotate(-45deg)
-    transition border-color 0.2s
-    margin 9px 0 40px 4px
-
-.dp-prev:before
-    border-right 0
-    border-bottom 0
-
-.dp-next:before
-    border-left 0
-    border-top 0
-    margin-left 0
-    margin-right 4px
-
-.dp-cal-month, .dp-cal-year
-    display inline-block
-    font-size 1.4em
-    padding 16px 8px 8px
-    outline none
-
-.dp-cal-footer
-    text-align center
-    background $primary - 10%
-
-.dp-day-today:after
-    content ''
-    height 0
-    width 0
-    border 7px solid $highlight
-    border-bottom-color transparent
-    border-left-color transparent
-    position absolute
-    top 0
-    right 0
-
-.dp-close, .dp-clear, .dp-today
-    box-sizing border-box
-    display inline-block
-    width 33%
-    padding 8px
-    text-decoration none
-    color $primary - 50%
-    border 0
-    background transparent
-
-.dp-permanent .dp-close, .dp-permanent .dp-clear
-    display none
-
-.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active
-    background $highlight
-    color $white
-
-@media screen and (min-device-width: 1200px)
-    .dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus
-        background $highlight
-        color $white
-
-.dp-col-header, .dp-day
-    width 14.28571429%
-    display inline-block
-    padding 8px
-    text-align center
-
-.dp-col-header
-    color #AAA
-    text-transform uppercase
-    font-weight 300
-    font-size 0.8em
-    padding 8px 0
-
-.dp-month
-    width 33%
-    display inline-block
-    padding 8px
-
-.dp-year
-    display block
-    padding 8px 40px
-    width 100%
-
-.dp-edge-day
-    color #AAA
-
-.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus
-    outline none
-    background $secondary + 10%
-    color $white
-
-.dp-selected:hover, .dp-selected:focus, .dp-selected
-    background $secondary
-    color $white
-
-.dp-day-disabled
-    background transparent
-    color #DDD
-
-.dp-day-disabled:focus, .dp-day-disabled:hover
-    background #DDD
-
-.dp-focuser
-    position absolute
-    z-index 0
-    top 50%
-    left 50%
-
 /**
 -------------------------------
 -- Responsive
 -------------------------------
 * */
-@media (max-width: 480px), (max-height: 480px)
+@media only screen and (max-width: 800px)
-    .dp-modal .dp
+    #post-edit-index
-        font-size 0.9em
+        #post-edit-index-wrapper
-        width auto
+            #post-header
-        width 100%
+                #post-title
+                    #post-date
+                        width 37.6%
 
-    .dp-day-of-week, .dp-day
+@media only screen and (max-width: 768px)
-        padding 8px
+    #post-edit-index
+        #post-edit-index-wrapper
+            #post-header
+                #post-title
+                    #post-date
+                        width 43.1%
 
-@keyframes slide-up
+                #post-meta
-    0%
+                    #edit-control
-        transform translate(-50%, 100%)
+                        max-width 100%
 
-    100%
+                        button
-        transform translate(-50%, -50%)
+                            width 9.91%
+
+@media only screen and (max-width: 640px)
+    #post-edit-index
+        #post-edit-index-wrapper
+            #post-header
+                #post-title
+                    #post-date
+                        width 42%
 
 @media only screen and (max-width: 480px)
     #post-index
@@ -474,3 +264,62 @@
                     label
                         display none
                         visibility hidden
+
+    #post-edit-index
+        #post-edit-index-wrapper
+            #post-header
+                #post-title
+                    #post-options
+                        margin 5px 0 0 0
+                        width 100%
+                        padding 0
+
+                    #post-date
+                        width 89.2%
+
+                #post-meta
+                    #edit-control
+                        button
+                            width 9.91%
+
+@media only screen and (max-width: 320px)
+    #post-index
+        #post-index-wrapper
+            #post-index-menu
+                a
+                    font-size 0.95em
+
+                    label
+                        display none
+                        visibility hidden
+
+    #post-edit-index
+        #post-edit-index-wrapper
+            #post-header
+                #post-title
+                    #post_title
+                        width 96.4%
+
+                    #post-options
+                        margin 5px 0 0 0
+                        width 100%
+                        padding 0
+
+                    #post-date
+                        width 83.1%
+
+                #post-meta
+                    #post_tags
+                        width 96.4%
+
+                    #edit-control
+                        .content-editor-btn-icon
+                            svg.icons
+                                width 20px
+
+                        .post-sumbit-btn
+                            svg.icons
+                                width 20px
+
+                        button
+                            width 10%

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

@@ -21,7 +21,7 @@
         display none
 
 #settings-index
-    width 100%
+    width 94%
     max-width 900px
     margin 0 auto