diff --git a/config.example.js b/config.example.js index 749fe4793..43438aea6 100644 --- a/config.example.js +++ b/config.example.js @@ -119,6 +119,7 @@ module.exports = { 'terms', 'about', 'contact', + 'what-is-cryptpad' ], /* Limits, Donations, Subscriptions and Contact 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 @@ + \ No newline at end of file diff --git a/customize.dist/alt-favicon.png b/customize.dist/alt-favicon.png index 169ce4ef2..3981f6b84 100644 Binary files a/customize.dist/alt-favicon.png and b/customize.dist/alt-favicon.png differ diff --git a/customize.dist/bg14.jpg b/customize.dist/bg14.jpg new file mode 100644 index 000000000..6bf5956a1 Binary files /dev/null and b/customize.dist/bg14.jpg differ diff --git a/customize.dist/bg3.jpg b/customize.dist/bg3.jpg deleted file mode 100644 index 04d3a04e0..000000000 Binary files a/customize.dist/bg3.jpg and /dev/null differ diff --git a/customize.dist/cryptpad-new-logo-colors-logoonly.png b/customize.dist/cryptpad-new-logo-colors-logoonly.png new file mode 100644 index 000000000..6ad292df0 Binary files /dev/null and b/customize.dist/cryptpad-new-logo-colors-logoonly.png differ diff --git a/customize.dist/fonts/neuropolitical.ttf b/customize.dist/fonts/neuropolitical.ttf new file mode 100644 index 000000000..26bbb63ce Binary files /dev/null and b/customize.dist/fonts/neuropolitical.ttf differ diff --git a/customize.dist/images/aaron.jpg b/customize.dist/images/aaron.jpg new file mode 100644 index 000000000..f746cf7e4 Binary files /dev/null and b/customize.dist/images/aaron.jpg differ diff --git a/customize.dist/images/caleb.jpg b/customize.dist/images/caleb.jpg new file mode 100644 index 000000000..1903d87b9 Binary files /dev/null and b/customize.dist/images/caleb.jpg differ diff --git a/customize.dist/images/drive_screenshot.png b/customize.dist/images/drive_screenshot.png new file mode 100644 index 000000000..b1170561c Binary files /dev/null and b/customize.dist/images/drive_screenshot.png differ diff --git a/customize.dist/images/logo_white.svg b/customize.dist/images/logo_white.svg new file mode 100644 index 000000000..d1cd2bc73 --- /dev/null +++ b/customize.dist/images/logo_white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/customize.dist/images/pad_screenshot.png b/customize.dist/images/pad_screenshot.png new file mode 100644 index 000000000..cbc837f58 Binary files /dev/null and b/customize.dist/images/pad_screenshot.png differ diff --git a/customize.dist/images/pierre.jpg b/customize.dist/images/pierre.jpg new file mode 100644 index 000000000..fea27c787 Binary files /dev/null and b/customize.dist/images/pierre.jpg differ diff --git a/customize.dist/images/yann.jpg b/customize.dist/images/yann.jpg new file mode 100644 index 000000000..6c5e144fd Binary files /dev/null and b/customize.dist/images/yann.jpg 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 b7b94940c..e5977ff8a 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -2,7 +2,8 @@ define([ '/api/config', '/common/hyperscript.js', '/common/cryptpad-common.js', -], function (Config, h, Cryptpad) { + 'jquery' +], function (Config, h, Cryptpad, $) { var Pages = {}; var Msg = Cryptpad.Messages; var urlArgs = Config.requireConf.urlArgs; @@ -12,168 +13,207 @@ define([ return e; }; - var indexContent = function () { - return [ - h('div.page.category.first#knowmore', [ - h('center', [ - h('h1', Msg.main_howitworks) - ]) - ]), - h('div.page', [ - h('div.info-container', [ - h('div.left.image', [ - h('img', { - src: '/customize/images/zeroknowledge_small.png?' + urlArgs , - alt: 'Zero Knowledge' - }) - ]), - h('div.right', [ - h('h2', Msg.main_zeroKnowledge), - setHTML(h('p'), Msg.main_zeroKnowledge_p) - ]) - ]) - ]), - h('div.page.even', [ - h('div.info-container', [ - h('div.left', [ - h('h2', Msg.main_writeItDown), - h('p', Msg.main_writeItDown_p) + 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) ]), - h('div.right.image', [ - h('img', { - alt: "User account", - src: '/customize/images/realtime_small.png?' + urlArgs, - }) - ]) - ]) - ]), - h('div.page', [ - h('div.info-container', [ - h('div.left.image', [ - h('img', { - src: '/customize/images/key_small.png?' + urlArgs, - alt: 'User account' - }) + 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') ]), - h('div.right', [ - h('h2', Msg.main_share), - h('p', Msg.main_share_p) + 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.page.even', [ - h('div.info-container', [ - h('div.left', [ - h('h2', Msg.main_organize), - h('p', Msg.main_organize_p) - ]), - h('div.right.image', [ - h('img', { - src: '/customize/images/organize.png?' + urlArgs, - alt: 'User account' - }) - ]) - ]) - ]) - ]; + h('div.cp-version-footer', "CryptPad v1.13.0 (Naiad)") + ]); }; Pages['/about.html'] = function () { - return h('div#main_other', [ - h('center', [ - h('h1', Msg.about) + return h('div#cp-main.cp-page-about', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('center', [ + h('h1', Msg.about) + ]), + setHTML(h('p'), 'CryptPad is created inside of the Research Team at XWiki SAS, a small business located in Paris France and Iasi Romania. There are 3 core team members working on CryptPad plus a number of contributors both inside and outside of XWiki SAS.'), + h('h2', 'Core Developers'), + h('div.row', [ + h('div.col-md-4', [ + h('img.bio-avatar', {'src': '/customize/images/aaron.jpg'}), + h('h3', "Aaron MacSween"), + setHTML(h('div#bio'), '
Aaron transitioned into distributed systems development from a background in jazz and live stage performance.
He appreciates the elegance of biological systems and functional programming, and focused on both as a student at the University of Toronto, where he studied cognitive and computer sciences.
He moved to Paris in 2015 to work as a research engineer at XWiki SAS, after having dedicated significant time to various cryptography-related software projects.
He spends his spare time experimenting with guitars, photography, science fiction, and spicy food.
') + ]), + h('div.col-md-4', [ + h('img.bio-avatar', {'src': '/customize/images/caleb.jpg'}), + h('h3', "Caleb James Delisle"), + setHTML(h('div#bio'), 'Caleb is a cryptography developer, Machine Technology graduate of the Franklin County Technical School and lifelong tinkerer.
In 2011, he started the cjdns Open Source project to show that secure networking could be invisible and easily deployed.
After joining XWiki SAS in 2014, he started the CryptPad project with the intent of bringing the same transparent security to collaborative editing.
He\'s always trying to learn from more experienced colleagues and when someone passes through the Research Team office, his favorite words are "Pull up a chair!".
') + ]), + h('div.col-md-4', [ + h('img.bio-avatar', {'src': '/customize/images/yann.jpg'}), + h('h3', "Yann Flory"), + setHTML(h('div#bio'), 'Yann is a mysterious person.
') + ]), + ]), + h('h2', 'Key Contributors'), + h('div.row', [ + h('div.col-md-4', [ + h('img.bio-avatar', {'src': '/customize/images/pierre.jpg'}), + h('h3', "Pierre Bondoerffer"), + setHTML(h('div#bio'), 'Resident CSS wizard and emoji extraordinaire, Pierre is passionate about anything related to technology. He loves to hack around computers and put parts together.
He is currently studying at 42, where he learns about algorithms, networking, kernel programming and graphics.
As a part of an internship, he joined XWiki SAS and worked on CryptPad to improve user experience. He also maintains the Spanish translation.
') + ]), + h('div.col-md-4', [ + h('img.bio-avatar', {'src': '/customize/images/avatar.png'}), + h('h3', "Catalin Scripcariu"), + setHTML(h('div#bio'), '') + ]), + h('div.col-md-4', [ + h('img.bio-avatar', {'src': '/customize/images/avatar.png'}), + h('h3', "Ludovic Dubost"), + setHTML(h('div#bio'), '') + ]) + ]), ]), - setHTML(h('p'), Msg.main_p2), - h('h2', Msg.main_howitworks), - setHTML(h('p'), Msg.main_howitworks_p1) - ].concat(indexContent())); + infopageFooter() + ]); }; Pages['/privacy.html'] = function () { - return h('div#main_other', [ - h('center', h('h1', Msg.policy_title)), - h('h2', Msg.policy_whatweknow), - h('p', Msg.policywhatweknow_p1), + return h('div#cp-main.cp-page-privacy', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('center', h('h1', Msg.policy_title)), + h('h2', Msg.policy_whatweknow), + h('p', Msg.policywhatweknow_p1), - h('h2', Msg.policy_howweuse), - h('p', Msg.policy_howweuse_p1), - h('p', Msg.policy_howweuse_p2), + h('h2', Msg.policy_howweuse), + h('p', Msg.policy_howweuse_p1), + h('p', Msg.policy_howweuse_p2), - h('h2', Msg.policy_whatwetell), - h('p', Msg.policy_whatwetell_p1), + h('h2', Msg.policy_whatwetell), + h('p', Msg.policy_whatwetell_p1), - h('h2', Msg.policy_links), - h('p', Msg.policy_links_p1), + h('h2', Msg.policy_links), + h('p', Msg.policy_links_p1), - h('h2', Msg.policy_ads), - h('p', Msg.policy_ads_p1), + h('h2', Msg.policy_ads), + h('p', Msg.policy_ads_p1), - h('h2', Msg.policy_choices), - h('p', Msg.policy_choices_open), - setHTML(h('p'), Msg.policy_choices_vpn), - - h('br') + h('h2', Msg.policy_choices), + h('p', Msg.policy_choices_open), + setHTML(h('p'), Msg.policy_choices_vpn), + ]), + infopageFooter() ]); }; Pages['/terms.html'] = function () { - return h('div#main_other', [ - h('center', h('h1', Msg.tos_title)), - h('p', Msg.tos_legal), - h('p', Msg.tos_availability), - h('p', Msg.tos_e2ee), - h('p', Msg.tos_logs), - h('p', Msg.tos_3rdparties), + return h('div#cp-main.cp-page-terms', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('center', h('h1', Msg.tos_title)), + h('p', Msg.tos_legal), + h('p', Msg.tos_availability), + h('p', Msg.tos_e2ee), + h('p', Msg.tos_logs), + h('p', Msg.tos_3rdparties), + ]), + infopageFooter() ]); }; Pages['/contact.html'] = function () { - return h('div#main_other', [ - h('center', h('h1', Msg.contact)), - setHTML(h('p'), Msg.main_about_p2) + 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(), ]); }; - var userForm = function () { - return h('div#userForm.form-group.hidden', [ - h('input#name.form-control', { - name: 'name', - type: 'text', - placeholder: Msg.login_username - }), - h('input#password.form-control', { - name: 'password', - type: 'password', - placeholder: Msg.login_password - }), - h('div', { - style: { display: 'none' } - }, [ - h('span.remember.form-check', [ - h('label.form-check-label', { - 'for': 'rememberme', - placeholder: Msg.login_remember, - }, [ - h('input#rememberme.form-check-input', { - type: 'checkbox', - checked: true - }) - ]) - ]) + Pages['/what-is-cryptpad.html'] = function () { + return h('div#cp-main.cp-page-what-is-cryptpad', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('center', h('h1', Msg.whatis_title)), + setHTML(h('h2'), Msg.whatis_collaboration), + setHTML(h('p'), Msg.whatis_collaboration_p1), + h('img', { src: '/customize/images/pad_screenshot.png?' + urlArgs }), + setHTML(h('p'), Msg.whatis_collaboration_p2), + setHTML(h('p'), Msg.whatis_collaboration_p3), + setHTML(h('h2'), Msg.whatis_zeroknowledge), + h('div.row', [ + h('div.col-md-4.align-self-center', [ + h('img#zeroknowledge', { src: '/customize/images/zeroknowledge_small.png?' + urlArgs }), + ]), + h('div.col-md-8', [ + setHTML(h('p'), Msg.whatis_zeroknowledge_p1), + setHTML(h('p'), Msg.whatis_zeroknowledge_p2), + setHTML(h('p'), Msg.whatis_zeroknowledge_p3), + ]), + ]), + setHTML(h('h2'), Msg.whatis_drive), + setHTML(h('p'), Msg.whatis_drive_p1), + h('img', { src: '/customize/images/drive_screenshot.png?' + urlArgs }), + setHTML(h('p'), Msg.whatis_drive_p2), + setHTML(h('p'), Msg.whatis_drive_p3), + setHTML(h('h2'), Msg.whatis_business), + setHTML(h('p'), Msg.whatis_business_p1), + setHTML(h('p'), Msg.whatis_business_p2), ]), - h('button.btn.btn-secondary.login.half.first', Msg.login_login), - h('button.btn.btn-success.register.half', Msg.login_register), - h('p.separator', Msg.login_orNoLogin), - h('p#buttons.buttons'), - h('p.driveLink', [ - h('a.gotodrive', { - href: '/drive/' - }, Msg.login_nologin) - ]) + infopageFooter(), ]); }; - var appButton = function (alt, h2, img, p, url, btn, id) { return h('div.app', [ h('center', [ @@ -194,84 +234,95 @@ define([ ]); }; - var tryIt = function () { - return [ - h('div.class.category#tryit', [ - h('center', [ - h('h1', Msg.tryIt) - ]) - ]), - h('div.page', [ - h('div.app-container', [ - h('div.app-row', [ - appButton("Rich Text application", - Msg.main_richText, - '/customize/images/pad.png?' + urlArgs, - Msg.main_richText_p, - '/pad/', - Msg.button_newpad, - 'create-pad'), - appButton('Code application', - Msg.main_code, - '/customize/images/code.png?' + urlArgs, - Msg.main_code_p, - '/code/', - Msg.button_newcode, - 'create-code'), - appButton('Slide application', - Msg.main_slide, - '/customize/images/slide.png?' + urlArgs, - Msg.main_slide_p, - '/slide/', - Msg.button_newslide, - 'create-slide'), - appButton('Poll application', - Msg.main_poll, - '/customize/images/poll.png?' + urlArgs, - Msg.main_poll_p, - '/poll/', - Msg.button_newpoll, - 'create-poll') - ]) - ]) + var infopageTopbar = function () { + return h('div.cp-topbar', + h('div', + h('a.navbar-brand', { href: 'index.html'}, [ + h( 'img', { src: '/customize/CryptPad-white-logo.svg' }) ]) - ]; + ), + h('div.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.justify-content-end.flex-column#menuCollapse', [ + h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.topbar_whatIsCryptpad), + h('a.nav-item.nav-link', { href: 'https://blog.cryptpad.fr/'}, Msg.blog), + h('a.nav-item.nav-link', { href: '/contact.html'}, Msg.contact), + h('a.nav-item.nav-link', { href: '/about.html'}, Msg.about), + h('a.cp-login-btn', { href: '/login'}, Msg.login_login), + h('a.cp-register-btn', { href: '/register'}, Msg.login_register) + ]) + ) + ); }; Pages['/'] = Pages['/index.html'] = function () { + var showingMore = false; return [ - h('div#main', [ - h('div.mainOverlay'), - h('div#align-container', [ - h('div#main-container', [ - h('div#data.hidden', [ - setHTML(h('p.left'), Msg.main_info), + h('div#cp-main.cp-page-index', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('div.row', [ + 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#loggedIn.hidden', [ - h('p#loggedInHello'), - h('p', [ - h('button.btn.btn-primary.gotodrive', Msg.login_accessDrive), - ]), - h('p', [ - h('button#loggedInLogout.btn.btn-secondary', Msg.logoutButton) + h('div.col-12.col-sm-6', [ + [ + [ 'pad', '/pad/', Msg.main_richTextPad, 'fa-file-word-o' ], + [ 'code', '/code/', Msg.main_codePad, 'fa-file-code-o' ], + [ 'slide', '/slide/', Msg.main_slidePad, 'fa-file-powerpoint-o' ], + [ 'poll.cp-more.cp-hidden', '/poll/', Msg.main_pollPad, 'fa-calendar' ], + [ 'whiteboard.cp-more.cp-hidden', '/whiteboard/', Msg.main_whiteboardPad, 'fa-paint-brush' ], + [ 'recent.cp-more.cp-hidden', '/drive/', Msg.main_recentPads, 'fa-hdd-o' ] + ].map(function (x) { + return h('a', [ + { href: x[1] }, + h('div.bs-callout.cp-callout-' + x[0], [ + h('i.fa.' + x[3]), + h('div', [ h('h4', x[2]) ]) + ]) + ]); + }), + h('div.bs-callout.cp-callout-more', [ + h('div.cp-callout-more-lessmsg.cp-hidden', [ + "see less ", + h('i.fa.fa-caret-up') + ]), + h('div.cp-callout-more-moremsg', [ + "see more ", + h('i.fa.fa-caret-down') + ]), + { + onclick: function () { + if (showingMore) { + $('.cp-more, .cp-callout-more-lessmsg').addClass('cp-hidden'); + $('.cp-callout-more-moremsg').removeClass('cp-hidden'); + } else { + $('.cp-more, .cp-callout-more-lessmsg').removeClass('cp-hidden'); + $('.cp-callout-more-moremsg').addClass('cp-hidden'); + } + showingMore = !showingMore; + } + } ]) ]) ]) ]), ]) - ] - .concat(tryIt()); + ]; }; var loadingScreen = function () { return h('div#loading', h('div.loadingContainer', [ h('img.cryptofist', { - src: '/customize/cryptofist_small.png?' + urlArgs + src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs }), h('div.spinnerContainer', - h('span.fa.fa-spinner.fa-pulse.fa-4x.fa-fw')), + h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')), h('p', Msg.loading) ]) ); @@ -283,15 +334,15 @@ define([ }; Pages['/register/'] = Pages['/register/index.html'] = function () { - return [h('div#main', [ - h('div.mainOverlay'), - h('div#align-container', [ - h('div#data.hidden', [ + return [h('div#cp-main.cp-page-register', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('div.row.align-items-center', [ + h('div#data.hidden.col-md-6', [ h('h1', Msg.register_header), - h('br'), - setHTML(h('p.left.register-explanation'), Msg.register_explanation) + setHTML(h('p.register-explanation'), Msg.register_explanation) ]), - h('div#userForm.form-group.hidden', [ + h('div#userForm.form-group.hidden.col-md-6', [ h('input.form-control#username', { type: 'text', autocomplete: 'off', @@ -309,34 +360,38 @@ define([ type: 'password', placeholder: Msg.login_confirm, }), - h('input#import-recent', { - type: 'checkbox', - checked: true - }), - h('label', { - 'for': 'import-recent', - }, Msg.register_importRecent), - h('br'), - h('input#accept-terms', { - type: 'checkbox' - }), - setHTML(h('label', { - 'for': 'accept-terms', - }), Msg.register_acceptTerms), - h('br'), + h('div.checkbox-container', [ + h('input#import-recent', { + type: 'checkbox', + checked: true + }), + h('label', { + 'for': 'import-recent', + }, Msg.register_importRecent), + ]), + h('div.checkbox-container', [ + h('input#accept-terms', { + type: 'checkbox' + }), + setHTML(h('label', { + 'for': 'accept-terms', + }), Msg.register_acceptTerms), + ]), h('button#register.btn.btn-primary', Msg.login_register) ]) - ]) + ]), + ]), + infopageFooter(), ])]; }; Pages['/login/'] = Pages['/login/index.html'] = function () { - return [h('div#main', [ - h('div.mainOverlay'), - h('div#align-container', - h('div#main-container', [ - h('div#data.hidden', setHTML(h('p.left'), Msg.main_info)), - h('div#userForm.form-group.hidden', [ + return [h('div#cp-main.cp-page-login', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('div.row.align-items-center', [ + h('div#data.hidden.col-md-6', setHTML(h('p.left'), Msg.main_info)), + h('div#userForm.form-group.hidden.col-md-6', [ h('input.form-control#name', { name: 'name', type: 'text', @@ -352,14 +407,14 @@ define([ 'name': 'password', placeholder: Msg.login_password, }), - h('button.btn.btn-primary.login.first', Msg.login_login), h('div.extra', [ - h('p', Msg.login_notRegistered), + h('button.btn.btn-primary.login.first', Msg.login_login), h('button#register.btn.btn-success.register', Msg.login_register) ]) ]) - ]) - ) + ]), + ]), + infopageFooter(), ])]; }; diff --git a/customize.dist/src/less/loading.less b/customize.dist/src/less/loading.less index 3f2ac0381..cf93330cb 100644 --- a/customize.dist/src/less/loading.less +++ b/customize.dist/src/less/loading.less @@ -19,6 +19,7 @@ margin-left: auto; margin-right: auto; height: 300px; + margin-bottom: 2em; @media screen and (max-height: @media-short-screen) { display: none; } diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less index 80537d534..f6ac5b1ac 100644 --- a/customize.dist/src/less/toolbar.less +++ b/customize.dist/src/less/toolbar.less @@ -821,13 +821,16 @@ body .cryptpad-toolbar { } a.cryptpad-logo { cursor: pointer; - font-size: 1em; - height: auto; - padding: 0px 5px; + display: inline-flex; text-decoration: none; + height: auto; + padding: 10px; - // hack because of whiteboard and poll - color: white !important; + img { + cursor: pointer; + height: 100%; + width: 100%; + } } } .cryptpad-user { diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less index 5e089d7f7..ccd1f065f 100644 --- a/customize.dist/src/less/variables.less +++ b/customize.dist/src/less/variables.less @@ -1,3 +1,5 @@ +@import (once) '../less2/include/colortheme.less'; + @base: #fff; //#f5f5f5; @dark-base: darken(@base, 20%); @less-dark-base: darken(@base, 10%); @@ -62,7 +64,7 @@ @slide-default-bg: #000; -@bg-loading: @old-base; +@bg-loading: #222; @color-loading: @old-fore; @media-not-big: 800px; @@ -85,28 +87,28 @@ @toolbar-button-font: @dropdown-font; -@toolbar-pad-bg: #1c4fa0; -@toolbar-pad-color: #fff; -@toolbar-slide-bg: #e57614; -@toolbar-slide-color: #fff; -@toolbar-code-bg: #ffae00; -@toolbar-code-color: #000; -@toolbar-poll-bg: #006304; -@toolbar-poll-color: #fff; -@toolbar-whiteboard-bg: #800080; -@toolbar-whiteboard-color: #fff; -@toolbar-drive-bg: #0087ff; -@toolbar-drive-color: #fff; -@toolbar-file-bg: #cd2532; -@toolbar-file-color: #fff; -@toolbar-friends-bg: #607B8D; -@toolbar-friends-color: #fff; -@toolbar-default-bg: #ddd; -@toolbar-default-color: #000; -@toolbar-settings-bg: #0087ff; -@toolbar-settings-color: #fff; -@toolbar-profile-bg: #0087ff; -@toolbar-profile-color: #fff; +@toolbar-pad-bg: @colortheme_pad-bg; +@toolbar-pad-color: @colortheme_pad-color; +@toolbar-slide-bg: @colortheme_slide-bg; +@toolbar-slide-color: @colortheme_slide-color; +@toolbar-code-bg: @colortheme_code-bg; +@toolbar-code-color: @colortheme_code-color; +@toolbar-poll-bg: @colortheme_poll-bg; +@toolbar-poll-color: @colortheme_poll-color; +@toolbar-whiteboard-bg: @colortheme_whiteboard-bg; +@toolbar-whiteboard-color: @colortheme_whiteboard-color; +@toolbar-drive-bg: @colortheme_drive-bg; +@toolbar-drive-color: @colortheme_drive-color; +@toolbar-file-bg: @colortheme_file-bg; +@toolbar-file-color: @colortheme_file-color; +@toolbar-friends-bg: @colortheme_friends-bg; +@toolbar-friends-color: @colortheme_friends-color; +@toolbar-default-bg: @colortheme_default-bg; +@toolbar-default-color: @colortheme_default-color; +@toolbar-settings-bg: @colortheme_settings-bg; +@toolbar-settings-color: @colortheme_settings-color; +@toolbar-profile-bg: @colortheme_profile-bg; +@toolbar-profile-color: @colortheme_profile-color; @toolbar-todo-bg: #7bccd1; @toolbar-todo-color: #000; @@ -124,7 +126,7 @@ @main-block-bg: rgba(200, 200, 200, 0.3); @main-color: #fff; -@main-bg: url('/customize/bg3.jpg') no-repeat center center; +@main-bg: url('/customize/bg4.jpg') no-repeat center center; @category-bg: #f4f4f4; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less new file mode 100644 index 000000000..3ece30827 --- /dev/null +++ b/customize.dist/src/less2/include/colortheme.less @@ -0,0 +1,37 @@ +@colortheme_link-color: #0275D8; +@colortheme_link-color-visited: #005999; +@colortheme_info-background: #fafafa; + + +@colortheme_pad-bg: #1c4fa0; +@colortheme_pad-color: #fff; + +@colortheme_slide-bg: #e57614; +@colortheme_slide-color: #fff; + +@colortheme_code-bg: #ffae00; +@colortheme_code-color: #000; + +@colortheme_poll-bg: #006304; +@colortheme_poll-color: #fff; + +@colortheme_whiteboard-bg: #800080; +@colortheme_whiteboard-color: #fff; + +@colortheme_drive-bg: #0087ff; +@colortheme_drive-color: #fff; + +@colortheme_file-bg: #cd2532; +@colortheme_file-color: #fff; + +@colortheme_friends-bg: #607B8D; +@colortheme_friends-color: #fff; + +@colortheme_default-bg: #ddd; +@colortheme_default-color: #000; + +@colortheme_settings-bg: #0087ff; +@colortheme_settings-color: #fff; + +@colortheme_profile-bg: #0087ff; +@colortheme_profile-color: #fff; \ No newline at end of file diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less new file mode 100644 index 000000000..dfc4108ba --- /dev/null +++ b/customize.dist/src/less2/include/infopages.less @@ -0,0 +1,161 @@ +@import (once) "./colortheme.less"; + +@infopages_infobar-height: 64px; +@infopages_padding: 32px; + +// Basic setup for info pages, this should be used at the global level +.infopages_main () { + background-color: @colortheme_info-background; + + a { + color: @colortheme_link-color; + &:visited { color: @colortheme_link-color-visited; } + //opacity: 0.8; + //transition: opacity 0.2s; + } + a:hover { + opacity: 1; + } + + border: 0; + padding: 0; + margin: 0; + + font-size: 14px; + font-family: 'Open Sans', 'Helvetica Neue', sans-serif; + + .cp-container { + font-size: 16px; + margin-top: @infopages_infobar-height; + padding-top: @infopages_padding; + padding-bottom: @infopages_padding; + min-height: 75vh; + h1 { + font-size: 3em; + margin-bottom: 0.5em; + } + h2 { + font-size: 2em; + margin-top: 1em; + margin-bottom: 0.5em; + } + h3 { + font-size: 1.5em; + margin-top: 1em; + margin-bottom: 0.5em; + } + + img { + &.left { + float: left; + } + + max-width: 100%; + } + + .form-group { + & > * { + margin-top: 0.5em; + } + + display: flex; + flex-direction: column; + align-items: center; + + .checkbox-container { + width: 100%; + display: flex; + align-items: center; + label { + margin: 0; + } + input { + margin-right: 0.5em; + } + } + } + } + + footer { + background-color: white; + + .container { + .col { + margin-top: 1em; + } + + width: 100%; + text-align: center; + margin-bottom: 1em; + + ul.list-unstyled { + margin: 0; + } + } + + .cp-version-footer { + background-color: @colortheme_info-background; + color: black; + text-align: center; + padding: 0.5em; + } + } +}; + +.infopages_link () { + text-decoration: none; + color: #0275D8; + cursor: pointer; + display: inline-flex; + &:hover { + transform: scale(1.05); + } +} + +// Apply this to the top bar div +.infopages_topbar () { + .cp-topbar { + background: #fff; + z-index: 9001; + position: fixed; + top: 0; + + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + box-sizing: border-box; + width: 100%; + height: @infopages_infobar-height; + padding-left: 0.5em; + padding-right: 0.5em; + vertical-align: middle; + font-size: 1.25em; + line-height: 1.25em; + + cursor: default; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + + .navbar-nav { + display: flex; + align-items: center; + } + + a { + font-weight: 500; + padding: 0.6em; + .infopages_link() + } + + .cp-logo { + img { + height: @infopages_infobar-height / 2; + } + margin-right: 0.5em; + } + } +} diff --git a/customize.dist/src/less2/main.less b/customize.dist/src/less2/main.less new file mode 100644 index 000000000..068db5c7e --- /dev/null +++ b/customize.dist/src/less2/main.less @@ -0,0 +1,12 @@ +@font-face { + font-family: Neuropolitical; + src: url(./customize/fonts/neuropolitical.ttf) +} +div#cp-main.cp-page-index { @import "./pages/page-index.less"; } +div#cp-main.cp-page-contact { @import "./pages/page-contact.less"; } +div#cp-main.cp-page-login { @import "./pages/page-login.less"; } +div#cp-main.cp-page-register { @import "./pages/page-register.less"; } +div#cp-main.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; } +div#cp-main.cp-page-about { @import "./pages/page-about.less"; } +div#cp-main.cp-page-privacy { @import "./pages/page-privacy.less"; } +div#cp-main.cp-page-terms { @import "./pages/page-terms.less"; } diff --git a/customize.dist/src/less2/pages/page-about.less b/customize.dist/src/less2/pages/page-about.less new file mode 100644 index 000000000..7e9cb81a4 --- /dev/null +++ b/customize.dist/src/less2/pages/page-about.less @@ -0,0 +1,12 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + +.infopages_main(); +.infopages_topbar(); + +.bio-avatar { + border-radius: 50%; + margin: 1em 0; + max-width: 300px; + max-height: 300px; +} diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less new file mode 100644 index 000000000..56a60022c --- /dev/null +++ b/customize.dist/src/less2/pages/page-contact.less @@ -0,0 +1,9 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + +.infopages_main(); +.infopages_topbar(); + +.fa { + padding-right: 0.25em; +} diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less new file mode 100644 index 000000000..82832f792 --- /dev/null +++ b/customize.dist/src/less2/pages/page-index.less @@ -0,0 +1,229 @@ +//@import (once) "./variables.less"; + +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + + +.infopages_main(); +.infopages_topbar(); + +@background_lighter: rgba(0,0,0,0.1); +@background_darker: rgba(0,0,0,0.4); +cp-main { + color: #FFF; + background: linear-gradient( @background_darker, @background_lighter ), url('/customize/bg14.jpg'); + background-size: cover; + min-height: 100vh; + display: flex; + 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 { + padding: 0.5em 1em 0.7em 1em; + border: 2px solid #fff; + &:hover { + transform: scale(1.05); + } + } + .cp-login-btn { + color: #fff; + 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: 20px; + //font-style: italic; + } +} +.cp-topbar { + //position: absolute; + background: transparent; + a { + color: #fff; + padding: 0.5em 0.5em 0.5em 0.5em; + } + button:focus { + outline: none; + } + .collapse { + a { + display: block; + } + } + .navbar-toggler-left { + top: -0.59rem; + } + .cp-left { + .fa-bars { + font-size: 1.6rem; + } + } + a.cp-logo { + display: none; + } + img { + height: 5vh; + margin-top: -4px; + } + &:hover { + img { + transform: none; + } + }; + a.cp-logo { + display: none; + } +} +@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; + margin-top: -12px; + padding: 0; +} +@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; + } +} +@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; +} diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less new file mode 100644 index 000000000..6909ecdc7 --- /dev/null +++ b/customize.dist/src/less2/pages/page-login.less @@ -0,0 +1,17 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + +.infopages_main(); +.infopages_topbar(); + +.form-group { + .extra { + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + .login { + } + } +} diff --git a/customize.dist/src/less2/pages/page-privacy.less b/customize.dist/src/less2/pages/page-privacy.less new file mode 100644 index 000000000..59fa4b1fd --- /dev/null +++ b/customize.dist/src/less2/pages/page-privacy.less @@ -0,0 +1,5 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + +.infopages_main(); +.infopages_topbar(); diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less new file mode 100644 index 000000000..e057e2b20 --- /dev/null +++ b/customize.dist/src/less2/pages/page-register.less @@ -0,0 +1,23 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + +.infopages_main(); +.infopages_topbar(); + +.cp-container { + .form-group { + .checkbox-container { + &:nth-of-type(1) { + margin-top: 2em; + } + &:last-of-type { + margin-bottom: 1em; + } + } + #register { + margin-top: 16px; + font-size: 1.25em; + width: 30%; + } + } +} diff --git a/customize.dist/src/less2/pages/page-terms.less b/customize.dist/src/less2/pages/page-terms.less new file mode 100644 index 000000000..59fa4b1fd --- /dev/null +++ b/customize.dist/src/less2/pages/page-terms.less @@ -0,0 +1,5 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + +.infopages_main(); +.infopages_topbar(); diff --git a/customize.dist/src/less2/pages/page-what-is-cryptpad.less b/customize.dist/src/less2/pages/page-what-is-cryptpad.less new file mode 100644 index 000000000..b57517a01 --- /dev/null +++ b/customize.dist/src/less2/pages/page-what-is-cryptpad.less @@ -0,0 +1,9 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + +.infopages_main(); +.infopages_topbar(); + +img#zeroknowledge { + width: 100%; +} diff --git a/customize.dist/src/less2/readme.md b/customize.dist/src/less2/readme.md new file mode 100644 index 000000000..08a26ec9b --- /dev/null +++ b/customize.dist/src/less2/readme.md @@ -0,0 +1,20 @@ +# CryptPad Styling + +How it works: +* In this example, we use the index page, for each page we will have a corresponding class name and a corresponding less file. +* The index page has a main div containing everything `