Commit ce4b9b64 authored by Danilo Woznica's avatar Danilo Woznica

fix(Heros): Resize to small devices, closes #253

parent 281ef0e2
---
---
type: CUBE
title: Cube Tech Fair
location: Berlin, Germany
dateEvent: 2018-05-15 10:00:00
dateEventEnd: 2018-05-16 10:00:00
dateEvent: 2018-05-15 10:00:00
dateEventEnd: 2018-05-16 10:00:00
link: //cube-global.com/cube_tech_fair/
author: Isabella Russell
author: Isabella Russell
hidden: true
categories:
- Events
categories:
* Events
---
......@@ -2,9 +2,15 @@
text-align: center;
padding: 2em;
min-height: 30em;
position: relative;
@media screen and (min-width: $tablet) {
padding-top: 5em;
height: 75vh;
max-height: 39em;
}
@media screen and (min-width: 65em) {
min-height: 83vh;
}
......@@ -14,9 +20,9 @@
}
a {
margin-left: .5em;
margin-right: .5em;
font-size: .9em;
margin-left: 0.5em;
margin-right: 0.5em;
font-size: 0.9em;
}
}
......@@ -27,4 +33,4 @@
@media screen and (min-width: $tablet) {
min-height: 0;
}
}
\ No newline at end of file
}
.cloud-hero__image {
position: absolute;
top: 0;
top: -50%;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-image: url('../images/cloud/hero.jpg');
background-position: center top;
background-image: url("../images/cloud/hero.jpg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: auto 32em;
background-size: 100% auto;
background-color: #1d74f5;
@media screen and (min-width: $tablet) {
background-image: url('../images/cloud/hero@2x.jpg');
background-size: 100% auto;
background-image: url("../images/cloud/hero@2x.jpg");
}
}
......@@ -20,9 +20,9 @@ body.cloud {
.headroom--top {
&.app-header_wrap {
background: none !important;
&:after {
opacity: .2;
opacity: 0.2;
}
}
......@@ -36,7 +36,7 @@ body.cloud {
}
.current-page {
color: rgba(255,255,255,0.6);
color: rgba(255, 255, 255, 0.6);
}
.app-header_logo .dark {
......@@ -69,14 +69,14 @@ body.cloud {
}
}
}
// only IE
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@include headerStyle();
}
// scroll
.app-header--light {
@include headerStyle();
}
}
\ No newline at end of file
}
......@@ -5,15 +5,13 @@
right: 0;
bottom: 0;
z-index: -1;
background-image: url('../images/install/hero.jpg');
background-position: center 21em;
background-image: url("../images/install/hero.jpg");
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% auto;
@media screen and (min-width: $tablet) {
background-image: url('../images/install/hero@2x.jpg');
background-position: center top;
background-size: 100% auto;
background-image: url("../images/install/hero@2x.jpg");
}
}
......
body.partners {
background-image: url('/images/partners/hero-planet.png');
background-image: url("/images/partners/hero-planet.png");
background-position: center 8.1%;
background-repeat: no-repeat;
background-size: 22vw;
......@@ -7,10 +7,6 @@ body.partners {
@media (min-width: 38em) {
background-position: center 6.9%;
}
.hero {
position: relative;
}
}
.partners-hero__image {
......@@ -20,7 +16,7 @@ body.partners {
right: 0;
bottom: 0;
z-index: -1;
background-image: url('../images/partners/hero.png');
background-image: url("../images/partners/hero.png");
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% auto;
......@@ -60,4 +56,4 @@ body.partners {
width: 9em;
margin-right: 1em;
}
}
\ No newline at end of file
}
.support-hero__image {
position: absolute;
top: 32vw;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-image: url('../images/support/hero.jpg');
background-position: center 8em;
background-image: url("../images/support/hero.jpg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: 150% auto;
will-change: all;
background-size: 100% auto;
@media screen and (min-width: 31em) {
background-position: center 0;
top: 0;
@media screen and (min-width: $tablet) {
bottom: -30%;
}
@media screen and (min-width: 48em) {
background-size: 100% auto;
background-position: center 6em;
}
@media screen and (min-width: 70em) {
background-position: center -3em;
}
}
\ No newline at end of file
}
......@@ -13,7 +13,6 @@ redirect_from:
- /cloud/
---
<div class="cloud-hero__image"></div>
<section class="hero">
<h1 class="display--big theme_type--dark">Rocket.Chat Cloud</h1>
......@@ -22,6 +21,8 @@ redirect_from:
<br />
<a href="#pricing" class="button--dark">See plans</a>
<a href="//cloud.rocket.chat/trial/small" target="_blank" rel="noopener noreferrer" rel="noopener noreferrer" class="button--blank">Start trial</a>
<div class="cloud-hero__image"></div>
</section>
<section class="container">
......
images/cloud/hero.jpg

63.5 KB | W: | H:

images/cloud/hero.jpg

69.1 KB | W: | H:

images/cloud/hero.jpg
images/cloud/hero.jpg
images/cloud/hero.jpg
images/cloud/hero.jpg
  • 2-up
  • Swipe
  • Onion skin
images/cloud/hero@2x.jpg

155 KB | W: | H:

images/cloud/hero@2x.jpg

180 KB | W: | H:

images/cloud/hero@2x.jpg
images/cloud/hero@2x.jpg
images/cloud/hero@2x.jpg
images/cloud/hero@2x.jpg
  • 2-up
  • Swipe
  • Onion skin
......@@ -20,11 +20,11 @@ redirect_from:
- /install/
---
<div class="install-hero__image"></div>
<section class="container hero">
<section class="hero">
<h1 class="display--big theme_type--dark">Install Rocket.Chat</h1>
<p class="display--small theme_type--grey">On your desktop, mobile or server</p>
<div class="install-hero__image"></div>
</section>
<section class="install-apps container js-download">
......
This diff is collapsed.
......@@ -14,9 +14,8 @@ redirect_from:
- /help
- /help/
---
<div class="support-hero__image"></div>
<section class="container hero">
<section class="hero">
<h1 class="display--big theme_type--dark">Rocket.Chat Support</h1>
<p class="display--small theme_type--grey">Support and ressources from our experts and our community to keep your team connected</p>
......@@ -24,6 +23,8 @@ redirect_from:
<br />
<a href="#free-resources" class="button--ghost">Free Resources</a>
<a href="#expert-support" class="button">Expert Support</a>
<div class="support-hero__image"></div>
</section>
<section class="container" id="free-resources">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment