search

Myzwer / foothillschurch

Bootcamp II is a wordpress theme (as well as an inside joke) designed to suit the needs of foothillschurch.com. It makes use of webpack, Babel, Sass, Tailwind, Browsersync, PostCSS, ESLint, Stylelint, Prettier and more. It is meant for that site, but if you can use it by all means go for it.
1 stars 1 forks source link

CSS Solution to alternating sections #52

Closed rain2o closed 1 month ago

rain2o commented 1 month ago

I think I found a solution to this problem we've discussed before

https://github.com/Myzwer/foothillschurch/blob/effc5bbf81497ae99f0561ab7849412fe9272bfd/location.php#L111-L122

I just learned about the of selector. It seems to be working to ignore empty rows.

So, like this

while ( have_rows( 'other_sections' ) ) : the_row(); ?> 
    <div class="bg-alternating-gradient">

Then, in _gradients.scss update the selectors for the bgs

.bg-white-gradient, 
.bg-alternating-gradient:nth-child(odd of :not(:empty)) {
  ...
}

.bg-blue-gradient,
.bg-alternating-gradient:nth-child(even of :not(:empty)) {
  ...
}

The result is that it uses bg-white for odd rows and bg-blue` for even, while ignoring any that are empty.