Add Article Markdown Styling

rajatjindal · Feb 10, 2019 · fbc8941 · fbc8941
1 parent f793a0d
commit fbc8941
Show file tree

Hide file tree

Showing 3 changed files with 345 additions and 3 deletions.
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -2,6 +2,6 @@
 layout: default
 ---
 
-<div class="container m-3 p-5">
+<div class="container article m-3 p-5">
     {{ content }}
 </div>
diff --git a/_posts/2019-02-06-default.md b/_posts/2019-02-06-default.md
@@ -1,8 +1,263 @@
 ---
 title: Default Article
-tags: [TAG 1, TAG 2]
+tags: [Markdown]
 style: 
 color: 
 ---
 
-Utamur recusabo et eam, ex hinc habemus feugait sea, clita noluisse principes te quo. Debet facilis sea no, at oratio volutpat vim. Et labores elaboraret cum, sit at ornatus graecis constituam. Cum ut invidunt volutpat assentior, mei no labores facilis patrioque. Id praesent philosophia mediocritatem sit. Vel elit duis ferri id.
+This cheatsheet is specifically *Markdown Here's* version of Github-flavored Markdown. This differs slightly in styling and syntax from what Github uses, so what you see below might vary a little from what you get in a *Markdown Here* email, but it should be pretty close.
+
+**Reference:** [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
+
+---
+
+##### Table of Contents
+
+[Headers](#headers)  
+[Emphasis](#emphasis)  
+[Lists](#lists)  
+[Links](#links)  
+[Images](#images)  
+[Code](#code)  
+[Tables](#tables)  
+[Blockquotes](#blockquotes)  
+[Inline HTML](#inline-html)  
+[Horizontal Rule](#horizontal-rule)  
+[Line Breaks](#line-breaks)  
+
+
+## Headers
+
+```
+# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+```
+
+# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+
+
+## Emphasis
+
+```
+Emphasis, aka italics, with *asterisks* or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or __underscores__.
+
+Combined emphasis with **asterisks and _underscores_**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~
+```
+
+Emphasis, aka italics, with *asterisks* or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or __underscores__.
+
+Combined emphasis with **asterisks and _underscores_**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~
+
+
+## Lists
+
+```
+1. First ordered list item
+2. Another item
+  * Unordered sub-list. 
+1. Actual numbers don't matter, just that it's a number
+  1. Ordered sub-list
+4. And another item.  
+   
+   Some text that should be aligned with the above item.
+
+* Unordered list can use asterisks
+- Or minuses
++ Or pluses
+```
+
+1. First ordered list item
+2. Another item
+  * Unordered sub-list. 
+1. Actual numbers don't matter, just that it's a number
+  1. Ordered sub-list
+4. And another item.  
+
+   Some text that should be aligned with the above item.
+
+* Unordered list can use asterisks
+- Or minuses
++ Or pluses
+
+
+## Links
+
+There are two ways to create links.
+
+```
+[I'm an inline-style link](https://www.google.com)
+```
+
+[I'm an inline-style link](https://www.google.com)
+
+
+## Images
+
+```
+Here's our Image (hover to see the title text):
+
+![alt text](https://abduzeedo.com/sites/default/files/styles/home_cover/public/originals/774d7136454775.57e1768e3a5ad.jpg?itok=b6Gzb0d9 "Image Title Text 1")
+
+```
+
+Here's our Image (hover to see the title text):
+
+![alt text](https://abduzeedo.com/sites/default/files/styles/home_cover/public/originals/774d7136454775.57e1768e3a5ad.jpg?itok=b6Gzb0d9 "Image Title Text 1")
+
+
+## Code
+
+```
+Inline `code` has `back-ticks around` it.
+```
+
+Inline `code` has `back-ticks around` it.
+
+Blocks of code are fenced by lines with three back-ticks <code class="highlighter-rouge">```</code>.
+
+```
+s = "Code Block Test";
+print s;
+```
+
+
+## Tables
+
+```
+Colons can be used to align columns.
+
+| Tables        | Are           | Cool  |
+| ------------- |:-------------:| -----:|
+| col 3 is      | right-aligned | $1600 |
+| col 2 is      | centered      |   $12 |
+| zebra stripes | are neat      |    $1 |
+
+Markdown | Less | Pretty
+--- | --- | ---
+*Still* | `renders` | **nicely**
+1 | 2 | 3
+```
+
+Colons can be used to align columns.
+
+| Tables        | Are           | Cool |
+| ------------- |:-------------:| -----:|
+| col 3 is      | right-aligned | $1600 |
+| col 2 is      | centered      |   $12 |
+| zebra stripes | are neat      |    $1 |
+
+Markdown | Less | Pretty
+--- | --- | ---
+*Still* | `renders` | **nicely**
+1 | 2 | 3
+
+
+## Blockquotes
+
+```
+> Blockquotes are very handy in email to emulate reply text.
+> This line is part of the same quote.
+
+Quote break.
+
+> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 
+```
+
+> Blockquotes are very handy in email to emulate reply text.
+> This line is part of the same quote.
+
+Quote break.
+
+> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 
+
+
+## Inline HTML
+
+You can also use raw HTML in your Markdown, and it'll mostly work pretty well. 
+
+```
+<dl>
+  <dt>Definition list</dt>
+  <dd>Is something people use sometimes.</dd>
+
+  <dt>Markdown in HTML</dt>
+  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
+</dl>
+```
+
+<dl>
+  <dt>Definition list</dt>
+  <dd>Is something people use sometimes.</dd>
+
+  <dt>Markdown in HTML</dt>
+  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
+</dl>
+
+
+## Horizontal Rule
+
+```
+Three or more...
+
+---
+
+Hyphens
+
+***
+
+Asterisks
+
+___
+
+Underscores
+```
+
+Three or more...
+
+---
+
+Hyphens
+
+***
+
+Asterisks
+
+___
+
+Underscores
+
+
+## Line Breaks
+
+```
+Here's a line for us to start with.
+
+This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
+
+This line is also a separate paragraph, but...
+This line is only separated by a single newline, so it's a separate line in the *same paragraph*.
+```
+
+Here's a line for us to start with.
+
+This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
+
+This line is also begins a separate paragraph, but...  
+This line is only separated by a single newline, so it's a separate line in the *same paragraph*.
diff --git a/_sass/_articles.scss b/_sass/_articles.scss
@@ -9,4 +9,91 @@
         margin: -15px;
         padding: 15px 35px;
     }
+}
+
+
+.article {
+    img {
+        display: block;
+        max-width: 100%;
+        height: auto;    
+        margin: 1rem auto;
+    }
+
+    hr { background: $secondary; }
+
+    h1, h2 { margin-top: 32px; }
+
+    a {
+        display: inline-block;
+        text-decoration: none;
+
+        &:hover { color: $primary; }
+
+        &::after {
+            content: '';
+            display: block;
+            height: .15em;
+            width: 0;
+            background: $primary;
+            transition: width .35s;
+        }
+
+        &:hover::after { width: 100%; }
+     }
+
+    pre {
+        background: $light;
+        border: 1px solid #ddd;
+        color: $dark;
+        font-family: monospace;
+        font-size: 14px;
+        line-height: 20px;
+        margin-bottom: 1.6em;
+        max-width: 100%;
+        padding: 1em 1.5em;
+        display: block;
+        page-break-inside: avoid;
+        overflow: auto;
+        word-wrap: break-word;
+    }
+
+    code.highlighter-rouge {
+        background-color: $light;
+        color: $dark;
+        border-radius: 3px;
+        font-size: 85%;
+        margin: 0;
+        padding: .2em .4em;
+    }
+
+    blockquote {
+        border-left: .25em solid $primary;
+        color: $secondary;
+        padding: 0 1em;
+    }
+
+    table {
+        width: 100%;
+        margin: 1rem 0;
+
+        td {
+            border: 1px solid #ddd;
+            padding: 8px 16px;
+        }
+
+        th {
+            @extend td;
+            padding-top: 12px;
+            padding-bottom: 12px;
+            font-weight: 500;
+            text-align: left;
+            background-color: $primary;
+            color: white;
+        }
+
+        tr:nth-child(even) {
+            background-color: $light;
+        }
+    }
 }