diff --git a/templates/package.hamlet b/templates/package.hamlet
index 5b848cb..c77417d 100644
--- a/templates/package.hamlet
+++ b/templates/package.hamlet
@@ -118,8 +118,10 @@ $newline never
 <div .markdown-container .readme-container>
     <div .container>
         <div .row>
-            <div .span12>
+            <div .span12 .expanding>
                 #{metadataReadme metadata}
+                <div .bottom-gradient>
+                    <i class="fa fa-angle-down">
 
 $maybe log <- metadataChangelog metadata
     <div .container>
@@ -129,8 +131,10 @@ $maybe log <- metadataChangelog metadata
     <div .markdown-container .changelog-container>
         <div .container>
             <div .row>
-                <div .span12>
+                <div .span12 .expanding>
                     #{log}
+                    <div .bottom-gradient>
+                        <i class="fa fa-angle-down">
 
 <div .container>
     <div .row>
diff --git a/templates/package.julius b/templates/package.julius
new file mode 100644
index 0000000..fe28c2a
--- /dev/null
+++ b/templates/package.julius
@@ -0,0 +1,11 @@
+$(function(){
+  $('.expanding').each(function(){
+    var $this = $(this);
+    if ($this.height() > 300) {
+      $this.addClass('collapsed');
+      $this.find('.bottom-gradient').click(function(){
+        $this.removeClass('collapsed');
+      });
+    }
+  });
+});
diff --git a/templates/package.lucius b/templates/package.lucius
index b5e4cd0..84c9fca 100644
--- a/templates/package.lucius
+++ b/templates/package.lucius
@@ -71,12 +71,12 @@ h3 {
     margin-top: 1em;
     margin-left: -8px;
   }
-.container {
-  padding-left: 15px !important;
-  padding-right: 15px !important;
-  margin-right: 0 !important;
-  margin-left: 0 !important;
-}
+  .container {
+    padding-left: 15px !important;
+    padding-right: 15px !important;
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
 }
 
 .markdown-container {
@@ -144,3 +144,44 @@ h2.changes-title {
 .hidden {
   display: none;
 }
+
+.expanding {
+  .bottom-gradient {
+    display: none;
+    bottom: 0;
+    position: absolute;
+    width: 100%;
+    cursor: pointer;
+    height: 150px;
+    line-height: 150px;
+    text-align: center;
+
+    background: -moz-linear-gradient(top, rgba(244,244,244,0) 0%, rgba(244,244,244,1) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,244,0)), color-stop(100%,rgba(244,244,244,1))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, rgba(244,244,244,0) 0%,rgba(244,244,244,1) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, rgba(244,244,244,0) 0%,rgba(244,244,244,1) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, rgba(244,244,244,0) 0%,rgba(244,244,244,1) 100%); /* IE10+ */
+    background: linear-gradient(to bottom, rgba(244,244,244,0) 0%,rgba(244,244,244,1) 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f4f4f4', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
+  }
+  .bottom-gradient:hover {
+    .fa {
+      color: #000;
+    }
+  }
+  .fa {
+    font-size: 5em;
+    color: #666;
+    line-height: 150px;
+    margin-top: 25px;
+  }
+  position: relative;
+}
+
+.expanding.collapsed {
+  height: 300px;
+  overflow: hidden;
+  .bottom-gradient {
+    display: block;
+  }
+}