Tweak typography based on latest post

* Correct MD formatting in post

Author: kevinSuttle

_posts/2016-11-04-propelling-dx-through-config.md

@@ -5,67 +5,67 @@ title: 'Propelling developer experience through configuration'
 The number of config files per repo is slowly but surely overtaking the number of code files.    
 
 <figure>
-  <img src="/images/angular-github.png" alt="Angular">
+  <a href="https://cloudup.com/c8BGrAQmmgd"><img src="/images/angular-github.png" alt="Angular"></a>
   <figcaption>
-    <a href="https://cloudup.com/c8BGrAQmmgd">Hi-res source</a>
     <strong>Warning</strong>: large image <em>1.6 MB</em></figcaption>
 </figure>
 
 
 A brief, but not in any way exhaustive list of just the ones I've dealt with:
 
 ### Code meta (dependencies, instructions, declarations)
-- .eslintrc(.json)*
-- .gitconfig
-- .editorconfig
-- package.json
-- bower.json
-- gulpfile.js
-- gruntfile.js
-- project.xml
-- .vscode
-- .flowconfig
-- .tsconfig.json
-- .jsconfig.json
-- Gemfile
-- Gemfile.lock
-- Rakefile
-- .ruby-version
-- config.ru
-- Makefile
-- Dockerfile
-- Vagrantfile
-- _config.yml
-- config/
-- CNAME
-- travis.yml
-- docker-compose.yml
-- requirements.txt
-- manifest.yml
-- sass-lint.yml
-- .stylelint* 
-- Procfile
-- .babelrc*
-- Cargo.toml
+
+* `.eslintrc(.json)`*
+* `.gitconfig`
+* `.editorconfig`
+* `package.json`
+* `bower.json`
+* `gulpfile.js`
+* `gruntfile.js`
+* `project.xml`
+* `.vscode`
+* `.flowconfig`
+* `.tsconfig.json`
+* `.jsconfig.json`
+* `Gemfile`
+* `Gemfile.lock`
+* `Rakefile`
+* `.ruby-version`
+* `config.ru`
+* `Makefile`
+* `Dockerfile`
+* `Vagrantfile`
+* `_config.yml`
+* `config/`
+* `CNAME`
+* `travis.yml`
+* `docker-compose.yml`
+* `requirements.txt`
+* `manifest.yml`
+* `sass-lint.yml`
+* `.stylelint`*
+* `Procfile`
+* `.babelrc`*
+* `Cargo.toml`
 
 _* Can also be embedded into package.json_
 
-#### Ignore files
-- .cfignore
-- .eslintignore
-- .npmignore
-- .gitignore
+### Ignore files
+* `.cfignore`
+* `.eslintignore`
+* `.npmignore`
+* `.gitignore`
 
 ### Docs
-- README
-- CONTRIBUTING
-- DOCS
-- CODE OF CONDUCT
-- HISTORY/CHANGELOG
-- LICENSE
-- .github
-- .github/ISSUE_TEMPLATE.md
-- .github/PULL_REQUEST.md
+* `README`
+* `CONTRIBUTING`
+* `DOCS`
+* `CODE OF CONDUCT`
+* `HISTORY/CHANGELOG`
+* `LICENSE`
+* `.github`
+* `.github/ISSUE_TEMPLATE.md`
+* `.github/PULL_REQUEST.md`
 
 
 ## The Problems
