Move footer to pages.js and add it to the contact page

customize.dist/pages.js

@@ -79,6 +79,69 @@ define([
         ];
     };
 
+    var footerCol = function (title, L, literal) {
+        return h('div.col', [
+            h('ul.list-unstyled', [
+                h('li.title', {
+                    'data-localization': title,
+                }, title? Msg[title]: literal )
+                ].concat(L.map(function (l) {
+                    return h('li', [ l ]);
+                }))
+            )
+        ]);
+    };
+
+    var footLink = function (ref, loc, text) {
+        var attrs =  {
+            href: ref,
+        };
+        if (!/^\//.test(ref)) {
+            attrs.target = '_blank';
+            attrs.rel = 'noopener noreferrer';
+        }
+        if (loc) {
+            attrs['data-localization'] =  loc;
+            text = Msg[loc];
+        }
+        return h('a', attrs, text);
+    };
+
+    var infopageFooter = function () {
+        return h('footer', [
+            h('div.container', [
+                h('div.row', [
+                    footerCol(null, [
+                        footLink('/about.html', 'about'),
+                        footLink('/terms.html', 'terms'),
+                        footLink('/privacy.html', 'privacy'),
+                    ], 'CryptPad'),
+                    footerCol('footer_applications', [
+                        footLink('/drive/', 'main_drive'),
+                        footLink('/pad/', 'main_richText'),
+                        footLink('/code/', 'main_code'),
+                        footLink('/slide/', 'main_slide'),
+                        footLink('/poll/', 'main_poll'),
+                        footLink('/whiteboard/', null, Msg.type.whiteboard)
+                    ]),
+                    footerCol('footer_aboutUs', [
+                        footLink('https://blog.cryptpad.fr', 'blog'),
+                        footLink('https://labs.xwiki.com', null, 'XWiki Labs'),
+                        footLink('http://www.xwiki.com', null, 'XWiki SAS'),
+                        footLink('https://www.open-paas.org', null, 'OpenPaaS')
+                    ]),
+                    footerCol('footer_contact', [
+                        footLink('https://riot.im/app/#/room/#cryptpad:matrix.org', null, 'Chat'),
+                        footLink('https://twitter.com/cryptpad', null, 'Twitter'),
+                        footLink('https://github.com/xwiki-labs/cryptpad', null, 'GitHub'),
+                        footLink('/contact.html', null, 'Email')
+                    ])
+                ])
+            ]),
+            h('div.cp-version-footer', "CryptPad v1.13.0 (Naiad)")
+        ]);
+    };
+
     Pages['/about.html'] = function () {
         return h('div#main_other', [
             h('center', [
@@ -134,7 +197,8 @@ define([
             h('div.container.cp-container', [
                 h('center', h('h1', Msg.contact)),
                 setHTML(h('p'), Msg.main_about_p2)
-            ])
+            ]),
+            infopageFooter(),
         ]);
     };
 

customize.dist/src/less2/include/colortheme.less

@@ -1,3 +1,8 @@
+@colortheme_link-color: #0275D8;
+@colortheme_link-color-visited: #005999;
+@colortheme_info-background: #fafafa;
+
+
 @colortheme_pad-bg: #1c4fa0;
 @colortheme_pad-color: #fff;
 

customize.dist/src/less2/include/infopages.less

@@ -1,12 +1,17 @@
+@import (once) "./colortheme.less";
+
 @infopages_infobar-height: 64px;
 
 // Basic setup for info pages, this should be used at the global level
 .infopages_main () {
     min-height: 100vh;
-    background-color: #FAFAFA;
+    background-color: @colortheme_info-background;
 
     a {
-        color: #FFF;
+        color: @colortheme_link-color;
+        &:visited {
+            color: @colortheme_link-color-visited;
+        }
         //opacity: 0.8;
         //transition: opacity 0.2s;
     }
@@ -28,7 +33,7 @@
 
 .infopages_link () {
     text-decoration: none;
-    color: #000;
+    color: #0275D8;
     cursor: pointer;
     display: inline-flex;
     &:hover {

customize.dist/src/less2/pages/page-contact.less

@@ -1,169 +1,4 @@
 @import (once) "../include/infopages.less";
-@import (once) "../include/colortheme.less";
-
 
 .infopages_main();
 .infopages_topbar();
-
-&#cp-main {
-
-}
-
-/*
-.cp-right {
-	.cp-register-btn {
-		padding: 0.5em 1em 0.7em 1em;
-		border: 2px solid #fff;
-		&:hover {
-			transform: scale(1.05);
-		}
-	}
-	.cp-login-btn {
-		color: #fff;
-		margin-left: 0.6em;
-		padding: 0.5em 1em 0.7em 1em;
-		&:hover {
-			transform: scale(1.05);
-		}
-	} 
-}
-
-.cp-title {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    margin-top: 1.5em;
-    img {
-        height: 20vh;
-        margin-bottom: 1.5em;
-    }
-    margin-left: 0;
-    h1 {
-        font-family: "Neuropolitical";
-        //font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif;
-        //font-family: "Raleway";
-        font-size: 45px;
-    }
-    p {
-        //font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-        font-size: 21px;
-        //font-style: italic;
-    }
-}
-.cp-topbar { 
-    position: absolute;
-    button:focus {
-        outline: none;
-    }
-    .navbar-toggler-left {
-        top: -0.59rem;
-    }
-    .cp-left {
-        .fa-bars {
-            font-size: 1.6rem;
-        }
-    }
-}
-@callout-padding: 15px;
-a:hover {
-    text-decoration: none
-}
-.bs-callout {
-    display: flex;
-    align-items: stretch;
-    margin: 25px 0;
-    background:rgba(255,255,255,0.6);
-    color: black;
-    transition: all .1s ease-in-out;
-    box-sizing: border-box;
-    height: 5em;
-    position: relative;
-    a {
-        color: black;
-        &:hover { text-decoration-line: none; }
-    }
-    div {
-        @media only screen and (min-device-width: 576px) and (max-device-width: 767px) {
-            left: 4.5em !important;
-        }
-    }
-}
-h4 {
-    margin: 0;
-}
-.cp-callout-more-moremsg,.cp-callout-more-lessmsg {
-    transform: none !important;
-}
-.bs-callout div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    position: absolute;
-    left: 5em;
-}
-.bs-callout+.bs-callout {
-    margin-top: -5px;
-}
-
-.bs-callout:hover {
-    //color: white;
-    transform: scale(1.05);
-    cursor: pointer; 
-}
-.bs-callout:hover .fa {
-    //width: 100%;
-}
-.bs-callout:hover.cp-callout-more {
-        transform: none !important;
-}
-.bs-callout .fa {
-    display: flex;
-    align-items: center;
-    font-size: 2em;
-    padding-left: 0.57em;
-    width: 2em;
-    transition: width 0.1s;
-    color: #fff;
-}
-.cp-callout-pad .fa { background-color: @colortheme_pad-bg; }
-.cp-callout-code .fa { background-color: @colortheme_code-bg; }
-.cp-callout-slide .fa { background-color: @colortheme_slide-bg; }
-.cp-callout-poll .fa { background-color: @colortheme_poll-bg; }
-.cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; }
-.cp-callout-recent .fa { background-color: @colortheme_drive-bg; }
-.cp-hidden { display: none !important; }
-.cp-callout-more {
-    width: auto;
-    display: inline-block;
-    align-content: center;
-    height: 2em;
-    border-radius: 1em;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 0;
-    background: none;
-    width: 100%;
-    div {
-        .infopages_link();
-        color: #fff;
-        .fa {
-            font-size: inherit;
-            padding: 0;
-            width: 1em;
-            padding-left: 5px;
-        }
-    }
-}
-.navbar-inverse .navbar-toggler {
-    border-color: transparent;
-}
-@media (min-width: 576px) and (max-width: 767px) {
-    .container {
-        padding-left: 0;
-        padding-right: 0;
-    }
-    div#cp-main.cp-page-index .cp-topbar .navbar-toggler-left {
-        left: 5px;
-    }
-}*/

customize.dist/src/less2/pages/page-index.less

@@ -5,6 +5,15 @@
 .infopages_main();
 .infopages_topbar();
 
+.cp-topbar {
+    background: transparent;
+    position: fixed;
+    a {
+        color: #fff;
+    }
+}
+
+
 @background_lighter: rgba(0,0,0,0.1);
 @background_darker: rgba(0,0,0,0.4);
 &#cp-main {
@@ -36,7 +45,7 @@
 		&:hover {
 			transform: scale(1.05);
 		}
-	} 
+	}
 }
 .cp-title {
     display: flex;