You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Fipamo/src/styles/main/_posts.sass

440 lines
14 KiB
Sass

#post-index
width: 100%
max-width: 900px
margin: 0 auto
#post-index-wrapper
//padding: 0.75rem
overflow: hidden
#post-index-header
margin: 10px 0 0 0
#post-index-header-left
text-transform: capitalize
display: inline-block
width: 50%
color: $white
font-size: 3em
#post-index-header-right
text-align: right
display: inline-block
width: 50%
a
button
color: $white
border-radius: 3px
margin-left: 10px
width: 55px
svg
//@include object-transitions(0.1s)
width: 20px
height: 17px
fill: $white
.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: color.adjust($primary, $lightness: -60%)
label
font-size: 2em
font-weight: 500
padding: 10px
display: inline-block
vertical-align: top
width: 100%
div.page-bg
width: 100%
height: 350px
background-color: $highlight
position: relative
label
font-size: 2em
font-weight: 700
color: $white
padding: 5px
vertical-align: top
display: inline-block
word-wrap: break-word
width: 100%
text-align: center
position: relative
top: 35%
@include text-drop-shadow($black, 1, 2px, 2px, 0)
@include text-drop-shadow($black, 1, 2px, 2px, 0)
#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
#options
width: 100%
bottom: 0
position: absolute
#option-left
display: inline-block
vertical-align: top
width: 50%
position: relative
background: none
button
border-radius: 3px
background: $primary
margin: 0 0 10px 10px
svg
//@include object-transitions(0.1s)
width: 40px
height: 20px
fill: $secondary
.item-options
border-radius: 3px
margin: 5px
display: inline-block
button[data-active='false']
background: $primary
svg
fill: $secondary
button[data-active='true']
background: $tertiary
svg
fill: $primary
#option-right
display: inline-block
width: 50%
text-align: right
span
font-weight: bold
display: block
background: $white
color: $primary
border-radius: 3px
font-size: .6em
text-align: center
position: relative
padding: 5px
float: right
margin: 0 10px 0 0
bottom: -15px
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: 190px
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.9em
font-family: $baseType
font-weight: 600
span
color: $primary
font-size: 0.9em
font-weight: 600
text-transform: uppercase
float: right
#post-title
#post_title
background: $white
font-family: $baseType
width: 97.6%
height: 80px
font-size: 2em
color: $primary
padding: 5px
margin: 0 0 5px 0
#calendar-icon
background: color.adjust($primary, $lightness: -15%)
border-radius: 3px 0 0 3px
display: inline-block
padding: 5.2px
color: $secondary
#layouts
select
background: $primary
color: $secondary
border-radius: 3px
border-color: $primary
margin: 0 0 10px 0
width: 100%
height: 45px
padding: 5px
font-size: 1.5em
#post-meta
#post_tags
background: $white
font-family: $baseType
width: 97.6%
height: 80px
color: $primary
padding: 5px
margin: 0 0 5px 0
#post-options
display: inline-block
vertical-align: top
width: 100%
padding: 0
margin: 0 0 10px 0
button:nth-child(1)
border-radius: 3px 0 0 3px
button:nth-child(4)
border-radius: 0 3px 3px 0
a
button
border-radius: 0 3px 3px 0 !important
button
width: 25%
height: 45px
@include object-transitions(0.3s)
@include object-transitions(0.3s)
margin: 0
border-radius: 0
display: inline-block
vertical-align: top
text-align: center
button[data-active='false']
background: $primary
svg
fill: $secondary
button[data-active='true']
background: $tertiary
svg
fill: $primary
#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: color.adjust($primary, $lightness: -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
caret-color: $highlight
//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-header
#post-index-header-left
font-size: 1.35em
width: 30%
#post-index-header-right
width: 70%
vertical-align: top
#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%