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:
parent
b8c161836f
commit
78d95271b4
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user