How to prevent large buttons for social links in about: webpage?

[luca-scr]

Description

I have set up a webpage for my site with a standard about page as described at https://quarto.org/docs/websites/website-about.html
When the site is shown in a small desktop window or on a mobile, the buttons containing social icons (twitter, GitHub, etc.) took almost all the horizontal space and are much larger than the ones shown on the desktop version.
Can this be avoid?

[mcanouil]

Would you mind sharing a concrete example?

Note that this kind of things can be solved using (S)CSS and your favourite browser inspect/developer mode.

[luca-scr]

Here is a minimal example.

_quarto.yml file:

project:
  type: website
  output-dir: docs
  render:
    - "about.qmd"
website:
  title: "Finley Malloc"
  navbar:
    background: dark
    left:
      - text: "Projects"
        href: projects/index.qmd
format:
  html:
    theme: Yeti
    fontsize: 1.1rem
    toc: true
    page-layout: full

and about.qmd file

---
title: "Finley Malloc"
about:
  template: trestles
  image-alt: image
  links:
    - icon: twitter
      text: twitter
      href: https://twitter.com
    - icon: github
      text: Github
      href: https://github.com
---

Finley Malloc is the Chief Data Scientist at Wengo Analytics. When not innovating on data platforms, Finley enjoys spending time unicycling and playing with her pet iguana.

## Education

University of California, San Diego | San Diego, CA
PhD in Mathematics | Sept 2011 - June 2015

Macalester College | St. Paul MA
B.A in Economics | Sept 2007 - June 2011

## Experience

Wengo Analytics | Head Data Scientist | April 2018 - present

GeoScynce | Chief Analyst | Spet 2012 - April 2018

The desktop version is

while the version for a reduce size of the window or mobile is

I would like to avoid the large buttons as for Twitter and GitHub on the mobile-like version.
Thanks in advance for any help.

[mcanouil]

I would like to avoid the large buttons as for Twitter and GitHub on the mobile-like version.

But what do you think would be better?

Again, here you need to use your favourite browser and tweak the rule as you think it's best, then set that rule in your custom theme as documented: https://quarto.org/docs/output-formats/html-themes.html#custom-themes

Screen.Recording.2024-06-04.at.10.22.26.mov

[luca-scr]

Many thanks for the hint, I have been able to get what I was looking for.