peterkrzyzek
/
ghost_leaders_theme
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

Use min() and minmax() functions for content grid to eliminate media queries

This commit is contained in:
Sodbileg Gansukh 2020-10-20 15:52:31 +08:00
parent 54d26c69c4
commit d0a6b5365d
3 changed files with 9 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

50
assets/css/ghost/content.css
View File

@ -7,55 +7,19 @@
display: grid;
grid-template-columns:
[full-start]
minmax(calc(calc(100% - 1200px) / 2), 1fr)
minmax(4vw, auto)
[wide-start]
auto
[main-start]
720px
[main-end]
auto
minmax(auto, 240px)
[main-start]
min(720px, calc(100% - 8vw))
[main-end]
minmax(auto, 240px)
[wide-end]
minmax(calc(calc(100% - 1200px) / 2), 1fr)
minmax(4vw, auto)
[full-end]
;
}
@media (max-width: 1296px) {
.gh-canvas {
grid-template-columns:
[full-start]
4vmin
[wide-start]
auto
[main-start]
720px
[main-end]
auto
[wide-end]
4vmin
[full-end]
;
}
}
@media (max-width: 778px) {
.gh-canvas {
grid-template-columns:
[full-start]
4vmin
[wide-start]
0
[main-start]
auto
[main-end]
0
[wide-end]
4vmin
[full-end]
;
}
}
.gh-canvas > * {
grid-column: main-start / main-end;
}