zjedi / hugo-scroll

Clean, responsive, single-page Hugo website theme.
https://themes.gohugo.io/hugo-scroll/
MIT License
279 stars 199 forks source link

Switch which sections are tagged with "odd" class #107

Closed nai888 closed 1 year ago

nai888 commented 1 year ago

I have a site with a section that will be temporary, but should be added at the top of the site. Essentially, an announcements section. However, adding this temporary section to the top will change which sections below it are odd vs even, which completely throws off all the styling that I want.

I was hoping that the .odd class assignment was handled in the html file, which would mean it could be controlled by an option in the config file. This would be great, because it would mean I could just enable the setting and the section when needed, and disable them both when not needed. But alas, it's assigned using JavaScript in index.js.

Is there any way to get around this and make it more accessible/flexible?

zjedi commented 1 year ago

Can you just add announcment section and remove it when no longer needed? I don't fully understand what you're after. When does the temporary section get removed?

nai888 commented 1 year ago

All right, apologies if I wasn't clear. I'll try to illustrate a little better.

Normally, the sections are something like:

  1. About Us
  2. Examples (.odd)
  3. Contact Us

Sometimes, I need to temporarily add another section at the top, but I want to maintain which sections get tagged with the .odd class, because I want to keep the styling the same for the rest of the page. So for example, I'd want:

  1. Upcoming Events (.odd)
  2. About Us
  3. Examples (.odd)
  4. Contact Us

But instead, I will currently get:

  1. Upcoming Events
  2. About Us (.odd)
  3. Examples
  4. Contact Us (.odd)

So I'm looking for a way to gain control over which section gets marked .odd.

Does that help clarify?

Thanks!

zjedi commented 1 year ago

I see, thanks for explanation. The easiest way I can think of would be a global toggle to inverse the section colors. So that when you add the extra section, you'd invert coloring in configuration. Would that work for you?

We have some refactors (CSS mostly) on the horizon (in 1 - 2 months) and changes in the core code are currenty out of my capacity.

nai888 commented 1 year ago

I had a chance to dig in a little more and I figured out how to add the odd and even classes within the hugo template and remove it from the JS, which allowed me to invert them using a parameter in the config file. Take a look at #113 and let me know what you think!