1

I'm helping develop a website for a GitPages workshop and I'm new to Just the Docs theme. How can you change the font size for a long title that appears in the header/home link (top left of the screenshot). For reference, here is the Github repo.

Thanks in advance!

enter image description here

I tried to edit files in both the _includes and _sass folders but I either wasn't able to identify the correct file or I was unsure how to properly edit these files.

Chasz Griego
  • 13
  • 2

1 Answers1

0

I have checked the browser dev tools/inspector.

The font size is set in two places (according to my current screen size):

@media (min-width: 31.25rem)
.site-title {
    font-size: 24px !important;
}

.site-title {
    font-size: 18px !important;
}

GitHub repo searches:

In general, the theme uses some predefined CSS classes to set the font size.

The sizes from above (18px, 24px) correspond with the .fs-6 CSS class.

The docs suggest to use custom CSS to overwrite any default styles.

Christian
  • 4,902
  • 4
  • 24
  • 42
  • 1
    Thank you! This led me down the correct path. I had to adjust .site-title in the layout.scss file. Specifically, I had to change fs-6 to something smaller like fs-1. This might be specific to Jekyll or [Just the Docs](https://just-the-docs.github.io/just-the-docs/docs/utilities/typography/#font-size). Here is the [commit](https://github.com/cmu-lib/portfolio_workshop/commit/461320358e120462055a3902c0b1a27c93c5dcee) for more details. – Chasz Griego Nov 02 '22 at 20:23
  • Thanks for the feedback and the commit. I have updated my answer accordingly. – Christian Nov 02 '22 at 21:17