Make the home page responsive
yflory
parent
69bee7d79a
commit
9523782bf8
|
|
@ -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"/>
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
left: 0;
|
||||
}
|
||||
.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: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.cp .page .right {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
|
|
|
|||
|
|
@ -128,48 +128,67 @@ 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;
|
||||
}
|
||||
.image {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
&.first {
|
||||
margin-top: ~"calc(100vh - 50px)";
|
||||
@media screen and (max-width: @media-not-big) {
|
||||
margin-top: 0;;
|
||||
}
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
text-align: center;
|
||||
@media screen and (max-width: @media-not-big) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
&:hover {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue