How do I style my homepage differently than my post pages?

[thedch]

Description

Hello, I have an index.qmd file that specifies a listing of my blog posts. I would like to style this page differently than the actual blog post pages, for example in background color.

However, searching through the HTML styling documentation, I do not see any differentiating variables, and when inspecting the webpage, the CSS classnames seem to be the same as well.

For example:

body.nav-fixed {
    background-color: red;
}

This CSS changes both the background of the index page and the post pages. Let me know if I am missing anything, I am experimenting with both styles.css and custom.scss. For example $navbar-bg is available, but there is not index-bg or post-bg etc.

[jimjam-slam]

Hey @thedch! I think what you'll want is to add an additional stylesheet just to your home page.

So let's say your _quarto.yml sets the default stylesheets or themes for pages on your site. For example, on my personal site, I use the flatly theme but include an extra stylesheet with some overrides for my site:

format:
  html:
    theme: [flatly, "style/style.scss"]

On your homepage (eg. index.qmd), you can add a similar block in the frontmatter to override that default:

format:
  html:
    theme: [flatly, "style/style.scss", "style/my-homepage-specific-stuff.scss"]

That extra file, my-homepage-specific-stuff.scss, is where you can add homepage-specific stuff like overriding body.nav-fixed.

How does that work for you?

[quantixed]

In case this helps anyone else. The solution above worked for me.

I wanted to do the same thing and I was using the following in index.qmd to get a black background (as described in https://quarto.org/docs/reference/formats/html.html#format-options).

format:
  html:
    page-layout: full
    backgroundcolor: black

and this worked when rendering the page locally but, for some reason, when publishing using github-pages the background on index.html was overridden by the theme. I couldn't figure out why. Switching to a bespoke .css file for this page solved my issue.