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:
Eric 2024-01-05 15:25:11 -06:00 committed by GitHub
parent 4c16e08a80
commit 0d3f992874
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 129 additions and 5 deletions

View file

@ -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;
});
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗

View file

@ -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)){

View file

@ -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;
});
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗

View file

@ -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;

View file

@ -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 {

View file

@ -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 {