Skip to content

Use different font size for h3 and h4 in markdown formatted content. #8322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 21, 2024
Merged

Use different font size for h3 and h4 in markdown formatted content. #8322

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cfec926
Use different font size for h3 and h4 in markdown formatted content.
isoos Nov 20, 2024
ce771e1
Update pkg/web_css/lib/src/_base.scss
isoos Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions pkg/web_css/lib/src/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,12 @@ body,
font-weight: 400;
}

h1 { font-size: 36px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 16px; }
h1 { font-size: 36px; } // note: github uses 2em, ~32px
h2 { font-size: 24px; } // note: github uses 1.5em, ~24px
h3 { font-size: 21px; } // note: github uses 1.25em, ~20px
h4 { font-size: 18px; } // note: github uses 1em, ~16px
h5 { font-size: 17px; } // note: github uses 0.875em, ~14px
h6 { font-size: 16px; } // note: github uses 0.85em, ~13.6px
Comment on lines +52 to +54
Copy link
Member

@jonasfj jonasfj Nov 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suspect these are a bit close, but I'm not too worried.

From what I can tell wikipedia has the same size for h4 - h6

image

with lines under h1 and h2, and h3 only being slightly larger.

Just saying it's an option to not have different sizes.

Copy link
Member

@jonasfj jonasfj Nov 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I note that it might be more importnat to have a larger difference between h3 and h4, than having any difference between h4-h6

People rarely use h5 and h6.

If we wanted to make using h1-h6 usable, we should perhaps consider numbering headlines.

1. h1

1.1 h2

1.1.1 h3

1.1.1.1 h4

1.1.1.1.1 h5
1.1.1.1.1.1 h6

But this can also be a bit degenerate in it's own right... Though we could put 1.1.1.1.1 in the margin and make it only show up when hovering a headline, or something like that.

(I'm not actually proposing we do this, just saying that would be an option).

Mostly I'm saying we could consider not having a difference in size between h4-h6 as they are rarely used. Allowing us have a large difference between h3 and h4 (which is more commonly reached).

Copy link
Collaborator Author

@isoos isoos Nov 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a table of contents hovering/updating/folding/unfolding as you scroll may be better than numbers.

}

img {
Expand Down
Loading