add icon classes

addon/styles/addon.css

@@ -5,6 +5,7 @@
 @import "colors.css";
 @import "helpers.css";
 @import "layout.css";
+@import "icon.css";
 
 @import "components/es-navbar.css";
 @import "components/es-header.css";

addon/styles/components/es-button.css

@@ -1,11 +1,10 @@
 .es-button {
   background-color: var(--color-orange);
   color: var(--color-light);
-  font-size: var(--text-preset-2);
-  padding-left: 8rem;
-  padding-right: 8rem;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+  padding-top: 1em;
+  padding-bottom: 1em;
   border-radius: 4px;
 }
 

addon/styles/global.css

@@ -13,8 +13,8 @@
   --text-preset-1: 1.5rem;
   --text-preset-2: 2.5rem;
   --text-preset-3: 4rem;
-  --text-preset-4: 8rem;
-  --text-preset-5: 12rem;
+  --text-preset-4: 6rem;
+  --text-preset-5: 8rem;
   --font-weight-1: 300;
   --font-weight-2: 400;
   --font-weight-3: 600; 
@@ -66,8 +66,6 @@ h6 {
 
 /* move beyond this point */
 
-
-
 .container {
   max-width: var(--container-width-large);
   margin-left: auto;

addon/styles/icon.css

@@ -0,0 +1,21 @@
+.icon-wrapper {
+  display: inline-block;
+}
+
+.circle {
+  border-radius: 50%;
+  padding: 1em;
+}
+
+.icon {
+  width: 1.5em;
+  vertical-align: middle;
+}
+
+.icon-left {
+  margin-right: 0.5em;
+}
+
+.icon-right {
+  margin-left: 0.5em;
+}

docs/css/icons.md

@@ -0,0 +1,70 @@
+# Icons
+
+Icons are used to enhance the communication of concepts and to increase the discoverability of navigational paths.
+
+## Accesibility Guidelines for Icons
+
+1. Don't use icons by themselves, always pair an icon with text on the screen.
+2. Don't use the same icon to represent a different concept. Icons should have unambiguous meaning.
+3. All image-based icons should have an appropriate alt text attribute.
+
+### Using icons
+
+Icons are used inside an icon-wrapper that defines it's size and styling options such a circle background.
+
+```html
+<div class="icon-wrapper margin-small">
+  <img class="icon" src="/images/icons/bubble-icon.svg">
+</div>
+<div class="icon-wrapper circle bg-orange margin-small">
+  <img class="icon" src="/images/icons/mic-icon.svg">
+</div>
+```
+
+### Applying sizing to icons
+
+```html
+<div class="icon-wrapper xsmall margin-xsmall">
+  <img class="icon" alt="speech bubble" src="/images/icons/bubble-icon.svg">
+</div>
+<div class="icon-wrapper small margin-xsmall">
+  <img class="icon" alt="speech bubble" src="/images/icons/bubble-icon.svg">
+</div>
+<div class="icon-wrapper medium margin-xsmall">
+  <img class="icon" alt="speech bubble" src="/images/icons/bubble-icon.svg">
+</div>
+<div class="icon-wrapper large margin-xsmall">
+  <img class="icon" alt="speech bubble" src="/images/icons/bubble-icon.svg">
+</div>
+<div class="icon-wrapper xlarge margin-xsmall">
+  <img class="icon" alt="speech bubble" src="/images/icons/bubble-icon.svg">
+</div>
+```
+
+### Using icons within components
+#### Button
+
+```html
+<button class="es-button xsmall margin-bottom-small">
+  <img class="icon icon-left" src="/images/icons/mic-icon.svg"> Click Me 
+</button>
+
+<button class="es-button small margin-bottom-small">
+  Click Me <img class="icon icon-right" src="/images/icons/mic-icon.svg"> 
+</button>
+```
+
+#### Card
+
+```html
+<div class="card text-center margin-small">
+  <div class="card-content">
+    <div class="icon-wrapper medium circle bg-orange margin-small">
+      <img class="icon" src="/images/icons/mic-icon.svg">
+    </div>
+    <h3>Podcasts</h3>
+    <p>Rock n' Roll with EmberJS.</p>
+  </div>
+</div>
+```
+