Working on the responsiveness of the homepage, mainly the right panel and download section. Very minute UI changes

Author: dragoonis

index.php

@@ -98,7 +98,7 @@
     $intro .= "<ul>\n";
     foreach ($RELEASES[5] as $version => $release) {
         $intro .= "
-        <li><a class='download-link' href='/downloads.php#v$version'>$version</a> &middot; <a class='notes' href='/ChangeLog-5.php#$version'>Release Notes</a></li>\n";
+        <li><a class='download-link' href='/downloads.php#v$version'>$version</a><span class='dot'>&middot;</span><a class='notes' href='/ChangeLog-5.php#$version'>Release Notes</a></li>\n";
     }
     $intro .= "</ul>\n";
 }

styles/home.css

@@ -9,14 +9,18 @@
     text-shadow:0 1px 2px rgba(0,0,0,.5);
     font-size:1.125rem;
 }
+
+#intro ul a {
+    word-spacing: 0;
+}
+
 #intro .row .blurb p:first-child {
   margin-top:1.5rem;
 }
 #intro .row .blurb,
 #intro .row .download {
   display:table-cell;
   float:none;
-  vertical-align: middle;
   padding:0 1.5rem;
 }
 
@@ -38,8 +42,14 @@
   word-spacing:.25rem;
   margin-left:0;
 }
+
+#intro .dot {
+    display: inline-block;
+    width: 5px;
+    padding: 0 5px;
+}
+
 #intro .download {
-  text-align:center;
 }
 #intro .download a.notes {
     font-size:.75em;
@@ -56,6 +66,8 @@
 
 #intro .download a.download-link {
     color:#fff;
+    width: 50px;
+    display: inline-block;
 }
 
 #layout-content {
@@ -69,3 +81,43 @@
 p.archive {
 	text-align: right;
 }
+
+@media (min-width: 480px) and (max-width: 768px) {
+    #intro .download {
+        width: 35%;
+    }
+
+    #intro .blurb {
+        width: 65%;
+    }
+}
+
+@media (min-width: 768px) {
+    .navbar-search,
+    #intro .download,
+    #intro .background,
+    aside.tips,
+    .layout-menu {
+        width: 25%;
+    }
+
+    #intro .blurb, #layout-content {
+        width: 75%;
+    }
+}
+
+@media (min-width: 480px) and (max-width: 590px) {
+    #intro .dot {
+        display: none;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 784px) {
+    #intro .download, aside.tips, .navbar-search {
+        width: 30%;
+    }
+
+    #intro .blurb, #layout-content {
+        width:70%;
+    }
+}

styles/theme-base.css

@@ -253,6 +253,7 @@ textarea {
   .hidden-tablet {
     display: none !important;
   }
+
 }
 @media (max-width: 767px) {
   .hidden-desktop {
@@ -268,6 +269,8 @@ textarea {
     display: none !important;
   }
 }
+
+
 @media (max-width: 979px) {
 }
 @media (min-width: 980px) {
@@ -1514,8 +1517,7 @@ div.soft-deprecation-notice blockquote.sidebar {
     float: left;
   }
 
-  #intro .blurb,
-  #layout-content {
+  #intro .blurb, #layout-content {
     float:left;
     width:75%;
   }
@@ -1527,7 +1529,18 @@ div.soft-deprecation-notice blockquote.sidebar {
     margin-bottom: 0;
   }
 }
+
+
+
+
 @media (min-width: 768px) and (max-width: 979px) {
+    #intro .download, aside.tips, .navbar-search {
+        width: 30% !important;
+    }
+
+    #intro .blurb, #layout-content {
+        width: 70% !important;
+    }
 }
 @media (min-width: 1200px) {
   #intro .container,