From ecbd463cbc3954af9bf19dcc5d5b8830e93c31ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <mail@davidbenque.com>
Date: Thu, 22 Oct 2020 16:53:26 +0100
Subject: [PATCH] Change navigation bar

- move all navbar styles to infopages.less as they should be the same
for all pages
---
 customize.dist/pages.js                       |  4 ++-
 .../src/less2/include/infopages.less          | 25 ++++++++++------
 .../src/less2/pages/page-index.less           | 30 +------------------
 3 files changed, 20 insertions(+), 39 deletions(-)

diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index e1752a461..756ff28c2 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -137,7 +137,9 @@ define([
         });
 
         return h('nav.navbar.navbar-expand-lg',
-            h('a.navbar-brand', { href: '/index.html'}),
+            h('a.navbar-brand', { href: '/index.html'}, [
+                h('img', { src: '/customize/CryptPad_logo.svg?', 'aria-hidden': true}), 'CryptPad'
+            ]),
             button,
             h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [
                 h('a.nav-item.nav-link', { href: 'https://blog.cryptpad.fr/'}, Msg.blog),
diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less
index 3df7b4c1d..e085d2b5a 100644
--- a/customize.dist/src/less2/include/infopages.less
+++ b/customize.dist/src/less2/include/infopages.less
@@ -22,8 +22,8 @@ body {
     // Basic setup for info pages, this should be used at the global level
     background-color: @colortheme_info-background;
     a {
-        color: @cryptpad_color_blue;
-        &:visited { color: darken(@cryptpad_color_blue, 5%); }
+        color: @colortheme_logo-2;
+        &:visited { color: darken(@colortheme_logo-2, 5%); }
     }
     a:hover {
         opacity: 1;
@@ -155,14 +155,18 @@ body {
 
     // navigation top bar
     .navbar {
-        background: #fff;
+        width: 100%;
+        color: @colortheme_logo-2;
         .navbar-brand {
             display: block;
-            background-image: url(/customize/CryptPad_logo_color.svg);
-            background-repeat: no-repeat;
-            background-size: contain;
             height: 50px;
             width: 250px;
+            font-family: "IBM Plex Mono";
+            font-size: 1.8em;
+            img {
+                max-width: 40px;
+                margin-right: 10px
+            }
             @media (max-width: 326px) {
                 width: 180px;
             }
@@ -171,15 +175,18 @@ body {
         a {
             border: 2px solid transparent;
             white-space: nowrap;
+            &:visited {
+                color: @colortheme_logo-2;
+            }
         }
         .nav-link {
             padding: 0.5em 0.7em;
             &:hover {
-                color: @cryptpad_color_light_blue;
+                color: @cryptpad_text_col;
             }
         }
         .cp-register-btn {
-            border: 2px solid #4591C4;
+            border: 2px solid @colortheme_logo-2;
             display: inline-block;
         }
         button:focus {
@@ -187,7 +194,7 @@ body {
         }
         .navbar-toggler {
             margin-top: 10px;
-            color: #4591C4;
+            color: @colortheme_logo-2;
         }
     }
     @media (max-width: 1000px) {
diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less
index 44fb19b54..a641d3d1f 100644
--- a/customize.dist/src/less2/pages/page-index.less
+++ b/customize.dist/src/less2/pages/page-index.less
@@ -74,35 +74,7 @@
             //font-style: italic;
         }
     }
-    .navbar {
-        background: transparent;
-        width: 100%;
-        @media only screen and (max-device-width: 991px) {
-            margin-top: 0;
-        }
-        .navbar-brand {
-            background-image: url(/customize/CryptPad-white-logo.svg);
-        }
-        a {
-            color: #fff;
-            &:visited {
-                color: rgba(255,255,255,.9);
-            };
-        }
-        .nav-link {
-            &:hover {
-                color: inherit;
-                transform: scale(1.05);
-            };
-        }
-        .cp-register-btn {
-                border: 2px solid #fff;
-        }
-        .navbar-toggler {
-            margin-top: 10px;
-            color: #fff;
-        }
-    }
+
     @callout-padding: 15px;
     a:hover {
         text-decoration: none;