Add responsive breakpoints

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

2 files changed, 56 insertions, 0 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;
+	}
+}