ad622c4d99
Fallback cascade: original content, thumbnail, transparency grid Implementation is very ugly but handles all cases nicely.
44 lines
1.6 KiB
Stylus
44 lines
1.6 KiB
Stylus
@import colors
|
|
|
|
.post-container
|
|
.post-content
|
|
&.transparency-grid, &.post-error
|
|
background-image:
|
|
linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
|
|
linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
|
|
linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
|
|
linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
|
|
background-position: 0 0, 0 10px, 10px -10px, -10px 0px
|
|
background-repeat: repeat
|
|
background-size: 20px 20px
|
|
|
|
text-align: center
|
|
.post-content
|
|
text-align: left
|
|
margin: 0 auto
|
|
position: relative
|
|
|
|
.resize-listener
|
|
background-repeat: no-repeat
|
|
background-size: cover
|
|
position: absolute
|
|
left: 0
|
|
right: 0
|
|
top: 0
|
|
bottom: 0
|
|
width: 100%
|
|
height: 100%
|
|
|
|
img
|
|
image-orientation: from-image
|
|
|
|
.darktheme .post-container .post-content
|
|
&.transparency-grid, &.post-error
|
|
background-image:
|
|
linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
|
|
linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
|
|
linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
|
|
linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
|
|
background-position: 0 0, 0 10px, 10px -10px, -10px 0px
|
|
background-repeat: repeat
|
|
background-size: 20px 20px
|