Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-31 01:16:01 +02:00
Code Issues Projects Releases Wiki Activity

docs: use grid for videos in smaller formats.

Browse Source
This commit is contained in:
Thomas Heartman 2022-01-26 11:23:28 +01:00
parent 132cba741c
commit 2a6504e581
1 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
website/src/css/custom.css
View File

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