redzuurdesem/themes/desem-swift-theme/assets/sass/_posts.sass

290 lines
5.0 KiB
Sass

.post_metadata
padding-bottom: 2em
h1, h3
text-align: center !important
h3
color: gray
font-size: 1.2rem
width: 100%
svg
width: 1rem
height: 1rem
fill: var(--theme)
hr
width: 100%
background-color: var(--theme)
margin: 1em 0
.post
@extend %narrow
padding: 1rem 1.5rem
margin-top: 1.5rem
h1,h2,h3,h4,h5,h6
margin: 1rem auto
text-align: left
text-transform: initial
padding: 0.25rem 0 0 0
p
padding-bottom: 0.5rem
padding-top: 0.5rem
font-size: 1.05rem
&s
display: flex
justify-content: space-between
flex-flow: row wrap
width: 100%
align-items: stretch
&s:not(.aside)
padding: 0 30px
&_content
table
width: 100%
padding-top: 1rem
padding-bottom: 1rem
th
border-bottom: 1px solid var(--theme)
tbody tr:nth-child(odd)
background-color: var(--bg)
tbody tr:nth-child(even)
background-color: var(--accent)
td
padding-left: 0.4em
padding-right: 0.4em
img
border-radius: 10px
h4
margin: 5px 0
text-align: left
p
line-height: 1.65
&:first-child
margin-top: 0
padding-top: 0
a:not(.link)
border-bottom: 2px solid var(--theme)
&:hover
opacity: 0.7
ol, ul
padding: 0.5rem 0 0.5rem 1.2rem
// list-style-type: initial
li
padding: 0.33rem 0
&_header
background-size: cover
background-repeat: no-repeat
background-position: center
background-attachment: fixed
position: relative
height: 48vh
min-height: 360px
margin-top: 60px
padding: 30px
&_tags
position: absolute
bottom: 0px
&_copy
opacity: 0
transition: opacity 0.3s ease-out
&_item
@include shadow
margin: 1.25rem 0
border-radius: 10px
overflow: hidden
width: 100%
@media screen and (min-width:667px)
width: 47%
&_item:hover &_copy
opacity: 1
&_link
padding: 2.5px 0
font-size: 1.25em
margin: 2.5px 0
text-align: left
&_meta
overflow: hidden
opacity: 0.8
font-size: 0.84rem
font-weight: 500
display: inline-grid
grid-template-columns: auto 1fr
background-color: var(--light)
padding: 0
align-items: center
border-radius: 0.3rem
color: var(--dark)
text-transform: capitalize
a
&:hover
color: var(--theme)
text-decoration: underline
opacity: 0.9
&_extra
display: flex
justify-content: flex-end
&_tag
font-size: 0.75rem !important
font-weight: 500
background: var(--theme)
color: var(--light)
padding: 0.25rem 0.67rem !important
margin-right: 0.25rem
text-transform: uppercase
display: inline-flex
border-radius: 5px
&_title
text-align: center
font-size: 2.5rem
font-family: 'Signika', sans-serif
color: var(--title)
@extend %narrow
&_author
padding: 0.2rem 0.75rem
a
color: var(--theme)
text-decoration: underline
&_time
background: var(--theme)
display: inline-grid
padding: 0.2rem 0.75rem
color: var(--light)
&_card
display: block
position: relative
background-color: var(--dark)
border-radius: 0.5rem 0.5rem 0 0
background-size: cover
background-position: center
overflow: hidden
height: 10rem
&::after
content: ''
position: absolute
left: 0
right: 0
bottom: 0
top: 0
z-index: 1
&:hover::after
background-color:rgba(0,0,0,0.3)
&_thumbnail
width: 100%
margin: 0
.pager
display: flex
list-style: none
justify-content: center
align-content: center
margin: 30px auto 0 auto
padding: 0 1.5rem
overflow: scroll
&, &_link
justify-content: center
align-items: center
&_link
display: flex
background-color: var(--theme)
color: var(--light)
&:hover
opacity: 0.5
&_item, &_link
height: 36px
width: 36px
border-radius: 50%
&_item
margin-left: 5px
margin-right: 5px
margin-bottom: 30px
// overflow: hidden
&:first-child, &:last-child
display: none
&.active, &.disabled
opacity: 0.5
#fbwidget
margin: 0
.fbpost_item
.excerpt
margin-top: 0.5em
svg
float: right
position: absolute
top: 0
right: 10px
width: 32px
height: 32px
&_badge
float: left
width: 40px
margin: 0
&_link
margin-left: 50px
margin-bottom: 0
font-size: 1rem
&_date
margin-left: 50px
margin-top: 0
padding: 0
font-size: 0.8rem
color: darkgrey
p
font-size: 0.9rem
img
margin-bottom: 0.3rem
cursor: pointer
a
border-bottom: 1px solid var(--theme)
.excerpt
padding: 0 10px 1.5rem 10px
position: relative
z-index: 1
&_meta
display: flex
justify-content: space-between
align-items: center
transform: translateY(-2.5rem)
position: relative
z-index: 5