added image styles and hd image shortcode

README.md

@@ -225,3 +225,19 @@ WHERE time > now() - 15m
 
 {{< /code-tabs-wrapper >}}
 ~~~
+
+### High-resolution images
+In many cases, screenshots included in the docs are taken from high-resolution (retina) screens.
+Because of this, the actual pixel dimension is 2x larger than it needs to be and is rendered 2x bigger than it should be.
+The following shortcode automatically sets a fixed width on the image using half of its actual pixel dimension.
+This preserves the detail of the image and renders it at a size where there should be little to no "blur"
+cause by browser image resizing.
+
+```html
+{{< img-hd src="/path/to/image" alt="Alternate title" />}}
+```
+
+###### Notes
+- This should only be used on screenshots takes from high-resolution screens.
+- Image widths are limited to the width of the article content container and will scale accordingly,
+  even with the `width` explicitly set.

assets/js/content-interactions.js

@@ -22,12 +22,10 @@ $('.article a[href^="#"]:not(.tabs p a)').on('click',function (e) {
 
 ///////////////////////////// Left Nav Interactions /////////////////////////////
 
-$(document).ready( function() {
-	$(".children-toggle").click(function(e) {
-		e.preventDefault()
-		$(this).toggleClass('open');
-		$(this).siblings('.children').toggleClass('open');
-	})
+$(".children-toggle").click(function(e) {
+	e.preventDefault()
+	$(this).toggleClass('open');
+	$(this).siblings('.children').toggleClass('open');
 })
 
 //////////////////////////////// Tabbed Content ////////////////////////////////

assets/styles/layouts/_layout-article.scss

@@ -6,7 +6,7 @@
 }
 
 .article--content{
-  max-width: 700px;
+  max-width: 760px;
   h1,h2,h3,h4,h5,h6 {
     color: $article-heading;
     a {
@@ -92,6 +92,12 @@
     }
   }
 
+  img {
+    max-width: 100%;
+    border-radius: ($border-radius * 1.5);
+    box-shadow: 1px 3px 10px $article-shadow;
+  }
+
   //////////////////////////////////// Lists ////////////////////////////////////
 
   ol, ul {
@@ -162,7 +168,7 @@
     color: $article-text;
     max-width: 100%;
     overflow: scroll;
-    box-shadow: 1px 3px 15px $article-table-shadow;
+    box-shadow: 1px 3px 10px $article-shadow;
     border-radius: ($border-radius * 1.5);
 
     th, td {
@@ -252,9 +258,12 @@
       color: $article-note-code;
       background: $article-note-code-bg;
     }
+    img {
+      box-shadow: 1px 3px 10px $article-note-shadow;
+    }
     table{
       color: $article-note-text;
-      box-shadow: 1px 3px 15px $article-note-table-shadow;
+      box-shadow: 1px 3px 10px $article-note-shadow;
       thead{
         background: $article-note-table-header;
       }
@@ -296,9 +305,12 @@
       color: $article-warn-code;
       background: $article-warn-code-bg;
     }
+    img {
+      box-shadow: 1px 3px 10px $article-warn-shadow;
+    }
     table{
       color: $article-warn-text;
-      box-shadow: 1px 3px 15px $article-warn-table-shadow;
+      box-shadow: 1px 3px 10px $article-warn-shadow;
       thead{
         background: $article-warn-table-header;
       }

assets/styles/themes/_theme-dark.scss

@@ -36,6 +36,9 @@ $article-text: $g14-chromium !default;
 $article-bold: $g19-ghost !default;
 $article-link: $b-pool !default;
 $article-link-hover: $g20-white !default;
+$article-shadow: #191a1b !default;
+$article-note-shadow: #191a1b !default;
+$article-warn-shadow: #191a1b !default;
 
 // Article Code
 $article-code: $p-potassium !default;
@@ -53,7 +56,6 @@ $article-code-hover: $g20-white !default;
 // Article Tables
 $article-table-header-left: $p-planet !default;
 $article-table-header-right: $b-sapphire !default;
-$article-table-shadow: #191a1b !default;
 $article-table-row-alt: $g2-kevlar !default;
 
 // Article Notes, Warnings, & Messages
@@ -66,7 +68,6 @@ $article-note-code: #75d2f1 !default;
 $article-note-code-bg: #20272b !default;
 $article-note-table-header: $gr-viridian !default;
 $article-note-table-row-alt: #21272d !default;
-$article-note-table-shadow: #191a1b !default;
 
 $article-warn-base: $o-dreamsicle !default;
 $article-warn-heading: $g20-white !default;
@@ -77,7 +78,6 @@ $article-warn-code: #ec6e6e !default;
 $article-warn-code-bg: #292024 !default;
 $article-warn-table-header: $o-dreamsicle !default;
 $article-warn-table-row-alt: #2b252b !default;
-$article-warn-table-shadow: #191a1b !default;
 
 $article-enterprise-base: $p-star !default;
 $article-enterprise-text: $p-potassium !default;

assets/styles/themes/_theme-light.scss

@@ -35,6 +35,9 @@ $article-text: $g8-storm;
 $article-bold: $g8-storm;
 $article-link: $b-ocean;
 $article-link-hover: $gr-viridian;
+$article-shadow: #c8cdd0;
+$article-note-shadow: #8cb7ab;
+$article-warn-shadow: #b98a7d;
 
 // Article Code
 $article-code: $p-star;
@@ -52,7 +55,6 @@ $article-code-hover: $b-sapphire;
 // Article Tables
 $article-table-header-left: $b-pool;
 $article-table-header-right: $gr-honeydew;
-$article-table-shadow: #c8cdd0;
 $article-table-row-alt: $g18-cloud;
 
 // Article Notes & Warnings
@@ -65,7 +67,6 @@ $article-note-code: #147572;
 $article-note-code-bg: #d6f7ec;
 $article-note-table-header: $gr-viridian;
 $article-note-table-row-alt: #d6f5e9;
-$article-note-table-shadow: #8cb7ab;
 
 $article-warn-base: $o-dreamsicle;
 $article-warn-heading: $o-fire;
@@ -76,7 +77,6 @@ $article-warn-code: #f52f75;
 $article-warn-code-bg: #ffebeb;
 $article-warn-table-header: $o-dreamsicle;
 $article-warn-table-row-alt: #ffe6df;
-$article-warn-table-shadow: #b98a7d;
 
 $article-enterprise-base: $p-comet;
 $article-enterprise-text: $p-star;

content/v2.0/example.md

@@ -45,6 +45,10 @@ WHERE time > now() - 15m
 ### h3 This is a header3
 This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo.
 
+![Test image](http://docs.influxdata.com/img/chronograf/v1.7/alerts-conditions.png)
+
+{{< img-hd src="/img/test-image-2.png" alt="Test Image" />}}
+
 This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo.
 {{% /enterprise %}}
 
@@ -178,6 +182,8 @@ Etiam tristique nisi et tristique auctor.
 Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
 Etiam tristique nisi et tristique auctor.
 
+{{< img-hd src="/img/test-image-2.png" alt="Test Image" />}}
+
 #### h4 This is a header4
 Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
 Etiam tristique nisi et tristique auctor.
@@ -285,6 +291,8 @@ Etiam tristique nisi et tristique auctor.
 Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
 Etiam tristique nisi et tristique auctor.
 
+{{< img-hd src="/img/test-image-2.png" alt="Test Image" />}}
+
 ### h3 This is a header3
 Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
 Etiam tristique nisi et tristique auctor.

layouts/shortcodes/img-hd.html

@@ -0,0 +1,7 @@
+{{ .Inner }}
+{{ $src := .Get "src" }}
+{{ $alt := .Get "alt" }}
+{{ with (imageConfig ( print "/static" $src )) }}
+  {{ $imageWidth := div .Width 2 }}
+  <img src='{{ $src }}' alt='{{ $alt }}' width='{{ $imageWidth }}' />
+{{ end }}