Unverified Commit 0889d58c authored by Danilo Woznica's avatar Danilo Woznica Committed by GitHub

Fix/mobile (#232)

* feat(Team): Update missing photos

* feat(Bots): Add page

* feat(Webinar): Add page

* Fixes on mobile
parent 9cfee538
......@@ -20,7 +20,7 @@
top: 0;
width: 100vw;
height: 40%;
background-image: linear-gradient(0deg, transparent 0%, #030c1a 80%);
background-image: linear-gradient(0deg, rgba(#030c1a, 0) 0%, #030c1a 80%);
opacity: 1;
}
......@@ -31,7 +31,7 @@
bottom: 0;
width: 100vw;
height: 40%;
background-image: linear-gradient(0deg, #030c1a 0%, transparent 80%);
background-image: linear-gradient(0deg, #030c1a 0%, rgba(#030c1a, 0) 80%);
opacity: 1;
@media screen and (min-width: $tablet) {
......
......@@ -42,8 +42,8 @@
@include transform(translate3d(0,0,0));
}
.home-landingpage__mail {
margin-top: -5em;
margin-left: -5em;
@media screen and (min-width: $tablet) {
......@@ -71,6 +71,9 @@
// Hero section
//
.home-hero {
position: relative;
z-index: 3;
@media screen and (min-width: $tablet) {
@include flexbox();
min-height: 70vh;
......
body.partners {
background-image: url('/images/partners/hero-planet.png');
background-position: center 49vh;
background-position: center 8.1%;
background-repeat: no-repeat;
background-size: 22vw;
@media (min-width: $tablet) {
background-position: center 47vh;
@media (min-width: 38em) {
background-position: center 6.9%;
}
.hero {
position: relative;
}
}
.partners-hero__image {
position: absolute;
top: 12vw;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-image: url('../images/partners/hero.png');
background-position: center;
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% auto;
@media (min-width: $tablet) {
top: 10vw;
}
}
.partner-box {
......
body.press {
.hero {
overflow: hidden;
img {
width: 100%;
width: 140vw;
position: relative;
left: -26vw;
max-width: 50em;
margin: auto;
@media (min-width: $tablet) {
left: auto;
width: 100%;
}
}
}
}
......
.support-hero__image {
position: absolute;
top: 0;
top: 32vw;
left: 0;
right: 0;
bottom: 0;
......@@ -13,6 +13,7 @@
@media screen and (min-width: 31em) {
background-position: center 0;
top: 0;
}
@media screen and (min-width: 48em) {
......
......@@ -2,6 +2,7 @@
position: relative;
height: 65vw;
max-height: 48em;
min-height: 0;
&:after {
content: "";
......@@ -10,7 +11,7 @@
left: 0;
top: 0;
height: 40%;
background-image: linear-gradient(0deg, transparent 0%, #030c1a 40%);
background-image: linear-gradient(0deg, rgba(#030c1a, 0) 0%, #030c1a 40%);
opacity: 0.8;
@media screen and (min-width: $tablet) {
......@@ -30,11 +31,16 @@
}
.team-map__map {
position: absolute;
top: 10%;
width: 100%;
left: 0;
right: 0;
display: none;
@media screen and (min-width: $tablet) {
position: absolute;
top: 10%;
width: 100%;
left: 0;
right: 0;
display: block;
}
}
.team-map__pin {
......
......@@ -39,14 +39,16 @@ redirect_from:
<div class="flex-grid grid--justify-around">
<div class="col--third">
<h3 class="display--small theme_type--dark"><strong>Star and Fork</strong></h3>
<p class="theme_type--grey">The open source team chat application with over 600 contributors across our projects. Star and fork Rocket.Chat on GitHub and help others discover the platform. </p>
<p class="theme_type--grey type--nomargin">The open source team chat application with over 600 contributors across our projects. Star and fork Rocket.Chat on GitHub and help others discover the platform. </p>
<div class="space--2"></div>
<a href="//github.com/RocketChat/" target="_blank" rel="noopener noreferrer" class="button--link button--with-arrow">View Github</a>
<div class="space--4"></div>
</div>
<div class="col--third">
<h3 class="display--small theme_type--dark"><strong>Use and Share</strong></h3>
<p class="theme_type--grey">Download and install your own server and share Rocket.Chat with your friends and colleagues who haven't experienced the power of an open source team chat platform.</p>
<p class="theme_type--grey type--nomargin">Download and install your own server and share Rocket.Chat with your friends and colleagues who haven't experienced the power of an open source team chat platform.</p>
<div class="space--2"></div>
<a href="/download/" class="button--link community__hero-download-btn">
<span><img src="/images/default/download.svg" alt="Download"></span>
Download
......@@ -59,14 +61,16 @@ redirect_from:
<div class="flex-grid grid--justify-around">
<div class="col--third">
<h3 class="display--small theme_type--dark"><strong>Squash Bugs</strong></h3>
<p class="theme_type--grey">Join Rocket.Chat's passionate community to help us manage issues and squash bugs for Rocket.Chat Server, Electron, iOS and Android clients.</p>
<p class="theme_type--grey type--nomargin">Join Rocket.Chat's passionate community to help us manage issues and squash bugs for Rocket.Chat Server, Electron, iOS and Android clients.</p>
<div class="space--2"></div>
<a href="//github.com/RocketChat/Rocket.Chat/issues" target="_blank" rel="noopener noreferrer" class="button--link button--with-arrow">View Github</a>
<div class="space--4"></div>
</div>
<div class="col--third">
<h3 class="display--small theme_type--dark"><strong>Document</strong></h3>
<p class="theme_type--grey">You don't have to be a developer to contribute to Rocket.Chat. You can create new or update old Rocket.Chat.Docs articles or tutorials directly through GitHub.</p>
<p class="theme_type--grey type--nomargin">You don't have to be a developer to contribute to Rocket.Chat. You can create new or update old Rocket.Chat.Docs articles or tutorials directly through GitHub.</p>
<div class="space--2"></div>
<a href="/docs/" class="button--link button--with-arrow">View Documents</a>
</div>
</div>
......@@ -76,14 +80,16 @@ redirect_from:
<div class="flex-grid grid--justify-around">
<div class="col--third">
<h3 class="display--small theme_type--dark"><strong>Write a blog post</strong></h3>
<p class="theme_type--grey">Write a blog post on your Rocket.Chat story, tell us about how it improved your team’s communication and we'll share it with the community.</p>
<p class="theme_type--grey type--nomargin">Write a blog post on your Rocket.Chat story, tell us about how it improved your team’s communication and we'll share it with the community.</p>
<div class="space--2"></div>
<a href="/blog/index.html" class="button--link button--with-arrow">Visit Blog</a>
<div class="space--4"></div>
</div>
<div class="col--third">
<h3 class="display--small theme_type--dark"><strong>Give a Talk</strong></h3>
<p class="theme_type--grey">Give a talk at a local meetup or conference sharing how you use Rocket.Chat, how you customized it to suit your needs and improved your team’s communication.</p>
<p class="theme_type--grey type--nomargin">Give a talk at a local meetup or conference sharing how you use Rocket.Chat, how you customized it to suit your needs and improved your team’s communication.</p>
<div class="space--2"></div>
<a href="/category/events/" class="button--link button--with-arrow">View Events</a>
</div>
</div>
......
......@@ -19,21 +19,24 @@ redirect_from:
<div class="home-backgrounds">
<div class="home-landingpage__stars"></div>
<div class="home-landingpage__planets"></div>
<section class="container home-hero">
<div class="home-hero_wrap home-landingpage">
<h1 class="display--big theme_type--dark">Open Source Team Communication</h1>
<p class="display--small theme_type--grey">Rocket.Chat is free, unlimited and open source. Replace email &amp; Slack with the ultimate team chat software solution.</p>
<div class="download">
<a href="/download" class="button">Download now</a>
<div class=" home-hero">
<section class="container">
<div class="home-hero_wrap home-landingpage">
<h1 class="display--big theme_type--dark">Open Source Team Communication</h1>
<p class="display--small theme_type--grey">Rocket.Chat is free, unlimited and open source. Replace email &amp; Slack with the ultimate team chat software solution.</p>
<div class="download">
<a href="/download" class="button">Download now</a>
</div>
</div>
</div>
<img
class="home-hero_image"
srcset="/images/index/devices.png, /images/index/devices@2x.png 2x, /images/index/devices@3x.png 3x"
src="/images/index/devices.png" alt="Rocket Chat apps"
/>
</section>
<img
class="home-hero_image"
srcset="/images/index/devices.png, /images/index/devices@2x.png 2x, /images/index/devices@3x.png 3x"
src="/images/index/devices.png" alt="Rocket Chat apps"
/>
</section>
</div>
<div class="space--8"></div>
......
......@@ -286,7 +286,7 @@ if (document.querySelector(".js-download")) {
(function () {
var Animations = function () {
var onlyDesktop = window.outerWidth >= 768
var onlyDesktop = window.outerWidth >= 769
var scrollY = window.scrollY;
var homeStars = document.querySelector('.home-landingpage__stars');
var homeMail = document.querySelector('.home-landingpage__mail');
......
......@@ -21,9 +21,7 @@ theme: dark
{% endif %}
{% endfor %}
<div class="partners-hero__image"></div>
<section class="container hero">
<section class="hero">
<h1 class="display--big theme_type--dark">Official Global Partners</h1>
<p class="display--small theme_type--grey">Our ecosystem of global resellers, technology and hosting partners helps us ensure that Rocket.Chat is the best match for your organization</p>
<br />
......@@ -31,6 +29,8 @@ theme: dark
<a href="#partners" class="button--ghost">View Partners</a>
<a href="/become-partner" class="button">Become Partner</a>
<div class="partners-hero__image"></div>
</section>
<section class="container" id="partners">
......
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