Changed the logo, uploaded the new font, repaired responsive

customize.dist/pages.js

@@ -241,11 +241,16 @@ define([
 
     var infopageTopbar = function () {
         return h('div.cp-topbar',
-            h('div.cp-left',
-                h('a', { href: '/zeroknowledge.html'}, 'What is Zero Knowledge'),
-                h('a', { href: 'https://blog.cryptpad.fr/'}, 'Blog'),
-                h('a', { href: '/contact.html'}, 'Contact'),
-                h('a', { href: '/about.html'}, 'About')
+            h('div.cp-left.navbar.navbar-toggleable-sm.navbar-light.navbar-inverse',
+            	h('button.navbar-toggler.navbar-toggler-left', {'type':'button'}, {'data-toggle':'collapse'}, {'data-target':'#menuCollapse'}, {'aria-controls': 'menuCollapse'}, {'aria-expanded':'false'}, {'aria-label':'Toggle navigation'},
+            		[h('i.fa.fa-bars')
+            		]),
+            	h('div.collapse.navbar-collapse#menuCollapse', [
+            			h('a', { href: '/zeroknowledge.html'}, 'What is Zero Knowledge'),
+                		h('a', { href: 'https://blog.cryptpad.fr/'}, 'Blog'),
+               			h('a', { href: '/contact.html'}, 'Contact'),
+                		h('a', { href: '/about.html'}, 'About')
+            		]),
             ),
             h('div.cp-right',
                 h('a.cp-register-btn', { href: '/register'}, 'Register'),
@@ -261,13 +266,13 @@ define([
                 infopageTopbar(),
                 h('div.container.cp-container', [
                     h('div.row', [
-                        h('div.cp-title.col-6.col-xs-6', [
+                        h('div.cp-title.col-12.col-sm-6', [
                             h('img', { src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs }),
                             h('h1', 'CryptPad'),
                             h('p', Msg.main_catch_phrase)
                         ]),
                         /*userForm(),*/
-                        h('div.col-6.col-xs-6', [
+                        h('div.col-12.col-sm-6', [
                             [
                                 [ 'pad', '/pad/', 'Rich Text Pad', 'fa-file-word-o' ],
                                 [ 'code', '/code/', 'Markdown/Code Pad', 'fa-file-code-o' ],

customize.dist/src/less2/main.less

@@ -1,2 +1,6 @@
 @import url('https://fonts.googleapis.com/css?family=Roboto');
+@font-face {
+	font-family: Neuropolitical;
+	src: url(../customize.dist/fonts/neuropolitical.ttf)
+}
 div#cp-main.cp-page-index { @import "./pages/page-index.less"; }

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

@@ -16,6 +16,11 @@
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
+    .container {
+        @media only screen and (max-device-width : 576px) {
+            margin-top: 6em;
+        }
+    }
 }
 .cp-right {
 	.cp-register-btn {
@@ -51,11 +56,23 @@
     p {
         //font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
         font-size: 20px;
-        font-style: italic;
+        //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;
+        }
     }
 }
-.cp-topbar { position: absolute; }
-
 @callout-padding: 15px;
 
 .bs-callout {
@@ -72,6 +89,11 @@
         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;
@@ -141,3 +163,15 @@ h4 {
         }
     }
 }
+.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;
+    }
+}