Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

documentation: Fix text wrapping and alignment of ordered lists. 

Moves CSS rules that rely on list items in an ordered list being
wrapped in a `<p>` tag so that they apply to the list item itself.
Uses `position: absolute` to set the `::before` pseudo-element in
place and `position: relative` to adjust the list items so that they
do not overlap.

Ideally, when Safari supports the `content` property for `::marker`
pseudo-elements, this issue can be revisited.

Fixes #20440.
This commit is contained in:
Lauryn Menard 2021-12-07 18:09:52 +01:00 committed by Tim Abbott
parent 9bb506c6f7
commit 58438c362f
1 changed files with 10 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
static/styles/portico/markdown.css
View File

@ -112,10 +112,17 @@
list-style: none;
& > li {
position: relative;
vertical-align: top;
/* This needs to be wide enough for 2-digit numbers. */
padding-left: 33px;
top: -2px;
counter-increment: item;
margin-bottom: 5px;
&::before {
position: absolute;
top: 0;
left: 0;
content: counter(item);
display: inline-block;
vertical-align: top;
@ -129,15 +136,6 @@
text-align: center;
}
& > p {
display: inline-block;
vertical-align: top;
/* This needs to be wide enough for 2-digit numbers. */
max-width: calc(100% - 40px);
position: relative;
top: -2px;
}
& > .codehilite,
& > p:not(:first-child) {
padding-left: 24px;
@ -149,7 +147,7 @@
}
& > ul {
padding-left: 20px;
margin-bottom: 5px;
}
.warn,
@ -159,10 +157,6 @@
}
}
p {
margin: 0 0 2px;
}
@media (width <= 500px) {
margin-left: 0;
}
@ -189,7 +183,7 @@
margin: 15px 10px;
& > li {
margin: 5px 0;
margin: 2.5px 0;
}
}