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;