Merge pull request #806 from stephenplusplus/gh-pages

fixing column alignment.

index.html

@@ -42,7 +42,7 @@
 				</div>
 				<div class="col-md-8">
 					<h2>JavaScript Apps</h2>
-					<ul class="applist">
+					<ul class="applist js">
 						<li class="routing">
 							<a href="architecture-examples/backbone/" data-source="http://documentcloud.github.com/backbone/" data-content="Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.">Backbone.js</a>
 						</li>
@@ -202,7 +202,7 @@
 					</ul>
 					<hr>
 					<h2>Module Loaders</h2>
-					<ul class="applist amd">
+					<ul class="applist">
 						<li class="routing">
 							<a href="dependency-examples/backbone_require/" data-source="http://requirejs.org" data-content="RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.">Backbone.js + RequireJS</a>
 						</li>
@@ -236,7 +236,7 @@
 					</ul>
 					<hr>
 					<h2>Real-time</h2>
-					<ul class="applist amd">
+					<ul class="applist">
 						<li class="labs">
 							<a href="http://todomvcapp.meteor.com" data-source="http://meteor.com" data-content="Meteor is an ultra-simple environment for building modern websites. A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets. Meteor automates the packaging and transmission of these different components. And, it is quite flexible about how you choose to structure those components in your file tree.">Meteor</a>
 						</li>

site-assets/main.css

@@ -77,6 +77,10 @@ header nav a:not(:last-child) {
 	margin-top: 70px;
 }
 
+.logo-icon {
+	display: none;
+}
+
 .nav-tabs > li,
 .nav-pills > li {
 	clear: both;
@@ -134,16 +138,20 @@ header nav a:not(:last-child) {
 	list-style: none;
 	margin: 0;
 	padding: 0;
-	-webkit-columns: 4;
-	-moz-columns: 4;
-	-ms-columns: 4;
-	-o-columns: 4;
-	columns: 4;
+	-webkit-columns: 1;
+	-moz-columns: 1;
+	-ms-columns: 1;
+	-o-columns: 1;
+	columns: 1;
 }
 
 .applist li {
-	white-space: nowrap;
 	padding: 10px 0;
+	-webkit-column-break-inside: avoid;
+	-moz-column-break-inside: avoid;
+	-ms-column-break-inside: avoid;
+	-o-column-break-inside: avoid;
+	column-break-inside: avoid;
 }
 
 .applist a {
@@ -190,14 +198,6 @@ header nav a:not(:last-child) {
 	color: red;
 }
 
-.applist.amd {
-	-webkit-columns: 2;
-	-moz-columns: 2;
-	-ms-columns: 2;
-	-o-columns: 2;
-	columns: 2;
-}
-
 .legend {
 	margin-top: 20px;
 	margin-left: 0;
@@ -382,7 +382,7 @@ a.zocial {
 	}
 }
 
-@media (max-width: 768px) {
+@media (max-width: 770px) {
 	h2 {
 		margin-top: 20px;
 	}
@@ -398,24 +398,22 @@ a.zocial {
 		margin-top: 0;
 	}
 
-	.logo-icon {
-		display: none;
-	}
-
 	.container {
 		margin: auto;
 	}
+}
 
+@media (min-width: 480px) {
 	.applist {
-		-webkit-columns: 2 !important;
-		-moz-columns: 2 !important;
-		-ms-columns: 2 !important;
-		-o-columns: 2 !important;
-		columns: 2 !important;
+		-webkit-columns: 2;
+		-moz-columns: 2;
+		-ms-columns: 2;
+		-o-columns: 2;
+		columns: 2;
 	}
 }
 
-@media (max-width: 980px) {
+@media (min-width: 640px) and (max-width: 770px) {
 	.applist {
 		-webkit-columns: 3;
 		-moz-columns: 3;
@@ -424,3 +422,21 @@ a.zocial {
 		columns: 3;
 	}
 }
+
+
+@media (min-width: 771px) {
+	.js,
+	.ctojs {
+		-webkit-columns: 4;
+		-moz-columns: 4;
+		-ms-columns: 4;
+		-o-columns: 4;
+		columns: 4;
+	}
+}
+
+@media (min-width: 992px) {
+	.logo-icon {
+		display: block;
+	}
+}