src/components/@shared/Markdown/index.module.css
.markdown {
/* handling long text, like URLs */
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5 {
margin-bottom: calc(var(--spacer) / 2);
}
.markdown h1 {
font-size: var(--font-size-h3);
}
.markdown h2 {
font-size: var(--font-size-h4);
}
.markdown h3 {
font-size: var(--font-size-large);
}
.markdown h4,
.markdown h5 {
font-size: var(--font-size-base);
}
.markdown ul,
.markdown ol {
margin: 0;
margin-bottom: var(--spacer);
padding-left: 1.5rem;
}
.markdown ul {
list-style: none;
}
.markdown ul li {
position: relative;
display: block;
}
.markdown ul li:before {
content: '▪';
top: -2px;
position: absolute;
left: -1.5rem;
color: var(--brand-grey-light);
user-select: none;
}
.markdown li + li {
margin-top: calc(var(--spacer) / 8);
}
.markdown li ul,
.markdown li ol,
.markdown li p {
margin-bottom: 0;
margin-top: calc(var(--spacer) / 8);
}
.markdown hr {
display: block;
margin: calc(var(--spacer) * 1.5) auto;
max-width: 20%;
border: 0;
border-top: 2px solid var(--border-color);
}
.markdown img {
margin-bottom: calc(var(--spacer) / 2);
}