Move "Buy" button to the right side of the "Try it free" header

Needed to adjust some positioning styles and fix the padding on the
button.

4 files changed, 92 insertions, 28 deletions

diff --git a/assets/styles.css b/assets/styles.css
index c3ba9c9..54ec607 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -27,8 +27,10 @@ h2 {
 }
 a:link { color: #b71863; }
 a:hover { color: #880442; }
-a.button {
+.button {
 	padding: 13px 15px;
+}
+a.button {
 	border: 1px solid;
 	border-radius: 10px;
 	font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif;
@@ -86,6 +88,39 @@ p {
 ul {
 	list-style: disc;
 }
+.display-inline-block {
+	display: inline-block;
+}
+.position-relative {
+	position: relative;
+}
+.position-absolute {
+	position: absolute;
+}
+.right-0 {
+	right: 0;
+}
+.bottom-0 {
+	bottom: 0;
+}
+.margin-top-0\.5 {
+	margin-top: 0.5em;
+}
+.margin-bottom-0\.5 {
+	margin-bottom: 0.5em;
+}
+.margin-bottom-0\.63 {
+	margin-bottom: 0.63em;
+}
+.margin-bottom-1\.8 {
+	margin-bottom: 1.8em;
+}
+.padding-top-9 {
+	padding-top: 9px;
+}
+.padding-bottom-9 {
+	padding-bottom: 9px;
+}
 .content {
 	width: 640px;
 	margin-top: 1.8em;
@@ -102,12 +137,3 @@ ul {
 	color: #c9ccb4;
 	text-shadow: 1px 3px 5px #230f0f;
 }
-.margin-top-0\.5 {
-	margin-top: 0.5em;
-}
-.margin-bottom-0\.63 {
-	margin-bottom: 0.63em;
-}
-.margin-bottom-1\.8 {
-	margin-bottom: 1.8em;
-}
diff --git a/assets/stylesheets/buttons.hcss b/assets/stylesheets/buttons.hcss
index 189ba0d..651e261 100644
--- a/assets/stylesheets/buttons.hcss
+++ b/assets/stylesheets/buttons.hcss
@@ -1,6 +1,8 @@
-a.button {
+.button {
 	padding: 13px 15px;
+}
 
+a.button {
 	border: 1px solid;
 	border-radius: 10px;
 
diff --git a/assets/stylesheets/layout.hcss b/assets/stylesheets/layout.hcss
index 9f0f1c0..9f4259b 100644
--- a/assets/stylesheets/layout.hcss
+++ b/assets/stylesheets/layout.hcss
@@ -24,6 +24,50 @@ ul {
 	list-style: disc;
 }
 
+.display-inline-block {
+	display: inline-block;
+}
+
+.position-relative {
+	position: relative;
+}
+
+.position-absolute {
+	position: absolute;
+}
+
+.right-0 {
+	right: 0;
+}
+
+.bottom-0 {
+	bottom: 0;
+}
+
+.margin-top-0\.5 {
+	margin-top: 0.5em;
+}
+
+.margin-bottom-0\.5 {
+	margin-bottom: 0.5em;
+}
+
+.margin-bottom-0\.63 {
+	margin-bottom: 0.63em;
+}
+
+.margin-bottom-1\.8 {
+	margin-bottom: 1.8em;
+}
+
+.padding-top-9 {
+	padding-top: 9px;
+}
+
+.padding-bottom-9 {
+	padding-bottom: 9px;
+}
+
 .content {
 	width: 640px;
 	margin-top: 1.8em;
@@ -43,15 +87,3 @@ ul {
 	color: LIMEADE;
 	text-shadow: 1px 3px 5px DARK_CHOCOLATE;
 }
-
-.margin-top-0\.5 {
-	margin-top: 0.5em;
-}
-
-.margin-bottom-0\.63 {
-	margin-bottom: 0.63em;
-}
-
-.margin-bottom-1\.8 {
-	margin-bottom: 1.8em;
-}
diff --git a/index.html b/index.html
index 324a5d0..d88b79e 100644
--- a/index.html
+++ b/index.html
@@ -42,15 +42,19 @@
 			With up to three new button inputs, the possibilities are endless.
 		</p>
 
-		<h2>Try it free for 30 days</h2>
+		<div class="position-relative margin-bottom-0.5">
+			<h2 class="display-inline-block">Try it free for 30 days</h2>
+			<a href="#"
+				class="button button-magenta
+					padding-top-9 padding-bottom-9
+					position-absolute right-0 bottom-0">
+				Buy ($15)
+			</a>
+		</div>
 		<div class="code code-block">
 			<span class="color-murky-pond">$</span> brew install teddywing/DomeKey/dome-key
 		</div>
 
-		<p>
-			<a href="#" class="button button-magenta">Buy ($15)</a>
-		</p>
-
 		<h2>Examples</h2>
 
 		<p>Video controls:</p>