1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-27 13:49:10 +02:00

docs: use standard media queries instead of container queries

Turns out firefox and safari don't support container queries yet, so
let's go with media queries.
This commit is contained in:
Thomas Heartman 2024-01-31 11:30:31 +09:00
parent b8c161836f
commit 78d95271b4
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78

View File

@ -212,6 +212,14 @@ li.theme-doc-sidebar-item-category-level-1 > div::before {
/* end video content container */
/* Unleash academy content */
/* breakpoints:
show wide: >=1247
show narrow: 997-1246
show wide: 711-996
show narrow: <=710
*/
/* begin certification links */
html[data-theme='light'] .links-container {
@ -222,7 +230,6 @@ html[data-theme='dark'] .links-container {
}
.links-container {
container-type: inline-size;
margin-block: var(--ifm-spacing-vertical);
--button-background-color: var(--color-purple);
--border-color: var(--ifm-color);
@ -286,7 +293,7 @@ html[data-theme='dark'] .links-container {
}
}
@container (width > 680px) {
@media (711 <= width <= 996px), (min-width: 1247px) {
ol {
display: grid;
grid-template-columns: repeat(3, 1fr);
@ -305,7 +312,6 @@ html[data-theme='dark'] .links-container {
--banner-padding: calc(var(--ifm-spacing-vertical) * 3);
--banner-font-color: #000;
container-type: inline-size;
border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
padding: var(--banner-padding);
border-radius: var(--ifm-global-radius);
@ -380,7 +386,7 @@ html[data-theme='dark'] .links-container {
background-size: contain;
}
@container (width > 588px) {
@media (711 <= width <= 996px), (min-width: 1247px) {
.banner {
grid-template-areas: "header logo"
"bullets logo"