Issue 5534 - Create Contact Section for help.eyeo.com

includes/contact.html

-<section class="section-accent">

[juliandoucette, 2017/09/26 15:37:55]

NIT: I think that this section technically fits the definition of an aside?

[ire, 2017/09/28 09:43:44]

Yup you're right. Done.

-  <div class="container container-sm">
+<aside id="contact" class="section-accent">
+  <div class="container tablet-width">
 
     <h2 class="h2 ta-center underlined">
       {{contact-heading[heading] Still looking for help?}}
     </h2>
 
     <div class="row">
       <section class="column one-half section">
         <header class="underlined">
           <h3 class="h4">
             {{contact-social[heading] Get in touch}}
           </h3>
           <p>

[juliandoucette, 2017/09/26 15:37:55]

Isn't this text supposed to be muted?

[ire, 2017/09/28 09:43:44]

Yes. But when I add the muted class, the muted text on this background no longer
meets the accessibility requirements. I think I would prefer to leave it black,
and raise an issue with Jeen about the colour separately.

             {{contact-social-description[paragraph] Drop us a line on Twitter or Facebook and get your question answered ASAP.}}

[juliandoucette, 2017/09/26 15:37:55]

I don't think that this makes sense as header text. It's not a subtitle or
tagline?

[ire, 2017/09/28 09:43:44]

I actually do consider it a subtitle/tagline. I think it reads that way. 

           </p>
         </header>
         <ul class="horizontal-list">

[juliandoucette, 2017/09/26 15:37:55]

NIT: I think that the design shows less space above this list?

[ire, 2017/09/28 09:43:44]

Done.

           <li>
             <a href="https://www.facebook.com/adblockplus">
               <img class="heading-icon" src="/img/png/logo-facebook.png" srcset="/img/svg/logo-facebook.svg 2x" 
-                   alt="{{facebook-logo[Image alt text] Rounded blue square Facebook hieroglyph}}">
+                   alt="{{facebook-logo[Image alt text] Rounded blue square Facebook glyph}}">
               {{facebook[Brand name] Facebook}}
             </a>
           </li>
           <li>
             <a href="https://twitter.com/AdblockPlus">
               <img class="heading-icon" src="/img/png/logo-twitter.png" srcset="/img/svg/logo-twitter.svg 2x" 
-                   alt="{{ftwitter-logo[Image alt text] Blue Twitter hieroglyph}}">
+                   alt="{{ftwitter-logo[Image alt text] Blue Twitter glyph}}">
               {{twitter[Brand name] Twitter}}
             </a>
           </li>
           <li>
             <a href="mailto:support@adblockplus.org">
               <img class="heading-icon" src="/img/png/email-icon.png" srcset="/img/svg/email-icon.svg 2x" 
                    alt="{{email-icon[Image alt text] Blue envelope}}">
               {{email[Link text] Email}}
             </a>
           </li>
         </ul>
-        
-        
-    
       </section>
-
       <section class="column one-half section">
         <header class="underlined">
           <h3 class="h4">
             {{contact-developer[heading] Looking for developer support?}}
           </h3>
           <p>
             {{contact-developer-description[paragraph] Find source code, release notes, advanced documentation and more.}}
           </p>
         </header>
         <ul class="horizontal-list">
           <li>
             <a href="https://adblockplus.org/forum">
               {{contact-developer-support-link[link] Developer Support}}
             </a>
           </li>
         </ul>
       </section>
     </div>
-
-  </div>
-</section>
+    
+  </div><!-- .container -->
+</aside>