improved responsiveness

README.md

@@ -4,7 +4,7 @@
 Analyze two rectangles and determine features -- 
 intersection, containment, adjacency -- that exist among them.
 * Showcases HTML5, JavaScript, Angular JS
-* Unique design and UI
+* Unique, responsive design and user interface
 
 ### How to Use
 URL: http://lukenickerson.github.io/angular-rectangles-exercise/

assets/css/rectangles.css

@@ -27,8 +27,8 @@ a {
 	}
 button {
 	display: inline-block;
-	padding: 0.75em 1em;
-	margin: 0.25em 0.5em;
+	padding: 0.75em 0.75em;
+	margin: 0.25em 0.25em;
 	background-color: #013c67;
 	color: #fff;
 	font-size: 100%;
@@ -59,7 +59,7 @@ main {
 	margin: 0 auto;
 	padding: 2em;
 	border: solid 1px rgba(0,0,0,0.25); /* #013c67; */
-	box-shadow: 0 1em 2em rgba(0,0,0,0.2), 0 0 1em rgba(0,0,0,0.1);
+	box-shadow: 0 1em 2em rgba(0,0,0,0.2);
 	background-color: #d2e4f1; 
 	background: linear-gradient(to bottom, #fafcfe 0%, #d2e4f1 100%);
 	border-radius: 0.5em;
@@ -81,7 +81,7 @@ main {
 	border: solid 1px rgba(0,0,0,0.25);
 	width: 320px;
 	height: 200px;
-	margin: 1em auto;
+	margin: 1em auto 0 auto;
 	position: relative;
 	background-color: #fff;
 }
@@ -186,7 +186,7 @@ main {
 		content: ":";
 	}
 	#examples button {
-		min-width: 10em;
+		min-width: 8em;
 	}
 
 /* ==== Interface Section ==== */	
@@ -247,10 +247,43 @@ footer {
 
 /* ==== Responsive ==== */
 
-@media (max-width : 870px) {
+@media (max-width : 900px) {
+	main {
+		width: 85%;
+	}
+}
+
+@media (max-width : 800px) {
 
+	header {
+		padding: 3em 1em;
+		font-size: 90%;
+	}
+	main {
+		width: 85%;
+	}	
 	#rectangleInterface > div {
 		width: 100%;
 		float: none;
 	}
 }
+
+@media (max-width : 620px) {
+	header {
+		padding: 2em 1em;
+		font-size: 80%;
+	}
+	main {
+		width: 100%;
+		border-radius: 0;
+		padding: 1em 0 0 0;
+	}
+}
+
+@media (max-width : 450px) {
+	header {
+		padding: 1em 1em;
+		font-size: 70%;
+	}
+
+}