added truncate shortcode, styles, and js

README.md

@@ -242,3 +242,14 @@ cause by browser image resizing.
 - The `src` should be relative to the `static` directory.
 - Image widths are limited to the width of the article content container and will scale accordingly,
   even with the `width` explicitly set.
+
+### Truncated content blocks
+In some cases, it may be appropriate to shorten or truncate blocks of content.
+Use cases include long examples of output data or tall images.
+The following shortcode truncates blocks of content and allows users to opt into
+to seeing the full content block.
+
+```md
+{{% truncate %}}
+Truncated markdown content here.
+{{% /truncate %}}

assets/js/content-interactions.js

@@ -7,7 +7,13 @@ $("h2,h3,h4,h5,h6").each(function() {
 
 ///////////////////////////////// Smooth Scroll /////////////////////////////////
 
-$('.article a[href^="#"]:not(.tabs p a, .code-tabs p a)').on('click',function (e) {
+var elementWhiteList = [
+  ".tabs p a",
+  ".code-tabs p a",
+  ".truncate-toggle"
+]
+
+$('.article a[href^="#"]:not(' + elementWhiteList + ')').click(function (e) {
   e.preventDefault();
 
   var target = this.hash;
@@ -66,3 +72,10 @@ function tabbedContent(container, tab, content) {
 
 tabbedContent('.code-tabs-wrapper', '.code-tabs p a', '.code-tab-content');
 tabbedContent('.tabs-wrapper', '.tabs p a', '.tab-content');
+
+/////////////////////////////// Truncate Content ///////////////////////////////
+
+$(".truncate-toggle").click(function(e) {
+	e.preventDefault()
+	$(this).closest('.truncate').toggleClass('closed');
+})

assets/styles/layouts/_layout-article.scss

@@ -461,8 +461,64 @@
       }
     }
   }
+
+  /////////////////////////// Truncated Content Blocks ///////////////////////////
+
+  .truncate {
+  	position: relative;
+  	margin-bottom: 3.5rem;
+
+  	.truncate-bottom {
+  		position: absolute;
+  		bottom: -30px;
+  		width: 100%;
+  		z-index: 100%;
+  		height: auto;
+  	}
+
+  	a.truncate-toggle {
+  		display: block;
+  		width: 100px;
+  		margin: 0 auto;
+  		color: $article-text;
+  		background: $article-bg;
+  		padding: .45rem;
+  		text-align: center;
+  		font-size: .75rem;
+  		text-transform: uppercase;
+  		border-radius: $border-radius;
+  		transition: color .2s;
+  		&:before{
+  			content: "Show Less";
+  		}
+  		&:hover {
+  			color: $article-link;
+  		}
+  	}
+  	&.closed {
+  		min-height: 200px;
+  		max-height: 25vh;
+  		overflow: hidden;
+
+  		.truncate-bottom {
+  			bottom: 0;
+  			background-image: linear-gradient(to bottom, rgba($article-bg, 0), rgba($article-bg, 1));
+  			height: 100px;
+  		}
+
+  		a.truncate-toggle {
+  			margin-top: 75px;
+  			&:before {
+  				content: "Show More";
+  			}
+  		}
+    }
+	}
+
 }
 
+
+
 ////////////////////////////////////////////////////////////////////////////////
 ///////////////////////////////// MEDIA QUERIES ////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////

content/v2.0/example.md

@@ -466,3 +466,33 @@ This is tab 2.4 content.
 {{% /tab-content %}}
 
 {{< /tabs-wrapper >}}
+
+{{% truncate %}}
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+This is truncated content.  
+{{% /truncate %}}

layouts/shortcodes/truncate.html

@@ -0,0 +1,6 @@
+<div class="truncate closed">
+  {{ .Inner }}
+  <div class="truncate-bottom">
+    <a class="truncate-toggle" href="#"></a>
+  </div>
+</div>