1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00

docs: use grid for videos in smaller formats.

This commit is contained in:
Thomas Heartman 2022-01-26 11:23:28 +01:00
parent 132cba741c
commit 2a6504e581

View File

@ -76,42 +76,46 @@ html[data-theme='dark'] .header-github-link:before {
/* } */
/* } */
.unleash-video-container {
display: grid;
--gap: .5em;
--gap: 0.5em;
--border-radius: var(--ifm-alert-border-radius);
gap: var(--gap);
margin-bottom: 1em;
}
@media screen and (min-width: 450px) {
.unleash-video-container {
grid-template-columns: 1fr min(250px, 25%);
}
}
.unleash-video-container p {
background: var(--ifm-color-success-contrast-background);
border-radius: var(--border-radius);
}
.unleash-video-container > .videos {
display: flex;
flex-direction: column;
.unleash-video-container > .videos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--gap);
}
.unleash-video-container .video-wrapper {
padding: .5rem;
.unleash-video-container .video-wrapper {
padding: 0.5rem;
border-radius: var(--border-radius);
background: var(--ifm-color-info-contrast-background);
}
.unleash-video-container iframe {
.unleash-video-container iframe {
aspect-ratio: 16/9;
}
.unleash-video-container > .admonition {
margin: 0;
}
@media screen and (min-width: 450px) {
.unleash-video-container {
grid-template-columns: 1fr min(250px, 25%);
}
.unleash-video-container > .videos {
display: flex;
flex-direction: column;
gap: var(--gap);
}
}