Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DEV-16772: Fix quire-figure.webc styles #42

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

DEV-16772: Fix quire-figure.webc styles #42

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 20 additions & 11 deletions content/_assets/styles/components/q-figure.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,15 @@
}
}

.content is-land {
&:not(:last-child) .q-figure:not(.is-pulled-left):not(.is-pulled-right):not(.column) {
margin-bottom: 2rem;
}
&:not(:first-child) .q-figure:not(.is-pulled-left):not(.is-pulled-right):not(.column) {
margin-top: 2rem;
}
}

.q-figure {
--atlas-z-index: 0;

Expand Down Expand Up @@ -386,39 +395,39 @@
}
}

.quire-grid--2 {
width: 49%;
.quire-grid--2 > * {
width: 50%;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@geealbers I had to change where we were applying the .quire-grid--# classes, and the starter only has an instance of a 2 column grid. These percentages seem to be set intentionally slightly lower than the intended amount (49% vs 50% here). I had to adjust it back to 50% to match.

I think the DOM changes in thegetty/quire#893 might have unintentionally fixed a thing that was requiring these weird percentages, but I am going to hold off on adjusting the other column counts until we have testbed examples of figureGroups with all possible column counts


@media print {
width: 48%;
}
}

.quire-grid--3 {
.quire-grid--3 > * {
width: 32%;

@media print {
width: 31.3%;
}
}

.quire-grid--4 {
.quire-grid--4 > * {
width: 23.5%;

@media print {
width: 23%;
}
}

.quire-grid--5 {
.quire-grid--5 > * {
width: 18.4%;

@media print {
width: 18%;
}
}

.quire-grid--6 {
.quire-grid--6 > * {
width: 15%;

@media print {
Expand All @@ -427,11 +436,11 @@
}

.quire-grid {
&--2,
&--3,
&--4,
&--5,
&--6 {
&--2 > *,
&--3 > *,
&--4 > *,
&--5 > *,
&--6 > * {
@media screen and (max-width: $tablet) {
width: 100%;
}
Expand Down