diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index fb3e5dab3..fe2634a71 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -286,45 +286,35 @@ define([
)
]),
h('div.container.cp-container', [
- h('div.row.cp-iconCont', [
+ h('div.row.cp-iconCont.align-items-center', [
h('div.col-12',
- setHTML(h('p.text-center'), Msg.main_about_p2)
+ setHTML(h('h4.text-center'), Msg.main_about_p26)
),
- h('div.col-4.col-sm-2',
- setHTML(h('p'), Msg.main_about_p21)
- ),
- h('div.col-4.col-sm-2',
- h('a.card', {href : "#"},
+ h('div.col-6.col-sm-3.col-md-3.col-lg-3',
+ h('a.card', {href : "https://twitter.com/cryptpad"},
h('div.card-body',
setHTML(h('p'), Msg.main_about_p22)
)
)
),
- h('div.col-4.col-sm-2',
- h('a.card',
- h('div.card-body',
- setHTML(h('p'), Msg.main_about_p21)
- )
- )
- ),
- h('div.col-4.col-sm-2',
- h('a.card',
+ h('div.col-6.col-sm-3.col-md-3.col-lg-3',
+ h('a.card', {href : "https://github.com/xwiki-labs/cryptpad/issues/"},
h('div.card-body',
- setHTML(h('p'), Msg.main_about_p21)
+ setHTML(h('p'), Msg.main_about_p23)
)
)
),
- h('div.col-4.col-sm-2',
- h('div.card',
+ h('div.col-6.col-sm-3.col-md-3.col-lg-3',
+ h('a.card', {href : "https://riot.im/app/#/room/#cryptpad:matrix.org"},
h('div.card-body',
- setHTML(h('p'), Msg.main_about_p21)
+ setHTML(h('p'), Msg.main_about_p24)
)
)
),
- h('div.col-4.col-sm-2',
- h('div.card',
+ h('div.col-6.col-sm-3.col-md-3.col-lg-3',
+ h('a.card', {href : "mailto:research@xwiki.com"},
h('div.card-body',
- setHTML(h('p'), Msg.main_about_p21)
+ setHTML(h('p'), Msg.main_about_p25)
)
)
),
diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less
index f201f32f3..a8ce6fa04 100644
--- a/customize.dist/src/less2/pages/page-contact.less
+++ b/customize.dist/src/less2/pages/page-contact.less
@@ -13,18 +13,35 @@
.cp-container {
background: #fff;
.cp-iconCont{
+ h4 {
+ margin-top: 1.5em;
+ margin-bottom: 1.5em;
+ }
div {
.card {
- padding: 3.5em 1em 1em 1em;
+ padding: 4em 1em 0.5em 1em;
box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
border-color: #fff;
text-align: center;
+ margin-bottom: 1em;
&:hover, &:focus {
text-decoration: none;
- box-shadow: 0 2px 4px rgba(69, 145, 196, 0.6);
+ transform: scale(1.05);
+ }
+ @media (max-width: 1200px) and (min-width: 769px) {
+ min-height: 139px;
+ }
+ @media (max-width: 768px) and (min-width: 576px){
+ min-height: 164px;
+ }
+ @media (max-width: 496px) {
+ min-height: 140px;
+ }
+ @media (max-width: 335px) {
+ min-height: 162px;
}
}
- &:nth-child(3) {
+ &:nth-child(2) {
.card {
background-image: url(/customize/images/twitter.svg);
background-repeat: no-repeat;
@@ -32,7 +49,7 @@
background-size: 3rem;
}
}
- &:nth-child(4) {
+ &:nth-child(3) {
.card {
background-image: url(/customize/images/issue.svg);
background-repeat: no-repeat;
@@ -40,6 +57,22 @@
background-size: 3rem;
}
}
+ &:nth-child(4) {
+ .card {
+ background-image: url(/customize/images/sayhi.svg);
+ background-repeat: no-repeat;
+ background-position: 50% 10%;
+ background-size: 3rem;
+ }
+ }
+ &:nth-child(5) {
+ .card {
+ background-image: url(/customize/images/email.svg);
+ background-repeat: no-repeat;
+ background-position: 50% 10%;
+ background-size: 3rem;
+ }
+ }
}
}
}
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index cf70ba252..6e92a6098 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -516,8 +516,11 @@ define(function () {
// contact.html
out.main_about_p2 = 'If you have any questions or comments, feel free to reach out!
You can tweet us, open an issue on GitHub. Come say hi on our Matrix channel or IRC (#cryptpad on irc.freenode.net), or send us an email.';
- out.main_about_p21 = 'You can';
out.main_about_p22 = 'Tweet us';
+ out.main_about_p23 = 'open an issue on GitHub';
+ out.main_about_p24 = 'say Hello (Matrix)';
+ out.main_about_p25 = 'send us an email';
+ out.main_about_p26 = 'If you have any questions or comments, feel free to reach out!'
out.main_info = "