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

Make the home page responsive

Browse Source
pull/1/head
yflory 8 years ago
parent 69bee7d79a
commit 9523782bf8
8 changed files with 159 additions and 44 deletions
Show Stats Download Patch File Download Diff File

1
customize.dist/about.html
Unescape Escape View File

@ -3,6 +3,7 @@
<head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>

1
customize.dist/contact.html
Unescape Escape View File

@ -3,6 +3,7 @@
<head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>

1
customize.dist/index.html
Unescape Escape View File

@ -3,6 +3,7 @@
<head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>

70
customize.dist/main.css
Unescape Escape View File

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

1
customize.dist/privacy.html
Unescape Escape View File

@ -3,6 +3,7 @@
<head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>

127
customize.dist/src/less/cryptpad.less
Unescape Escape View File

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

1
customize.dist/src/template.html
Unescape Escape View File

@ -3,6 +3,7 @@
<head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>

1
customize.dist/terms.html
Unescape Escape View File

@ -3,6 +3,7 @@
<head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>

Write Preview
Loading…
Cancel
Save