update list styling
This commit is contained in:
parent
7c16259ab2
commit
e58f3ef5a3
5 changed files with 66 additions and 33 deletions
|
@ -34,7 +34,7 @@ const components = {
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div className="ml-3">
|
<div className="ml-3 flex-1">
|
||||||
<h3 className="info-block__heading">{title}</h3>
|
<h3 className="info-block__heading">{title}</h3>
|
||||||
<div className="info-block__body">{children}</div>
|
<div className="info-block__body">{children}</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -87,7 +87,7 @@ const components = {
|
||||||
</svg>
|
</svg>
|
||||||
Optional{title ? `: ${title}` : ''}
|
Optional{title ? `: ${title}` : ''}
|
||||||
</div>
|
</div>
|
||||||
<div className="px-4 pt-5 pb-2 sm:p-6 sm:pb-2">{children}</div>
|
<div className="p-4 pb-0">{children}</div>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
'problems-list': ProblemsListComponent,
|
'problems-list': ProblemsListComponent,
|
||||||
|
@ -127,9 +127,33 @@ const components = {
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
h3: props => (
|
h3: props => (
|
||||||
<h3 {...props} className="leading-snug text-xl font-semibold mb-2 mt-4" />
|
<h3 {...props} className="leading-snug text-2xl font-semibold mb-4 mt-8" />
|
||||||
),
|
),
|
||||||
|
h4: props => (
|
||||||
|
<h4 {...props} className="leading-none text-xl font-semibold mb-2 mt-6" />
|
||||||
|
),
|
||||||
|
|
||||||
p: props => <p {...props} className="mb-4" />,
|
p: props => <p {...props} className="mb-4" />,
|
||||||
|
'ul.li': ({ children, ...props }) => (
|
||||||
|
<li {...props} className="flex">
|
||||||
|
<span className="mr-4">
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
height="16"
|
||||||
|
width="16"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
className="inline-block align-middle text-blue-600"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M322.7,128.4L423,233.4c6,5.8,9,13.7,9,22.4c0,8.7-3,16.5-9,22.4L322.7,383.6c-11.9,12.5-31.3,12.5-43.2,0
|
||||||
|
c-11.9-12.5-11.9-32.7,0-45.2l48.2-50.4h-217C93.7,288,80,273.7,80,256c0-17.7,13.7-32,30.6-32h217l-48.2-50.4
|
||||||
|
c-11.9-12.5-11.9-32.7,0-45.2C291.4,115.9,310.7,115.9,322.7,128.4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div>{children}</div>
|
||||||
|
</li>
|
||||||
|
),
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function ({ children }) {
|
export default function ({ children }) {
|
||||||
|
|
|
@ -3,9 +3,9 @@ import * as React from 'react';
|
||||||
import 'katex/dist/katex.min.css';
|
import 'katex/dist/katex.min.css';
|
||||||
import { MDXRenderer } from 'gatsby-plugin-mdx';
|
import { MDXRenderer } from 'gatsby-plugin-mdx';
|
||||||
|
|
||||||
const Markdown = ({ body, className }) => {
|
const Markdown = ({ body }) => {
|
||||||
return (
|
return (
|
||||||
<div className={`markdown ${className}`}>
|
<div className="markdown">
|
||||||
<MDXRenderer>{body}</MDXRenderer>
|
<MDXRenderer>{body}</MDXRenderer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -6,10 +6,8 @@ export function ResourcesListComponent(props) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<div
|
<div
|
||||||
className={`overflow-x-auto ${
|
className={`overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 -my-2 py-2 ${
|
||||||
embedded
|
embedded ? 'mb-2' : ''
|
||||||
? '-mx-4 sm:-mx-6'
|
|
||||||
: 'sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 -my-2 py-2'
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -17,10 +17,6 @@
|
||||||
@apply mt-0 mb-4;
|
@apply mt-0 mb-4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown li + li {
|
|
||||||
@apply mt-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown li > p + p {
|
.markdown li > p + p {
|
||||||
@apply mt-6;
|
@apply mt-6;
|
||||||
}
|
}
|
||||||
|
@ -37,10 +33,6 @@
|
||||||
@apply font-bold;
|
@apply font-bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown h4 {
|
|
||||||
@apply leading-none text-base font-semibold mb-4 mt-6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h5 {
|
.markdown h5 {
|
||||||
@apply leading-tight text-sm font-semibold mb-4 mt-6;
|
@apply leading-tight text-sm font-semibold mb-4 mt-6;
|
||||||
}
|
}
|
||||||
|
@ -53,32 +45,55 @@
|
||||||
@apply text-base border-l-4 border-gray-300 pl-4 pr-4 text-gray-600;
|
@apply text-base border-l-4 border-gray-300 pl-4 pr-4 text-gray-600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown ul {
|
.markdown ul,
|
||||||
@apply text-base list-disc mb-4;
|
.markdown ol {
|
||||||
|
@apply pl-4 mb-6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown ul ul {
|
.markdown ul ul {
|
||||||
list-style-type: circle;
|
@apply mt-1 pl-2 mb-0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown ul ul ul {
|
.markdown ul > li {
|
||||||
list-style-type: square;
|
@apply mb-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown--module ul {
|
.markdown ul > li:last-of-type {
|
||||||
@apply pl-8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown ul ul {
|
|
||||||
@apply mb-0;
|
@apply mb-0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.markdown ul ul > li {
|
||||||
|
@apply mb-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ol > li {
|
||||||
|
@apply mb-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ol > li:last-of-type {
|
||||||
|
@apply mb-0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ol ol > li {
|
||||||
|
@apply mb-1;
|
||||||
|
}
|
||||||
|
|
||||||
.markdown ul p {
|
.markdown ul p {
|
||||||
@apply mb-0;
|
@apply mb-0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown ol {
|
.markdown ol {
|
||||||
@apply text-base pl-8 list-decimal mb-4;
|
counter-reset: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ol li {
|
||||||
|
display: flex;
|
||||||
|
counter-increment: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ol li:before {
|
||||||
|
content: counters(number, '.') '.';
|
||||||
|
@apply text-blue-600 font-bold mr-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown kbd {
|
.markdown kbd {
|
||||||
|
@ -90,10 +105,6 @@
|
||||||
@apply bg-gray-100 !important;
|
@apply bg-gray-100 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown--module .syllabus-only {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spoiler-body > pre {
|
.spoiler-body > pre {
|
||||||
margin-left: -1rem !important;
|
margin-left: -1rem !important;
|
||||||
margin-right: -1rem !important;
|
margin-right: -1rem !important;
|
||||||
|
|
|
@ -73,7 +73,7 @@ export default function Template(props) {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<Markdown body={body} className="markdown--module" />
|
<Markdown body={body} />
|
||||||
</div>
|
</div>
|
||||||
</ModuleLayout>
|
</ModuleLayout>
|
||||||
</div>
|
</div>
|
||||||
|
|
Reference in a new issue