Skip to content
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.

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

fix(client): place hash before headings #8532

Merged
merged 7 commits into from
Apr 3, 2023
Merged

Conversation

yarusome
Copy link
Contributor

@yarusome yarusome commented Mar 30, 2023

Summary

Fixes #6647.

Problem

This PR places the hash in front of section headings to make it stay on the same line.

Solution

This PR uses absolutely-positioned ::before pseudo-elements to generate the hash, and align-items: center to center it.

Alternative:

Put the hash in ::marker. (It's less optimal in that ::marker inherits text-decoration from its parent, which cannot be nullified.)


Screenshots

Before

before

After

after_1

Copy link
Member

@LeoMcA LeoMcA left a comment

Choose a reason for hiding this comment

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

Thank you! Some quick initial thoughts

client/src/document/index.scss Outdated Show resolved Hide resolved
client/src/document/index.scss Outdated Show resolved Hide resolved
Copy link
Member

@LeoMcA LeoMcA left a comment

Choose a reason for hiding this comment

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

Some tiny tweaks, then we're good to go!

client/src/document/index.scss Outdated Show resolved Hide resolved
client/src/document/index.scss Outdated Show resolved Hide resolved
client/src/document/index.scss Outdated Show resolved Hide resolved
yarusome and others added 5 commits March 31, 2023 19:15
Co-authored-by: Leo McArdle <leo@mca.is>
Co-authored-by: Leo McArdle <leo@mca.is>
Co-authored-by: Leo McArdle <leo@mca.is>
@yarusome yarusome requested a review from LeoMcA April 3, 2023 12:52
Copy link
Member

@LeoMcA LeoMcA left a comment

Choose a reason for hiding this comment

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

fantastic, thank you!

@LeoMcA LeoMcA merged commit df25280 into mdn:main Apr 3, 2023
@yarusome yarusome deleted the prepose-hash branch April 4, 2023 00:58
wbamberg added a commit to wbamberg/yari that referenced this pull request Apr 4, 2023
* upstream/main: (251 commits)
  chore(deps-dev): bump typescript from 4.9.5 to 5.0.3 in /client/pwa (mdn#8547)
  chore(deps-dev): bump typescript from 4.9.5 to 5.0.3 (mdn#8543)
  chore(deps-dev): bump postcss-preset-env from 8.2.0 to 8.3.0 (mdn#8561)
  chore(deps-dev): bump @types/react from 18.0.31 to 18.0.32 (mdn#8560)
  chore(advertising): update copies (mdn#8562)
  fix(client): place hash before headings (mdn#8532)
  chore(deps-dev): bump ts-jest from 29.0.5 to 29.1.0 (mdn#8559)
  chore(deps-dev): bump black from 23.1.0 to 23.3.0 in /deployer (mdn#8555)
  chore(deps-dev): bump webpack-dev-server from 4.13.1 to 4.13.2 (mdn#8558)
  chore(deps-dev): bump swr from 2.1.1 to 2.1.2 (mdn#8556)
  chore(deps): bump boto3 from 1.26.99 to 1.26.104 in /deployer (mdn#8557)
  chore(deps-dev): bump black in /testing/integration (mdn#8554)
  ci(stage-build): rsync with -j html,json,txt (mdn#8549)
  ci(stage-build): rsync with -c (mdn#8548)
  chore(deps-dev): bump react-router and react-router-dom from 6.9.0 to 6.10.0 (mdn#8534)
  chore(deps-dev): bump @babel/preset-env from 7.20.2 to 7.21.4 (mdn#8544)
  chore(deps-dev): bump tailwindcss from 3.3.0 to 3.3.1 (mdn#8546)
  chore(deps): bump @mdn/browser-compat-data from 5.2.46 to 5.2.47 (mdn#8545)
  chore(deps-dev): bump @babel/core from 7.21.3 to 7.21.4 (mdn#8542)
  fix(docs): make icons in good/bad examples float (mdn#8531)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The h2 title changes the number of lines from 1 to 2 when hovering over the title - by making the hash appear
2 participants