How to edit the Simplex Theme for a Quarto Website?

Question

I want to create a Website with Quarto, using the Bootswach theme "Simplex".

The theme is simple but elegant. I like the mix of white, black gray and red colors.

However, I come across three challenges:

(1) Including a logo is pretty easy by adding "logo: "/img/logo.png" in the _quarto.yml file. However, the logo is displayed in the header very small. How can I increase the size of the logo in the header?

(2) The title of the Website is printed in "black" color as one can see here in the Simplex Theme template (it is the third navigation bar in white). How can I change the color of the title to the red of the link color?

(3) Finally, the color of the links in the body is red. But the color of the links in the menu is gray. I want to display the links as well as the active menu-item in the navbar in red (i.e., the link color). How can I change that?

I know, that I must change the .scss and/or .css files or add another .scss and/or .css file to the _quarto.yml . But I did not manage to solve this issue.

Can anyone give me some hints how to solve these problems?

Answer 1

Is this what you are looking for?

Concerning Q1 & Q2 (color):

styles.css

.navbar-dark .navbar-brand {
  background: url('https://upload.wikimedia.org/wikipedia/commons/e/ef/Stack_Overflow_icon.svg');
  background-size: contain;
  padding-right: 5px !important; 
  padding-left: 75px !important;
  background-repeat: no-repeat;
  color: #d9230f;
}

Concerning Q3:

simplex-theme.scss

/*-- scss:defaults --*/
$navbar-hl: #d9230f;

_quarto.yml

project:
  type: website

website:
  title: "TEST Website"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: [simplex, simplex-theme.scss]
    css: styles.css

Result:

Answer 2

For Q1, try this in the style.css file:

.navbar-brand {
    max-height: 90px;
    margin: -8px;
}

.navbar-logo {
    max-height: 90px;
    max-width: 90px;
    height: 89px;
    width: 89px;
    margin-top: -9px;
}

Just play around with values.

For Q2, the simplest approach might be to edit this in the _quarto.yml:

website:
  title: "Website Title"
  navbar:
    background: "#______"
    foreground: "#______"

And I don't know about Q3. Setting link color is easy in the _quarto.yml under the section

format:
  html:
    theme:
      linkcolor: "whatevs"

but I think you already knew that.