Cut down on homepage file size; reorg some docs CSS

docs/assets/css/src/docs.css

@@ -9,27 +9,6 @@
 /*
  * Bootstrap Documentation
  * Special styles for presenting Bootstrap's documentation and code examples.
- *
- * Table of contents:
- *
- * Scaffolding
- * Main navigation
- * Footer
- * Social buttons
- * Homepage
- * Page headers
- * Old docs callout
- * Ads
- * Side navigation
- * Docs sections
- * Callouts
- * Grid styles
- * Examples
- * Code snippets (highlight)
- * Responsive tests
- * Glyphicons
- * Customizer
- * Miscellaneous
  */
 
 
@@ -484,39 +463,57 @@ body {
     margin-right: auto;
     margin-left: auto;
   }
-  .bs-docs-featured-sites .col-sm-3:first-child img {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-  }
-  .bs-docs-featured-sites .col-sm-3:last-child img {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-  }
-
   .bs-docs-featurette .img-responsive {
     margin-top: 0;
   }
 }
 
-/* Featured sites */
+
+/*
+ * Featured sites
+ *
+ * Homepage thumbnails from the Expo.
+ */
+
 .bs-docs-featured-sites {
   margin-right: -1px;
   margin-left: -1px;
 }
-.bs-docs-featured-sites .col-sm-3 {
-  padding-right: 1px;
-  padding-left: 1px;
+.bs-docs-featured-sites .col-xs-6 {
+  padding: 1px;
 }
 .bs-docs-featured-sites .img-responsive {
-  margin-bottom: 15px;
+  margin-top: 0;
 }
-@media (min-width: 480px) {
-  .bs-docs-featured-sites .img-responsive {
-    margin-bottom: 0;
+
+@media (min-width: 768px) {
+  .bs-docs-featured-sites .col-sm-3:first-child img {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .bs-docs-featured-sites .col-sm-3:last-child img {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
   }
 }
 
-/* Example thumbnails */
+
+/*
+ * Examples
+ *
+ * Linked docs examples.
+ */
+
+.bs-examples .thumbnail {
+  margin-bottom: 10px;
+}
+.bs-examples h4 {
+  margin-bottom: 5px;
+}
+.bs-examples p {
+  margin-bottom: 20px;
+}
+
 @media (max-width: 480px) {
   .bs-examples {
     margin-right: -10px;
@@ -1455,34 +1452,6 @@ h1[id] {
 }
 
 
-/*
- * Miscellaneous
- *
- * Odds and ends for optimum docs display.
- */
-
-/* Examples gallery: space out content better */
-.bs-examples .thumbnail {
-  margin-bottom: 10px;
-}
-.bs-examples h4 {
-  margin-bottom: 5px;
-}
-.bs-examples p {
-  margin-bottom: 20px;
-}
-
-/* Pseudo :focus state for showing how it looks in the docs */
-#focusedInput {
-  border-color: rgb(204,204,204); /* Restate unfocused value to make CSSLint happy that there's a pre-CSS3 fallback*/
-  border-color: rgba(82,168,236,.8);
-  outline: 0;
-  outline: thin dotted \9; /* IE6-9 */
-  -webkit-box-shadow: 0 0 8px rgba(82,168,236,.6);
-          box-shadow: 0 0 8px rgba(82,168,236,.6);
-}
-
-
 /*
  * ZeroClipboard styles
  */
@@ -1516,3 +1485,20 @@ h1[id] {
     display: block;
   }
 }
+
+
+/*
+ * Miscellaneous
+ *
+ * Odds and ends for optimum docs display.
+ */
+
+/* Pseudo :focus state for showing how it looks in the docs */
+#focusedInput {
+  border-color: rgb(204,204,204); /* Restate unfocused value to make CSSLint happy that there's a pre-CSS3 fallback*/
+  border-color: rgba(82,168,236,.8);
+  outline: 0;
+  outline: thin dotted \9; /* IE6-9 */
+  -webkit-box-shadow: 0 0 8px rgba(82,168,236,.6);
+          box-shadow: 0 0 8px rgba(82,168,236,.6);
+}

docs/index.html

@@ -56,9 +56,9 @@ title: Bootstrap
 
     <div class="row bs-docs-featured-sites">
     {% for showcase in site.data.showcase %}
-      <div class="col-sm-3">
+      <div class="col-xs-6 col-sm-3">
         <a href="{{ showcase.expo_url }}" target="_blank" title="{{ showcase.name }}">
-          <img src="http://expo.getbootstrap.com/screenshots/{{ showcase.img }}.jpg" alt="{{ showcase.name }}" class="img-responsive">
+          <img src="http://expo.getbootstrap.com/thumbs/{{ showcase.img }}-thumb.jpg" alt="{{ showcase.name }}" class="img-responsive">
         </a>
       </div>
     {% endfor %}