adding typography comments

src/scss/_typography.scss

@@ -51,7 +51,7 @@ li li {
   font-size: 100%;
 }
 
-
+/*== List .description (Product/Specs) === */
 ul.description {
   padding: 0;
 
@@ -95,13 +95,6 @@ h4 svg {
   margin-top: -.4rem;
 }
 
-svg[class^='fa-'] {
-  display: inline-block;
-  height: 1em;
-  vertical-align: middle;
-  width: 1em;
-}
-
 h1 {
   font-size: 4rem;
   line-height: 5.6rem;
@@ -190,6 +183,7 @@ h3+img {
   line-height: 4rem;
 }
 
+/*== 2.1. Headings with background ==*/
 @for $i from 1 through 6 {
   h#{$i}[class*='bg-'] {
     padding: 2.4rem;
@@ -210,17 +204,20 @@ h3 [class*='bg-'] {
   padding: .4rem .8rem;
 }
 
+/*== 2.2. Typography Classes = .text- == */
 .text-intro,
 [class*='content-'] p {
   font-size: 2.4rem;
   line-height: 4rem;
 }
 
+/* -- Serif -- */
 .text-serif,
 h1 span {
   font-family: 'Maitree', times, serif;
 }
 
+/* -- h1,h2... Promo/Landings -- */
 .text-landing {
   letter-spacing: .4rem;
   text-transform: uppercase;
@@ -230,6 +227,7 @@ h1 span {
   }
 }
 
+/* -- Subtitle (Before h1, h2) p.subtitle + h1/h2 */
 .text-subtitle {
   letter-spacing: .2rem;
   margin-bottom: 0;
@@ -256,6 +254,7 @@ h1 span {
   text-transform: lowercase;
 }
 
+/* -- Emoji (you'll love this) -- */
 .text-emoji {
   font-size: 6.8rem;
   line-height: 8.8rem;
@@ -266,6 +265,7 @@ h1 span {
   }
 }
 
+/* -- Numbers (results, sales... 23,478,289 iphones) -- */
 .text-data {
   font-size: 6.4rem;
   line-height: 8rem;
@@ -284,6 +284,7 @@ h1 span {
   width: 12.8rem;
 }
 
+/* -- Magazine Two Columns -- */
 @media (min-width: 768px) {
   .text-cols {
     column-count: 2;
@@ -306,6 +307,7 @@ h1 span {
   text-transform: uppercase;
 }
 
+/* -- Heading with border -- */
 .text-context {
   position: relative;
 
@@ -326,6 +328,7 @@ h1 span {
   }
 }
 
+/* -- Separator/Symbols (stars ***...) -- */
 .text-symbols {
   font-weight: 600;
   letter-spacing: .8rem;
@@ -354,7 +357,7 @@ h1 span {
     }
   }
 }
-
+/* -- Pull Quote (Right/Left)  -- */
 [class*='text-pull'] {
   font-size: 2.4rem;
   font-weight: 400;
@@ -399,6 +402,12 @@ figure[class*='text-pull-'] {
   padding-top: 0;
 }
 
+/* -- Interviews (Questions & Answers)  --- */
+/* -- <dl class="text-interview">
+<dt>name</dt>
+<dd><p>question or answer</p>
+</dd>
+--- */
 .text-interview dt {
   font-weight: 600;
   margin-bottom: 0;
@@ -415,34 +424,43 @@ figure[class*='text-pull-'] {
   }
 }
 
+
+/* -- Info Messages (error, warning, success... -- */
 .text-info {
   font-size: 1.6rem;
   line-height: 2.4rem;
 }
 
+/*=========================================
+2.1. San Francisco Font (Apple's new font)
+=========================================== */
 .text-apple,
 .bg-apple {
   font-family: 'San Francisco', helvetica, arial, sans-serif;
 }
 
+/* Ultra Light */
 @font-face {
   font-family: 'San Francisco';
   font-weight: 100;
   src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2');
 }
 
+/* Thin */
 @font-face {
   font-family: 'San Francisco';
   font-weight: 200;
   src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2');
 }
 
+/* Regular */
 @font-face {
   font-family: 'San Francisco';
   font-weight: 400;
   src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2');
 }
 
+/* Bold */
 @font-face {
   font-family: 'San Francisco';
   font-weight: bold;