Removed Hogan from Docs (Fixes #128)

5 files changed, 74 insertions, 24 deletions

diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less
index 68c1f5d3..1401cd01 100644
--- a/docs/src/less/components/buttons.less
+++ b/docs/src/less/components/buttons.less
@@ -67,6 +67,10 @@ nav {
 		box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
 		position: relative;
 		z-index: 1;
+
+		.icon {
+			color: inherit;
+		}
 	}
 
 	@media (min-width: 560px) {
@@ -74,7 +78,7 @@ nav {
 	}
 }
 
-// Shared 
+// Shared
 .btn,
 .btn-count {
 	display: inline-block;
@@ -84,7 +88,7 @@ nav {
 	user-select: none;
 }
 
-// Buttons 
+// Buttons
 .btn {
 	padding: (@padding-base / 2) @padding-base;
 	background: @body-background;
@@ -92,14 +96,23 @@ nav {
 	box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05);
 	text-shadow: 0 1px 1px #fff;
 	color: @gray;
+	transition: background .3s ease, border .3s ease, color .3s ease;
 
 	&:hover,
 	&:focus {
-		background-color: #fff;
-		border-color: darken(@gray-light, 5%);
-		color: @link-color;
+		border-color: darken(@gray-light, 8%);
+		color: @gray;
 		outline: 0;
 	}
+	&-youtube .icon {
+		color: @color-youtube;
+	}
+	&-vimeo .icon {
+		color: @color-vimeo;
+	}
+	&-twitter .icon {
+		color: @color-twitter;
+	}
 }
 .btn-primary {
 	background-image: linear-gradient(@link-color, darken(@link-color, 3%));
@@ -108,7 +121,7 @@ nav {
 	box-shadow: 0 1px 1px rgba(0,0,0, .15);
 	text-shadow: 0 1px 1px rgba(0,0,0, .1);
 	color: #fff;
-	
+
 	&:hover,
 	&:focus {
 		color: #fff;
@@ -123,8 +136,8 @@ nav {
 // Count bubble
 .btn-count {
 	position: relative;
-	margin-left: 6px;
-	padding: ((@padding-base / 2) - 1px);
+	margin-left: (@padding-base / 2);
+	padding: (@padding-base / 2) (@padding-base * .75);
 	background: #fff;
 	border: 1px solid @gray-light;
 
@@ -143,4 +156,4 @@ nav {
 		border-width: 1px 0 0 1px;
 		transform: rotate(-45deg) translate(-50%, -50%);
 	}
-}
\ No newline at end of file
+}
diff --git a/docs/src/less/components/icons.less b/docs/src/less/components/icons.less
new file mode 100644
index 00000000..7bcc792e
--- /dev/null
+++ b/docs/src/less/components/icons.less
@@ -0,0 +1,22 @@
+// ==========================================================================
+// Icons
+// ==========================================================================
+
+// Base size icon styles
+.icon {
+	fill: currentColor;
+	width: @icon-size;
+	height: @icon-size;
+	vertical-align: -3px;
+}
+
+// Within elements
+a svg,
+button svg,
+label svg {
+	pointer-events: none;
+}
+a .icon,
+.btn .icon {
+	margin-right: (@padding-base / 2);
+}
diff --git a/docs/src/less/components/type.less b/docs/src/less/components/type.less
index 97652342..8fc200e2 100644
--- a/docs/src/less/components/type.less
+++ b/docs/src/less/components/type.less
@@ -26,17 +26,24 @@ small {
     padding: 0 (@padding-base / 2);
     .font-size(14);
 }
+ul
+li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
 
 // Links
 a {
     text-decoration: none;
     color: @link-color;
-    border-bottom: 1px solid currentColor;
-    transition: background .3s ease, color .3s ease;
+    border-bottom: 1px dotted currentColor;
+    transition: background .3s ease, color .3s ease, border .3s ease;
 
     &:hover,
     &:focus {
         color: @gray-dark;
+        border-bottom-color: rgba(0,0,0,0);
     }
     &:focus {
         .tab-focus();
@@ -44,4 +51,11 @@ a {
     &.logo {
         border: 0;
     }
-}
\ No newline at end of file
+}
+
+.color-vimeo {
+    color: @color-vimeo;
+}
+.color-youtube {
+    color: @color-youtube;
+}
diff --git a/docs/src/less/docs.less b/docs/src/less/docs.less
index cea3a2af..965dcba1 100644
--- a/docs/src/less/docs.less
+++ b/docs/src/less/docs.less
@@ -14,21 +14,14 @@
 // Animation
 @import "lib/animation.less";
 
-// Base layout
-@import "components/base.less";
-
 // Type
 @import "lib/fontface.less";
 @import "components/type.less";
 
-// Buttons
+// Components
+@import "components/base.less";
+@import "components/icons.less";
 @import "components/buttons.less";
-
-// Panels
 @import "components/panels.less";
-
-// Error
 @import "components/error.less";
-
-// Examples
-@import "components/examples.less";
\ No newline at end of file
+@import "components/examples.less";
diff --git a/docs/src/less/variables.less b/docs/src/less/variables.less
index 4ea34d84..097aa1f2 100644
--- a/docs/src/less/variables.less
+++ b/docs/src/less/variables.less
@@ -10,6 +10,11 @@
 @gray-lighter:              #dbe3e8;
 @off-white:                 #f2f5f7;
 
+// Brands
+@color-twitter:             #4BAAF4;
+@color-youtube:             #cc181e;
+@color-vimeo:               #19b7ed;
+
 // Base
 @body-background: 			@off-white;
 
@@ -18,6 +23,9 @@
 @padding-base:              20px;
 @arrow-size:                8px;
 
+// Icons
+@icon-size: 				18px;
+
 // Breakpoints
 @screen-sm:                 480px;
 @screen-md:                 768px;
@@ -27,4 +35,4 @@
 
 // Examples
 @example-width-audio: 		520px;
-@example-width-video: 		1200px;
\ No newline at end of file
+@example-width-video: 		1200px;