Add sections for introduction and contributions

CHANGES.rst

@@ -6,6 +6,7 @@ www.gafam.info CHANGES
 in progress
 -----------
 - Embed resources of gafam-l10n repository from GitHub
+- Add sections for introduction and contributions
 
 2018-01-12 0.1.0
 ----------------

htdocs/index.html

@@ -53,6 +53,45 @@
 
     <section class="section">
         <div class="container">
+            <h3 class="title">
+                A call for help
+            </h3>
+            <div class="columns is-variable is-8">
+                <div class="column is-6">
+                    <p class="content is-spaced">
+                        We wrote down the original French texts and its translations
+                        to the English language from the GAFAM campaign poster texts
+                        published by La Quadrature du Net and
+                        <a href="https://github.com/gafam/gafam-l10n">put them on GitHub</a> using the <a href="https://en.wikipedia.org/wiki/Gettext">GNU gettext</a> format.
+                    </p>
+                    <p class="content is-spaced">
+                        Now, we are looking for contributors helping out with
+                        translations into more languages.
+                    </p>
+                    <p>
+                        We really appreciate your help. Thanks in advance!
+                    </p>
+                </div>
+                <div class="column is-6">
+                    <img src="static/img/gafam-english.jpg"/>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="container">
+            <h3 class="title">
+                Resources
+            </h3>
+            <p class="content is-spaced">
+                The resources and materials we have collected so far.
+                On the left side, you will find the PDF file originally
+                published by LQDN. On the right side, all translation
+                files from the <a href="https://github.com/gafam/gafam-l10n">GitHub repository</a> will be displayed.
+                As of now, we have French and English so we are
+                looking forward to your contribution!
+            </p>
         <div class="columns">
 
         <div class="column is-4">
@@ -62,14 +101,14 @@
             <div class="columns" style="width: 100%">
                 <div class="column is-7">
                     <div class="tags has-addons">
-                      <span class="tag is-medium">Language</span>
-                      <span class="tag is-medium is-primary">French</span>
+                      <span class="tag is-medium is-primary">Language</span>
+                      <span class="tag is-medium">French</span>
                     </div>
                 </div>
                 <div class="column is-5">
                     <div class="tags has-addons">
-                      <span class="tag is-medium">Format</span>
-                      <span class="tag is-medium is-link">PDF</span>
+                      <span class="tag is-medium is-link">Format</span>
+                      <span class="tag is-medium">PDF</span>
                     </div>
                 </div>
             </div>
@@ -112,15 +151,16 @@
             <div class="card-header-title">
             <div class="columns" style="width: 100%">
                 <div class="column is-7">
-                    <div class="tags has-addons">
-                      <span class="tag is-medium">Language</span>
-                      <span class="tag is-medium is-primary">French, English</span>
+                    <div class="tags has-addons2">
+                      <span class="tag is-medium is-primary">Languages</span>
+                      <span class="tag is-medium">French</span>
+                      <span class="tag is-medium">English</span>
                     </div>
                 </div>
                 <div class="column is-5">
                     <div class="tags has-addons">
-                      <span class="tag is-medium">Format</span>
-                      <span class="tag is-medium is-link">gettext PO</span>
+                      <span class="tag is-medium is-link">Format</span>
+                      <span class="tag is-medium">gettext PO</span>
                     </div>
                 </div>
             </div>
@@ -136,6 +176,62 @@
         </div>
     </section>
 
+    <section class="section">
+        <div class="container">
+            <h3 class="title">
+                Contribute
+            </h3>
+        <div class="columns">
+
+            <div class="column is-6">
+                <img src="static/img/gafam-paris.jpg"/>
+            </div>
+
+            <div class="column is-6">
+                Adding a translation is really easy, it's just about downloading
+                a template file, editing a few lines and sending it back to us:
+                <br/><br/>
+                <ol>
+                    <li class="content is-spaced">
+                        Download the translation template file
+                        <a href="https://github.com/gafam/gafam-l10n/blob/master/po/gafam.pot">gafam.pot</a>
+                        to your computer.
+                    </li>
+                    <li class="content is-spaced">
+                        Rename the file using the language code of choice,
+                        e.g. "pt.po" for translating into the Portuguese language.
+                        <p class="is-size-7">
+                        You might want to have a look at the
+                        list of <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes">ISO 639-1 codes</a> and the <a href="https://en.wikipedia.org/wiki/ISO_639_macrolanguage">ISO 639 macrolanguage</a> as a reference.
+                        </p>
+                    </li>
+                    <li class="content is-spaced">
+                        Edit the ".po" file you just created and perform the
+                        translation by assigning appropriate values to all
+                        "msgstr" variables.
+                        You might want to use either the
+                        <a href="https://github.com/gafam/gafam-l10n/blob/master/po/fr.po">French original</a>
+                        or the
+                        <a href="https://github.com/gafam/gafam-l10n/blob/master/po/en.po">English translation</a>
+                        as reference.
+                        <br/>
+                        <p class="is-size-7">
+                        Please use the UTF-8 character encoding when editing
+                        the translation file.
+                        </p>
+                    </li>
+                    <li class="content is-spaced">
+                        Send the file containing the translated texts to <a href="mailto:translators@gafam.info?subject=[GAFAM] New translation for ...">translators@gafam.info</a>. Thanks!
+                    </li>
+                </ol>
+                <br/>
+                If you know your way around Git, we also appreciate receiving
+                pull requests to the translation file repository on GitHub, <a href="https://github.com/gafam/gafam-l10n">gafam-l10n</a>.
+            </div>
+
+        </div>
+    </section>
+
     <footer class="footer">
       <div class="container">
         <div class="content has-text-centered">