fix: use rem instead of em for line-height

css/clear-typography.css

@@ -1,163 +1,184 @@
 /* ------------------ FONT LOADING ------------------- */
 @font-face {
-  font-family: 'OpenSans';
+  font-family: "OpenSans";
   src: url("../fonts/OpenSans-Light-webfont.eot");
   src: url("../fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Light-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Light-webfont.woff") format("woff"), url("../fonts/OpenSans-Light-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Light-webfont.svg#open_sansbold") format("svg");
   font-weight: 300;
-  font-style: normal; }
+  font-style: normal;
-
+}
 @font-face {
-  font-family: 'OpenSans';
+  font-family: "OpenSans";
   src: url("../fonts/OpenSans-LightItalic-webfont.eot");
   src: url("../fonts/OpenSans-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-LightItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-LightItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-LightItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-LightItalic-webfont.svg#open_sansbold") format("svg");
   font-weight: 300;
-  font-style: italic; }
+  font-style: italic;
-
+}
 @font-face {
-  font-family: 'OpenSans';
+  font-family: "OpenSans";
   src: url("../fonts/OpenSans-Regular-webfont.eot");
   src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#open_sansbold") format("svg");
   font-weight: 400;
-  font-style: normal; }
+  font-style: normal;
-
+}
 @font-face {
-  font-family: 'OpenSans';
+  font-family: "OpenSans";
   src: url("../fonts/OpenSans-Italic-webfont.eot");
   src: url("../fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Italic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Italic-webfont.woff") format("woff"), url("../fonts/OpenSans-Italic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Italic-webfont.svg#open_sansbold") format("svg");
   font-weight: 400;
-  font-style: italic; }
+  font-style: italic;
-
+}
 @font-face {
-  font-family: 'OpenSans';
+  font-family: "OpenSans";
   src: url("../fonts/OpenSans-Semibold-webfont.eot");
   src: url("../fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Semibold-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Semibold-webfont.woff") format("woff"), url("../fonts/OpenSans-Semibold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Semibold-webfont.svg#open_sansbold") format("svg");
   font-weight: 600;
-  font-style: normal; }
+  font-style: normal;
-
+}
 @font-face {
-  font-family: 'OpenSans';
+  font-family: "OpenSans";
   src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot");
   src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-SemiboldItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-SemiboldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-SemiboldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-SemiboldItalic-webfont.svg#open_sansbold") format("svg");
   font-weight: 600;
-  font-style: italic; }
+  font-style: italic;
-
+}
 @font-face {
-  font-family: 'OpenSans';
+  font-family: "OpenSans";
   src: url("../fonts/OpenSans-Bold-webfont.eot");
   src: url("../fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Bold-webfont.svg#open_sansbold") format("svg");
   font-weight: 700;
-  font-style: normal; }
+  font-style: normal;
-
+}
 @font-face {
-  font-family: 'OpenSans';
+  font-family: "OpenSans";
   src: url("../fonts/OpenSans-BoldItalic-webfont.eot");
   src: url("../fonts/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-BoldItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-BoldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold") format("svg");
   font-weight: 700;
-  font-style: italic; }
+  font-style: italic;
-
+}
 @font-face {
-  font-family: 'OpenSans';
+  font-family: "OpenSans";
   src: url("../fonts/OpenSans-ExtraBold-webfont.eot");
   src: url("../fonts/OpenSans-ExtraBold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-ExtraBold-webfont.woff2") format("woff2"), url("../fonts/OpenSans-ExtraBold-webfont.woff") format("woff"), url("../fonts/OpenSans-ExtraBold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-ExtraBold-webfont.svg#open_sansbold") format("svg");
   font-weight: 800;
-  font-style: normal; }
+  font-style: normal;
-
+}
 @font-face {
-  font-family: 'OpenSans';
+  font-family: "OpenSans";
   src: url("../fonts/OpenSans-ExtraBoldItalic-webfont.eot");
   src: url("../fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold") format("svg");
   font-weight: 800;
-  font-style: italic; }
+  font-style: italic;
-
+}
 /* ------------------ GLOBAL STYLE ------------------- */
 body {
   font-family: OpenSans, sans-serif;
   text-align: left;
   font-size: 4mm;
-  line-height: 1.5em;
+  line-height: 1.5rem;
   color: #444;
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .night-mode {
-  color: #BBB; }
+  color: #BBB;
+}
 
 strong {
-  font-weight: 600; }
+  font-weight: 600;
+}
 
 em {
-  font-style: italic; }
+  font-style: italic;
+}
 
 a {
   color: #2484c1;
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 p {
   padding: 0;
-  padding-bottom: 1.5em;
+  margin: 0;
-  margin: 0; }
+  padding-bottom: 1.5rem;
-  p:last-child {
+}
-    padding-bottom: 0; }
+p:last-child {
+  padding-bottom: 0;
+}
 
 ul {
   padding: 0;
-  padding-bottom: 1.5em;
+  margin: 0;
-  margin: 0; }
+  padding-bottom: 1.5rem;
-  ul ul {
+}
-    padding-bottom: 0; }
+ul ul {
-  ul li {
+  padding-bottom: 0;
-    margin-left: 1.5em; }
+}
+ul li {
+  margin-left: 1.5rem;
+}
 
 ol {
   padding: 0;
-  padding-bottom: 1.5em;
+  margin: 0;
-  margin: 0; }
+  padding-bottom: 1.5rem;
-  ol ol {
+}
-    padding-bottom: 0; }
+ol ol {
-  ol li {
+  padding-bottom: 0;
-    margin-left: 1.5em; }
+}
+ol li {
+  margin-left: 1.5rem;
+}
 
 ::selection {
   background: #2484c1;
-  color: #fff; }
+  color: #fff;
+}
 
 ::-moz-selection {
   background: #2484c1;
-  color: #fff; }
+  color: #fff;
+}
 
 /* ------------------ WRAPPERS ------------------- */
 .text-wrapper {
   font-size: calc(2.5mm + 1vw);
   margin: auto;
-  line-height: 1.5em; }
+  line-height: 1.5em;
-  .text-wrapper.debug {
+}
-    background-image: -webkit-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
+.text-wrapper.debug {
-    background-image: -moz-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
+  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 95%, rgba(159, 96, 96, 0.5) 95%);
-    background-image: -ms-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
+  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 95%, rgba(159, 96, 96, 0.5) 95%);
-    background-image: -o-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
+  background-image: -ms-linear-gradient(rgba(0, 0, 0, 0) 95%, rgba(159, 96, 96, 0.5) 95%);
-    background-image: linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
+  background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 95%, rgba(159, 96, 96, 0.5) 95%);
+  background-image: linear-gradient(rgba(0, 0, 0, 0) 95%, rgba(159, 96, 96, 0.5) 95%);
   background-position: 50% 0;
