Styled the general menu, footer, updated about

customize.dist/CryptPad_logo_color.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.4 94.7"><defs><style>.cls-1{fill:#4591c4;}.cls-2{fill:#999;}</style></defs><title>CryptPad_logo_color</title><g id="Layer_2" data-name="Layer 2"><g id="svg2"><g id="g4845"><path id="path4811" class="cls-1" d="M99.5,63.6a24.8,24.8,0,0,1-5.9-.6,8.5,8.5,0,0,1-3.8-1.9,7.1,7.1,0,0,1-2-3.4,19.4,19.4,0,0,1-.6-5.2V42.5a19.4,19.4,0,0,1,.6-5.1,7.1,7.1,0,0,1,2-3.4A8.5,8.5,0,0,1,93.6,32a24.8,24.8,0,0,1,5.9-.6h22.3v6.2h-22a11.8,11.8,0,0,0-2.7.3,3.5,3.5,0,0,0-1.7.9,3.3,3.3,0,0,0-.9,1.6,11.1,11.1,0,0,0-.2,2.5v9.4a11.1,11.1,0,0,0,.2,2.5,3.3,3.3,0,0,0,.9,1.6,3.3,3.3,0,0,0,1.7.8l2.7.2h22v6.1Z"/><path id="path4813" class="cls-1" d="M126.5,63.6V48.8a16,16,0,0,1,.7-4.9,7.5,7.5,0,0,1,2.1-3.3,8.9,8.9,0,0,1,3.7-1.9,21.4,21.4,0,0,1,5.5-.6h4.6v5.7h-4.4l-2.5.2a3.3,3.3,0,0,0-1.6.8,3.2,3.2,0,0,0-.8,1.6,10.1,10.1,0,0,0-.3,2.5V63.6Z"/><path id="path4815" class="cls-1" d="M154.1,51.4a3.8,3.8,0,0,0,.9,3,4.6,4.6,0,0,0,3.1.8h15.7V38h6.8V63.2q0,4.3-2.1,6.2t-6.9,1.9H161.4V65.5H171a3.3,3.3,0,0,0,2.1-.6,2.7,2.7,0,0,0,.7-2.2V60.7H157.7a19,19,0,0,1-4.9-.5,7.8,7.8,0,0,1-3.3-1.7,6.5,6.5,0,0,1-1.8-2.8,12.7,12.7,0,0,1-.6-4V38h6.9Z"/><path id="path4817" class="cls-1" d="M207.5,38a25.1,25.1,0,0,1,5.9.6,8.5,8.5,0,0,1,3.8,1.9,7.1,7.1,0,0,1,2,3.4,19.7,19.7,0,0,1,.6,5.2v3.4a19.4,19.4,0,0,1-.6,5.2,7.1,7.1,0,0,1-2,3.4,8.5,8.5,0,0,1-3.8,1.9,25.1,25.1,0,0,1-5.9.6H193.2v7.6h-7V49.1a19.7,19.7,0,0,1,.6-5.2,7.1,7.1,0,0,1,2-3.4,8.6,8.6,0,0,1,3.8-1.9,25.1,25.1,0,0,1,5.9-.6Zm5.3,11.3a11.7,11.7,0,0,0-.3-2.7,2.9,2.9,0,0,0-1-1.6,4,4,0,0,0-1.9-.8l-3-.2h-7.8l-2.7.2a3.5,3.5,0,0,0-1.7.8,3.2,3.2,0,0,0-.8,1.6,11.7,11.7,0,0,0-.2,2.6v8.4h13.4l3-.2a3.8,3.8,0,0,0,1.9-.7,2.9,2.9,0,0,0,1-1.6,11.9,11.9,0,0,0,.3-2.8Z"/><path id="path4819" class="cls-1" d="M226.5,63.6V43.8H223V38h3.6V30.8h7.2V38h8.1v5.7h-8.1V63.6Z"/><path id="path4821" class="cls-2" d="M252.4,54.4v9.2h-7.2V31.4H271a25.7,25.7,0,0,1,5.8.5,8.4,8.4,0,0,1,3.7,1.8,6.8,6.8,0,0,1,2,3.2,17.1,17.1,0,0,1,.6,4.8v2.8a16.9,16.9,0,0,1-.6,4.8,6,6,0,0,1-2,3,8.3,8.3,0,0,1-3.7,1.6,31.6,31.6,0,0,1-5.9.4Zm23.5-12.3q0-2.6-1.1-3.5t-4-.9H252.4v11h18.5a6.5,6.5,0,0,0,3.9-.9q1.1-.9,1.1-3.4Z"/><path id="path4823" class="cls-2" d="M296.2,63.6a18.4,18.4,0,0,1-4.6-.5,7.4,7.4,0,0,1-2.9-1.3,4.6,4.6,0,0,1-1.5-2.1,8.7,8.7,0,0,1-.4-2.8V54.5a9.3,9.3,0,0,1,.4-2.9,4.7,4.7,0,0,1,1.4-2.1,6.5,6.5,0,0,1,2.7-1.3,17.7,17.7,0,0,1,4.4-.4h18.9v-.6q0-2.5-1-3.3a5.3,5.3,0,0,0-3.4-.8h-7V38h7a20.7,20.7,0,0,1,5.2.6,8.9,8.9,0,0,1,3.5,1.7,6.7,6.7,0,0,1,2,2.9,12.5,12.5,0,0,1,.6,4.2v6.2a17.2,17.2,0,0,1-.5,4.7,6.3,6.3,0,0,1-1.9,3.1,7.9,7.9,0,0,1-3.6,1.7,26.8,26.8,0,0,1-5.6.5Zm18.5-11.6H296.5a3.1,3.1,0,0,0-1.9.5,2.5,2.5,0,0,0-.7,2.1v1.7a2.1,2.1,0,0,0,.8,1.9,3.7,3.7,0,0,0,2.1.5H310l2.1-.2a3.2,3.2,0,0,0,1.5-.7,3,3,0,0,0,.9-1.4,7.8,7.8,0,0,0,.3-2.3Z"/><path id="path4825" class="cls-2" d="M339.1,63.6a25.4,25.4,0,0,1-6-.6,8.6,8.6,0,0,1-3.8-1.9,7.1,7.1,0,0,1-2-3.4,19.4,19.4,0,0,1-.6-5.2V49.1a19.7,19.7,0,0,1,.6-5.2,7.1,7.1,0,0,1,2-3.4,8.6,8.6,0,0,1,3.8-1.9,25.4,25.4,0,0,1,6-.6h14.2V29.8h7V52.6a19.4,19.4,0,0,1-.6,5.2,7.1,7.1,0,0,1-2,3.4A8.5,8.5,0,0,1,354,63a25.1,25.1,0,0,1-5.9.6Zm-5.3-11.2a11.7,11.7,0,0,0,.3,2.7,2.9,2.9,0,0,0,1,1.6,4,4,0,0,0,1.9.8l3.1.2h7.8l2.7-.2a3.3,3.3,0,0,0,1.7-.8,3.2,3.2,0,0,0,.9-1.6,11.9,11.9,0,0,0,.2-2.6V44.1H340l-3,.2a4,4,0,0,0-1.9.8,2.9,2.9,0,0,0-1,1.6,11.7,11.7,0,0,0-.3,2.7Z"/><path id="path4827" class="cls-1" d="M39.2,0,9.9,5.4A6.3,6.3,0,1,0,3.2,16V58.2c0,4,1.8,8.3,5.3,12.7A65.5,65.5,0,0,0,21.6,83,128.2,128.2,0,0,0,39.2,93.5,128.1,128.1,0,0,0,56.7,83,65.4,65.4,0,0,0,69.8,70.9c3.5-4.5,5.3-8.8,5.3-12.7V16A6.3,6.3,0,0,0,72,4.2a6.2,6.2,0,0,0-3.6,1.2Zm-.1,6.2,26.7,4.9a5.9,5.9,0,0,0,.2,1.1L50.3,22.5a15.3,15.3,0,0,0-22.6.1l-15.5-10a6.3,6.3,0,0,0,.3-1.4Zm28.8,9a6.5,6.5,0,0,0,1.8,1.1v41a10.4,10.4,0,0,1-.1,1.7,21.5,21.5,0,0,1-4.1,7.8A56.1,56.1,0,0,1,54.2,77.2a110.6,110.6,0,0,1-15,9,110.8,110.8,0,0,1-15-9A55.8,55.8,0,0,1,13,66.8a19.8,19.8,0,0,1-4.4-9.3c0-.1,0-.2,0-.3V16.4a6.3,6.3,0,0,0,1.7-1L30.1,28.1a10.1,10.1,0,0,1,9-5.4,10,10,0,0,1,9,5.4Z"/><g id="g4829"><path id="path4831" class="cls-2" d="M23,54.8a4.6,4.6,0,1,0,0,9.3,4.6,4.6,0,0,0,0-9.3Z"/><path id="path4833" class="cls-2" d="M24.3,28.5a14.9,14.9,0,0,0,4.2,15.4L21.2,58.7a2.8,2.8,0,0,0,2.3,3.8h11V57.3H27.7l6.4-12.8a2.7,2.7,0,0,0-.8-3.3A9.7,9.7,0,0,1,29,31.6Z"/></g><g id="g4835"><path id="path4837" class="cls-2" d="M55.3,54.8a4.6,4.6,0,1,0,0,9.3,4.6,4.6,0,0,0,0-9.3Z"/><path id="path4839" class="cls-2" d="M53.8,28.6l-4.7,3.1a10.2,10.2,0,0,1,.1,1.2,10,10,0,0,1-4.3,8.3,2.7,2.7,0,0,0-.8,3.3l6.3,12.8H43.6v5.2h11a2.8,2.8,0,0,0,2.3-3.8L49.6,43.9a15.2,15.2,0,0,0,4.8-11,15.3,15.3,0,0,0-.6-4.3Z"/></g><path id="path4841" class="cls-1" d="M43.2,33.3A4.2,4.2,0,1,1,39,29.1,4.2,4.2,0,0,1,43.2,33.3Z"/><path id="path4843" class="cls-1" d="M45.3,88.4A6.3,6.3,0,1,1,39,82.1,6.3,6.3,0,0,1,45.3,88.4Z"/></g></g></g></svg>

