doc: fix bullet(arrow) alignment vertically in documentation

[akashyeole]

Fixed the alignment of the bullet points (green arrow) under 'Node.js documentation' by adjusting the property in style.css

Current:

Fix:

[nodejs-github-bot]

Review requested:

• @nodejs/nodejs-website

[AugustinMauroy]

LGTM ! Thanks for your first contribution

[aduh95]

Thanks for the PR! I don't think using position relative is a good choice, as it's going to depend on which fonts are supported by the client.

Here's what it looks like for me without this PR:

Here's how it looks with this PR:

Maybe a better fix would be to build the triangle in CSS using ::after and ::before so it can look the same independently of the client fonts.

[akashyeole]

@aduh95 I got this. I will do the changes 👍

[aduh95]

Looks good! I would have a slight preference that we drop that .picker-arrow empty span (to use ::before instead), but LGTM regardless.

[akashyeole]

@aduh95 I have updated the commit message (col <72), the check won't fail now.

[akashyeole]

Hi @aduh95 can you please approve the workflows 😄

[nodejs-github-bot]

Commit Queue failed

- Loading data for nodejs/node/pull/52193 ✔ Done loading data for nodejs/node/pull/52193 ----------------------------------- PR info ------------------------------------ Title doc: fix bullet(arrow) alignment vertically in documentation (#52193) ⚠ Could not retrieve the email or name of the PR author's from user's GitHub profile! Branch akashyeole:akashyeole -> nodejs:main Labels doc Commits 2 - doc: fix bullet(arrow) alignment vertically - doc,tools: replace bullet triangle with pure css design Committers 1 - Akash Yeole PR-URL: https://github.com/nodejs/node/pull/52193 Reviewed-By: Antoine du Hamel Reviewed-By: Luigi Pinca Reviewed-By: Moshe Atlow ------------------------------ Generated metadata ------------------------------ PR-URL: https://github.com/nodejs/node/pull/52193 Reviewed-By: Antoine du Hamel Reviewed-By: Luigi Pinca Reviewed-By: Moshe Atlow -------------------------------------------------------------------------------- ℹ This PR was created on Sat, 23 Mar 2024 07:13:46 GMT ✔ Approvals: 3 ✔ - Antoine du Hamel (@aduh95) (TSC): https://github.com/nodejs/node/pull/52193#pullrequestreview-1956435636 ✔ - Luigi Pinca (@lpinca): https://github.com/nodejs/node/pull/52193#pullrequestreview-1956571422 ✔ - Moshe Atlow (@MoLow) (TSC): https://github.com/nodejs/node/pull/52193#pullrequestreview-1959678422 ⚠ GitHub cannot link the author of 'doc: fix bullet(arrow) alignment vertically' to their GitHub account. ⚠ Please suggest them to take a look at https://github.com/nodejs/node/blob/99b1ada/doc/guides/contributing/pull-requests.md#step-1-fork ⚠ GitHub cannot link the author of 'doc,tools: replace bullet triangle with pure css design' to their GitHub account. ⚠ Please suggest them to take a look at https://github.com/nodejs/node/blob/99b1ada/doc/guides/contributing/pull-requests.md#step-1-fork ✔ Last GitHub CI successful ℹ Green GitHub CI is sufficient -------------------------------------------------------------------------------- ✔ No git cherry-pick in progress ✔ No git am in progress ✔ No git rebase in progress -------------------------------------------------------------------------------- - Bringing origin/main up to date... From https://github.com/nodejs/node * branch main -> FETCH_HEAD ✔ origin/main is now up-to-date - Downloading patch for 52193 From https://github.com/nodejs/node * branch refs/pull/52193/merge -> FETCH_HEAD ✔ Fetched commits as 38161c38d9e6..be7b4145a59f -------------------------------------------------------------------------------- [main 53cf099b71] doc: fix bullet(arrow) alignment vertically Author: Akash Yeole Date: Sat Mar 23 12:31:09 2024 +0530 1 file changed, 2 insertions(+) [main 3bfcb8c879] doc,tools: replace bullet triangle with pure css design Author: Akash Yeole Date: Sat Mar 23 21:00:52 2024 +0530 3 files changed, 29 insertions(+), 26 deletions(-) ✔ Patches applied There are 2 commits in the PR. Attempting autorebase. Rebasing (2/4) 
Executing: git node land --amend --yes
 --------------------------------- New Message ----------------------------------
 doc: fix bullet(arrow) alignment vertically
 
Fixed the alignment of the bullet points (green arrow) under
 'Node.js documentation' by adjusting the property in
 style.css
 
PR-URL: #52193
 Reviewed-By: Antoine du Hamel duhamelantoine1995@gmail.com
 Reviewed-By: Luigi Pinca luigipinca@gmail.com
 Reviewed-By: Moshe Atlow moshe@atlow.co.il
 
[detached HEAD 0cf52ef30f] doc: fix bullet(arrow) alignment vertically
 Author: Akash Yeole akashyeole02@gmail.co
 Date: Sat Mar 23 12:31:09 2024 +0530
 1 file changed, 2 insertions(+)
 Rebasing (3/4)
 Rebasing (4/4)
 
Executing: git node land --amend --yes
 --------------------------------- New Message ----------------------------------
 doc,tools: replace bullet triangle with pure css design
 
Removed the hardcoded triangle from doc/template.html and
 tools/doc/html.mjs and placed the new  element which
 takes the shape of triangle using the new style defined in css.
 
PR-URL: #52193
 Reviewed-By: Antoine du Hamel duhamelantoine1995@gmail.com
 Reviewed-By: Luigi Pinca luigipinca@gmail.com
 Reviewed-By: Moshe Atlow moshe@atlow.co.il
 
[detached HEAD dc4c2eaeb1] doc,tools: replace bullet triangle with pure css design
 Author: Akash Yeole akashyeole02@gmail.co
 Date: Sat Mar 23 21:00:52 2024 +0530
 3 files changed, 29 insertions(+), 26 deletions(-)
 
Successfully rebased and updated refs/heads/main.
 
ℹ Add commit-queue-squash label to land the PR as one commit, or commit-queue-rebase to land as separate commits.

https://github.com/nodejs/node/actions/runs/8458019623

[akashyeole]

@lpinca
The previous 'commit-queue' failed because of incorrect author email in config, I just updated my email in the PR.

[aduh95]

Landed in 27493a1