finish up homepage

media/css/mkt/detail.less

@@ -553,8 +553,6 @@ h1 .num {
     }
 }
 
-
-
 @media (max-width: @4col) {
     #page > .description {
         border-width: 1px 0;

media/css/mkt/lib.less

@@ -45,6 +45,7 @@
 @navy-gray: #394C58;
 @overlay-gray: #2a353c;
 @text: #424f5a;
+@text-light: #e6edf2;
 @subtext: #74828d;
 @darker_text: darken(@text, 25%);
 @medium-gray: #666;
@@ -55,7 +56,8 @@
 @faint-gray: #eee;
 @barely-gray: #fcfcfc;
 @white: #fff;
-@bg: #dee3e6;
+@bg: #eff1f3;
+@black-border: #14171a;
 @bg-lite: lighten(@bg, 2%);
 @pale-bg: #eff1f3;
 @header-bg: #60747f;
@@ -118,6 +120,14 @@
     transform: @tform;
 }
 
+.transform-origin(@x, @y) {
+    -moz-transform-origin: @x @y;
+    -webkit-transform-origin: @x @y;
+    -ms-transform-origin: @x @y;
+    -o-transform-origin: @x @y;
+    transform-origin: @x @y;
+}
+
 .transition(@property) {
     -moz-transition: @property;
     -webkit-transition: @property;

media/css/mkt/site.less

@@ -26,9 +26,9 @@ a {
 }
 
 body {
+    background: @grain-src @bg;
     color: @text;
     overflow-x: hidden;
-    background: @grain-src @pale-bg;
 }
 
 .balloon {
@@ -122,9 +122,6 @@ body {
 }
 
 #page {
-    .box-shadow(0 1px 3px fadeOut(#000, 80%));
-    .grain;
-    background-color: @bg;
     position: relative;
     > section {
         &:only-child {
@@ -137,44 +134,6 @@ body {
     }
 }
 
-#site-footer {
-    background-color: @pale-bg;
-    .grain;
-    padding: 16px;
-    text-align: center;
-    .account {
-        width: auto;
-    }
-    .footer-links {
-        margin: 15px auto;
-        a {
-            &:before {
-                content: "\00b7";
-                display: inline-block;
-                margin: 0 5px 0 3px;
-                color: @gray;
-            }
-            &:first-child:before {
-                content: none;
-            }
-            &:hover:before {
-                text-decoration: none;
-            }
-            &:hover {
-                color: @link-dark;
-            }
-        }
-    }
-    label {
-        display: block;
-        margin-bottom: 2px;
-    }
-    .go {
-        display: inline-block;
-        margin: 0 10px;
-    }
-}
-
 // 10 columns (portrait tablet)
 @media (max-width: @10col) {
     #site-header, #page {
@@ -202,71 +161,6 @@ body {
     #page > section:last-child {
         padding-bottom: 0;
     }
-    #site-footer {
-        .box-shadow(inset 0 1px 2px rgba(0,0,0,.15));
-        background: @grain-src darken(@header-dark-bg, 3%);
-        float: left;
-        font-size: 14px;
-        font-weight: 300;
-        text-align: left;
-        text-shadow: 0 1px 0 rgba(0,0,0,.5);
-        width: 100%;
-        padding: 10px 0 0;
-        .logout {
-            display: block;
-        }
-        form {
-            background: @grain-src @pale-bg;
-            margin: 15px 0 0;
-            padding: 20px 10px 0;
-        }
-        label {
-            display: none;
-        }
-        select {
-            width: 100%;
-        }
-        .account.authenticated a.logout, .footer-links a {
-            color: lighten(@link-bright, 10%);
-            &:hover {
-                color: lighten(@link-bright, 25%);
-            }
-        }
-        .account.authenticated a {
-            color: lighten(@link-bright, 25%);
-            &:hover {
-                color: lighten(@link-bright, 30%);
-            }
-        }
-        .account {
-            margin: 5px 10px;
-            color: @white;
-            .button {
-                padding: 5px 0;
-                width: 100%;
-            }
-        }
-        .footer-links {
-            margin: 10px 0;
-            text-align: left;
-            a {
-                display: block;
-                float: left;
-                padding: 6px 10px;
-                width: 50%;
-                &:before {
-                    display: none;
-                }
-                &:active {
-                    .depressed;
-                }
-            }
-        }
-        .go {
-            display: block;
-            margin: 0;
-        }
-    }
 }
 
 // 3 columns (portrait smartphone)
@@ -306,7 +200,6 @@ body {
         color: @darker_text;
     }
     #page {
-        .box-shadow(none);
         margin-top: 0;
     }
     .oneline {

media/css/mkt/slider.less

@@ -147,8 +147,7 @@
 
 .categories {
     .icon {
-        .box-shadow(~'0 1px 2px 0 rgba(0,0,0,.3), 0 2px 1px 0 rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,.05), 0 0 12px 0 rgba(0,0,0,.05), 0 0 12px 0 rgba(0,0,0,.05) inset');
-        background: #D9DDE0 url(../../img/mkt/glyphs/rocket.png) 50% 50% no-repeat;
+        background: #D9DDE0 url(../../img/mkt/glyphs/rocket.png) 50% -3px no-repeat;
         &:after {
             top: auto;
             right: 5px;
@@ -262,4 +261,3 @@
         height: 118px;
     }
 }
-

media/css/mkt/tile.less

@@ -15,17 +15,24 @@
         width: 64px;
         display: block;
     }
-    h3 {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+    .info h3 {
+        .ellipsis;
     }
 }
 
 .grid, .listing {
+    float: left;
     list-style-type: none;
     padding: 0;
     margin: 0;
+    width: 100%;
+}
+
+// TODO: Figure out how we will scale/arrange the tiles on tablet and desktop.
+@media (max-width: 336px) {
+    .grid, .listing {
+        background: @black-border;
+    }
 }
 
 // Listing
@@ -78,27 +85,30 @@
 // center of each row is 1 px wider to provide for proper division by 3.
 
 .grid {
+    margin: -1px -1px 0 0;
+    min-width: 321px;
     li {
         float: left;
+        margin-top: 1px;
         max-width: 107px;
         width: 100%/3;
     }
     .mkt-tile {
         position: relative;
         width: 100%;
-        max-height: 106px;
+        height: 106px;
         .info {
-            .box-shadow(0 0 2px rgba(0,0,0,.1));
-            background: rgba(255,255,255,.7);
+            .box-shadow(0 0 1px rgba(0,0,0,.25));
+            background: rgba(255,255,255,.85);
             height: 40px;
             padding: 6px 4px;
             position: absolute;
             bottom: 0;
-            width: 100%;
+            width: 106px;
         }
         h3, .vital {
             font-size: 12px;
-            line-height: 12px;
+            line-height: 13px;
             margin: 0;
             padding: 0;
         }
@@ -108,6 +118,7 @@
             color: @link;
         }
         .icon {
+            background-color: @white;
             width: 106px;
             height: 106px;
         }
@@ -122,30 +133,42 @@
             display: inline-block;
             vertical-align: middle;
         }
+        .rating {
+            margin-left: 2px;
+        }
         &.category {
-            height: 107px;
             h3 {
-                text-align: center;
-                width: 90px;
+                color: @text-light;
                 padding: 8px;
-                color: white;
+                text-align: center;
                 text-shadow: 0 1px 1px fade(#000, 50%);
-                font-weight: 600;
                 position: absolute;
-                bottom: 0px;
+                bottom: 0;
+                width: 100%;
+            }
+            .icon {
+                background-color: rgba(45,51,55,1);
             }
         }
-        &:hover {
+        &:hover, &:active {
             .info {
-                background: @white;
+                background: rgba(255,255,255,.95);
             }
         }
-        &:active {
-            .depressed;
-            .info {
-                background: rgba(255,255,255,.5);
+        &.category {
+            &:hover, &:active {
+                h3 {
+                    color: @white;
+                }
             }
         }
+        &:hover .icon {
+            opacity: .8;
+        }
+        &:active .icon,
+        &.category:active h3 {
+            opacity: .4;
+        }
     }
 }
 .listing {

media/css/mkt/typography.less

@@ -106,3 +106,16 @@ dd {
     margin: 0 0 10px;
 }
 
+/*
+.linefit {
+    overflow: hidden;
+    position: relative;
+    span {
+        .transform-origin(0, 50%);
+        display: block;
+        position: absolute;
+        left: 0;
+        white-space: nowrap;
+    }
+}
+*/

media/js/mkt/slider.js

@@ -9,7 +9,7 @@
                 }
                 return;
             }
-            $('.categories h3').linefit();
+            //$('.categories h3').linefit();
             $('.slider').each(mouseSlider);
         }
 

media/js/mkt/typography.js

@@ -0,0 +1,19 @@
+(function() {
+
+    // Linefitting.
+    // TODO: Use a `transform` to do linefitting.
+    /*
+    z.page.on('fragmentloaded', function() {
+        $('.linefit').linefit();
+        $('.linefit span').each(function() {
+            var $this = $(this),
+                $parent = $this.parent(),
+                valWidth = this.scrollWidth,
+                screenWidth = $parent[0].offsetWidth,
+                scaleFactor = Math.min(1, screenWidth / valWidth);
+            $this.css(z.prefixed('transform'), 'scale(' + scaleFactor + ')');
+        });
+    });
+    */
+
+})();

mkt/asset_bundles.py

@@ -211,6 +211,7 @@ JS = {
         'js/mkt/buttons.js',
         'js/mkt/search.js',
         'js/mkt/apps.js',
+        'js/mkt/typography.js',
         'js/zamboni/outgoing_links.js',
         'js/common/upload-image.js',
 

mkt/browse/helpers.py

@@ -8,19 +8,28 @@ from translations.query import order_by_translation
 
 
 @register.function
-def category_slider():
-    return _categories()
-    return caching.cached(lambda: _categories(), 'category-slider-apps')
+def category_slider(rand=False, limit=None):
+    return _categories(rand, limit)
+    return caching.cached(lambda: _categories(rand),
+                          'category-slider-apps-%s-%s' % (rand, limit))
 
 
-def _categories():
+def _categories(rand=False, limit=None):
     public_cats = (AddonCategory.objects
                    .filter(addon__status=amo.STATUS_PUBLIC)
                    .values_list('category', flat=True).distinct())
-    categories = Category.objects.filter(type=amo.ADDON_WEBAPP, weight__gte=0,
-                                         id__in=public_cats)
+    categories = (Category.objects
+                  .filter(type=amo.ADDON_WEBAPP, weight__gte=0,
+                          id__in=public_cats))
+
+    if rand:
+        categories = categories.order_by('?')
 
     categories = order_by_translation(categories, 'name')
+
+    if limit:
+        categories = categories[:limit]
+
     t = env.get_template('browse/helpers/category_slider.html')
     return jinja2.Markup(t.render(categories=categories))
 

mkt/browse/templates/browse/helpers/category_slider.html

@@ -4,7 +4,7 @@
       <li>
         <a class="mkt-tile category" href="{{ category.get_url_path() }}">
           <div class="icon cat-{{ category.slug }}"></div>
-          <h3>{{ category.name }}</h3>
+          <h3 class="linefit">{{ category.name }}</h3>
         </a>
       </li>
     {% endfor %}

mkt/home/templates/home/home.html

@@ -5,7 +5,7 @@
 {% block content %}
   <h1 id="top">{{ _('Firefox Marketplace') }}</h1>
   <section class="featured">
-    <ul class="grid">
+    <ul class="grid c">
       {% for app in featured %}
         <li>
           {{ market_tile(app) }}
@@ -13,5 +13,5 @@
       {% endfor %}
     </ul>
   </section>
-  {{ category_slider() }}
+  {{ category_slider(rand=True, limit=6) }}
 {% endblock %}

mkt/search/templates/search/results_inner.html

@@ -1,5 +1,5 @@
 {% if pager.object_list %}
-  <ol class="listing" start="{{ pager.start_index() }}">
+  <ol class="listing c" start="{{ pager.start_index() }}">
     {{ search_results(pager.object_list, field=query.sort, src='mkt-search') }}
   </ol>
   {{ pager|impala_paginator }}

mkt/templates/mkt/base.html

@@ -52,7 +52,7 @@
       {% include 'mkt/header.html' %}
     {% endblock %}
 
-    <div id="page" class="c" role="main">
+    <div id="page" role="main">
       {# `outer_content` is for stuff you want above `content` on every page. #}
       {% block outer_content %}
         {% include 'site/messages/display.html' %}