tildeverse
/
cryptpad
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Index page logo and app grid

This commit is contained in:
David Benqué 2020-10-22 16:17:15 +01:00
parent 8de16d73e5
commit 52e20ea4aa
4 changed files with 76 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
customize.dist/CryptPad_logo.svg Normal file
View File

@ -0,0 +1,22 @@
<svg width="280" height="349" version="1.1" viewBox="0 0 74.083 92.34" xmlns="http://www.w3.org/2000/svg" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb">
<g>
<g transform="translate(-640.42 -172.99)" style="fill:#ffffff">
<g style="fill:#ffffff">
<path d="m644.02 176.9h44.386l22.414 20.826v24.899c0 26.166-21.414 32.228-33.117 38.409-12.815-5.8945-32.794-12.329-33.117-38.409z" style="fill:#ffffff"/>
</g>
<g style="fill:#ffffff">
<path d="m644.02 176.9h44.386l22.414 20.826v24.899c0 26.166-21.414 32.228-33.117 38.409-12.815-5.8945-32.794-12.329-33.117-38.409z" style="fill:#ffffff"/>
</g>
</g>
<g transform="translate(-125.38 -26.449)">
<path d="m128.98 30.355 0.55499 39.644h33.141l4e-3 -39.644z" style="fill-opacity:.39608;fill:#0087ff"/>
<path d="m162.69 70 3e-3 43.946c12.825-5.8796 32.762-17.077 33.127-43.157l0.0108-0.78911z" style="fill-opacity:.39608;fill:#0087ff"/>
<path d="m128.98 30.355h44.386l22.414 20.826v24.899c0 26.166-21.414 32.228-33.117 38.409-12.815-5.8945-32.794-12.329-33.117-38.409z" style="fill:none;stroke-width:5.2922;stroke:#0087ff"/>
<path d="m171.32 29.811v23.04h24.575" style="fill:none;stroke-width:5.2917;stroke:#0087ff"/>
<g transform="matrix(1.1107 0 0 1.1107 18.926 21.932)" style="fill:#0087ff">
<path d="m137.23 42.719a8.1185 8.1185 0 0 1-8.1185 8.1185 8.1185 8.1185 0 0 1-8.1185-8.1185 8.1185 8.1185 0 0 1 8.1185-8.1185 8.1185 8.1185 0 0 1 8.1185 8.1185z" style="fill:#0087ff"/>
<path d="m127 42.651h4.2265l4.2333 22.354h-12.693z" style="fill:#0087ff"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

14
customize.dist/pages/index.js
View File