-    background-size: 1.5em 1.5em; }
+  background-size: 1.5em 1.5em;
+}
 
 @media screen and (min-width: 640px) {
   .text-wrapper.size-640 {
     max-width: 640px;
-    font-size: calc(2.5mm + 6.4px); } }
+    font-size: calc(2.5mm + 6.4px);
-
+  }
+}
 @media screen and (min-width: 800px) {
   .text-wrapper.size-800 {
     font-size: calc(2.5mm + 8.0px);
-    max-width: 800px; } }
+    max-width: 800px;
-
+  }
+}
 @media screen and (min-width: 920px) {
   .text-wrapper.size-920 {
     font-size: calc(2.5mm + 9.2px);
-    max-width: 800px; } }
+    max-width: 800px;
-
+  }
+}
 @media screen and (min-width: 1200px) {
   .text-wrapper.size-1200 {
     font-size: calc(2.5mm + 12px);
-    max-width: 800px; } }
+    max-width: 800px;
-
+  }
+}
 /* ------------------ TITLES ------------------- */
 h1, h2, h3, h4, h5, h6, h7 {
   text-align: left;
@@ -165,43 +186,50 @@ h1, h2, h3, h4, h5, h6, h7 {
   line-height: 1.5em;
   padding: 0;
   margin: 0;
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 h1 {
-  font-size: 2.33333em;
+  font-size: 2.3333333em;
   line-height: 1em;
-  padding: 0.33333em 0 0.6em 0;
+  padding: 0.333333em 0 0.6em 0;
-  font-weight: 700; }
+  font-weight: 700;
+}
 
 h2 {
   font-size: 2em;
   line-height: 1.5em;
-  padding: 0.33333em 0 0.4em 0;
+  padding: 0.333333em 0 0.4em 0;
-  font-weight: 700; }
+  font-weight: 700;
+}
 
 h3 {
   font-size: 1.5em;
   line-height: 1em;
   padding: 0em 0 1em 0;
-  font-weight: 700; }
+  font-weight: 700;
+}
 
 h4 {
   font-size: 1.5em;
   line-height: 1em;
   padding: 0em 0 1em 0;
-  font-weight: 600; }
+  font-weight: 600;
+}
 
 h5 {
-  font-size: 1.33333em;
+  font-size: 1.333333em;
   line-height: 1em;
-  padding: 0.1em 0 1.13333em 0;
+  padding: 0.1em 0 1.133333em 0;
-  font-weight: 600; }
+  font-weight: 600;
+}
 
 h6 {
   font-size: 1.1em;
   line-height: 1.4em;
   padding: 0.1em 0 1.2em 0;
-  font-weight: 600; }
+  font-weight: 600;
+}
 
 /* ------------------ HR ------------------- */
 hr {
@@ -211,7 +239,8 @@ hr {
   border-bottom: 1px;
   border-color: rgba(1, 1, 1, 0.15);
   border-style: solid;
-  margin: 1.5em; }
+  margin: 1.5em;
+}
 
 /* ------------------ QUOTE ------------------- */
 blockquote {
@@ -221,9 +250,11 @@ blockquote {
   margin: -0.75em -0.2em 0.75em -0.2em;
   padding: 0.75em 1em 0.75em 1em;
   max-width: 100%;
-  border-color: rgba(1, 1, 1, 0.15); }
+  border-color: rgba(1, 1, 1, 0.15);
-  .night-mode blockquote {
+}
-    border-color: rgba(255, 255, 255, 0.15); }
+.night-mode blockquote {
+  border-color: rgba(255, 255, 255, 0.15);
+}
 
 pre {
   border-width: 0 0 0 0.2em;
@@ -234,24 +265,31 @@ pre {
   max-width: 100%;
   border-color: rgba(1, 1, 1, 0.2);
   background-color: #EEE;
-  overflow-x: scroll; }
+  overflow-x: scroll;
-  .night-mode pre {
+}
+.night-mode pre {
   background-color: #222;
-    border-color: rgba(255, 255, 255, 0.2); }
+  border-color: rgba(255, 255, 255, 0.2);
+}
 
 /* ------------------ SPECIAL STYLING ------------------- */
 mark {
   border-radius: 0.2em;
   padding: 0 0.2em 0 0.2em;
   background-color: rgba(255, 255, 0, 0.33);
-  color: inherit; }
+  color: inherit;
+}
 
 .night-mode mark {
-  background-color: rgba(128, 128, 0, 0.66); }
+  background-color: rgba(128, 128, 0, 0.66);
+}
 
 /* ------------------ SPECIAL STYLING ------------------- */
 .time {
   font-style: italic;
   text-align: right;
   width: 100%;
-  display: block; }
+  display: block;
+}
+
+/*# sourceMappingURL=clear-typography.css.map */

