Add ol examples and breakpoints (#1620)

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;