@ -58,9 +58,7 @@ define([
attr, attr,
h(s, [ h(s, [
h('i.' + font + '.' + icon), h('i.' + font + '.' + icon),
h('div.pad-button-text', { h('div.pad-button-text', [ x[1] ])
style: 'width:120px;height:30px;'
}, [ x[1] ])
]) ])
]); ]);
}); });
@ -142,18 +140,18 @@ define([
])), ])),
]) ])
]); ]);
Msg.main_catch_phrase = "Collaboration suite,<br>encrypted and open-source"; // XXX
return [ return [
h('div#cp-main', [ h('div#cp-main', [
Pages.infopageTopbar(), Pages.infopageTopbar(),
h('div.container.cp-container', [ h('div.container.cp-container', [
h('div.row', [ h('div.row', [
h('div.cp-title.col-12.col-sm-6', [ h('div.cp-title.col-md-7', [
h('img', { src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs }), h('img', { src: '/customize/CryptPad_logo.svg?' + urlArgs }),
h('h1', 'CryptPad'), 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, icons,
//more //more
]) ])

4
customize.dist/src/less2/include/colortheme.less
View File

@ -4,11 +4,11 @@
@colortheme_app-font: @colortheme_app-font-size @colortheme_font; @colortheme_app-font: @colortheme_app-font-size @colortheme_font;
@colortheme_logo-1: #326599; @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: #0275D8;
@colortheme_link-color-visited: #005999; @colortheme_link-color-visited: #005999;
@colortheme_info-background: #fafafa; @colortheme_info-background: #eeeeee;
@colortheme_old-base: #302B28; @colortheme_old-base: #302B28;
@colortheme_old-fore: #fafafa; @colortheme_old-fore: #fafafa;

72
customize.dist/src/less2/pages/page-index.less
View File

@ -8,7 +8,7 @@
@background_darker: rgba(0,0,0,0.4); @background_darker: rgba(0,0,0,0.4);
#cp-main { #cp-main {
color: #FFF; color: #FFF;
background: linear-gradient( @background_darker, @background_lighter ), url('/customize/bg14.jpg'); background: @colortheme_info-background;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
min-height: 100vh; min-height: 100vh;
@ -31,6 +31,7 @@
} }
body { body {
font-family: "Open Sans", Helvetica; font-family: "Open Sans", Helvetica;
color: @cryptpad_text_col;
} }
.cp-right { .cp-right {
.cp-register-btn { .cp-register-btn {
@ -51,22 +52,25 @@
.cp-title { .cp-title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
flex-direction: column; flex-direction: column;
color: @colortheme_logo-2;
margin-top: 1.5em; margin-top: 1.5em;
img { img {
height: 20vh; max-width: 200px;
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
margin-left: 0; margin-left: 0;
h1 { 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: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif;
//font-family: "Raleway"; //font-family: "Raleway";
font-size: 45px; font-size: 3.7rem;
} }
p { .tag-line {
//font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; text-align: center;
font-size: 20px; font-size: 1.4em;
//font-style: italic; //font-style: italic;
} }
} }
@ -107,27 +111,28 @@
.cp-app-grid { .cp-app-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around;
& > a { & > a {
margin: 20px; margin: 10px;
} }
} }
@icons-size: 120px; @icons-size: 120px;
@icons-text-size: 30px; @icons-text-size: 24px;
.bs-callout { .bs-callout {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
margin: 0; margin: 0;
background: rgba(255,255,255,0.6);
color: black;
transition: all .1s ease-in-out;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
flex-flow: column; flex-flow: column;
height: @icons-size; height: @icons-size;
width: @icons-size; width: @icons-size;
a { a {
color: black; color: @cryptpad_text_col;
&:hover { text-decoration-line: none; } &:hover {
color: @cryptpad_text_col;
text-decoration-line: none;
}
} }
div h4 { div h4 {
@media only screen and (min-device-width: 576px) and (max-device-width: 767px) { @media only screen and (min-device-width: 576px) and (max-device-width: 767px) {
@ -152,13 +157,14 @@
justify-content: center; justify-content: center;
width: @icons-size; width: @icons-size;
height: @icons-size - @icons-text-size; height: @icons-size - @icons-text-size;
transition: width 0.1s;
color: #fff;
} }
&.cp-app-disabled { &.cp-app-disabled {
cursor: not-allowed !important; cursor: not-allowed !important;
opacity: 0.5; opacity: 0.5;
} }
.pad-button-text {
color: @cryptpad_text_col;
}
} }
h4 { h4 {
margin: 0; margin: 0;
@ -171,21 +177,35 @@
} }
.bs-callout:hover { .bs-callout:hover {
//color: white;
transform: scale(1.05);
cursor: pointer; cursor: pointer;
} }
.bs-callout:hover.cp-callout-more { .bs-callout:hover.cp-callout-more {
transform: none !important; transform: none !important;
} }
.cp-callout-pad .cptools { background-color: @colortheme_pad-bg; }
.cp-callout-code .cptools { background-color: @colortheme_code-bg; } .app-block(@app; @app-color) {
.cp-callout-slide .cptools { background-color: @colortheme_slide-bg; } .cp-callout-@{app} {
.cp-callout-poll .cptools { background-color: @colortheme_poll-bg; } i {
.cp-callout-kanban .cptools { background-color: @colortheme_kanban-bg; } color: @app-color;
.cp-callout-whiteboard .cptools { background-color: @colortheme_whiteboard-bg; } }
.cp-callout-drive .fa { background-color: @colortheme_drive-bg; } &:hover {
.cp-callout-sheet .cptools { background-color: @colortheme_oocell-bg; } 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-hidden { display: none !important; }
.cp-callout-more { .cp-callout-more {
display: inline-block; display: inline-block;