update list styling

src/components/markdown/MDXProvider.tsx

@@ -34,7 +34,7 @@ const components = {
             />
           </svg>
         </div>
-        <div className="ml-3">
+        <div className="ml-3 flex-1">
           <h3 className="info-block__heading">{title}</h3>
           <div className="info-block__body">{children}</div>
         </div>
@@ -87,7 +87,7 @@ const components = {
         </svg>
         Optional{title ? `: ${title}` : ''}
       </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>
   ),
   'problems-list': ProblemsListComponent,
@@ -127,9 +127,33 @@ const components = {
     />
   ),
   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" />,
+  '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 }) {

src/components/markdown/Markdown.tsx

@@ -3,9 +3,9 @@ import * as React from 'react';
 import 'katex/dist/katex.min.css';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 
-const Markdown = ({ body, className }) => {
+const Markdown = ({ body }) => {
   return (
-    <div className={`markdown ${className}`}>
+    <div className="markdown">
       <MDXRenderer>{body}</MDXRenderer>
     </div>
   );

src/components/markdown/Resources.tsx

@@ -6,10 +6,8 @@ export function ResourcesListComponent(props) {
   return (
     <div className="flex flex-col">
       <div
-        className={`overflow-x-auto ${
-          embedded
-            ? '-mx-4 sm:-mx-6'
-            : 'sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 -my-2 py-2'
+        className={`overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 -my-2 py-2 ${
+          embedded ? 'mb-2' : ''
         }`}
       >
         <div

src/styles/markdown.css

@@ -17,10 +17,6 @@
   @apply mt-0 mb-4;
 }
 
-.markdown li + li {
-  @apply mt-1;
-}
-
 .markdown li > p + p {
   @apply mt-6;
 }
@@ -37,10 +33,6 @@
   @apply font-bold;
 }
 
-.markdown h4 {
-  @apply leading-none text-base font-semibold mb-4 mt-6;
-}
-
 .markdown h5 {
   @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;
 }
 
-.markdown ul {
-  @apply text-base list-disc mb-4;
+.markdown ul,
+.markdown ol {
+  @apply pl-4 mb-6;
 }
 
 .markdown ul ul {
-  list-style-type: circle;
+  @apply mt-1 pl-2 mb-0;
 }
 
-.markdown ul ul ul {
-  list-style-type: square;
+.markdown ul > li {
+  @apply mb-3;
 }
 
-.markdown--module ul {
-  @apply pl-8;
-}
-
-.markdown ul ul {
+.markdown ul > li:last-of-type {
   @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 {
   @apply mb-0;
 }
 
 .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 {
@@ -90,10 +105,6 @@
   @apply bg-gray-100 !important;
 }
 
-.markdown--module .syllabus-only {
-  display: none;
-}
-
 .spoiler-body > pre {
   margin-left: -1rem !important;
   margin-right: -1rem !important;

src/templates/moduleTemplate.tsx

@@ -73,7 +73,7 @@ export default function Template(props) {
               </div>
             )}
 
-            <Markdown body={body} className="markdown--module" />
+            <Markdown body={body} />
           </div>
         </ModuleLayout>
       </div>