mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Website: update ordered list styles on documentation pages (#15786)
Closes: https://github.com/fleetdm/confidential/issues/4072 Changes: - Updated the styles for numbers on ordered lists on docs/handbook/article pages to match the latest wireframes. - Updated the documentation page script to set counters for numbered steps to be the value of their `start` attribute.
This commit is contained in:
parent
4c16e08a80
commit
0d3f992874
6 changed files with 129 additions and 5 deletions
|
|
@ -20,6 +20,11 @@ parasails.registerPage('basic-article', {
|
|||
if(this.articleHasSubtitle.length > 0 && this.articleHasSubtitle[0].innerText) {
|
||||
this.articleSubtitle = this.articleHasSubtitle[0].innerText;
|
||||
}
|
||||
// Set counters for items in ordered lists to be the value of their "start" attribute.
|
||||
document.querySelectorAll('ol[start]').forEach((ol)=> {
|
||||
let startValue = parseInt(ol.getAttribute('start'), 10) - 1;
|
||||
ol.style.counterReset = 'custom-counter ' + startValue;
|
||||
});
|
||||
},
|
||||
|
||||
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
|
||||
|
|
|
|||
|
|
@ -184,6 +184,12 @@ parasails.registerPage('basic-documentation', {
|
|||
});
|
||||
})();
|
||||
|
||||
// Set counters for items in ordered lists to be the value of their "start" attribute.
|
||||
document.querySelectorAll('ol[start]').forEach((ol)=> {
|
||||
let startValue = parseInt(ol.getAttribute('start'), 10) - 1;
|
||||
ol.style.counterReset = 'custom-counter ' + startValue;
|
||||
});
|
||||
|
||||
// Adding event handlers to the links nested in headings on the page, allowing users to copy links by clicking on the link icon next to the heading.
|
||||
let headingsOnThisPage = $('#body-content').find(':header');
|
||||
for(let key in Object.values(headingsOnThisPage)){
|
||||
|
|
|
|||
|
|
@ -117,6 +117,12 @@ parasails.registerPage('basic-handbook', {
|
|||
});
|
||||
return subtopics;
|
||||
})();
|
||||
|
||||
// Set counters for items in ordered lists to be the value of their "start" attribute.
|
||||
document.querySelectorAll('ol[start]').forEach((ol)=> {
|
||||
let startValue = parseInt(ol.getAttribute('start'), 10) - 1;
|
||||
ol.style.counterReset = 'custom-counter ' + startValue;
|
||||
});
|
||||
},
|
||||
|
||||
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
|
||||
|
|
|
|||
|
|
@ -205,6 +205,44 @@
|
|||
[purpose='checklist-item']::marker {
|
||||
display: none;
|
||||
}
|
||||
ol {
|
||||
counter-reset: custom-counter;
|
||||
list-style-type: none;
|
||||
padding-inline-start: 0px;
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 20px;
|
||||
li {
|
||||
counter-increment: custom-counter;
|
||||
margin-left: 36px;
|
||||
text-indent: -36px;
|
||||
padding-left: 0px;
|
||||
margin-bottom: 16px;
|
||||
code:not(.nohighlight):not(.mermaid) {
|
||||
display: inline;
|
||||
}
|
||||
p {
|
||||
display: inline;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
blockquote {
|
||||
text-indent: 0px;
|
||||
}
|
||||
}
|
||||
li::before {
|
||||
content: counter(custom-counter);
|
||||
background-color: #E2E4EA;
|
||||
width: 24px;
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
padding: 2px 4px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
text-indent: 0px;
|
||||
}
|
||||
}
|
||||
a > code:not(.hljs):not(.nohighlight):not(.mermaid) {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
|
|
|
|||
|
|
@ -608,16 +608,53 @@
|
|||
ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 32px;
|
||||
padding-inline-start: 16px;
|
||||
padding: 0 0 0 40px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 20px;
|
||||
pre {
|
||||
margin: 0px 0px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
ol {
|
||||
counter-reset: custom-counter;
|
||||
list-style-type: none;
|
||||
padding-inline-start: 0px;
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 20px;
|
||||
padding-inline-start: 16px;
|
||||
padding: 0 0 0 40px;
|
||||
|
||||
li {
|
||||
counter-increment: custom-counter;
|
||||
margin-left: 36px;
|
||||
text-indent: -36px;
|
||||
padding-left: 0px;
|
||||
margin-bottom: 16px;
|
||||
code:not(.nohighlight):not(.mermaid) {
|
||||
display: inline;
|
||||
}
|
||||
p {
|
||||
display: inline;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
blockquote {
|
||||
text-indent: 0px;
|
||||
}
|
||||
}
|
||||
li::before {
|
||||
content: counter(custom-counter);
|
||||
background-color: #E2E4EA;
|
||||
width: 24px;
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
padding: 2px 4px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
text-indent: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
|
|||
|
|
@ -251,9 +251,41 @@
|
|||
}
|
||||
}
|
||||
ol {
|
||||
padding-left: 16px;
|
||||
counter-reset: custom-counter;
|
||||
list-style-type: none;
|
||||
padding-inline-start: 0px;
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 20px;
|
||||
li {
|
||||
padding-bottom: 16px;
|
||||
counter-increment: custom-counter;
|
||||
margin-left: 36px;
|
||||
text-indent: -36px;
|
||||
padding-left: 0px;
|
||||
margin-bottom: 16px;
|
||||
code:not(.nohighlight):not(.mermaid) {
|
||||
display: inline;
|
||||
}
|
||||
p {
|
||||
display: inline;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
blockquote {
|
||||
text-indent: 0px;
|
||||
}
|
||||
}
|
||||
li::before {
|
||||
content: counter(custom-counter);
|
||||
background-color: #E2E4EA;
|
||||
width: 24px;
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
padding: 2px 4px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
text-indent: 0px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
|
|
|
|||
Loading…
Reference in a new issue