smallsolar
/
node
mirror of https://github.com/nodejs/node.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

doc: fix arrow vertical alignment in HTML version 

This commit fixes the alignment of the bullet points (green arrow) under
'Node.js <version> documentation' by drawing a triangle in CSS instead
of using an ASCII char.

PR-URL: https://github.com/nodejs/node/pull/52193
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Moshe Atlow <moshe@atlow.co.il>
This commit is contained in:
Akash Yeole 2024-03-28 05:05:22 +05:30 committed by GitHub
parent 4d8602046e
commit 27493a1dd7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
doc/api_assets/style.css
View File

@ -182,27 +182,32 @@ li.picker-header {
position: relative;
}
li.picker-header .collapsed-arrow, li.picker-header .expanded-arrow {
width: 1.5ch;
height: 1.5em;
}
li.picker-header .collapsed-arrow {
li.picker-header .picker-arrow {
display: inline-block;
width: .6rem;
height: .6rem;
border-top: .3rem solid transparent;
border-bottom: .3rem solid transparent;
border-left: .6rem solid var(--color-links);
border-right: none;
margin: 0 .2rem .05rem 0;
}
li.picker-header .expanded-arrow {
display: none;
li.picker-header a:focus .picker-arrow,
li.picker-header a:active .picker-arrow,
li.picker-header a:hover .picker-arrow {
border-left: .6rem solid var(--white);
}
li.picker-header.expanded .collapsed-arrow,
:root:not(.has-js) li.picker-header:hover .collapsed-arrow {
display: none;
}
li.picker-header.expanded .expanded-arrow,
:root:not(.has-js) li.picker-header:hover .expanded-arrow {
display: inline-block;
li.picker-header.expanded a:focus .picker-arrow,
li.picker-header.expanded a:active .picker-arrow,
li.picker-header.expanded a:hover .picker-arrow,
:root:not(.has-js) li.picker-header:hover .picker-arrow {
border-top: .6rem solid var(--white);
border-bottom: none;
border-left: .35rem solid transparent;
border-right: .35rem solid transparent;
margin-bottom: 0;
}
li.picker-header.expanded > a,

2
doc/template.html
View File

@ -60,7 +60,7 @@
__ALTDOCS__
<li class="picker-header">
<a href="#">
<span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
<span class="picker-arrow"></span>
Options
</a>

6
tools/doc/html.mjs
View File

@ -528,7 +528,7 @@ function altDocs(filename, docCreated, versions) {
return list ? `
<li class="picker-header">
<a href="#">
<span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
<span class="picker-arrow"></span>
Other versions
</a>
<div class="picker"><ol id="alt-docs">${list}</ol></div>
@ -558,7 +558,7 @@ function gtocPicker(id) {
return `
<li class="picker-header">
<a href="#">
<span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
<span class="picker-arrow"></span>
Index
</a>
@ -575,7 +575,7 @@ function tocPicker(id, content) {
return `
<li class="picker-header">
<a href="#">
<span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
<span class="picker-arrow"></span>
Table of contents
</a>