customize.dist/pages.js

@@ -16,7 +16,7 @@ define([
     var footerCol = function (title, L, literal) {
         return h('div.col', [
             h('ul.list-unstyled', [
-                h('li.title', {
+                h('li.cp-title', {
                     'data-localization': title,
                 }, title? Msg[title]: literal )
                 ].concat(L.map(function (l) {
@@ -122,14 +122,14 @@ define([
                 h('h2', 'Key Contributors'),
                 h('div.row', [
                     h('div.col-md-4', [
-                        h('img.bio-avatar', {'src': '/customize/images/pierre.jpg'}),
+                        h('img.bio-avatar', {'src': '/customize/images/Pierre-new.jpg'}),
                         h('h3', "Pierre Bondoerffer"),
                         setHTML(h('div#bio'), '<p>Resident CSS wizard and emoji extraordinaire, Pierre is passionate about anything related to technology. He loves to hack around computers and put parts together.</p><p>He is currently studying at 42, where he learns about algorithms, networking, kernel programming and graphics.</p><p>As a part of an internship, he joined XWiki SAS and worked on CryptPad to improve user experience. He also maintains the Spanish translation.</p>')
                     ]),
                     h('div.col-md-4', [
-                        h('img.bio-avatar', {'src': '/customize/images/avatar.png'}),
+                        h('img.bio-avatar', {'src': '/customize/images/Catalin.jpg'}),
                         h('h3', "Catalin Scripcariu"),
-                        setHTML(h('div#bio'), '')
+                        setHTML(h('div#bio'), '<p> Catalin is a Maths majour and has worked in B2B sales for 12 years. Design was always his passion and 3 years ago he started to dedicate himself to web design and front-end.</p><p>At the beginning of 2017 he joined the Xwiki family, where he worked both on the business and the community side of XWiki, including the research team and CryptPad. </p>')
                     ]),
                     h('div.col-md-4', [
                         h('img.bio-avatar', {'src': '/customize/images/ludovic.jpg'}),
@@ -287,7 +287,7 @@ define([
                         ])
                     ])
                 ]),
-            ])
+            ]),
         ];
     };
 

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

@@ -43,3 +43,6 @@
 
 @colortheme_profile-bg: #0087ff;
 @colortheme_profile-color: #fff;
+
+@cryptpad_color_blue: #4591C4; 
+@cryptpad_color_grey: #999999;

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

@@ -8,8 +8,8 @@
     background-color: @colortheme_info-background;
 
     a {
-        color: @colortheme_link-color;
-        &:visited { color: @colortheme_link-color-visited; }
+        color: @cryptpad_color_blue;
+        &:visited { color: darken(@cryptpad_color_blue, 10%); }
         //opacity: 0.8;
         //transition: opacity 0.2s;
     }
@@ -77,25 +77,26 @@
     }
 
     footer {
-        background-color: white;
-
+        background-color: @cryptpad_color_grey;
         .container {
             .col {
                 margin-top: 1em;
             }
-
-            width: 100%;
-            text-align: center;
+        a {
+            color: #fff;
+            &:visited {
+                color: darken(#fff, 20%);
+            };
+        }
         margin-bottom: 1em;
-
         ul.list-unstyled {
                 margin: 0;
             }
         }
 
         .cp-version-footer {
-            background-color: @colortheme_info-background;
-            color: black;
+            background-color: #6C6C6C;
+            color: #fff;
             text-align: center;
             padding: 0.5em;
         }
@@ -159,3 +160,64 @@
         }
     }
 }
+
+// navigation top bar 
+.navbar  {
+    background: #fff;
+    .navbar-brand {
+        background: url(/customize/CryptPad_logo_color.svg) no-repeat;
+        width: 250px;
+        height: 50px;
+    }
+    a {
+        border: 2px solid transparent;
+    }
+    .nav-link {
+        padding: 0.5em 0.7em;
+        &:hover {
+            transform: scale(1.05);
+        };
+    }
+    .cp-register-btn {
+            border: 2px solid #4591C4;
+    }
+    button:focus {
+        outline: none;
+    }
+    .navbar-toggler {
+        margin-top: 10px;
+        color: #4591C4;
+    }
+}
+@media (max-width: 991px) {
+    #menuCollapse {
+        text-align: right;
+    }
+    .navbar-nav a {
+        text-align: right !important;
+    }
+    .cp-register-btn {
+        margin-right: 13px;
+        margin-left: 83vw;
+        text-align: center;
+     }
+}
+@media (max-width: 687px) {
+    .cp-register-btn {
+         margin-left: 75vw;
+    }
+}
+@media (max-width: 467px) {
+    .cp-register-btn {
+         margin-left: 63vw;
+    }
+}
+
+
+//footer general styles
+
+.cp-title {
+    font-weight: bold;
+    font-size: 1.2em;
+    color: #1E1F1F;
+}

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

@@ -63,6 +63,7 @@
     }
 }
 .navbar {
+    background: transparent;
     width: 100%;
     margin-top: -1em;
     @media only screen and (max-device-width: 991px) {
@@ -75,13 +76,11 @@
     }
     a {
         color: #fff;
-        border: 2px solid transparent;
         &:visited {
             color: rgba(255,255,255,.8);
         };
     }
     .nav-link {
-        padding: 0.5em 0.7em;
         &:hover {
             transform: scale(1.05);
         };
@@ -89,9 +88,6 @@
     .cp-register-btn {
             border: 2px solid #fff;
     }
-    button:focus {
-        outline: none;
-    }
     .navbar-toggler {
         margin-top: 10px;
         color: #fff;
@@ -197,27 +193,4 @@ h4 {
         left: 5px;
     }
 }
-@media (max-width: 991px) {
-    #menuCollapse {
-        text-align: right;
-    }
-    .navbar-nav a {
-        text-align: right !important;
-    }
-    .cp-register-btn {
-        margin-right: 13px;
-        margin-left: 83vw;
-        text-align: center;
-     }
-}
-@media (max-width: 687px) {
-    .cp-register-btn {
-         margin-left: 75vw;
-    }
-}
-@media (max-width: 467px) {
-    .cp-register-btn {
-         margin-left: 63vw;
-    }
-}