Add ol examples and breakpoints (#1620)

Author: paulo-valim

Cheatsheet.cheatmd

@@ -63,9 +63,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante consectetur
 ## Section
 {: .col-2}
 
-"highlight the content in a paragraph"
-{: .prime}
-
 "wrap a very long text"
 {: .wrap}
 ```
@@ -175,6 +172,14 @@ Add `wrap` to wrap long lines.
 
 Here's an extra paragraph after the list.
 
+### Ordered List
+
+1. I'm first;
+2. You are second;
+3. We are third;
+
+#### That was cool!
+
 ### Lists with headings
 
 #### Part 1

assets/css/content/cheatsheet.css

@@ -76,7 +76,7 @@
 /* Paragraphs */
 
 .page-cheatmd .h2 p {
-  margin:  0;
+  margin: 0;
   display: block;
   background: var(--gray50);
   padding: 1.5em;
@@ -94,10 +94,15 @@
 
 /* Code blocks */
 
-.page-cheatmd .h2 pre code {
+.page-cheatmd pre code {
   padding: 1em 1.5em;
 }
 
+.page-cheatmd pre code::-webkit-scrollbar {
+  width: 0.4rem;
+  height: 0.6rem;
+}
+
 .page-cheatmd .h2 pre {
   margin: 0;
 }
@@ -243,13 +248,27 @@
 
 /* Media query */
 
-@media (max-width: 1080px) {
+@media (max-width: 1400px) {
   .page-cheatmd section.col-3 {
     column-count: 2;
     column-gap: 40px;
   }
 }
 
+@media (max-width: 1200px) {
+  .page-cheatmd section.col-3,
+  .page-cheatmd section.col-2 {
+    column-count: 1;
+  }
+}
+
+@media (max-width: 850px) {
+  .page-cheatmd section.col-2-left {
+    display: block;
+    column-count: 1;
+  }
+}
+
 @media (max-width: 850px) {
   .page-cheatmd section.col-2-left {
     display: block;