Skip to content

Commit 9bfe40b

Browse files
danny-aviladanny-avila
authored
⏺️ style: Better Markdown Lists (danny-avila#3777)
* style: markdown lists * style: markdown lists, second pass * style: update nested list styles in style.css
1 parent 07f5201 commit 9bfe40b

File tree

1 file changed

+89
-220
lines changed

1 file changed

+89
-220
lines changed

‎client/src/style.css‎

Lines changed: 89 additions & 220 deletions
Original file line numberDiff line numberDiff line change
@@ -639,12 +639,6 @@ pre {
639639
.prose :where(thead th strong):not(:where([class~='not-prose'] *)) {
640640
color: inherit;
641641
}
642-
.prose :where(ul):not(:where([class~='not-prose'] *)) {
643-
list-style-type: disc;
644-
margin-bottom: 0.1em;
645-
margin-top: 0.1em;
646-
padding-left: 1.625em;
647-
}
648642
.prose :where(ul > li):not(:where([class~='not-prose'] *))::marker {
649643
color: var(--tw-prose-bullets);
650644
}
@@ -1255,20 +1249,6 @@ html {
12551249
height: 100%;
12561250
}
12571251

1258-
.markdown ul li {
1259-
display: block;
1260-
margin: 0;
1261-
position: relative;
1262-
}
1263-
1264-
.markdown ul li:before {
1265-
content: '•';
1266-
font-size: 0.875rem;
1267-
line-height: 1.25rem;
1268-
margin-left: -1rem;
1269-
position: absolute;
1270-
}
1271-
12721252
.markdown {
12731253
max-width: none;
12741254
font-size: var(--markdown-font-size, var(--font-size-base));
@@ -1318,13 +1298,6 @@ html {
13181298
padding-left: 1rem;
13191299
}
13201300

1321-
/* .markdown ol, */
1322-
.markdown ul {
1323-
display: flex;
1324-
flex-direction: column;
1325-
padding-left: 1rem;
1326-
}
1327-
13281301
.markdown table {
13291302
--tw-border-spacing-x: 0px;
13301303
--tw-border-spacing-y: 0px;
@@ -1539,18 +1512,6 @@ html {
15391512
height: 100%;
15401513
}
15411514

1542-
.markdown ul li {
1543-
display: block;
1544-
margin: 0;
1545-
position: relative;
1546-
}
1547-
.markdown ul li:before {
1548-
content: '•';
1549-
font-size: calc(var(--markdown-font-size) * 0.875);
1550-
line-height: calc(var(--markdown-font-size) * 1.25);
1551-
margin-left: -1rem;
1552-
position: absolute;
1553-
}
15541515
.markdown {
15551516
max-width: none;
15561517
}
@@ -1815,7 +1776,9 @@ button.scroll-convo {
18151776
}
18161777

18171778
.result-streaming > :not(ol):not(ul):not(pre):last-child:after,
1818-
.result-streaming > pre:last-child code:after {
1779+
.result-streaming > pre:last-child code:after,
1780+
.result-streaming > ol:last-child > li:last-child:after,
1781+
.result-streaming > ul:last-child > li:last-child:after {
18191782
display: inline-block;
18201783
content: '⬤';
18211784
width: 12px;
@@ -1829,103 +1792,9 @@ button.scroll-convo {
18291792
}
18301793

18311794
@supports (selector(:has(*))) {
1832-
.result-streaming > ol:last-child > li:last-child > ol:last-child > li:last-child:after,
1833-
.result-streaming
1834-
> ol:last-child
1835-
> li:last-child
1836-
> ol:last-child
1837-
> li:last-child
1838-
> ol:last-child
1839-
> li:last-child:after,
1840-
.result-streaming
1841-
> ol:last-child
1842-
> li:last-child
1843-
> ol:last-child
1844-
> li:last-child
1845-
> ul:last-child
1846-
> li:last-child:after,
1847-
.result-streaming > ol:last-child > li:last-child > ul:last-child > li:last-child:after,
1848-
.result-streaming
1849-
> ol:last-child
1850-
> li:last-child
1851-
> ul:last-child
1852-
> li:last-child
1853-
> ol:last-child
1854-
> li:last-child:after,
1855-
.result-streaming
1856-
> ol:last-child
1857-
> li:last-child
1858-
> ul:last-child
1859-
> li:last-child
1860-
> ul:last-child
1861-
> li:last-child:after,
1862-
.result-streaming > ul:last-child > li:last-child > ol:last-child > li:last-child:after,
1863-
.result-streaming
1864-
> ul:last-child
1865-
> li:last-child
1866-
> ol:last-child
1867-
> li:last-child
1868-
> ol:last-child
1869-
> li:last-child:after,
1870-
.result-streaming
1871-
> ul:last-child
1872-
> li:last-child
1873-
> ol:last-child
1874-
> li:last-child
1875-
> ul:last-child
1876-
> li:last-child:after,
1877-
.result-streaming > ul:last-child > li:last-child > ul:last-child > li:last-child:after,
1878-
.result-streaming
1879-
> ul:last-child
1880-
> li:last-child
1881-
> ul:last-child
1882-
> li:last-child
1883-
> ol:last-child
1884-
> li:last-child:after,
1885-
.result-streaming
1886-
> ul:last-child
1887-
> li:last-child
1888-
> ul:last-child
1889-
> li:last-child
1890-
> ul:last-child
1891-
> li:last-child:after,
1892-
.result-streaming > ul:last-child > li:last-child[*|\:not-has\(]:after {
1893-
content: '⬤';
1894-
font-family: system-ui, Inter, Söhne Circle, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
1895-
Noto Sans, sans-serif;
1896-
line-height: normal;
1897-
margin-left: 0.25rem;
1898-
vertical-align: middle;
1899-
font-size: 0.5rem;
1900-
display: inline-block;
1901-
width: 12px;
1902-
height: 12px;
1903-
}
1904-
.result-streaming > ul:last-child > li:last-child:not(:has(* > li)):after {
1905-
content: '⬤';
1906-
font-family: system-ui, Inter, Söhne Circle, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
1907-
Noto Sans, sans-serif;
1908-
line-height: normal;
1909-
margin-left: 0.25rem;
1910-
vertical-align: middle;
1911-
font-size: 0.5rem;
1912-
display: inline-block;
1913-
width: 12px;
1914-
height: 12px;
1915-
}
1916-
.result-streaming > ol:last-child > li:last-child[*|\:not-has\(]:after {
1917-
content: '⬤';
1918-
font-family: system-ui, Inter, Söhne Circle, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
1919-
Noto Sans, sans-serif;
1920-
line-height: normal;
1921-
margin-left: 0.25rem;
1922-
vertical-align: middle;
1923-
font-size: 0.5rem;
1924-
display: inline-block;
1925-
width: 12px;
1926-
height: 12px;
1927-
}
1928-
.result-streaming > ol:last-child > li:last-child:not(:has(* > li)):after {
1795+
.result-streaming > :not(ol):not(ul):last-child:after,
1796+
.result-streaming > ol:last-child > li:last-child:not(:has(ol)):not(:has(ul)):after,
1797+
.result-streaming > ul:last-child > li:last-child:not(:has(ol)):not(:has(ul)):after {
19291798
content: '⬤';
19301799
font-family: system-ui, Inter, Söhne Circle, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
19311800
Noto Sans, sans-serif;
@@ -1939,6 +1808,7 @@ button.scroll-convo {
19391808
}
19401809
}
19411810
@supports not (selector(:has(*))) {
1811+
.result-streaming > :not(ol):not(ul):last-child:after,
19421812
.result-streaming > ol:last-child > li:last-child:after,
19431813
.result-streaming > ul:last-child > li:last-child:after {
19441814
content: '⬤';
@@ -1968,12 +1838,6 @@ button.scroll-convo {
19681838
}
19691839

19701840
/* Ordered Listing */
1971-
.prose :where(ol):not(:where([class~='not-prose'] *)) {
1972-
list-style-type: decimal;
1973-
margin-bottom: 1.25em;
1974-
margin-top: 0;
1975-
padding-left: 1.625em;
1976-
}
19771841
.prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
19781842
list-style-type: upper-alpha;
19791843
}
@@ -2001,13 +1865,6 @@ button.scroll-convo {
20011865
.prose :where(ol[type='1']):not(:where([class~='not-prose'] *)) {
20021866
list-style-type: decimal;
20031867
}
2004-
.prose :where(ol > li):not(:where([class~='not-prose'] *))::marker {
2005-
color: var(--tw-prose-counters);
2006-
font-weight: 400;
2007-
}
2008-
.prose :where(ol > li):not(:where([class~='not-prose'] *)) {
2009-
padding-left: 0.375em;
2010-
}
20111868
.prose :where(.prose > ol > li > :first-child):not(:where([class~='not-prose'] *)) {
20121869
margin-top: 0;
20131870
}
@@ -2049,92 +1906,104 @@ button.scroll-convo {
20491906
margin-bottom: 1.3333333em;
20501907
}
20511908

2052-
.markdown .prose ol,
2053-
.markdown .prose p,
2054-
.markdown .prose ul {
2055-
margin-bottom: 1rem;
2056-
}
2057-
.markdown .prose ol:last-child,
2058-
.markdown .prose p:last-child,
2059-
.markdown .prose ul:last-child {
2060-
margin-bottom: 0;
1909+
/* Base styles for lists */
1910+
.prose ol, .prose ul,
1911+
.markdown ol, .markdown ul {
1912+
list-style-position: outside;
1913+
margin-top: 1em;
1914+
margin-bottom: 1em;
1915+
padding-left: 1.625em;
20611916
}
2062-
.markdown .prose p {
2063-
margin-bottom: 1rem;
2064-
margin-top: 1rem;
2065-
line-height: calc(
2066-
28px * var(--markdown-font-size, var(--font-size-base)) / var(--font-size-base)
2067-
);
1917+
1918+
.prose li,
1919+
.markdown li {
1920+
margin-bottom: 0.5em;
1921+
margin-top: 0.5em;
20681922
}
2069-
.markdown .prose ol,
2070-
.markdown .prose ul {
2071-
display: contents;
2072-
list-style-position: inside;
2073-
list-style-type: none;
2074-
margin-top: 0;
1923+
1924+
/* Ordered lists */
1925+
.prose ol,
1926+
.markdown ol {
1927+
list-style-type: decimal;
1928+
counter-reset: list-counter;
20751929
}
2076-
.markdown .prose ol > li,
2077-
.markdown .prose ul > li {
2078-
margin-bottom: 0;
2079-
margin-top: 0;
1930+
1931+
.prose ol > li,
1932+
.markdown ol > li {
20801933
position: relative;
1934+
padding-left: 0.375em;
20811935
}
2082-
.markdown .prose ol > li[\:has\(\.title-citation\)],
2083-
.markdown .prose ul > li[\:has\(\.title-citation\)] {
2084-
margin-bottom: 0.75rem;
1936+
1937+
.prose ol > li::marker,
1938+
.markdown ol > li::marker {
1939+
color: var(--tw-prose-counters);
1940+
font-weight: 400;
20851941
}
2086-
.markdown .prose ol > li:has(.title-citation),
2087-
.markdown .prose ul > li:has(.title-citation) {
2088-
margin-bottom: 0.75rem;
1942+
1943+
/* Nested ordered lists */
1944+
.prose ol ol,
1945+
.markdown ol ol {
1946+
list-style-type: lower-alpha;
20891947
}
2090-
.markdown .prose ol > li[\:has\(\.title-citation\)]:last-child,
2091-
.markdown .prose ul > li[\:has\(\.title-citation\)]:last-child {
2092-
margin-bottom: 0;
1948+
1949+
.prose ol ol ol,
1950+
.markdown ol ol ol {
1951+
list-style-type: lower-roman;
20931952
}
2094-
.markdown .prose ol > li:has(.title-citation):last-child,
2095-
.markdown .prose ul > li:has(.title-citation):last-child {
2096-
margin-bottom: 0;
1953+
1954+
/* Unordered lists */
1955+
.prose ul,
1956+
.markdown ul {
1957+
list-style-type: disc;
20971958
}
2098-
.markdown .prose ol > li:before,
2099-
.markdown .prose ul > li:before {
2100-
left: 0;
2101-
position: absolute;
1959+
1960+
.prose ul > li,
1961+
.markdown ul > li {
1962+
padding-left: 0.375em;
21021963
}
2103-
.markdown .prose ol > li button,
2104-
.markdown .prose ol > li > a,
2105-
.markdown .prose ul > li button,
2106-
.markdown .prose ul > li > a {
2107-
margin-bottom: 0;
2108-
margin-top: 0;
1964+
1965+
.prose ul > li::marker,
1966+
.markdown ul > li::marker {
1967+
color: var(--tw-prose-bullets);
21091968
}
2110-
.markdown .prose ol > li p,
2111-
.markdown .prose ul > li p {
2112-
margin-bottom: 0.5rem;
2113-
margin-top: 0;
1969+
1970+
/* Nested unordered lists */
1971+
.prose ul ul,
1972+
.markdown ul ul {
1973+
list-style-type: circle;
21141974
}
2115-
.markdown .prose ol > li ol,
2116-
.markdown .prose ol > li ul,
2117-
.markdown .prose ul > li ol,
2118-
.markdown .prose ul > li ul {
2119-
display: block;
2120-
margin-bottom: 0;
2121-
margin-left: 1rem;
2122-
margin-top: 0;
2123-
padding: 0;
1975+
1976+
.prose ul ul ul,
1977+
.markdown ul ul ul {
1978+
list-style-type: square;
21241979
}
2125-
.markdown .prose ol {
2126-
counter-reset: list-counter;
1980+
1981+
/* Nested lists */
1982+
.prose ol ol, .prose ul ul, .prose ul ol, .prose ol ul,
1983+
.markdown ol ol, .markdown ul ul, .markdown ul ol, .markdown ol ul {
1984+
margin-top: 0.75em;
1985+
margin-bottom: 0.75em;
21271986
}
2128-
.markdown .prose ol > li {
2129-
counter-increment: list-counter;
2130-
padding-left: 2rem;
1987+
1988+
/* Remove extra spacing */
1989+
.prose > ul > li > *:first-child,
1990+
.prose > ol > li > *:first-child,
1991+
.markdown > ul > li > *:first-child,
1992+
.markdown > ol > li > *:first-child {
1993+
margin-top: 1.25em;
21311994
}
2132-
.markdown .prose ol > li:before {
2133-
color: var(--text-secondary);
2134-
content: counter(list-counter) '.';
1995+
1996+
.prose > ul > li > *:last-child,
1997+
.prose > ol > li > *:last-child,
1998+
.markdown > ul > li > *:last-child,
1999+
.markdown > ol > li > *:last-child {
2000+
margin-bottom: 1.25em;
21352001
}
2136-
.markdown .prose ul > li {
2137-
padding-left: 1.5rem;
2002+
2003+
/* Ensure proper marker color */
2004+
.prose li::marker,
2005+
.markdown li::marker {
2006+
color: currentColor;
21382007
}
21392008

21402009
/* Keyframes */

0 commit comments

Comments
 (0)