Add reference to library.gafam.info

CHANGES.rst

@@ -5,6 +5,9 @@ www.gafam.info CHANGES
 
 in progress
 -----------
+
+2018-05-17 0.7.0
+----------------
 - Add translation into Polish. Thanks, Piotr and friends!
 - Add translation into Norwegian. Thanks, Allan!
 - Add translation into Catalan. Thanks, Pau!
@@ -13,6 +16,7 @@ in progress
 - Update page metadata
 - Update some texts and page content
 - Deactivate GitHub embedding widget
+- Add reference to library.gafam.info
 
 2018-02-06 0.6.0
 ----------------

htdocs/index.html

@@ -73,7 +73,7 @@
             </div>
         </div>
         <div class="column is-3">
-            <img src="static/img/gafam-pictograms.jpg"/>
+            <img class="image-shadow-white" src="static/img/gafam-pictograms.jpg"/>
         </div>
     </div>
 </section>
@@ -132,7 +132,9 @@
                 </div>
             </div>
             <div class="column is-6">
-                <img src="static/img/gafam-poster-ces2018.jpg"/>
+                <a href="https://ptrace.gafam.info/unofficial/img/color/lqdn-gafam-poster-en-color-5x1-2560x.png" target="_blank">
+                    <img class="image-shadow" src="https://ptrace.gafam.info/unofficial/img/color/lqdn-gafam-poster-en-color-5x1-1280x.png"/>
+                </a>
             </div>
         </div>
     </div>
@@ -167,27 +169,11 @@
                 </li>
                 <li class="content">
                     <p class="is-size-5 has-text-weight-semibold">
-                        Choose one of the <a href="#resources">design resources</a>
+                        Choose one of the design resources
                     </p>
                     <p>
-                        which fulfills your needs regarding format and language and download it to your computer.
-                    </p>
-                    <p>
-                        <a class="button is-link" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-fr.pdf">
-                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
-                            &nbsp;
-                            French posters in PDF format
-                        </a>
-                        <a class="button is-link" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-en.pdf">
-                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
-                            &nbsp;
-                            English posters in PDF format
-                        </a>
-                        <a class="button is-link" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-de.pdf">
-                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
-                            &nbsp;
-                            German posters in PDF format
-                        </a>
+                        Visit the <a href="#library">resource library</a> to download a suitable file
+                        which fulfills your needs regarding format and language.
                     </p>
                 </li>
                 <li class="content is-spaced">
@@ -277,6 +263,69 @@
     </div>
 </section>
 
+<!-- Library -->
+<section class="section" id="library">
+    <div class="container">
+        <h3 class="title">
+            The GAFAM poster campaign library
+        </h3>
+
+        <div class="columns">
+            <div class="column is-6 buttons">
+
+                <p class="content is-spaced">
+                    The resources and materials collected so far.
+                </p>
+
+                <p class="content is-spaced">
+                    These are the official PDF files published by LQDN:
+                </p>
+                <div class="has-text-centered">
+                    <p>
+                        <a class="button is-link" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-fr.pdf" target="_blank">
+                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
+                            &nbsp;
+                            French posters
+                        </a>
+                        <a class="button is-link" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-en.pdf" target="_blank">
+                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
+                            &nbsp;
+                            English posters
+                        </a>
+                        <a class="button is-link" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-de.pdf" target="_blank">
+                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
+                            &nbsp;
+                            German posters
+                        </a>
+                    </p>
+                </div>
+
+                <hr/>
+
+                <p class="content is-spaced">
+                    These are the reprinted PDF files with translations from the community:
+                </p>
+                <div class="has-text-centered">
+                    <a href="https://library.gafam.info/" class="library-link" style="font-size: xx-large" target="_blank">
+                        <i class="fa fa-university fa-5x" aria-hidden="true"></i>
+                    </a>
+                    <br/>
+                    <a href="https://library.gafam.info/" class="button" style="margin-top: 1.5rem" target="_blank">
+                        Visit the library
+                    </a>
+                </div>
+
+            </div>
+            <div class="column is-6">
+                <a href="https://ptrace.gafam.info/unofficial/img/mosaic/lqdn-gafam-poster-mosaic-color-10x8-full.png" target="_blank">
+                    <img class="image-shadow" src="https://ptrace.gafam.info/assets/2018-05-17_lqdn-gafam-poster-mosaic-color-10x8-small.png"/>
+                </a>
+            </div>
+        </div>
+
+    </div>
+</section>
+
 <!-- Resources -->
 <section class="section is-hidden" id="resources">
     <div class="container">
@@ -506,7 +555,7 @@
         <div class="columns">
 
             <div class="column is-6">
-                <img src="static/img/gafam-poster-paris.jpg"/>
+                <img class="image-shadow" src="static/img/gafam-poster-paris.jpg"/>
             </div>
 
             <div class="column is-6">

src/css/main.css

@@ -33,3 +33,15 @@
     color: black;
     font-weight: bold;
 }
+
+.image-shadow {
+    box-shadow: .0rem .0rem .4rem .05rem black;
+}
+
+.image-shadow-white {
+    box-shadow: .0rem .0rem .4rem .05rem white;
+}
+
+.library-link:hover, .library-link.is-hovered {
+    color: #276cda;
+}