Website: update nested list styles on pages built from Markdown (#15994)

Closes: https://github.com/fleetdm/fleet/issues/15995

Changes:
- Updated nested list styles on pages built from Markdown to prevent
nested unordered lists from incrementing the counter of ordered lists.
This commit is contained in:
Eric 2024-01-09 12:57:47 -06:00 committed by GitHub
parent de1960c6de
commit e40767a68e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 8 deletions

View file

@ -205,6 +205,23 @@
[purpose='checklist-item']::marker {
display: none;
}
ul {
list-style-type: disc;
padding-left: 16px;
}
li {
line-height: 24px;
padding-bottom: 16px;
p { // Making sure our list items stay a consistent size if the contents get wrapped in a <p> tag coverted from Markdown.
margin-bottom: 0;
}
ol, ul { // adding padding to nested lists
padding-top: 16px;
li:last-child { // removing the padding from the last item of nested lists
padding-bottom: 0px;
}
}
}
ol {
counter-reset: custom-counter;
list-style-type: none;
@ -212,7 +229,11 @@
padding: 0;
margin-top: 16px;
margin-bottom: 20px;
li {
ul > li {
text-indent: 0px;
margin-left: 0px;
}
> li {
counter-increment: custom-counter;
margin-left: 36px;
text-indent: -36px;
@ -229,7 +250,7 @@
text-indent: 0px;
}
}
li::before {
> li::before {
content: counter(custom-counter);
background-color: #E2E4EA;
width: 24px;

View file

@ -609,7 +609,7 @@
list-style-type: disc;
padding-left: 32px;
padding-inline-start: 16px;
padding: 0 0 0 40px;
padding: 0 0 0 32px;
margin-top: 16px;
margin-bottom: 20px;
pre {
@ -624,8 +624,11 @@
padding: 0;
margin-top: 16px;
margin-bottom: 20px;
li {
ul > li {
text-indent: 0px;
margin-left: 0px;
}
> li {
counter-increment: custom-counter;
margin-left: 36px;
text-indent: -36px;
@ -642,7 +645,7 @@
text-indent: 0px;
}
}
li::before {
> li::before {
content: counter(custom-counter);
background-color: #E2E4EA;
width: 24px;

View file

@ -257,7 +257,11 @@
padding: 0;
margin-top: 16px;
margin-bottom: 20px;
li {
ul > li {
text-indent: 0px;
margin-left: 0px;
}
> li {
counter-increment: custom-counter;
margin-left: 36px;
text-indent: -36px;
@ -274,7 +278,7 @@
text-indent: 0px;
}
}
li::before {
> li::before {
content: counter(custom-counter);
background-color: #E2E4EA;
width: 24px;