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