theme: allow for page heading modification

[andi-blafasl]

Thank you for adding our site to the showcase.
Are you interested in the code that I added to display an icon on the top-right corner?

The Icons used are from the Font Awesome Set and selected by a FrontMatter Variable. The placement is done in the tags.html partial, because I could easily overwrite that in my Site-Folder without changing other files in the Theme. This could be Improved if it is directly integrated in the theme. And my HTML skills aren't that good 😉
If you like it, I could try to integrate it and send you a pull request.

[McShelby]

Nice idea!

I am willing to give advise on how to do it "right" and merging the PR.

A (possibly incomplete) list of things to consider here:

• We are using the theme at my companies site and are using icons for the menu by defining the pre frontmatter option like eg. pre = "<i class='fa fa-info-circle'>&nbsp;</i> ". It would be nice if there would be a mechanism so the icon must only be set once in the frontmatter but used in both locations.

  Obviously, there will be users having those two icons in any combination, and there may be users who prefer to have different icons in both places.

• The color may be adjustable/configurable. In your screenshot, I was immediatley thinking to have the same color for the icon and the background of the breadcrumb-header. But maybe this lacks contrast.

• What happens on different screen resolutions (we are a little bit responsive), when printing and if the heading text exeeds the available width?

• And finally: In the end we need documentation for this ;-)

[andi-blafasl]

Ok, I just copied the code from our site and made a pull-reqest for you to get a first idea of what I'm doing 😉

• The icon is set by FrontMatter parameter "icon". If no icon is defined on the page, the icon from the current section, the parent or the first section is used. Not sure if this is working as expected, because we only use one level on our site. There I only use .Params.icon and .CurrentSection.Params.icon
• There are two styles for the Icon:
  • for regular pages (as far as I understand that is what ".IsPage" means) the smaller light icon is used
  • for any other page (on our site, the "list" page) the bigger dark icon is used
    • in your example site I discovered that nested sections are a problem here, because the big dark icon is also used for the pages that are rendered from any _index.md in nested folders.
• The icon is styled by css which can be overridden by a theme variant.
• The colors used:
  • dark Icon uses "var(--MAIN-TITLES-TEXT-color)" to stay with any changes here
  • for the light icon we tried (like your first idea) the breadcrumb-header-bg, but that was way to low contrast. there was no good alternative variable, so we used hardcoded "#DCDCDC"
• The Icon is some kind of responsive
  • I copied your media queries (min-width: 48em) and (max-width: 59.938em)
  • I did not test any printing
  • On our Site the Icon does sometimes interfere with the heading text, but not that often and here I'm lacking HTML skills to make a better placement. I think you will understand it if you look at my CSS 🤦‍♂️

I hope you understand my explanation. Ansonsten können wir auch gern auf deutsch weiter diskutieren 🤣

Documentation can be provided if we get this integrated in a nice working way.

[McShelby]

Thanks for the submission. It will take me some days to fully review this.

As a first comment: Hardcoding some neutral colors as with your selected gray is okay at the moment. In an ideal future, some day, the theme will reach a state where you could have a "dark mode" by just switching the variant. That would also be the day such hardcoded values are configurable by a CSS variable. Well... some day...

Don't mind to much about your CSS skills. It'll work in the end ;-)

Sorry for staying with the english language, as I don't want to exclude people from the public discussion here - but we could switch to german using Twitter PMs if you like to.

[andi-blafasl]

No need to hurry, it's just something I would give back to the community. My Version is working for my current project.

Staying English here is no problem but I'm not using Twitter. Didn't even know there is a PM feature 🤣

[McShelby]

The design will be affected if the TOC design changes in #151

[McShelby]

TOC design was moved to its own ticket #167, but may still affect this design

[McShelby]

Alternate, easier idea: Introduce partials and frontmatter in the same way as menu-pre / menu-post. Probably heading-pre / heading-post