Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Improved gallery card mobile styling

Browse source 
Adds a self-contained CSS custom property for gap which makes it easier to change its value
This commit is contained in:
Sodbileg Gansukh 2021-11-25 14:04:40 +08:00
parent 48e1abae52
commit 93f24575bb
1 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
core/frontend/src/cards/css/gallery.css
View file

@ -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;
}
}