From e735b3bdfc6fa97289637fc192bf057c3723d450 Mon Sep 17 00:00:00 2001
From: Chad Whitacre <chad@zetaweb.com>
Date: Tue, 24 Jan 2017 16:25:40 -0500
Subject: [PATCH] Make room for package claiming workflow

---
 scss/components/banner.scss        | 27 ++++++++++++++++++++++++++-
 scss/layouts/responsiveness.scss   | 16 +++++++++++++++-
 www/on/npm/%package/index.html.spt | 12 ++++--------
 3 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/scss/components/banner.scss b/scss/components/banner.scss
index afafe3e823..9e1d396024 100644
--- a/scss/components/banner.scss
+++ b/scss/components/banner.scss
@@ -9,13 +9,14 @@
         z-index: 2;
         overflow: hidden;
 
-        img {
+        img, p {
             display: block;
             position: absolute;
             top: 16px;
             left: 16px;
             width: 160px;
             height: 160px;
+            overflow: hidden;
             border: 2px solid $white;
             @include border-radius(5px);
             box-shadow: 0px 0px 32px 16px rgba($black, 0.5);
@@ -34,6 +35,30 @@
             }
         }
 
+        &.text {
+            .bg {
+                background: transparent;
+                background: linear-gradient( rgba(255,255,255,0)
+                                           , rgba(255,255,255,0) 70%
+                                           , rgba(255,255,255,1) 95%
+                                            );
+                width: 160px;
+                height: 160px;
+                display: block;
+                position: absolute;
+                top: 16px;
+                left: 16px;
+                z-index: 3;
+                @include border-radius(5px);
+            }
+            p {
+                color: $black;
+                font: normal 16px/20px $Chronicle;
+                padding: 16px;
+                margin: 0;
+            }
+        }
+
         .is-suspicious-label {
             text-align: right;
             font-size: 12px;
diff --git a/scss/layouts/responsiveness.scss b/scss/layouts/responsiveness.scss
index ec8ad26b9e..2fb179cb10 100644
--- a/scss/layouts/responsiveness.scss
+++ b/scss/layouts/responsiveness.scss
@@ -20,7 +20,7 @@
         height: 128px;
         .avatar {
             height: 128px;
-            img {
+            img, p {
                 width: 112px;
                 height: 112px;
                 top: 8px;
@@ -39,6 +39,20 @@
                     box-shadow: none;
                 }
             }
+            &.text {
+                .bg {
+                    width: 112px;
+                    height: 112px;
+                    top: 8px;
+                    left: 8px;
+                    z-index: 3;
+                    @include border-radius(3px);
+                }
+                p {
+                    font: normal 12px/16px $Chronicle;
+                    padding: 8px;
+                }
+            }
             .is-suspicious-label {
                 font-size: 10px;
                 bottom: 13px;
diff --git a/www/on/npm/%package/index.html.spt b/www/on/npm/%package/index.html.spt
index 57fd4819cc..33eabdfcf0 100644
--- a/www/on/npm/%package/index.html.spt
+++ b/www/on/npm/%package/index.html.spt
@@ -8,8 +8,7 @@ package = website.db.one("select * from packages where package_manager='npm' "
                          "and name=%s", (package_name,))
 if package is None:
     raise Response(404)
-banner = 'npm'
-title = package_name
+banner = package_name
 page_id = "on-npm-foo"
 suppress_sidebar = True
 url = 'https://npmjs.com/package/' + package.name
@@ -18,8 +17,9 @@ url = 'https://npmjs.com/package/' + package.name
 
 {% block banner %}
 <a class="elsewhere" href="{{ url }}">
-    <div class="avatar">
-        <img src="{{ website.asset('npm-wombat-typing.svg') }}" class="avatar">
+    <div class="avatar text">
+        <div class="bg"></div>
+        <p>{{ package.description }} {{ package.description }}</p>
         <img class="platform" src="{{ website.asset('npm-n.png') }}" />
     </div>
     {{ super () }}
@@ -27,8 +27,4 @@ url = 'https://npmjs.com/package/' + package.name
 {% endblock %}
 
 {% block content %}
-<p><i>{{ package.description }}</i></p>
-<a href="{{ url }}">{{ url }}</a>
-
-
 {% endblock %}