cremeaux/assets/styles/posts.sass

77 lines
1.5 KiB
Sass

$size-la-une: 220px
$size-news: 100px
.post
display: flex
flex-wrap: nowrap
margin-bottom: 2rem
@media screen and (max-width: $size-sm)
flex-direction: column
justify-content: center
align-items: center
.picture
width: $size-news
height: $size-news
background: $orange
flex-shrink: 0
@media screen and (max-width: $size-sm)
margin-bottom: 1rem
a
width: 100%
height: 100%
display: block
&.big
.picture
width: $size-la-une
height: $size-la-une
@media screen and (max-width: $size-sm)
width: 100%
overflow: hidden
margin: 0
img
width: 100%
.details
padding: 20px
background: $grey
height: $size-la-une
overflow: hidden
text-overflow: ellipsis
@media screen and (max-width: $size-sm)
height: inherit
.details
padding: 0 1rem
height: $size-news
max-width: 100%
overflow: hidden
@media screen and (max-width: $size-sm)
height: inherit
text-align: center
span
font-size: .8rem
display: block
h2
margin: .6rem 0
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
h3
margin: .3rem 0
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
.text
font-size: .9rem
overflow: hidden
text-overflow: ellipsis
width: 100%
padding-top: 6px
p
margin: 0
display: inline