update tiles responsive for 480px

fangle · Oct 16, 2012 · ff35967 · ff35967
1 parent c13ee0e
commit ff35967
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 5 deletions.
diff --git a/public/css/modern-responsive.css b/public/css/modern-responsive.css
@@ -153,6 +153,9 @@
   border-color: #525252 !important;
 }
 /* Large desktop */
+@media (min-width: 1200px) {
+
+}
 @media (min-width: 980px) {
   .navigation-bar .navigation-bar-inner .menu-pull {
     display: none;
@@ -445,6 +448,44 @@
   .tile.quadro-vertical .tile-content {
     height: 470px;
   }
+  .tile .tile-content {
+    width: 120px;
+    height: 90px;
+    padding: 5px 10px;
+  }
+  .tile .tile-content.icon {
+    padding-top: 20px;
+    display: table-cell !important;
+    vertical-align: middle !important;
+    text-align: center;
+  }
+  .tile .tile-content.icon img {
+    width: 48px;
+    height: 48px;
+  }
+  .tile .brand  > .badge,
+  .tile .tile-status  > .badge {
+    width: 26px;
+    height: 28px;
+    right: 0;
+    font-size: 9pt;
+  }
+  .tile .brand  > .name,
+  .tile .tile-status  > .name {
+    margin-left: 10px;
+  }
+  .tile .brand  > .icon,
+  .tile .tile-status  > .icon {
+    width: 24px;
+    height: 24px;
+    margin: 5px 10px;
+  }
+  .tile .brand  > .text,
+  .tile .tile-status  > .text {
+    left: 40px;
+    right: 40px;
+    font-size: 8pt;
+  }
   .tile-group {
     max-width: 400px;
     float: none;

diff --git a/public/css/site.css b/public/css/site.css
@@ -21,13 +21,20 @@ body {
     margin-top: 2px;
 }
 
+.sprite-details li {
+    line-height: 24px;
+}
+
 @media (min-width: 768px) and (max-width: 979px) {
     .page {
         width: 724px;
     }
     .hero-unit > img {
         zoom: .6;
     }
+    .browsers-icons img {
+        zoom: .8;
+    }
 }
 
 @media (max-width: 767px) {

diff --git a/public/icons.php b/public/icons.php
@@ -38,7 +38,7 @@
                     <div class="grid">
                         <div class="row">
                             <div class="span5">
-                                <ol class="unstyled">
+                                <ol class="unstyled sprite-details">
                                     <li><i class="icon-about place-left"></i>icon-about</li>
                                     <li><i class="icon-access place-left"></i>icon-access</li>
                                     <li><i class="icon-add place-left"></i>icon-add</li>
@@ -122,7 +122,7 @@
                                 </ol>
                             </div>
                             <div class="span5">
-                                <ol class="unstyled">
+                                <ol class="unstyled sprite-details">
                                     <li><i class="icon-hash place-left"></i>icon-hash</li>
                                     <li><i class="icon-history place-left"></i>icon-history</li>
                                     <li><i class="icon-import place-left"></i>icon-import</li>
@@ -211,7 +211,7 @@
                     <div class="grid">
                         <div class="row">
                             <div class="span5">
-                                <ol class="unstyled">
+                                <ol class="unstyled sprite-details">
                                     <li><i class="icon-add-1 place-left"></i>icon-add-1</li>
                                     <li><i class="icon-alarm-clock place-left"></i>icon-alarm-clock</li>
                                     <li><i class="icon-archive place-left"></i>icon-archive</li>
@@ -279,7 +279,7 @@
                                 </ol>
                             </div>
                             <div class="span5">
-                                <ol class="unstyled">
+                                <ol class="unstyled sprite-details">
                                     <li><i class="icon-media-player place-left"></i>icon-media-player</li>
                                     <li><i class="icon-message place-left"></i>icon-message</li>
                                     <li><i class="icon-messages place-left"></i>icon-messages</li>

diff --git a/public/index.php b/public/index.php
@@ -115,7 +115,7 @@
                                 <tr>
                                     <td colspan="2" style="padding: 20px 0 0; border: 0;">
                                         <button class="image-button bg-color-pink fg-color-white" onclick="document.location.href='https://github.com/olton/Metro-UI-CSS'">View on Github<img class="bg-color-red" src="images/github.png"/></button>
-                                        <button class="image-button bg-color-darken fg-color-white" onclick="document.location.href='https://github.com/olton/Metro-UI-CSS/zipball/master'">Download Src<img class="bg-color-green" src="images/download-32.png"/></button>
+                                        <button class="image-button bg-color-darken fg-color-white" onclick="document.location.href='https://github.com/olton/Metro-UI-CSS/zipball/master'">Download<img class="bg-color-green" src="images/download-32.png"/></button>
                                     </td>
                                 </tr>
                                 </tbody>