Last cheatsheet adjustments

Author: josevalim

Cheatsheet.cheatmd

@@ -1,39 +1,18 @@
 # Cheatsheet User Guide
 
 This document is a cheatsheet on how to use cheatsheets.
-Cheatsheets are Markdown files with the `.cheatmd` extension.
+Cheatsheets are Markdown files with the `.cheatmd` extension. You may also check the source of this document as a reference.
 
 ## I'm a H2 title with 2 columns
 {: .col-2}
 
-### To configure columns use the H2 title
-
-| `full page` |_*default_|
-| `.width-50` | "half page" |
-| `.col-2` | "two-column"|
-| `.col-3` | "three-column"|
-| `-col-2-left` | "two-columns" (1/3 - 2/3) |
-
-Set the number of columns under the H2 titles. 
-
 ### I'm a H3 title
 
-Use H3 to start a new topic.
-
 #### I'm a H4 title.
 
-### Tables
+And this is a paragraph.
 
-| `.full-page` | "full page" _*default_|
-| `.col-2` | "two-column"|
-| `.col-3` | "three-column"|
-| `-col-2-left` | "two-columns" (1/3 - 2/3) |
-| `.col-4` | "four-columns for lists"|
-| `.col-6` | "six-columns for lists"|
-| `.wrap` | "wrap a content"|
-| `.table-col` | "tables will take only 50% of the page"|
-
-### Code and 3 columns
+### Code
 
 ```elixir
 # hello.exs
@@ -49,63 +28,61 @@ Greeter.greet("world")
 
 ### Paragraphs
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante consectetur, pharetra magna a, malesuada lectus. Mauris porttitor ligula dui, at egestas augue hendrerit eget. Morbi lorem urna, scelerisque ut sem et, sollicitudin porta nulla.
+Paragraphs are also supported and can quote `code`.
+
+Several paragraphs are visually distinct.
 
 ### Lists
 
 - Element 1
 - Element 2
 - `piece of code`
 
-### Adding variants
 
-```
-## Section
-{: .col-2}
+### Table
 
-"wrap a very long text"
-{: .wrap}
-```
+#### Date
 
-Ex_docs uses Kramdown, and supports adding classes via Kramdown's syntax.
+| Example         | Output                 |
+| ---             | ---                    |
+| `%m/%d/%Y`      | `06/05/2013`           |
+| `%A, %B %e, %Y` | `Sunday, June 5, 2013` |
+| `%b %e %a`      | `Jun 5 Sun`            |
 
-Full page and H3 titles
------------
-{: .full-page}
+This is a basic table with a h4 header.
 
-### H3 tittles sections
+## Variants
+{: .col-2}
 
-Each section can have the following children:
+### Adding variants
 
-#### H4 title
+```
+## H2
+{: .col-2}
 
-- `h4`
-- `lists`
-- `tables`
+### H3
+{: .list-6}
 
