add summary descriptions for watson-developer-cloud#56

public/css/style.css

@@ -1344,6 +1344,25 @@ pre[class*=" language-"] {
     text-align: center;
     color: #e71d32; }
 
+.summary--emotion-description {
+  display: block; }
+  @media (min-width: 768px) {
+    .summary--emotion-description {
+      width: 31.91489%;
+      margin-left: 0%;
+      margin-right: 2.12766%;
+      float: left;
+      margin-top: 0rem; } }
+
+.summary--writing-and-social-description {
+  display: block; }
+  @media (min-width: 768px) {
+    .summary--writing-and-social-description {
+      width: 65.95745%;
+      float: left;
+      display: block;
+      margin-top: 0rem; } }
+
 .summary--emotion {
   background-color: #f9f9f9;
   padding: 1rem;

views/index.ejs

@@ -87,7 +87,7 @@
     <article class="_content base--article">
       <div class="input">
         <h2 class="base--h2">Sample use cases</h2>
-        <p class="base--p input--description">Choose an example to learn how you can adjust the tone of your content to change people's perceptions, or improve its effectiveness. <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/doc/tone-analyzer/index.shtml#usecases" target="new">Learn more</a>.</p>
+        <p class="base--p input--description">Choose an example to learn how you can adjust the tone of your content to change people's perceptions, or improve its effectiveness. <a class="base--a" href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/doc/tone-analyzer/index.shtml#usecases" target="new">Learn more</a>.</p>
         <input role="radio" class="base--radio input--radio" type="radio" id="input-customer-call" name="rb" value="customer-call" checked="true">
         <label class="base--inline-label input--radio-label" for="input-customer-call">Customer service chat</label>
         <input role="radio" class="base--radio input--radio" type="radio" id="input-email" name="rb" value="email">
@@ -119,6 +119,14 @@
         <h2 class="base--h2">Output</h2>
         <p class="base--p output--document-description">The Tone Analyzer Service analyzes text at the document level and the sentence level. Use the document level analysis to get a sense of the overall tone of the document, and use the sentence level analysis to identify specific areas of your content where tones are the strongest.</p>
         <h3 class="base--h3 output--document-title">Document-level</h3>
+        <div class="summary--row">
+          <div class="summary--emotion-description">
+            The Emotion graph represents the likelihood that an emotion tone is present in the text. <a class="base--a" target="_blank" href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/doc/tone-analyzer/understanding-tone.shtml#emotional">Learn more</a>.
+          </div>
+          <div class="summary--writing-and-social-description">
+            The Writing Style and Social Tendencies graphs represent the amount of a writing or social tone present in the text. <a class="base--a" target="_blank" href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/doc/tone-analyzer/understanding-tone.shtml#social">Learn more</a>.
+          </div>
+        </div>
         <div class="summary--row">
           <div class="summary--emotion">
             <h5 class="base--h5 summary--header">Emotion</h5>