From 9523782bf8a11d2aab91e8ec2846192a5a53e813 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 19 Jan 2017 10:48:46 +0100 Subject: [PATCH] Make the home page responsive --- customize.dist/about.html | 1 + customize.dist/contact.html | 1 + customize.dist/index.html | 1 + customize.dist/main.css | 70 ++++++++++++-- customize.dist/privacy.html | 1 + customize.dist/src/less/cryptpad.less | 127 ++++++++++++++++++-------- customize.dist/src/template.html | 1 + customize.dist/terms.html | 1 + 8 files changed, 159 insertions(+), 44 deletions(-) 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 +