diff --git a/customize.dist/bg4.jpg b/customize.dist/bg4.jpg new file mode 100644 index 000000000..0953a485b Binary files /dev/null and b/customize.dist/bg4.jpg differ diff --git a/customize.dist/bg5.jpg b/customize.dist/bg5.jpg new file mode 100644 index 000000000..692f2e582 Binary files /dev/null and b/customize.dist/bg5.jpg differ diff --git a/customize.dist/bg6.jpg b/customize.dist/bg6.jpg new file mode 100644 index 000000000..c45a0d782 Binary files /dev/null and b/customize.dist/bg6.jpg differ diff --git a/customize.dist/bg7.jpg b/customize.dist/bg7.jpg new file mode 100644 index 000000000..a421dfddf Binary files /dev/null and b/customize.dist/bg7.jpg differ diff --git a/customize.dist/bg8.jpg b/customize.dist/bg8.jpg new file mode 100644 index 000000000..cdaea07c5 Binary files /dev/null and b/customize.dist/bg8.jpg differ diff --git a/customize.dist/cryptpad-logo-blue-black.png b/customize.dist/cryptpad-logo-blue-black.png new file mode 100644 index 000000000..d4d5ba80c Binary files /dev/null and b/customize.dist/cryptpad-logo-blue-black.png differ diff --git a/customize.dist/cryptpad-new-logo-big-white-logoonly.png b/customize.dist/cryptpad-new-logo-big-white-logoonly.png new file mode 100644 index 000000000..b3ab2824c Binary files /dev/null and b/customize.dist/cryptpad-new-logo-big-white-logoonly.png differ diff --git a/customize.dist/cryptpad-new-logo-big-white.png b/customize.dist/cryptpad-new-logo-big-white.png new file mode 100644 index 000000000..d4c4c2996 Binary files /dev/null and b/customize.dist/cryptpad-new-logo-big-white.png differ diff --git a/customize.dist/cryptpad-new-logo-big.png b/customize.dist/cryptpad-new-logo-big.png new file mode 100644 index 000000000..23fcffcb8 Binary files /dev/null and b/customize.dist/cryptpad-new-logo-big.png differ diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 9384ca067..5921a1ca8 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -238,36 +238,54 @@ define([ ]; }; + var infopageTopbar = function () { + return h('div.cp-topbar', + h('div.cp-left', + h('a', { href: '/zeroknowledge.html'}, 'TODO What is Zero Knowledge'), + h('a', { href: 'https://blog.cryptpad.fr/'}, 'TODO Blog'), + h('a', { href: '/contact.html'}, 'TODO Contact'), + h('a', { href: '/about.html'}, 'TODO About') + ), + h('div.cp-right', + h('a', { href: '/register'}, 'TODO Register'), + h('a', { href: '/login'}, 'TODO Log in') + ) + ); + } + Pages['/'] = Pages['/index.html'] = function () { return [ - h('div#main.page-index', [ - h('div.mainOverlay'), - h('div#align-container', [ - h('div#main-container.container', [ - h('div.row', [ - h('div#data.hidden.title.col-xs-6', [ - h('h1', 'CryptPad'), - h('p', Msg.main_catch_phrase) + h('div#cp-main.cp-page-index', [ + infopageTopbar(), + h('div.container', [ + h('div.row', [ + h('div.cp-title.col-6.col-xs-6', [ + h('img', { src: '/customize/cryptpad-new-logo-big-white-logoonly.png?' + urlArgs }), + h('h1', 'CryptPad'), + h('p', Msg.main_catch_phrase) + ]), + /*userForm(),*/ + h('div.col-6.col-xs-6', [ + h('div.bs-callout.cp-callout-pad', [ + h('h4', 'TODO Rich Text Pad'), + // "TODO Collaborate in realtime on notes and ideas." + ]), + h('div.bs-callout.cp-callout-code', [ + h('h4', 'TODO Markdown/Code Pad'), + // "TODO Edit Markdown with realtime visual rendering." + ]), + h('div.bs-callout.cp-callout-slide', [ + h('h4', 'TODO Markdown Presentation'), + // "TODO Make quick presentations with Markdown slides." ]), - /*userForm(),*/ - h('div.col-xs-6', [ - "Make a pad, no login needed", - h('div.bs-callout.bs-callout-pad', [ - h('h4', 'Rich Text Pad'), - "Collaborate in Real time on notes and ideas." - ]), - h('div.bs-callout.bs-callout-code', [ - h('h4', 'Markdown/code Pad'), - "Edit Markdown with realtime visual rendering." - ]), - h('div.bs-callout.bs-callout-slide', [ - h('h4', 'Markdown Presentation'), - "Make quick presentations with Markdown slides." - ]), - ]) + /*h('div.bs-callout.cp-callout-recent', [ + h('h4', 'TODO Your Recent Pads'), + /// "TODO See pads recently edited on this computer." + ]),*/ ]) ]) ]), + //h('footer.cp-more', "More") ]) ]; //.concat(tryIt()); diff --git a/customize.dist/src/less/page-index.less b/customize.dist/src/less/page-index.less deleted file mode 100644 index 6918c1073..000000000 --- a/customize.dist/src/less/page-index.less +++ /dev/null @@ -1,97 +0,0 @@ -@import (once) "./variables.less"; -div#data.title { - margin-top: 8rem; - h1 { - //font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif; - font-family: "Raleway"; - font-size: 65px; - } - p { - font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-style: italic; - } -} - - -.bs-callout { - padding: 20px; - margin: 20px 0; - border: 1px solid #eee; - border-left-width: 5px; - border-radius: 3px; - background:white; -} -.bs-callout h4 { - margin-top: 0; - margin-bottom: 5px; -} -.bs-callout p:last-child { - margin-bottom: 0; -} -.bs-callout code { - border-radius: 3px; -} -.bs-callout+.bs-callout { - margin-top: -5px; -} -.bs-callout-default { - border-left-color: #777; -} -.bs-callout-default h4 { - color: #777; -} - - -.bs-callout-pad { - border-left-color: @toolbar-pad-bg; -} -.bs-callout-pad h4 { - color: @toolbar-pad-bg; -} - -.bs-callout-code { - border-left-color: @toolbar-code-bg; -} -.bs-callout-code h4 { - color: @toolbar-code-bg; -} - -.bs-callout-pad { - border-left-color: @toolbar-pad-bg; -} -.bs-callout-pad h4 { - color: @toolbar-pad-bg; -} - -.bs-callout-slide { - border-left-color: @toolbar-slide-bg; -} -.bs-callout-slide h4 { - color: @toolbar-slide-bg; -} - - -.bs-callout-success { - border-left-color: #5cb85c; -} -.bs-callout-success h4 { - color: #5cb85c; -} -.bs-callout-danger { - border-left-color: #d9534f; -} -.bs-callout-danger h4 { - color: #d9534f; -} -.bs-callout-warning { - border-left-color: #f0ad4e; -} -.bs-callout-warning h4 { - color: #f0ad4e; -} -.bs-callout-info { - border-left-color: #5bc0de; -} -.bs-callout-info h4 { - color: #5bc0de; -} \ No newline at end of file diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less index c5b3f4be2..d8561b65a 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%); @@ -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-color: @colortheme_pad-bg; +@toolbar-pad-color: @colortheme_pad-color; +@toolbar-slide-color: @colortheme_slide-bg; +@toolbar-slide-color: @colortheme_slide-color; +@toolbar-code-color: @colortheme_code-bg; +@toolbar-code-color: @colortheme_code-color; +@toolbar-poll-color: @colortheme_poll-bg; +@toolbar-poll-color: @colortheme_poll-color; +@toolbar-whiteboard-color: @colortheme_whiteboard-bg; +@toolbar-whiteboard-color: @colortheme_whiteboard-color; +@toolbar-drive-color: @colortheme_drive-bg; +@toolbar-drive-color: @colortheme_drive-color; +@toolbar-file-color: @colortheme_file-bg; +@toolbar-file-color: @colortheme_file-color; +@toolbar-friends-color: @colortheme_friends-bg; +@toolbar-friends-color: @colortheme_friends-color; +@toolbar-default-color: @colortheme_default-bg; +@toolbar-default-color: @colortheme_default-color; +@toolbar-settings-color: @colortheme_settings-bg; +@toolbar-settings-color: @colortheme_settings-color; +@toolbar-profile-color: @colortheme_profile-bg; +@toolbar-profile-color: @colortheme_profile-color; @topbar-back: #fff; @@ -123,7 +125,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..26274ff1e --- /dev/null +++ b/customize.dist/src/less2/include/colortheme.less @@ -0,0 +1,32 @@ +@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..7f2fa914d --- /dev/null +++ b/customize.dist/src/less2/include/infopages.less @@ -0,0 +1,58 @@ +// Basic setup for info pages, this should be used at the global level +.infopages_main () { + min-height: 100vh; + background-color: #FAFAFA; + + a { + color: #FFF; + 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; +}; + +// Apply this to the top bar div +.infopages_topbar () { + .cp-topbar { + position: fixed; + top: 0; + + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + box-sizing: border-box; + width: 100%; + height: 64px; + 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; + + a { + text-decoration: none; + font-weight: 500; + padding: 0.6em; + color: #FFF; + + cursor: pointer; + } + } +} \ No newline at end of file diff --git a/customize.dist/src/less2/main.less b/customize.dist/src/less2/main.less new file mode 100644 index 000000000..778ed23d0 --- /dev/null +++ b/customize.dist/src/less2/main.less @@ -0,0 +1,2 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto'); +div#cp-main.cp-page-index { @import "./pages/page-index.less"; } \ 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 new file mode 100644 index 000000000..d51da9d34 --- /dev/null +++ b/customize.dist/src/less2/pages/page-index.less @@ -0,0 +1,82 @@ +//@import (once) "./variables.less"; + +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + + +.infopages_main(); +.infopages_topbar(); + +@background: rgba(0,0,0,0.2); +&#cp-main { + color: #FFF; + background: linear-gradient( @background, @background ), url('/customize/bg8.jpg'); + background-size: cover; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} + +.cp-title { + display: flex; + align-items: center; + flex-direction: column; + img { + height: 30vh; + } + margin-left: 0; + h1 { + font-family: "Roboto"; + //font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif; + //font-family: "Raleway"; + font-size: 65px; + } + p { + //font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 20px; + font-style: italic; + } +} + + +.bs-callout { + padding: 15px; + margin: 25px 0; + border: 1px solid #eee; + border-left-width: 5px; + border-radius: 3px; + background:rgba(255,255,255,0.6); + color: black; + transition: all .1s ease-in-out; +} +.bs-callout h4 { + margin-top: 0; + margin-bottom: 5px; +} +.bs-callout p:last-child { + margin-bottom: 0; +} +.bs-callout+.bs-callout { + margin-top: -5px; +} + +.bs-callout:hover { + //background:rgba(255,255,255,0.8); + transform: scale(1.05); +} + +.cp-callout-pad { border-left-color: @colortheme_pad-bg; } +//.cp-callout-pad h4 { color: @colortheme_pad-bg; } + +.cp-callout-code { border-left-color: @colortheme_code-bg; } +//.cp-callout-code h4 { color: @colortheme_code-bg; } + +.cp-callout-pad { border-left-color: @colortheme_pad-bg; } +//.cp-callout-pad h4 { color: @colortheme_pad-bg; } + +.cp-callout-slide { border-left-color: @colortheme_slide-bg; } +//.cp-callout-slide h4 { color: @colortheme_slide-bg; } + +.cp-callout-recent { border-left-color: @colortheme_drive-bg; } +//.cp-callout-recent h4 { color: @colortheme_drive-bg; } \ No newline at end of file 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 `
` +* There is a corresponding less file called `less2/pages/page-index.less` +* Finally there is a corresponding line in main.less which imports that less file: `div#main.cp-page-index { @import "./pages/page-index.less"; }` + * cp-page-index class means: + * cp -> cryptpad + * page -> this is a style for accessing a page's less file + * index -> the name of the page and of the less file (page-index.less) +* And everything which is standardized across pages is included from `page-index.less` as variables and mixins. + +Rules: +* All of our new classes and ids should start with `cp-`. +* You may make as many files as you need, for different purposes, but they can only contain mixins and variables. +* All mixins and variables must be prefixed with the name of the file where they're defined and and underscore. + * e.g. `@colortheme_toolbar-poll-bg: #006304;` defined in `colortheme.less` +* All mixin / variable files go in an `/include/` directory. +* Document the meaning of your variable or mixin in a comment, consider that your mixin will be used by people other than you and if they do not have a definition of what it means, an update to it's style which seems logical to you might break their usage of it. \ No newline at end of file diff --git a/customize.dist/template.js b/customize.dist/template.js index 7fc7172ce..a8445615e 100644 --- a/customize.dist/template.js +++ b/customize.dist/template.js @@ -174,9 +174,14 @@ $(function () { } require([ - 'less!/customize/src/less/cryptpad.less', + 'less!/customize/src/less2/main.less', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', ], function () { + if (pathname === '/') { + // TODO(cjd): This is a hack because the template system doesn't make it easy. + $body.append($main); + return; + } $body.append($topbar).append($main).append($footer); if (/^\/user\//.test(pathname)) { diff --git a/server.js b/server.js index aed35c2fc..351f0c695 100644 --- a/server.js +++ b/server.js @@ -32,7 +32,7 @@ var setHeaders = (function () { if (typeof(config.httpHeaders) !== 'object') { return function () {}; } const headers = clone(config.httpHeaders); - if (config.contentSecurity) { + if (config.contentSecurity && false) { headers['Content-Security-Policy'] = clone(config.contentSecurity); if (!/;$/.test(headers['Content-Security-Policy'])) { headers['Content-Security-Policy'] += ';' } if (headers['Content-Security-Policy'].indexOf('frame-ancestors') === -1) {