diff --git a/customize.dist/CryptPad-white-logo.svg b/customize.dist/CryptPad-white-logo.svg new file mode 100644 index 000000000..120bd9014 --- /dev/null +++ b/customize.dist/CryptPad-white-logo.svg @@ -0,0 +1 @@ +CryptPad white logo \ No newline at end of file diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 18d5a0fd5..6888e817b 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -79,69 +79,6 @@ 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', [ @@ -192,13 +129,9 @@ define([ }; Pages['/contact.html'] = function () { - return h('div#cp-main.cp-page-contact', [ - infopageTopbar(), - h('div.container.cp-container', [ - h('center', h('h1', Msg.contact)), - setHTML(h('p'), Msg.main_about_p2) - ]), - infopageFooter(), + return h('div#main_other', [ + h('center', h('h1', Msg.contact)), + setHTML(h('p'), Msg.main_about_p2) ]); }; @@ -308,30 +241,23 @@ define([ var infopageTopbar = function () { return h('div.cp-topbar', - h('div.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('ul.navbar-nav', [ - h('li.nav-item', [ - h('a.nav-link', { href: '/what-is-cryptpad.html'}, 'What is CryptPad'), - ]), - h('li.nav-item', [ - h('a.nav-link', { href: 'https://blog.cryptpad.fr/'}, 'Blog'), - ]), - h('li.nav-item', [ - h('a.nav-link', { href: '/contact.html'}, 'Contact'), - ]), - h('li.nav-item', [ - h('a.nav-link', { href: '/about.html'}, 'About'), - ]), - ]), - ]), + h('div.cp-left', + h('a.navbar-brand', { href: 'index.html'}, [ + h( 'img', { src: '/customize/CryptPad-white-logo.svg' }) + ]) ), - h('div.cp-right', - h('a.cp-register-btn', { href: '/register'}, 'Register'), - h('a.cp-login-btn', { href: '/login'}, 'Log in') + h('div.cp-right.navbar.navbar-toggleable-md.navbar-light.navbar-inverse', + h('button.navbar-toggler.navbar-toggler-right', {'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.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, 'What is CryptPad'), + h('a.nav-item.nav-link', { href: 'https://blog.cryptpad.fr/'}, 'Blog'), + h('a.nav-item.nav-link', { href: '/contact.html'}, 'Contact'), + h('a.nav-item.nav-link', { href: '/about.html'}, 'About'), + h('a.cp-login-btn', { href: '/login'}, 'Log in'), + h('a.cp-register-btn', { href: '/register'}, 'Register') + ]), ) ); } diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index 5f7750cde..bbe43d6ad 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -1,3 +1,5 @@ +//@import (once) "./variables.less"; + @import (once) "../include/infopages.less"; @import (once) "../include/colortheme.less"; @@ -5,15 +7,6 @@ .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 { @@ -40,12 +33,11 @@ } .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; @@ -71,6 +63,11 @@ } .cp-topbar { position: absolute; + background: transparent; + a { + color: #fff; + padding: 0.5em 0.5em 0.5em 0.5em; + } button:focus { outline: none; } @@ -87,6 +84,15 @@ font-size: 1.6rem; } } + img { + height: 5vh; + margin-top: -4px; + } + &:hover { + img { + transform: none; + } + }; } @callout-padding: 15px; a:hover { @@ -181,6 +187,8 @@ h4 { } .navbar-inverse .navbar-toggler { border-color: transparent; + margin-top: -12px; + padding: 0; } @media (min-width: 576px) and (max-width: 767px) { .container { @@ -191,8 +199,24 @@ h4 { left: 5px; } } -@media (max-width: 767px) { - .collapse.show { - margin-bottom: -12em; +@media (max-width: 991px) { + #menuCollapse { + position: absolute; + left: -131px; + margin-top: 0.5em; + text-align: right; } + #menuCollapse a { + width: 100%; + text-align: right; + } + .navbar-nav a { + text-align: right !important; + } + .cp-right .cp-login-btn { + padding: 0.5em; + } +} +.collapsing a { + text-align: right !important; } \ No newline at end of file