|
|
|
@ -132,7 +132,51 @@
|
|
|
|
|
dd { margin: 0; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
iframe.interactive {
|
|
|
|
|
width: 100%;
|
|
|
|
|
// based on https://github.com/mdn/yari/blob/63936bc42c/client/src/document/interactive-examples.scss
|
|
|
|
|
.interactive {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 680px;
|
|
|
|
|
&.is-js-height {
|
|
|
|
|
height: 520px;
|
|
|
|
|
}
|
|
|
|
|
&.is-shorter-height {
|
|
|
|
|
height: 440px;
|
|
|
|
|
}
|
|
|
|
|
&.is-taller-height {
|
|
|
|
|
height: 730px;
|
|
|
|
|
}
|
|
|
|
|
&.is-tabbed-shorter-height {
|
|
|
|
|
height: 490px;
|
|
|
|
|
}
|
|
|
|
|
&.is-tabbed-standard-height {
|
|
|
|
|
height: 550px;
|
|
|
|
|
}
|
|
|
|
|
&.is-tabbed-taller-height {
|
|
|
|
|
height: 780px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media screen and (min-width: 993px) {
|
|
|
|
|
.interactive {
|
|
|
|
|
height: 380px;
|
|
|
|
|
|
|
|
|
|
&.is-js-height {
|
|
|
|
|
height: 450px;
|
|
|
|
|
}
|
|
|
|
|
&.is-shorter-height {
|
|
|
|
|
height: 370px;
|
|
|
|
|
}
|
|
|
|
|
&.is-taller-height {
|
|
|
|
|
height: 660px;
|
|
|
|
|
}
|
|
|
|
|
&.is-tabbed-shorter-height {
|
|
|
|
|
height: 360px;
|
|
|
|
|
}
|
|
|
|
|
&.is-tabbed-standard-height {
|
|
|
|
|
height: 430px;
|
|
|
|
|
}
|
|
|
|
|
&.is-tabbed-taller-height {
|
|
|
|
|
height: 640px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|