diff --git a/customize.dist/about.html b/customize.dist/about.html
index 17575ad8d..126a4e37c 100644
--- a/customize.dist/about.html
+++ b/customize.dist/about.html
@@ -3,6 +3,7 @@
Cryptpad: Zero Knowledge, Collaborative Real Time Editing
+
diff --git a/customize.dist/contact.html b/customize.dist/contact.html
index 09c08c5e3..d63ac8b35 100644
--- a/customize.dist/contact.html
+++ b/customize.dist/contact.html
@@ -3,6 +3,7 @@
Cryptpad: Zero Knowledge, Collaborative Real Time Editing
+
diff --git a/customize.dist/index.html b/customize.dist/index.html
index 3301dc76e..b8b49d521 100644
--- a/customize.dist/index.html
+++ b/customize.dist/index.html
@@ -3,6 +3,7 @@
Cryptpad: Zero Knowledge, Collaborative Real Time Editing
+
diff --git a/customize.dist/main.css b/customize.dist/main.css
index 39ebe2a32..774f34a47 100644
--- a/customize.dist/main.css
+++ b/customize.dist/main.css
@@ -587,6 +587,11 @@ html.cp,
.cp .page.first {
margin-top: calc(100vh - 50px);
}
+@media screen and (max-width: 800px) {
+ .cp .page.first {
+ margin-top: 0;
+ }
+}
.cp .page.even {
background: #dcdcdc;
}
@@ -594,25 +599,39 @@ html.cp,
background: #c2c2c2;
}
.cp .page .left {
- padding: 10px;
- width: 45%;
- position: relative;
left: 0;
- display: inline-block;
- vertical-align: middle;
}
.cp .page .right {
+ left: 10%;
+}
+@media screen and (max-width: 800px) {
+ .cp .page {
+ padding: 10px 5vh;
+ }
+}
+.cp .page > div {
padding: 10px;
width: 45%;
position: relative;
- left: 10%;
display: inline-block;
vertical-align: middle;
}
+@media screen and (max-width: 800px) {
+ .cp .page > div:not(.image) {
+ width: 100%;
+ left: 0;
+ }
+}
.cp .page .image {
text-align: center;
}
+@media screen and (max-width: 800px) {
+ .cp .page .image {
+ display: none;
+ }
+}
.cp .page p {
+ font-size: 18px;
text-align: justify;
}
.cp .btn-default:hover {
@@ -753,6 +772,45 @@ html.cp,
.cp #main_other #userForm button.half:not(.first) {
float: right;
}
+@media screen and (max-width: 800px) {
+ .cp #main #main-container,
+ .cp #main_other #main-container {
+ transform: initial;
+ position: relative;
+ display: block;
+ width: 90%;
+ left: 0;
+ }
+}
+@media screen and (max-width: 800px) {
+ .cp #main #userForm,
+ .cp #main_other #userForm,
+ .cp #main #data,
+ .cp #main_other #data {
+ transform: initial;
+ position: relative;
+ display: block;
+ width: 100%;
+ max-width: 100%;
+ margin: 10px 0;
+ box-sizing: border-box;
+ }
+}
+@media screen and (max-width: 800px) {
+ .cp #main #userForm,
+ .cp #main_other #userForm {
+ border: 1px solid #888;
+ }
+}
+@media screen and (max-width: 800px) {
+ .cp #main,
+ .cp #main_other {
+ position: relative;
+ height: auto;
+ background: #aaa;
+ top: -10px;
+ }
+}
.cp #main .buttons,
.cp #main_other .buttons {
margin-top: 15px;
diff --git a/customize.dist/privacy.html b/customize.dist/privacy.html
index cde377a98..2464295b5 100644
--- a/customize.dist/privacy.html
+++ b/customize.dist/privacy.html
@@ -3,6 +3,7 @@
Cryptpad: Zero Knowledge, Collaborative Real Time Editing
+
diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less
index aab998b20..305dc333b 100644
--- a/customize.dist/src/less/cryptpad.less
+++ b/customize.dist/src/less/cryptpad.less
@@ -128,49 +128,68 @@ p, pre, td, a, table, tr {
body.html {
}
- .page {
- width: 100%;
- margin-left: auto;
- margin-right: auto;
- background: @base;
- padding: 10px @main-border-width;
- position: relative;
- &.first {
- margin-top: ~"calc(100vh - 50px)";
- }
- &.even {
- background: darken(@base, 10%);
- }
- &.category {
- background: darken(@base, 20%);
- }
+// Main page
+.page {
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ background: @base;
+ padding: 10px @main-border-width;
+ position: relative;
- .left {
- padding: 10px;
- width: 45%;
- position: relative;
- left: 0; //@main-border-width;
- display: inline-block;
- vertical-align: middle;
- }
- .right {
- padding: 10px;
- width: 45%;
- position: relative;
- left: 10%; //@main-border-width;
- display: inline-block;
- vertical-align: middle;
+ &.first {
+ margin-top: ~"calc(100vh - 50px)";
+ @media screen and (max-width: @media-not-big) {
+ margin-top: 0;;
}
- .image {
- text-align: center;
+ }
+ &.even {
+ background: darken(@base, 10%);
+ }
+ &.category {
+ background: darken(@base, 20%);
+ }
+
+ .left {
+ left: 0; //@main-border-width;
+ }
+ .right {
+ left: 10%; //@main-border-width;
+ }
+
+ @media screen and (max-width: @media-not-big) {
+ padding: 10px 5vh;
+ }
+
+
+ &>div{
+ padding: 10px;
+ width: 45%;
+ position: relative;
+ display: inline-block;
+ vertical-align: middle;
+ &:not(.image) {
+ @media screen and (max-width: @media-not-big) {
+ width: 100%;
+ left: 0;
+ }
}
+ }
- p {
- text-align: justify;
+ .image {
+ text-align: center;
+ @media screen and (max-width: @media-not-big) {
+ display: none;
}
}
+ p {
+ font-size: 18px;
+ text-align: justify;
+ }
+}
+
.btn-default {
&:hover {
background-color: #d8d8d8;
@@ -243,8 +262,8 @@ body.html {
top: 50%;
left: 0;
transform: translateY(-50%);
- // width: ~"calc(100% - 450px - 30vw)";
-// background-color: @main-block-bg;
+ //width: ~"calc(100% - 450px - 30vw)";
+ //background-color: @main-block-bg;
#tryit {
margin-top: 20px;
@@ -261,7 +280,7 @@ body.html {
display: inline-block;
width: 350px;
max-width: 35%;
-// background-color: @main-block-bg;
+ //background-color: @main-block-bg;
padding: 10px;
box-sizing: border-box;
font-family: lato, Helvetica, sans-serif;
@@ -310,6 +329,38 @@ body.html {
}
}
}
+ #main-container {
+ @media screen and (max-width: @media-not-big) {
+ transform: initial;
+ position: relative;
+ display: block;
+ width: 90%;
+ left: 0;
+ }
+ }
+ #userForm, #data {
+ @media screen and (max-width: @media-not-big) {
+ transform: initial;
+ position: relative;
+ display: block;
+ width: 100%;
+ max-width: 100%;
+ margin: 10px 0;
+ box-sizing: border-box;
+ }
+ }
+ #userForm {
+ @media screen and (max-width: @media-not-big) {
+ border: 1px solid #888;
+ }
+ }
+ @media screen and (max-width: @media-not-big) {
+ position: relative;
+ height: auto;
+ background: #aaa;
+ top: -10px;
+ }
+
.buttons {
margin-top: 15px;
}
diff --git a/customize.dist/src/template.html b/customize.dist/src/template.html
index f285d3f2c..cb4f7cfad 100644
--- a/customize.dist/src/template.html
+++ b/customize.dist/src/template.html
@@ -3,6 +3,7 @@
Cryptpad: Zero Knowledge, Collaborative Real Time Editing
+
diff --git a/customize.dist/terms.html b/customize.dist/terms.html
index bae563aec..246abf60d 100644
--- a/customize.dist/terms.html
+++ b/customize.dist/terms.html
@@ -3,6 +3,7 @@
Cryptpad: Zero Knowledge, Collaborative Real Time Editing
+