infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Index page logo and app grid

pull/1/head
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,
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,<br>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
])

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

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

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

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