-A paragraph with a cool text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante consectetur, pharetra magna a, malesuada lectus. Mauris porttitor ligula dui, at egestas augue hendrerit eget.
+* example 1
+* example 2
+```
 
-- `p`
+Variants customize how your cheatsheet looks like via Markdown's inline attribute notation.
 
-```elixir
-Enum.map(users, fn user ->
-  IO.puts "Hello " <> user
-end)
-```
-- `code`
+### Header variants
 
-A highlight section!
-This is a section with `{: .prime}`. Notice the fancy highlight! Great for "getting started" kind of snippets.
-{: .prime}
+#### H2
 
-### H3 title
+| `.col-2` | two-columns |
+| `.col-3` | three-columns |
+| `.col-2-left` | two-columns (1/3 - 2/3) |
 
-Every box is an H3 title. The box will encompass everything inside the body of the H3.
+#### H3
 
-This is a basic section with paragraphs in it.
+| `.list-4` | four-columns for lists |
+| `.list-6` | six-columns for lists |
 
-Code
-----
+## Code
 {: .col-3}
 
 ### Code with headings
@@ -128,7 +105,7 @@ Code blocks can have headings.
 
 ### Long lines
 
-```
+```elixir
 defmodule MyTracer do
   def trace({:remote_function, _meta, module, name, arity}, env) do
     IO.puts "#{env.file}:#{env.line} #{inspect(module)}.#{name}/#{arity}"
@@ -164,42 +141,37 @@ Add `wrap` to wrap long lines.
 ## Lists
 {: .col-2}
 
-### Lists
+### Bullet lists
 
 - This is
 - a list
 - with a few items
 
-Here's an extra paragraph after the list.
-
-### Ordered List
+### Ordered lists
 
 1. I'm first;
 2. You are second;
 3. We are third;
 
-#### That was cool!
+Here's an extra paragraph after the list.
 
-### Lists with headings
+### With headings and code links
 
 #### Part 1
 
-- `createElement()`
-- `componentDidMount()`
-- `componentWillUnmount()`
+- `is_atom/1`
+- `is_binary/1`
+- `is_number/1`
 
 #### Part 2
 
-- `shouldComponentUpdate()`
-- `componentWillReceiveProps()`
-
-
-Here's an extra paragraph after the list.
+- `length/1`
+- `elem/2`
 
 ## List columns
 
 ### Six columns
-{: .col-6}
+{: .list-6}
 
 - One
 - Two
@@ -213,10 +185,10 @@ Here's an extra paragraph after the list.
 - Ten
 - Eleven
 
-Add `{: .col-6}` after the H3 title to make large lists.
+Add `{: .list-6}` after the H3 title to make large lists.
 
 ### Four columns
-{: .col-4}
+{: .list-4}
 
 - One
 - Two
@@ -230,52 +202,27 @@ Add `{: .col-6}` after the H3 title to make large lists.
 - Ten
 - Eleven
 
-Add `{: .col-4}` after the H3 title to make large lists.
-
-## Full page table
-
-### Basic table
-
-#### Date
-
-| Example         | Output                 |
-| ---             | ---                    |
-| `%m/%d/%Y`      | `06/05/2013`           |
-| `%A, %B %e, %Y` | `Sunday, June 5, 2013` |
-| `%b %e %a`      | `Jun 5 Sun`            |
-
-#### Time
+Add `{: .list-4}` after the H3 title to make large lists.
 
-| Example         | Output                 |
-| ---             | ---                    |
-| `%H:%M`         | `23:05`                |
-| `%I:%M %p`      | `11:05 PM`             |
+## Full page
 
-This is a basic table with h4's.
+This is the default.
 
-## Page width 50%
+## Half width
 {: .width-50}
 
 ### I make tables look nicer
 
-#### Date
-
-| Example         | Output                 |
-| ---             | ---                    |
-| `%m/%d/%Y`      | `06/05/2013`           |
-| `%A, %B %e, %Y` | `Sunday, June 5, 2013` |
-| `%b %e %a`      | `Jun 5 Sun`            |
-
 #### Time
 
 | Example         | Output                 |
 | ---             | ---                    |
 | `%H:%M`         | `23:05`                |
 | `%I:%M %p`      | `11:05 PM`             |
 
-Use `.width-50` for a half page content.
+Add `{: .width-50}` after the H2 title to use only half width.
 
-## Left reference
+## Column left reference
 {: .col-2-left}
 
 ### One
@@ -307,14 +254,10 @@ IO.puts "Hello, " <> user.name
 
 ### Three
 
-```
-defmodule MyModule do 
-	def hello_world do 
-			IO.puts("Hello, World!") 
-	end 
-end
-```
+* Yet
+* Another
+* List
 
 ### Four
 
-I'm a grid, with 1/3 - 2/3 table width.
+I'm a grid, with 1/3 - 2/3 width.

assets/css/content/cheatsheet.css

@@ -27,7 +27,7 @@
 .page-cheatmd h3 {
   white-space: nowrap;
   overflow: hidden;
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
   padding-left: 5px;
   color: var(--main);
   font-weight: 400;
@@ -68,7 +68,7 @@
 
 .page-cheatmd.dark h4 {
   background: #192f50;
-  color: #fff;
+  color: var(--textBody);
   border: 1px solid #192f50;
   border-bottom: 0;
 }
@@ -186,15 +186,6 @@
 
 /* Columns */
 
-.page-cheatmd section.full-page {
-  display: block;
-  width: 100%;
-}
-
-.page-cheatmd section.full-page > section > table {
-  width: 100%;
-}
-
 .page-cheatmd section.width-50 {
   display: block;
   width: 50%;
@@ -228,21 +219,21 @@
   height: auto;
 }
 
-.page-cheatmd section.col-4 > ul {
+.page-cheatmd section.list-4 > ul {
   display: flex;
   flex-wrap: wrap;
 }
 
-.page-cheatmd section.col-4 > ul > li {
+.page-cheatmd section.list-4 > ul > li {
   flex: 0 0 25%;
 }
 
-.page-cheatmd section.col-6 > ul {
+.page-cheatmd section.list-6 > ul {
   display: flex;
   flex-wrap: wrap;
 }
 
-.page-cheatmd section.col-6 > ul > li {
+.page-cheatmd section.list-6 > ul > li {
   flex: 0 0 16.6667%;
 }
 
@@ -266,27 +257,27 @@
     column-count: 1;
   }
 
-  .page-cheatmd section.col-6 > ul > li {
+  .page-cheatmd section.list-6 > ul > li {
     flex: 0 0 25%;
   }
 }
 
 @media (max-width: 1000px) {
-  .page-cheatmd section.col-4 > ul > li {
+  .page-cheatmd section.list-4 > ul > li {
     flex: 0 0 33%;
   }
 
-  .page-cheatmd section.col-6 > ul > li {
+  .page-cheatmd section.list-6 > ul > li {
     flex: 0 0 33%;
   }
 }
 
 @media (max-width: 600px) {
-  .page-cheatmd section.col-4 > ul > li {
+  .page-cheatmd section.list-4 > ul > li {
     flex: 0 0 50%;
   }
 
-  .page-cheatmd section.col-6 > ul > li {
+  .page-cheatmd section.list-6 > ul > li {
     flex: 0 0 50%;
   }
 }

assets/css/content/general.css

@@ -68,6 +68,9 @@
 .content-inner a.view-source:hover {
   color: var(--viewSourceHover);
 }
+.content-inner a.view-source:visited {
+  color: var(--viewSource);
+}
 
 .content-inner .settings {
   background-color: transparent;