mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-09-22 10:29:04 +03:00
Improved gallery card mobile styling
Adds a self-contained CSS custom property for gap which makes it easier to change its value
This commit is contained in:
parent
48e1abae52
commit
93f24575bb
@ -1,8 +1,12 @@
|
||||
.kg-gallery-card {
|
||||
--gap: 1.2rem;
|
||||
}
|
||||
|
||||
.kg-image-card:not(.kg-card-hascaption) + .kg-image-card,
|
||||
.kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card,
|
||||
.kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card,
|
||||
.kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card {
|
||||
margin-top: 1.2rem;
|
||||
margin-top: var(--gap);
|
||||
}
|
||||
|
||||
.kg-gallery-container {
|
||||
@ -23,9 +27,15 @@
|
||||
}
|
||||
|
||||
.kg-gallery-row:not(:first-of-type) {
|
||||
margin: 1.2rem 0 0;
|
||||
margin: var(--gap) 0 0;
|
||||
}
|
||||
|
||||
.kg-gallery-image:not(:first-of-type) {
|
||||
margin: 0 0 0 1.2rem;
|
||||
margin: 0 0 0 var(--gap);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.kg-gallery-card {
|
||||
--gap: 0.6rem;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user