#post-index width 100% max-width 900px margin 0 auto #post-index-wrapper padding 0.75rem overflow hidden #post-index-menu color $white a text-decoration-color $highlight a.add-new-post display inline-block background $highlight border-radius 3px padding 3px color $white text-align center margin-bottom 10px float right .current-filter color $highlight text-decoration-color $secondary #posts-list margin 20px 0 0 0 a.page-link background $white display inline-block vertical-align top width 100% text-decoration none margin 0 0 20px 0 border-radius 3px overflow hidden color $primary - 60% label font-size 2em font-weight 500 padding 10px display inline-block vertical-align top width 100% span display inline-block vertical-align top font-size 0.8em font-family $monoType width 50% padding 0 0 0 10px div.page-bg width 100% height 350px background-color $highlight position relative #meta width 100% background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); border-radius 3px margin auto bottom 0 position absolute padding 0 0 20px 0 span color $white text-align center margin 0 auto display block label font-size 1.4em font-weight 700 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) #options margin 0 auto width: 275px .meta-options border-radius 3px margin 5px display inline-block text-align: center padding 2px .meta-options[data-active='false'] width 70px background $primary - 60% color $white .meta-options[data-active='true'] width 75px background $tertiary + 50% color $primary - 60% p padding 5px 10px 5px 10px font-size 1.2em font-weight 400 .paginate width 260px display block margin 0 auto a display inline-block vertical-align: top span.count text-align center padding 5px margin-top -2px display inline-block width 200px font-size: 1.5em color $tertiary #post-edit-index width 100% overflow hidden #post-edit-index-wrapper width 100% #post-header // width 100% background $highlight #post-header-wrapper max-width 900px margin 0 auto padding 0.75rem label color: $white font-size: 0.8em font-family $monoType font-weight 600 span color color $primary - 60% font-size 1.5em #post-title #post_title background $highlight + 10% font-family $baseType width 97.6% height 80px font-size 2em color $primary - 60% padding 5px margin 0 0 5px 0 #calendar-icon background $primary - 15% border-radius 3px 0 0 3px display inline-block padding 5.2px color $secondary #post-meta #post_tags background $highlight + 10% font-family $baseType width 97.6% height 80px color $primary - 60% padding 5px margin 0 0 5px 0 #post-options display inline-block vertical-align top width 100% padding 0 button:nth-child(1) border-radius 3px 0 0 3px button:nth-child(4) border-radius 0 3px 3px 0 button width 33.3% height 39px object-transitions(0.3s) margin 0 border-radius 0 display inline-block vertical-align top text-align center button[data-active='false'] background $primary - 60% svg fill $white button[data-active='true'] background $tertiary + 50% svg fill $primary - 60% #featured-image-upload, #post-image-upload display none #post-feature width 100% #featured-image-drop display flex align-items center justify-content center width 100% min-height 200px background $primary - 50% color $primary vertical-align middle font-family $monoType label cursor pointer img width 100% margin 0 padding 0 #featured-new-image-btn position absolute margin 20px #new-feature-upload padding-top 4px background $white svg fill $highlight #edit-post width 100% max-width 880px margin 0 auto #edit-post-wrapper //width 98.7% max-width 900px border-radius 5px //background $primary - 10% margin: 40px 0 40px 0 overflow hidden pre margin 0 code font-family $monoType padding 5px border-radius 5px line-height 1.6em font-size 1.25em color $editorPrimary word-wrap normal white-space pre-wrap line-break normal -webkit-line-break normal -o-line-break normal -moz-line-break normal display inline-block width 100% max-width 900px min-height 200px /** ------------------------------- -- Responsive ------------------------------- * */ @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-meta #edit-control max-width 100% 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 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%