fipamo/src/styles/main/_posts.styl

388 lines
12 KiB
Stylus

#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%