From 52e20ea4aaa2c44b3ed47f0a189c391d8503ec80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Thu, 22 Oct 2020 16:17:15 +0100 Subject: [PATCH] Index page logo and app grid --- customize.dist/CryptPad_logo.svg | 22 ++++++ customize.dist/pages/index.js | 14 ++-- .../src/less2/include/colortheme.less | 4 +- .../src/less2/pages/page-index.less | 72 ++++++++++++------- 4 files changed, 76 insertions(+), 36 deletions(-) create mode 100644 customize.dist/CryptPad_logo.svg diff --git a/customize.dist/CryptPad_logo.svg b/customize.dist/CryptPad_logo.svg new file mode 100644 index 000000000..1944b9142 --- /dev/null +++ b/customize.dist/CryptPad_logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js index 300637748..59de7893e 100644 --- a/customize.dist/pages/index.js +++ b/customize.dist/pages/index.js @@ -58,9 +58,7 @@ define([ attr, h(s, [ h('i.' + font + '.' + icon), - h('div.pad-button-text', { - style: 'width:120px;height:30px;' - }, [ x[1] ]) + h('div.pad-button-text', [ x[1] ]) ]) ]); }); @@ -142,18 +140,18 @@ define([ ])), ]) ]); - + Msg.main_catch_phrase = "Collaboration suite,
encrypted and open-source"; // XXX return [ h('div#cp-main', [ Pages.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('div.cp-title.col-md-7', [ + h('img', { src: '/customize/CryptPad_logo.svg?' + urlArgs }), h('h1', 'CryptPad'), - h('p', Msg.main_catch_phrase) + UI.setHTML(h('span.tag-line'), Msg.main_catch_phrase) ]), - h('div.col-12.col-sm-6.cp-app-grid', [ + h('div.col-md-5.cp-app-grid', [ icons, //more ]) diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 3b232be81..160f22507 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -4,11 +4,11 @@ @colortheme_app-font: @colortheme_app-font-size @colortheme_font; @colortheme_logo-1: #326599; -@colortheme_logo-2: #4591c4; +@colortheme_logo-2: #0087FF; // XXX Testing if this color works @colortheme_link-color: #0275D8; @colortheme_link-color-visited: #005999; -@colortheme_info-background: #fafafa; +@colortheme_info-background: #eeeeee; @colortheme_old-base: #302B28; @colortheme_old-fore: #fafafa; diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index 8070ead02..44fb19b54 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -8,7 +8,7 @@ @background_darker: rgba(0,0,0,0.4); #cp-main { color: #FFF; - background: linear-gradient( @background_darker, @background_lighter ), url('/customize/bg14.jpg'); + background: @colortheme_info-background; background-size: cover; background-position: center; min-height: 100vh; @@ -31,6 +31,7 @@ } body { font-family: "Open Sans", Helvetica; + color: @cryptpad_text_col; } .cp-right { .cp-register-btn { @@ -51,22 +52,25 @@ .cp-title { display: flex; align-items: center; + justify-content: center; flex-direction: column; + color: @colortheme_logo-2; margin-top: 1.5em; img { - height: 20vh; + max-width: 200px; margin-bottom: 1.5em; } margin-left: 0; h1 { - font-family: "Neuropolitical"; + font-family: "IBM Plex Mono"; + font-weight: 500; //font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif; //font-family: "Raleway"; - font-size: 45px; + font-size: 3.7rem; } - p { - //font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 20px; + .tag-line { + text-align: center; + font-size: 1.4em; //font-style: italic; } } @@ -107,27 +111,28 @@ .cp-app-grid { display: flex; flex-wrap: wrap; + justify-content: space-around; & > a { - margin: 20px; + margin: 10px; } } @icons-size: 120px; - @icons-text-size: 30px; + @icons-text-size: 24px; .bs-callout { display: flex; align-items: stretch; margin: 0; - background: rgba(255,255,255,0.6); - color: black; - transition: all .1s ease-in-out; box-sizing: border-box; position: relative; flex-flow: column; height: @icons-size; width: @icons-size; a { - color: black; - &:hover { text-decoration-line: none; } + color: @cryptpad_text_col; + &:hover { + color: @cryptpad_text_col; + text-decoration-line: none; + } } div h4 { @media only screen and (min-device-width: 576px) and (max-device-width: 767px) { @@ -152,13 +157,14 @@ justify-content: center; width: @icons-size; height: @icons-size - @icons-text-size; - transition: width 0.1s; - color: #fff; } &.cp-app-disabled { cursor: not-allowed !important; opacity: 0.5; } + .pad-button-text { + color: @cryptpad_text_col; + } } h4 { margin: 0; @@ -171,21 +177,35 @@ } .bs-callout:hover { - //color: white; - transform: scale(1.05); cursor: pointer; } .bs-callout:hover.cp-callout-more { transform: none !important; } - .cp-callout-pad .cptools { background-color: @colortheme_pad-bg; } - .cp-callout-code .cptools { background-color: @colortheme_code-bg; } - .cp-callout-slide .cptools { background-color: @colortheme_slide-bg; } - .cp-callout-poll .cptools { background-color: @colortheme_poll-bg; } - .cp-callout-kanban .cptools { background-color: @colortheme_kanban-bg; } - .cp-callout-whiteboard .cptools { background-color: @colortheme_whiteboard-bg; } - .cp-callout-drive .fa { background-color: @colortheme_drive-bg; } - .cp-callout-sheet .cptools { background-color: @colortheme_oocell-bg; } + + .app-block(@app; @app-color) { + .cp-callout-@{app} { + i { + color: @app-color; + } + &:hover { + background-color: lighten(@app-color, 30%); + i { + color: @cryptpad_text_col; + } + } + } + } + .app-block(code, @colortheme_code-bg); + .app-block(pad, @colortheme_pad-bg); + .app-block(slide, @colortheme_slide-bg); + .app-block(poll, @colortheme_poll-bg); + .app-block(kanban, @colortheme_kanban-bg); + .app-block(whiteboard, @colortheme_whiteboard-bg); + .app-block(sheet, @colortheme_oocell-bg); + .app-block(drive, @colortheme_drive-bg); + + .cp-hidden { display: none !important; } .cp-callout-more { display: inline-block;