How to overwrite some aspects of the about page in zephyr theme?

[ulbrichdennis]

Description

Hi,

I would like to overwrite some rules used in the zephyr theme and the trestles template: I do not like the email box on the about page and that on a small screen it is very wide.

So I created the following file (named theme.scss) in order to remove the box, make the width smaller and the font a bit larger:

/*-- scss:defaults --*/
$link-color: #242424;
$callout-color-note:  #6c757d;

/*-- scss:rules --*/

.quarto-about-trestles .about-entity .about-links {
    display: flex;
    justify-content: center
}

@media(min-width: 992px) {
    .quarto-about-trestles .about-entity .about-links {
        flex-direction:row;
        column-gap: 1em;
        row-gap: 15px;
        flex-wrap: wrap
    }
}

@media(max-width: 991.98px) {
    .quarto-about-trestles .about-entity .about-links {
        flex-direction:column;
        row-gap: 1em;
        
        padding-bottom: 1.5em
    }
}

.quarto-about-trestles .about-entity .about-link {
    color: #78838e;
    text-decoration: none;
    
}

@media(min-width: 992px) {
    .quarto-about-trestles .about-entity .about-link {
        font-size:.8em;
        padding: .25em .5em;
        border-radius: 4px
    }
}

@media(max-width: 991.98px) {
    .quarto-about-trestles .about-entity .about-link {
        font-size:1.1em;
        padding: .5em .5em;
        text-align: center;
        border-radius: 6px
    }
}

However, when using

format:
  html: 
    theme: [zephyr, theme.scss]
    toc: true
    toc-expand: 3
    footnotes-hover: true
    code-copy: true
    code-link: true
    code-overflow: wrap
    fig-align: right
    link-external-icon: false
    link-external-newwindow: true
    include-in-header: "files/includes/_academic.qmd"

in the _quarto.yml file, nothing changes on the about page.

Do you have any ideas?

[cderv]

nothing changes on the about page.

When you debug in browser console, and you look at the applied CSS on the page, do you see your rules?
Are they overridden by others? Or are they applying to the right elements ?

I'll try to reproduce on my end to try out, but I'll need to recreate a reproducible example.

[cderv]

When I try with a default blog

quarto create project blog test-blog

by setting template to trestles and your theme, I can see the rule specificity problem.
Your rules does not have precedence over the default one.

You need to be more specific (See how CSS works on that (e.g. https://specifishity.com/)

For this one, you are just missing a div for example

div.quarto-about-trestles .about-entity .about-link {
    color: #78838e;
    text-decoration: none;
    
}

Hope it helps