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

includes/contact.html

Index: includes/contact.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/contact.html
@@ -0,0 +1,48 @@
+<section class="section-accent">
+  <div class="wrapper-sm">
+
+    <h2 class="h2 ta-center underlined">
+      {{contact[heading] Still looking for help?}}

[juliandoucette, 2017/08/30 11:33:06]

NIT/Suggest: ID contact-heading (I know... DRY but this ID is a little
misleading?)

[ire, 2017/09/25 08:47:35]

Done.

+    </h2>
+
+    <div class="row">
+      <section class="column one-half section">

[juliandoucette, 2017/08/30 11:33:06]

Note: I think we should be consistent about whether we add .section
before/after/inside rows and columns

(I'm not saying that the way you did it here is wrong, I'm just thinking out
loud. Feedback is welcome.)

[ire, 2017/09/25 08:47:35]

I think it depends on where we want the spacing. I don't know that we can have a
rule that applies in all cases.

+        <header class="underlined">
+          <h3 class="h4">
+            {{contact-social[heading] Get in touch}}
+          </h3>
+          <p>
+            {{contact-social-description[paragraph] Drop us a line on Twitter or Facebook and get your question answered ASAP.}}
+          </p>
+        </header>
+        <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="">

[ire, 2017/08/18 12:34:30]

I left a null alt attribute here since the text will have essentially the same
content

[juliandoucette, 2017/08/30 11:33:06]

NIT/Suggest: Describe the logo. It's a "rounded square facebook hieroglyph".
Blind people appreciate these details (in my experience working on a website for
a group of blind people). Even when they are not functional. This is based on
subjective experience; of course. We may be able to find contradictory evidence
and/or philosophy. 

[ire, 2017/09/25 08:47:35]

Done. I haven't heard any evidence on the contrary, and your suggestion sounds
helpful.

+          Facebook

[ire, 2017/08/18 12:34:30]

Do we translate this?

[juliandoucette, 2017/08/30 11:33:06]

Good question. I don't think it matters. The only thing that matters is whether
we are consistent about translating things like it or not. We could translate it
by default and rely on the CMS to <fix> it by whitelist. Or we could not
translate it. *I think it requires less thinking to translate everything.*

[ire, 2017/09/25 08:47:35]

I agree with you that translating everything makes sense. Done.

+        </a>
+        <a href="https://twitter.com/AdblockPlus">
+          <img class="heading-icon" src="/img/png/logo-twitter.png" srcset="/img/svg/logo-twitter.svg 2x" alt="">
+          Twitter
+        </a>
+        <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
+        </a>
+      </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>
+        <a href="https://adblockplus.org/forum">
+          {{contact-developer-support-link[link] Developer Support}}
+        </a>
+      </section>
+    </div>
+
+  </div>
+</section>