volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
mherchel → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
Firefox (latest version, 133) and Safari (18.1.1) on Mac Sequoia 15.1.1 from 2560px to 1459px, no space between "your" and "Drupal" (basically until it breaks to a new line). Chrome (131) is fine.
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
lauriii → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
ckrina → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
ckrina → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hot_sauce → .
volkswagenchick → credited hotsaucedesign → .
@Gauravvv
Thank you for the work on your patch. I was working on an MR as part of Florida DrupalCamp last week and got around to finally pushing it up today.
In comparing my MR with your patch, I think there is still room for improvement on this to help modernize the CSS more.
- For .pager__link, .pager__item--current we can do more conversion to CSS Logical properties by changing min-width and height to min-inline-size and block-size respectively
- We can move the CSS variables out of :root and into the .pager class since all of these will apply to anything within pager since it's best practice to not use :root if we don't have to
- In addition, the naming conventions for the pager variables wasn't consistent. Some used one - and some used two, so I adjusted that for consistency sake.
- We can also make CSS variables out of the background images for the .pager__item classes, and then further consolidate the @media (forced-colors: active) query to use these for the mask-image as well like this
.pager__item--first .pager__link::before {
--background-image: url(../../images/icons/545560/pager-first.svg);
}
.pager__item--previous .pager__link::before {
--background-image: url(../../images/icons/545560/pager-prev.svg);
}
.pager__item--next .pager__link::after {
--background-image: url(../../images/icons/545560/pager-next.svg);
}
.pager__item--last .pager__link::after {
--background-image: url(../../images/icons/545560/pager-last.svg);
}
.pager__item--first .pager__link::before,
.pager__item--previous .pager__link::before,
.pager__item--next .pager__link::after,
.pager__item--last .pager__link::after {
position: relative;
display: inline-block;
inline-size: 1rem;
block-size: 1rem;
content: "";
background-image: var(--background-image);
background-repeat: no-repeat;
background-position: center;
}
@media (forced-colors: active) {
.pager__item--first .pager__link::before,
.pager__item--previous .pager__link::before,
.pager__item--next .pager__link::after,
.pager__item--last .pager__link::after {
background-color: linktext;
background-image: none;
mask-image: var(--background-image);
mask-repeat: no-repeat;
mask-position: center;
}
}
This is, admittedly, my first contribution to Drupal directly but I think that with some tweaking between the patch and the MR we can find the best solutions here.
Thank you @Gauravvv, will mark this one as Closed (works as designed)
volkswagenchick → credited hotsaucedesign → .
volkswagenchick → credited hotsaucedesign → .
volkswagenchick → credited hotsaucedesign → .
volkswagenchick → credited hotsaucedesign → .
volkswagenchick → credited hotsaucedesign → .
volkswagenchick → credited hotsaucedesign → .
volkswagenchick → credited hotsaucedesign → .
volkswagenchick → credited hotsaucedesign → .