css/clear-typography.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/_font-face.scss","../scss/clear-typography.scss"],"names":[],"mappings":"AAAA;AAEA;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;ACrHJ;AAUA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACE;;;AAGF;EACC;;;AAGD;EACC;;;AAGD;EACE;EACA;;;AAGF;EA/BE;EACA;EACA;;AA+BA;EACE;;;AAIJ;EAtCE;EACA;EACA;;AAsCA;EACE;;AAEF;EACE;;;AAIJ;EAhDE;EACA;EACA;;AAgDA;EACE;;AAEF;EACE;;;AAKJ;EAAc;EAAqB;;;AACnC;EAAmB;EAAqB;;;AAExC;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;AASA;EACE;EACD;EACA;EACA;EACA;EACA;;;AAGD;EAfC,WAgBgB;EAfhB,aAe6B;EAd7B;EACA,aAaqD;;;AAGtD;EAnBC,WAoBgB;EAnBhB,aAmBqB;EAlBrB;EACA,aAiB+C;;;AAGhD;EAvBC,WAwBgB;EAvBhB,aAuBuB;EAtBvB;EACA,aAqBsC;;;AAGvC;EA3BC,WA4BgB;EA3BhB,aA2BuB;EA1BvB;EACA,aAyBsC;;;AAGvC;EA/BC,WAgCgB;EA/BhB,aA+B4B;EA9B5B;EACA,aA6BoD;;;AAGrD;EAnCC,WAoCgB;EAnChB,aAmCuB;EAlCvB;EACA,aAiC4C;;;AAG7C;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAaA;EAVE;EACD;EACA;EAEA;EACA;EAEA;EAKA;;AAEA;EACG;;;AAIJ;EAnBE;EACD;EACA;EAEA;EACA;EAEA;EAcA;EACA;EACA;;AAEA;EACG;EACA;;;AAMJ;AAEA;EACE;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;AAEA;EACC;EACA;EACA;EACA","file":"clear-typography.css"}

scss/clear-typography.scss

@@ -2,17 +2,19 @@
 
 /* ------------------ GLOBAL STYLE ------------------- */
 
+$baseline: 1.5;
+
 @mixin paragraph() {
   padding:0;
-  padding-bottom:1.5em;
   margin:0;
+  padding-bottom: $baseline * 1rem;
 }
 
 body {
 	font-family: OpenSans, sans-serif;
 	text-align: left;
 	font-size: 4mm;
-	line-height: 1.5em; 
+	line-height: $baseline * 1rem;
 	color: #444;
 	font-weight: 400;
 }
@@ -47,7 +49,7 @@ ul {
     padding-bottom:0;
   }
   li {
-    margin-left:1.5em;
+    margin-left: $baseline * 1rem;
   }
 }
 
@@ -57,7 +59,7 @@ ol {
     padding-bottom:0;
   }
   li {
-    margin-left:1.5em;
+    margin-left: $baseline * 1rem;
   }
 }