colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
85 lines (71 loc) • 2.01 kB
text/stylus
// Media
//
// A media is either an image or a video, displayed with caption and/or credit mention.
// - **Video**: videos are made responsive, on the basis of a 16/9 ratio
// - **Empty media**: if the media (image or video) is not available for any reason, the block display a default N/A image instead
//
// Markup: media.twig
//
// Styleguide: Elements.Media
// Media Video
//
// Videos are made responsive, on the basis of a 16/9 ratio
//
// .media-wrap-video-1_1 - 1/1 video ratio
// .media-wrap-video-4_3 - 4/3 video ratio
// .media-wrap-video-5_3 - 5/3 video ratio
//
// Markup: media-video.twig
//
// Styleguide: Elements.Media.Video
// Media Empty
//
// If the media (image or video) is not available for any reason, the block display a default N/A image instead
//
// Markup: media-empty.twig
//
// Styleguide: Elements.Media.Empty
/:root
/[data-theme=light]
/[data-theme] [data-theme=light]
--media-bg-color lighten($color-theme-default, 80%)
/[data-theme=dark]
/[data-theme] [data-theme=dark]
--media-bg-color $color-black
.media
position relative
iframe
display block
width 100%
img
display block
width 100%
height auto
background-color var(--media-bg-color)
background-image svgImport($mediaPlaceholder, $mediaPlaceholder-style)
background-size 65% 65%
background-position 50%
background-repeat no-repeat
&-caption
figcaption
_pt(.5)
font-size .85em
color var(--color-primary)
line-height 1.2
&-wrap
position relative
&-video
width 100%
height 0
padding-bottom 56.25% // 16/9
> iframe
position absolute
top 0
left 0
height 100%
&-1_1
padding-bottom 100% // 1/1
&-4_3
padding-bottom 75% // 4/3
&-5_3
padding-bottom 60% // 5/3