mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-28 13:22:39 +03:00
196 lines
7.9 KiB
CSS
196 lines
7.9 KiB
CSS
/*
|
|
|
|
Base:
|
|
mw = max width
|
|
|
|
Value:
|
|
(n) = (n * grid size)
|
|
-(m) = (m)%
|
|
-s = small
|
|
-m = medium
|
|
-l = large
|
|
-xl = extra large
|
|
-none = none
|
|
|
|
Media Query Extensions:
|
|
-ns = not-small
|
|
-m = medium
|
|
-l = large
|
|
|
|
*/
|
|
|
|
.mw1 { max-width: calc(var(--grid-size) * 1); }
|
|
.mw2 { max-width: calc(var(--grid-size) * 2); }
|
|
.mw3 { max-width: calc(var(--grid-size) * 3); }
|
|
.mw4 { max-width: calc(var(--grid-size) * 4); }
|
|
.mw5 { max-width: calc(var(--grid-size) * 5); }
|
|
.mw6 { max-width: calc(var(--grid-size) * 6); }
|
|
.mw7 { max-width: calc(var(--grid-size) * 7); }
|
|
.mw8 { max-width: calc(var(--grid-size) * 8); }
|
|
.mw9 { max-width: calc(var(--grid-size) * 9); }
|
|
.mw10 { max-width: calc(var(--grid-size) * 10); }
|
|
.mw11 { max-width: calc(var(--grid-size) * 11); }
|
|
.mw12 { max-width: calc(var(--grid-size) * 12); }
|
|
.mw13 { max-width: calc(var(--grid-size) * 13); }
|
|
.mw14 { max-width: calc(var(--grid-size) * 14); }
|
|
.mw15 { max-width: calc(var(--grid-size) * 15); }
|
|
.mw16 { max-width: calc(var(--grid-size) * 16); }
|
|
.mw17 { max-width: calc(var(--grid-size) * 17); }
|
|
.mw18 { max-width: calc(var(--grid-size) * 18); }
|
|
.mw19 { max-width: calc(var(--grid-size) * 19); }
|
|
.mw20 { max-width: calc(var(--grid-size) * 20); }
|
|
.mw25 { max-width: calc(var(--grid-size) * 25); }
|
|
.mw30 { max-width: calc(var(--grid-size) * 30); }
|
|
.mw40 { max-width: calc(var(--grid-size) * 40); }
|
|
.mw50 { max-width: calc(var(--grid-size) * 50); }
|
|
.mw70 { max-width: calc(var(--grid-size) * 70); }
|
|
.mw88 { max-width: calc(var(--grid-size) * 88); }
|
|
|
|
.mw-70 { max-width: 70%; }
|
|
.mw-80 { max-width: 80%; }
|
|
.mw-90 { max-width: 90%; }
|
|
.mw-100 { max-width: 100%; }
|
|
|
|
.mw-s { max-width: 48rem; }
|
|
.mw-m { max-width: 68rem; }
|
|
.mw-l { max-width: 98rem; }
|
|
.mw-xl { max-width: 114rem; }
|
|
.mw-none { max-width: none; }
|
|
|
|
.mw-65vw { max-width: 65vw; }
|
|
.mw-100vw { max-width: 100vw; }
|
|
.mw-100vw--sidebar { max-width: calc(100vw - 280px); }
|
|
|
|
|
|
@media (--breakpoint-not-small) {
|
|
.mw1-ns { max-width: calc(var(--grid-size) * 1); }
|
|
.mw2-ns { max-width: calc(var(--grid-size) * 2); }
|
|
.mw3-ns { max-width: calc(var(--grid-size) * 3); }
|
|
.mw4-ns { max-width: calc(var(--grid-size) * 4); }
|
|
.mw5-ns { max-width: calc(var(--grid-size) * 5); }
|
|
.mw6-ns { max-width: calc(var(--grid-size) * 6); }
|
|
.mw7-ns { max-width: calc(var(--grid-size) * 7); }
|
|
.mw8-ns { max-width: calc(var(--grid-size) * 8); }
|
|
.mw9-ns { max-width: calc(var(--grid-size) * 9); }
|
|
.mw10-ns { max-width: calc(var(--grid-size) * 10); }
|
|
.mw11-ns { max-width: calc(var(--grid-size) * 11); }
|
|
.mw12-ns { max-width: calc(var(--grid-size) * 12); }
|
|
.mw13-ns { max-width: calc(var(--grid-size) * 13); }
|
|
.mw14-ns { max-width: calc(var(--grid-size) * 14); }
|
|
.mw15-ns { max-width: calc(var(--grid-size) * 15); }
|
|
.mw16-ns { max-width: calc(var(--grid-size) * 16); }
|
|
.mw17-ns { max-width: calc(var(--grid-size) * 17); }
|
|
.mw18-ns { max-width: calc(var(--grid-size) * 18); }
|
|
.mw19-ns { max-width: calc(var(--grid-size) * 19); }
|
|
.mw20-ns { max-width: calc(var(--grid-size) * 20); }
|
|
.mw25-ns { max-width: calc(var(--grid-size) * 25); }
|
|
.mw30-ns { max-width: calc(var(--grid-size) * 30); }
|
|
.mw40-ns { max-width: calc(var(--grid-size) * 40); }
|
|
.mw50-ns { max-width: calc(var(--grid-size) * 50); }
|
|
.mw70-ns { max-width: calc(var(--grid-size) * 70); }
|
|
.mw88-ns { max-width: calc(var(--grid-size) * 88); }
|
|
|
|
.mw-70-ns { max-width: 70%; }
|
|
.mw-80-ns { max-width: 80%; }
|
|
.mw-90-ns { max-width: 90%; }
|
|
.mw-100-ns { max-width: 100%; }
|
|
|
|
.mw-s-ns { max-width: 48rem; }
|
|
.mw-m-ns { max-width: 68rem; }
|
|
.mw-l-ns { max-width: 98rem; }
|
|
.mw-xl-ns { max-width: 114rem; }
|
|
.mw-none-ns { max-width: none; }
|
|
|
|
.mw-65vw-ns { max-width: 65vw; }
|
|
.mw-100vw-ns { max-width: 100vw; }
|
|
.mw-100vw--sidebar-ns { max-width: calc(100vw - 280px); }
|
|
}
|
|
|
|
@media (--breakpoint-medium) {
|
|
.mw1-m { max-width: calc(var(--grid-size) * 1); }
|
|
.mw2-m { max-width: calc(var(--grid-size) * 2); }
|
|
.mw3-m { max-width: calc(var(--grid-size) * 3); }
|
|
.mw4-m { max-width: calc(var(--grid-size) * 4); }
|
|
.mw5-m { max-width: calc(var(--grid-size) * 5); }
|
|
.mw6-m { max-width: calc(var(--grid-size) * 6); }
|
|
.mw7-m { max-width: calc(var(--grid-size) * 7); }
|
|
.mw8-m { max-width: calc(var(--grid-size) * 8); }
|
|
.mw9-m { max-width: calc(var(--grid-size) * 9); }
|
|
.mw10-m { max-width: calc(var(--grid-size) * 10); }
|
|
.mw11-m { max-width: calc(var(--grid-size) * 11); }
|
|
.mw12-m { max-width: calc(var(--grid-size) * 12); }
|
|
.mw13-m { max-width: calc(var(--grid-size) * 13); }
|
|
.mw14-m { max-width: calc(var(--grid-size) * 14); }
|
|
.mw15-m { max-width: calc(var(--grid-size) * 15); }
|
|
.mw16-m { max-width: calc(var(--grid-size) * 16); }
|
|
.mw17-m { max-width: calc(var(--grid-size) * 17); }
|
|
.mw18-m { max-width: calc(var(--grid-size) * 18); }
|
|
.mw19-m { max-width: calc(var(--grid-size) * 19); }
|
|
.mw20-m { max-width: calc(var(--grid-size) * 20); }
|
|
.mw25-m { max-width: calc(var(--grid-size) * 25); }
|
|
.mw30-m { max-width: calc(var(--grid-size) * 30); }
|
|
.mw40-m { max-width: calc(var(--grid-size) * 40); }
|
|
.mw50-m { max-width: calc(var(--grid-size) * 50); }
|
|
.mw70-m { max-width: calc(var(--grid-size) * 70); }
|
|
.mw88-m { max-width: calc(var(--grid-size) * 88); }
|
|
|
|
.mw-70-m { max-width: 70%; }
|
|
.mw-80-m { max-width: 80%; }
|
|
.mw-90-m { max-width: 90%; }
|
|
.mw-100-m { max-width: 100%; }
|
|
|
|
.mw-s-m { max-width: 48rem; }
|
|
.mw-m-m { max-width: 68rem; }
|
|
.mw-l-m { max-width: 98rem; }
|
|
.mw-xl-m { max-width: 114rem; }
|
|
.mw-none-m { max-width: none; }
|
|
|
|
.mw-65vw-m { max-width: 65vw; }
|
|
.mw-100vw-m { max-width: 100vw; }
|
|
.mw-100vw--sidebar-m { max-width: calc(100vw - 280px); }
|
|
}
|
|
|
|
@media (--breakpoint-large) {
|
|
.mw1-l { max-width: calc(var(--grid-size) * 1); }
|
|
.mw2-l { max-width: calc(var(--grid-size) * 2); }
|
|
.mw3-l { max-width: calc(var(--grid-size) * 3); }
|
|
.mw4-l { max-width: calc(var(--grid-size) * 4); }
|
|
.mw5-l { max-width: calc(var(--grid-size) * 5); }
|
|
.mw6-l { max-width: calc(var(--grid-size) * 6); }
|
|
.mw7-l { max-width: calc(var(--grid-size) * 7); }
|
|
.mw8-l { max-width: calc(var(--grid-size) * 8); }
|
|
.mw9-l { max-width: calc(var(--grid-size) * 9); }
|
|
.mw10-l { max-width: calc(var(--grid-size) * 10); }
|
|
.mw11-l { max-width: calc(var(--grid-size) * 11); }
|
|
.mw12-l { max-width: calc(var(--grid-size) * 12); }
|
|
.mw13-l { max-width: calc(var(--grid-size) * 13); }
|
|
.mw14-l { max-width: calc(var(--grid-size) * 14); }
|
|
.mw15-l { max-width: calc(var(--grid-size) * 15); }
|
|
.mw16-l { max-width: calc(var(--grid-size) * 16); }
|
|
.mw17-l { max-width: calc(var(--grid-size) * 17); }
|
|
.mw18-l { max-width: calc(var(--grid-size) * 18); }
|
|
.mw19-l { max-width: calc(var(--grid-size) * 19); }
|
|
.mw20-l { max-width: calc(var(--grid-size) * 20); }
|
|
.mw25-l { max-width: calc(var(--grid-size) * 25); }
|
|
.mw30-l { max-width: calc(var(--grid-size) * 30); }
|
|
.mw40-l { max-width: calc(var(--grid-size) * 40); }
|
|
.mw50-l { max-width: calc(var(--grid-size) * 50); }
|
|
.mw70-l { max-width: calc(var(--grid-size) * 70); }
|
|
.mw88-l { max-width: calc(var(--grid-size) * 88); }
|
|
|
|
.mw-70-l { max-width: 70%; }
|
|
.mw-80-l { max-width: 80%; }
|
|
.mw-90-l { max-width: 90%; }
|
|
.mw-100-l { max-width: 100%; }
|
|
|
|
.mw-s-l { max-width: 48rem; }
|
|
.mw-l-l { max-width: 68rem; }
|
|
.mw-l-l { max-width: 98rem; }
|
|
.mw-xl-l { max-width: 114rem; }
|
|
.mw-none-l { max-width: none; }
|
|
|
|
.mw-65vw-l { max-width: 65vw; }
|
|
.mw-100vw-l { max-width: 100vw; }
|
|
.mw-100vw--sidebar-l { max-width: calc(100vw - 280px); }
|
|
}
|