Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
66 lines (60 sloc) 1.13 KB
// Media container
//
// Responsiviness with padding hack.
// SCSS Map
$media-aspect-ratios: (
4 : 3,
3 : 2,
16 : 9,
2 : 1
);
@each $aspect-1, $aspect-2 in $media-aspect-ratios {
// Landscape mode
.ar-#{$aspect-1}-#{$aspect-2} {
--ar-x: #{$aspect-1};
--ar-y: #{$aspect-2};
}
// Portrait mode
.ar-#{$aspect-2}-#{$aspect-1} {
--ar-x: #{$aspect-2};
--ar-y: #{$aspect-1};
}
}
.ar-1-1 {
--ar-x: 1;
--ar-y: 1;
}
// Aspect-ratio boxes
[class*="ar-"] {
width: var(--media-width, 100%);
display: block;
position: relative;
overflow-y: hidden;
// Padding hack for predefined size
&:before {
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: calc( var(--ar-y, 1) / var(--ar-x, 1) * 100% );
}
// Clearfix
&:after {
content: "";
display: table;
clear: both;
}
// img, video, everything
> :first-child:not(.mini-info) {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
> img:not(.cover) {
height: auto !important;
}
iframe, embed, object, video { border: 0; } // Opinionated reset
}