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> <head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title> <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 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" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.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"/> <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> <head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title> <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 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" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.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"/> <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> <head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title> <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 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" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.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"/> <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 { .cp .page.first {
margin-top: calc(100vh - 50px); margin-top: calc(100vh - 50px);
} }
@media screen and (max-width: 800px) {
.cp .page.first {
margin-top: 0;
}
}
.cp .page.even { .cp .page.even {
background: #dcdcdc; background: #dcdcdc;
} }
@ -594,25 +599,39 @@ html.cp,
background: #c2c2c2; background: #c2c2c2;
} }
.cp .page .left { .cp .page .left {
padding: 10px;
width: 45%;
position: relative;
left: 0; left: 0;
display: inline-block;
vertical-align: middle;
} }
.cp .page .right { .cp .page .right {
left: 10%;
}
@media screen and (max-width: 800px) {
.cp .page {
padding: 10px 5vh;
}
}
.cp .page > div {
padding: 10px; padding: 10px;
width: 45%; width: 45%;
position: relative; position: relative;
left: 10%;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
@media screen and (max-width: 800px) {
.cp .page > div:not(.image) {
width: 100%;
left: 0;
}
}
.cp .page .image { .cp .page .image {
text-align: center; text-align: center;
} }
@media screen and (max-width: 800px) {
.cp .page .image {
display: none;
}
}
.cp .page p { .cp .page p {
font-size: 18px;
text-align: justify; text-align: justify;
} }
.cp .btn-default:hover { .cp .btn-default:hover {
@ -753,6 +772,45 @@ html.cp,
.cp #main_other #userForm button.half:not(.first) { .cp #main_other #userForm button.half:not(.first) {
float: right; 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 .buttons,
.cp #main_other .buttons { .cp #main_other .buttons {
margin-top: 15px; margin-top: 15px;

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

@ -3,6 +3,7 @@
<head> <head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title> <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 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" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.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"/> <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>

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

@ -128,6 +128,8 @@ p, pre, td, a, table, tr {
body.html { body.html {
} }
// Main page
.page { .page {
width: 100%; width: 100%;
margin-left: auto; margin-left: auto;
@ -138,6 +140,9 @@ body.html {
&.first { &.first {
margin-top: ~"calc(100vh - 50px)"; margin-top: ~"calc(100vh - 50px)";
@media screen and (max-width: @media-not-big) {
margin-top: 0;;
}
} }
&.even { &.even {
background: darken(@base, 10%); background: darken(@base, 10%);
@ -147,26 +152,40 @@ body.html {
} }
.left { .left {
padding: 10px;
width: 45%;
position: relative;
left: 0; //@main-border-width; left: 0; //@main-border-width;
display: inline-block;
vertical-align: middle;
} }
.right { .right {
left: 10%; //@main-border-width;
}
@media screen and (max-width: @media-not-big) {
padding: 10px 5vh;
}
&>div{
padding: 10px; padding: 10px;
width: 45%; width: 45%;
position: relative; position: relative;
left: 10%; //@main-border-width;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
&:not(.image) {
@media screen and (max-width: @media-not-big) {
width: 100%;
left: 0;
} }
}
}
.image { .image {
text-align: center; text-align: center;
@media screen and (max-width: @media-not-big) {
display: none;
}
} }
p { p {
font-size: 18px;
text-align: justify; text-align: justify;
} }
} }
@ -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 { .buttons {
margin-top: 15px; margin-top: 15px;
} }

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

@ -3,6 +3,7 @@
<head> <head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title> <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 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" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.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"/> <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> <head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title> <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 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" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.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"/> <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>

Write Preview
Loading…
Cancel
Save