Add responsive breakpoints

Ensure that nothing leaves the viewable page area and that no elements
collide with one another.

3 files changed, 58 insertions, 1 deletions

diff --git a/assets/styles.css b/assets/styles.css
index 54ec607..4e74081 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -137,3 +137,28 @@ ul {
 	color: #c9ccb4;
 	text-shadow: 1px 3px 5px #230f0f;
 }
+@media screen and (max-width: 767px) {
+	header {
+		margin-left: -8px;
+	}
+	.content {
+		margin-left: auto;
+		margin-right: auto;
+	}
+}
+@media screen and (max-width: 710px) {
+	ul {
+		margin-left: 2.5em;
+	}
+}
+@media screen and (max-width: 669px) {
+	.content {
+		width: 96%;
+	}
+}
+@media screen and (max-width: 481px) {
+	.buy-button {
+		position: static;
+		display: inline-block;
+	}
+}
diff --git a/assets/stylesheets/layout.hcss b/assets/stylesheets/layout.hcss
index 9f4259b..755d4fa 100644
--- a/assets/stylesheets/layout.hcss
+++ b/assets/stylesheets/layout.hcss
@@ -87,3 +87,34 @@ ul {
 	color: LIMEADE;
 	text-shadow: 1px 3px 5px DARK_CHOCOLATE;
 }
+
+
+@media screen and (max-width: 767px) {
+	header {
+		margin-left: -8px;
+	}
+
+	.content {
+		margin-left: auto;
+		margin-right: auto;
+	}
+}
+
+@media screen and (max-width: 710px) {
+	ul {
+		margin-left: 2.5em;
+	}
+}
+
+@media screen and (max-width: 669px) {
+	.content {
+		width: 96%;
+	}
+}
+
+@media screen and (max-width: 481px) {
+	.buy-button {
+		position: static;
+		display: inline-block;
+	}
+}
diff --git a/index.html b/index.html
index d88b79e..690d362 100644
--- a/index.html
+++ b/index.html
@@ -45,7 +45,8 @@
 		<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
+				class="buy-button
+					button button-magenta
 					padding-top-9 padding-bottom-9
 					position-absolute right-0 bottom-0">
 				Buy ($15)