@@ -130,15 +130,15 @@ on top of already supporting the aforementioned HTML5 Microdata, and [RDFa](http
 Why does it matter that HTML likes this kind of structured data? UX. Therer are multiple tools that have emerged in recent years that help people navigate dependencies and understand code at a better level. 
 
 Two such that come to mind, recalling that the "LD" stands for "Linked Data". 
- - http://octolinker.github.io/
- - https://sourcegraph.com/
+ - [Octolinker](http://octolinker.github.io/)
+ - [Sourcegraph](https://sourcegraph.com/)
 
 Now, think of the projects that span runtimes, leveraging web languages.
- - http://electron.atom.io/
- - https://facebook.github.io/react-native/
- - http://ionicframework.com/
+ - [Electron](http://electron.atom.io/)
+ - [React Native](https://facebook.github.io/react-native/)
+ - [Ionic](http://ionicframework.com/)
  - tons more
- 
+    
 There's no way I could even speculate the possibilties. 
 
 ### Other potential benefits

_sass/_colors.scss

@@ -61,6 +61,8 @@ a.home-link {
 article header {
 	.article-title {
 		color: lighten($body-copy-color, 50%);
+		margin-bottom: 0.25em;
+		
 		.article-permalink {
 			text-decoration: none;
 		}

_sass/_layout.scss

@@ -41,8 +41,7 @@ pre, samp {
 }
 
 ul {
-	list-style-type: none;
-	margin: 0;
+	margin: 0 0 1em 0;
 
 	li {
 		margin: 0;
@@ -116,8 +115,9 @@ article {
 	details > p {
 		margin-top: 1em;
 	}
-	h2 {
-		padding-bottom: .25em;
+	h2, h3 {
+		margin-top: 1.5em;
+		margin-bottom: .5em;
 	}
 	ul, & ol{
 		margin-left: 1em;

_sass/_reflow.scss

@@ -13,11 +13,9 @@
 	.page-wrapper, .footer-wrapper {
 		max-width: 25em;
 	}
-	article ol, article ul {
-		margin-left: 0;
-	}
 }
 
+
 @media all and (min-width: 41.875em) {
 	body {
 		font-size: 130%;

_sass/_typography.scss

@@ -38,6 +38,7 @@ samp,
 .highlight {
 	font-family: $code-font;
 	font-style: normal;
+	font-weight: normal;
 	white-space: pre-wrap;
 }
 
@@ -80,16 +81,21 @@ a:hover {
 	line-height: 1.6;
 	font-size: $base-font-size;
 
-	h2 {
+	h2, h3 {
 		font-family: $ui-font;
 		line-height: 1.3;
 	}
+	h4 {
+		font-family: $ui-font;
+	    font-weight: 100;
+	    text-transform: uppercase;
+	    letter-spacing: 1px;
+	    color: lightslategrey;
+	    margin: 1em 0 0.25em;
+	}
 	ul, ol {
 		list-style-type: square;
 		list-style-position: outside;
-		li {
-			margin-bottom: 1em;
-		}
 	}
 	aside {
 		font-style: italic;
@@ -118,9 +124,20 @@ a:hover {
 	line-height: 1.35;
 }
 
+figure {
+	border: 1px solid lightslategrey;
+}
+
+figcaption {
+	text-align: center;
+	padding: 0.5em;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    background-color: #f5f5f5;
+}
+
 .article-pubdate, figcaption {
 	font-family: $ui-font;
-	text-transform: uppercase;
 	letter-spacing: .0625em;
 	font-size: .75em;
 	font-weight: 300;

_sass/_variables.scss

@@ -4,7 +4,7 @@ $base-line-height: 1.5;
 
 $ui-font: -apple-system-font, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Noto Sans", "Noto", "Droid Sans", "Open Sans", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
 $content-font:  "Charter", "Roboto Slab", "Noto Serif", "Droid Serif", "PT Serif", "Cambria", "Constantia", "Liberation Serif", Georgia, serif;
-$code-font: "SF Mono", "Roboto Mono", "Noto Mono", "Droid Mono", "Monaco", "Inconsolata", "Ubuntu Mono", "Liberation Mono", monospace;
+$code-font: "SF Mono Regular", "Roboto Mono", "Noto Mono", "Droid Mono", "Monaco", "Inconsolata", "Ubuntu Mono", "Liberation Mono", monospace;
 
 // Colors
 $page-bg-color: #fdfdfd;

css/main.scss

@@ -3,6 +3,7 @@
 
 @import '../_sass/variables';
 @import '../_sass/colors';
+@import '../_sass/reflow';
 @import '../_sass/typography';
 @import '../_sass/layout';
-@import '../_sass/reflow';
+