Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-27 13:49:10 +02:00
Code Issues Projects Releases Wiki Activity

docs: use standard media queries instead of container queries

Browse Source 
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
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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