wip

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#cp-main.cp-page-index', [
-                h('div.mainOverlay'),
+                infopageTopbar(),
-                h('div#align-container', [
+                h('div.container', [
-                    h('div#main-container.container', [
+                    h('div.row', [
-                        h('div.row', [
+                        h('div.cp-title.col-6.col-xs-6', [
-                            h('div#data.hidden.title.col-xs-6', [
+                            h('img', { src: '/customize/cryptpad-new-logo-big-white-logoonly.png?' + urlArgs }),
-                                h('h1', 'CryptPad'),
+                            h('h1', 'CryptPad'),
-                                h('p', Msg.main_catch_phrase)
+                            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."
                             ]),
-                            /*userForm(),*/
+                            h('div.bs-callout.cp-callout-code', [
-                            h('div.col-xs-6', [
+                                h('h4', 'TODO Markdown/Code Pad'),
-                                "Make a pad, no login needed",
+                     //           "TODO Edit Markdown with realtime visual rendering."
-                                h('div.bs-callout.bs-callout-pad', [
+                            ]),
-                                    h('h4', 'Rich Text Pad'),
+                            h('div.bs-callout.cp-callout-slide', [
-                                    "Collaborate in Real time on notes and ideas."
+                                h('h4', 'TODO Markdown Presentation'),
-                                ]),
+                       //         "TODO Make quick presentations with Markdown slides."
-                                h('div.bs-callout.bs-callout-code', [
+                            ]),
-                                    h('h4', 'Markdown/code Pad'),
+                            /*h('div.bs-callout.cp-callout-recent', [
-                                    "Edit Markdown with realtime visual rendering."
+                                h('h4', 'TODO Your Recent Pads'),
-                                ]),
+                         ///       "TODO See pads recently edited on this computer."
-                                h('div.bs-callout.bs-callout-slide', [
+                            ]),*/
-                                    h('h4', 'Markdown Presentation'),
-                                    "Make quick presentations with Markdown slides."
-                                ]),
-                            ])
                         ])
                     ])
                 ]),
+                //h('footer.cp-more', "More")
             ])
         ];
         //.concat(tryIt());

customize.dist/src/less/page-index.less

@@ -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;
-}

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: @colortheme_pad-bg;
-@toolbar-pad-color: #fff;
+@toolbar-pad-color: @colortheme_pad-color;
-@toolbar-slide-bg: #e57614;
+@toolbar-slide-color: @colortheme_slide-bg;
-@toolbar-slide-color: #fff;
+@toolbar-slide-color: @colortheme_slide-color;
-@toolbar-code-bg: #ffae00;
+@toolbar-code-color: @colortheme_code-bg;
-@toolbar-code-color: #000;
+@toolbar-code-color: @colortheme_code-color;
-@toolbar-poll-bg: #006304;
+@toolbar-poll-color: @colortheme_poll-bg;
-@toolbar-poll-color: #fff;
+@toolbar-poll-color: @colortheme_poll-color;
-@toolbar-whiteboard-bg: #800080;
+@toolbar-whiteboard-color: @colortheme_whiteboard-bg;
-@toolbar-whiteboard-color: #fff;
+@toolbar-whiteboard-color: @colortheme_whiteboard-color;
-@toolbar-drive-bg: #0087ff;
+@toolbar-drive-color: @colortheme_drive-bg;
-@toolbar-drive-color: #fff;
+@toolbar-drive-color: @colortheme_drive-color;
-@toolbar-file-bg: #cd2532;
+@toolbar-file-color: @colortheme_file-bg;
-@toolbar-file-color: #fff;
+@toolbar-file-color: @colortheme_file-color;
-@toolbar-friends-bg: #607B8D;
+@toolbar-friends-color: @colortheme_friends-bg;
-@toolbar-friends-color: #fff;
+@toolbar-friends-color: @colortheme_friends-color;
-@toolbar-default-bg: #ddd;
+@toolbar-default-color: @colortheme_default-bg;
-@toolbar-default-color: #000;
+@toolbar-default-color: @colortheme_default-color;
-@toolbar-settings-bg: #0087ff;
+@toolbar-settings-color: @colortheme_settings-bg;
-@toolbar-settings-color: #fff;
+@toolbar-settings-color: @colortheme_settings-color;
-@toolbar-profile-bg: #0087ff;
+@toolbar-profile-color: @colortheme_profile-bg;
-@toolbar-profile-color: #fff;
+@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;
 

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;

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;
+        }
+    }
+}

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"; }

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; }

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 `<div id="cp-main" class="cp-page-index">`
+* 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.

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)) {

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) {