use modular scale, organize typographic elements

package.json

@@ -12,6 +12,7 @@
     "gh-pages": "^0.11.0",
     "gh-release": "^2.1.0",
     "live-server": "^1.1.0",
+    "modularscale-sass": "^2.1.1",
     "node-sass": "^3.9.3",
     "npm-run-all": "^3.1.0",
     "postcss-cli": "^2.6.0",
@@ -38,19 +39,20 @@
   },
   "scripts": {
     "generate": "run-s generate:**",
-    "generate:css": "node-sass style.scss -o ./ --output-style=expanded",
+    "generate:css": "npm run sass -- -o ./",
     "generate:prefix": "postcss -u autoprefixer -r style.css",
     "generate:sign": "cat style.css | pbcopy && echo \"/*! $npm_package_name v$npm_package_version | $npm_package_license License | $npm_package_homepage */\" > style.css && pbpaste >> style.css",
     "gh-pages": "npm run site && gh-pages -d site",
     "git-dirty": "exit-on-dirty-git",
     "prerelease": "run-s test generate git-dirty",
     "pretest": "npm run generate:css",
     "release": "git push origin master && gh-release && npm publish",
+    "sass": "node-sass style.scss --output-style=expanded --include-path node_modules/",
     "serve:site": "live-server site --port=8000",
     "serve:watch": "run-p watch:*",
     "site": "run-s site:**",
     "site:clean": "rm -rf site",
-    "site:css": "node-sass style.scss -o site/",
+    "site:css": "npm run sass -- -o site/",
     "site:css:sign": "cat site/style.css | pbcopy && echo \"/*! $npm_package_name v$npm_package_version | $npm_package_license License | $npm_package_homepage */\" > site/style.css && pbpaste >> site/style.css",
     "site:html": "sitedown . -b site/ -l src/site/layout.html --pretty=false",
     "start": "npm-run-all site --parallel serve:*",

src/scss/_embedded.scss

@@ -9,16 +9,3 @@ audio:not([controls]) {
   display: none;
   height: 0;
 }
-
-// Remove the border on images inside links in IE 10-.
-img {
-  border-style: none;
-  border: 0;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-// Hide the overflow in IE.
-svg:not(:root) {
-  overflow: hidden;
-}

src/scss/typography/_abbreviations.scss

@@ -0,0 +1,7 @@
+// 1. Remove the bottom border in Firefox 39-.
+// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+abbr[title] {
+  border-bottom: none; // 1
+  text-decoration: underline; // 2
+  text-decoration: underline dotted; // 2
+}

src/scss/typography/_blockquotes.scss

@@ -0,0 +1,9 @@
+blockquote {
+  margin: 0 0 1rem;
+  padding: 0 1rem;
+  color: $darker-gray;
+  border-left: 4px solid $light-gray;
+
+  &>:first-child { margin-top: 0; }
+  &>:last-child { margin-bottom: 0; }
+}

src/scss/typography/_definitions.scss

@@ -0,0 +1,21 @@
+// Add the correct font style in Android 4.3-.
+dfn { font-style: italic; }
+
+dd { margin-left: 0; }
+
+dl {
+  padding: 0;
+
+  dt {
+    padding: 0;
+    margin-top: 1em;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: bold;
+  }
+
+  dd {
+    padding: 0 1em;
+    margin-bottom: 1em;
+  }
+}

src/scss/typography/_emphasis.scss

@@ -0,0 +1,26 @@
+// 1. Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+// 2. Add the correct font weight in Chrome, Edge, and Safari.
+b,
+strong {
+  font-weight: inherit; // 1
+  font-weight: 600; // 2
+}
+
+// Add the correct background and color in IE 9-.
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub { bottom: -0.25em; }
+sup { top: -0.5em; }

src/scss/typography/_headings.scss

@@ -0,0 +1,21 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.25em;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  font-weight: 600;
+  position: relative;
+}
+
+// modular scale: 1.2
+// http://www.modularscale.com/?1&em&1.125&sass&text
+h1 { font-size: ms(6); }
+h2 { font-size: ms(5); }
+h3 { font-size: ms(4); }
+h4 { font-size: ms(3); }
+h5 { font-size: ms(2); }
+h6 { font-size: ms(1); color: $darkest-gray; }

src/scss/typography/_horizontal-rules.scss

@@ -0,0 +1,23 @@
+// 1. Add the correct box sizing in Firefox.
+// 2. Show the overflow in Edge and IE.
+hr {
+  box-sizing: content-box; // 1
+  overflow: visible; // 2
+  background: transparent;
+  height: 4px;
+  padding: 0;
+  margin: 1em 0;
+  background-color: #e7e7e7;
+  border: 0 none;
+
+  &::before {
+    display: table;
+    content: '';
+  }
+
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+}

src/scss/typography/_images.scss

@@ -0,0 +1,12 @@
+// Remove the border on images inside links in IE 10-.
+img {
+  border-style: none;
+  border: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+// Hide the overflow in IE.
+svg:not(:root) {
+  overflow: hidden;
+}

src/scss/typography/_index.scss

@@ -0,0 +1,31 @@
+// same margins for all typographic block elements
+p,
+blockquote,
+ul,
+ol,
+dl,
+table,
+pre {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+// Add the correct font size in all browsers.
+small { font-size: 80%; }
+
+@import 'headings';
+@import 'paragraphs';
+@import 'links';
+@import 'lists';
+@import 'blockquotes';
+@import 'emphasis';
+@import 'code';
+@import 'tables';
+@import 'horizontal-rules';
+@import 'images';
+@import 'figures';
+
+@import 'abbreviations';
+@import 'definitions';
+@import 'footnotes';
+@import 'special-emphasis';

src/scss/typography/_lists.scss

@@ -0,0 +1,17 @@
+ul,
+ol {
+  padding: 0;
+  padding-left: 2em;
+
+  ol { list-style-type: lower-roman; }
+
+  ul,
+  ol {
+    margin-top: 0;
+    margin-bottom: 0;
+
+    ol { list-style-type: lower-alpha; }
+  }
+}
+
+li > p { margin-top: 1em; }

src/scss/typography/_paragraphs.scss

@@ -0,0 +1,2 @@
+// tighten up body copy just a smidge
+p { letter-spacing: -0.01em; }