diff --git a/customize.dist/alt-favicon.png b/customize.dist/alt-favicon.png index 169ce4ef2..94e0b237f 100644 Binary files a/customize.dist/alt-favicon.png and b/customize.dist/alt-favicon.png differ diff --git a/customize.dist/cryptpad-new-logo-colors-logoonly.png b/customize.dist/cryptpad-new-logo-colors-logoonly.png index c686f4dcd..6ad292df0 100644 Binary files a/customize.dist/cryptpad-new-logo-colors-logoonly.png and b/customize.dist/cryptpad-new-logo-colors-logoonly.png differ diff --git a/customize.dist/main-favicon.png b/customize.dist/main-favicon.png index 54169c07e..354d88ece 100644 Binary files a/customize.dist/main-favicon.png and b/customize.dist/main-favicon.png differ diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 1dc11d67f..24ce4447e 100644 --- a/customize.dist/pages.js +++ b/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(), ]); }; @@ -244,15 +308,25 @@ define([ var infopageTopbar = function () { return h('div.cp-topbar', - h('div.cp-left.navbar.navbar-toggleable-sm.navbar-light.navbar-inverse', + 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('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('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-right', diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 26274ff1e..3ece30827 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/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; diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index d5a9e5660..c5d09dabe 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/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 { diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less index d70ecbd80..6c7f0ac04 100644 --- a/customize.dist/src/less2/pages/page-contact.less +++ b/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; - } -}*/ \ No newline at end of file diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index b42645ca5..5f7750cde 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/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; @@ -56,7 +65,7 @@ } p { //font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 21px; + font-size: 20px; //font-style: italic; } } @@ -65,6 +74,11 @@ button:focus { outline: none; } + .collapse { + a { + display: block; + } + } .navbar-toggler-left { top: -0.59rem; } @@ -176,4 +190,9 @@ h4 { div#cp-main.cp-page-index .cp-topbar .navbar-toggler-left { left: 5px; } +} +@media (max-width: 767px) { + .collapse.show { + margin-bottom: -12em; + } } \ No newline at end of file diff --git a/customize.dist/template.js b/customize.dist/template.js index acf44e373..cf5adb46d 100644 --- a/customize.dist/template.js +++ b/customize.dist/template.js @@ -176,6 +176,7 @@ $(function () { require([ 'less!/customize/src/less2/main.less', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', + '/bower_components/bootstrap/dist/js/bootstrap.min.js' ], function () { $body.append($main);