Commit 0bc4724a authored by Sean Packham's avatar Sean Packham

Finsihed refactor

parent dd9d5a09
...@@ -21,7 +21,7 @@ small: ...@@ -21,7 +21,7 @@ small:
<div class="description"> <div class="description">
For new teams or small communities For new teams or small communities
</div> </div>
<a class="button red" href="https://cloud.rocket.chat/trial/small">Start Trial</a> <a class="button secondary" href="https://cloud.rocket.chat/trial/small">Start Trial</a>
<div class="pricing"><span>$50</span>/month</div> <div class="pricing"><span>$50</span>/month</div>
total: 500 total: 500
concurrent: Up to 50 concurrent: Up to 50
...@@ -38,7 +38,7 @@ medium: ...@@ -38,7 +38,7 @@ medium:
<div class="description"> <div class="description">
For growing teams or communities with increased activity For growing teams or communities with increased activity
</div> </div>
<a class="button red" href="https://cloud.rocket.chat/trial/medium">Start Trial</a> <a class="button secondary" href="https://cloud.rocket.chat/trial/medium">Start Trial</a>
<div class="pricing"><span>$200</span>/month</div> <div class="pricing"><span>$200</span>/month</div>
total: 5,000 total: 5,000
concurrent: Up to 200 concurrent: Up to 200
...@@ -55,7 +55,7 @@ large: ...@@ -55,7 +55,7 @@ large:
<div class="description"> <div class="description">
For active or large enterprises or communities For active or large enterprises or communities
</div> </div>
<a class="button red" href="https://cloud.rocket.chat/trial/large">Start Trial</a> <a class="button secondary" href="https://cloud.rocket.chat/trial/large">Start Trial</a>
<div class="pricing"><span>$500</span>/month</div> <div class="pricing"><span>$500</span>/month</div>
total: 50,000 total: 50,000
concurrent: Up to 500 concurrent: Up to 500
......
body.blog { body.blog {
ul.posts { .posts ul {
margin: 0; margin: 0;
list-style: none; list-style: none;
padding: 0; padding: 0;
...@@ -65,8 +65,7 @@ body.blog { ...@@ -65,8 +65,7 @@ body.blog {
} }
@media all and (max-width: 900px) { @media all and (max-width: 900px) {
.posts ul {
ul.posts {
display: block; display: block;
li { li {
...@@ -80,8 +79,6 @@ body.blog { ...@@ -80,8 +79,6 @@ body.blog {
height: 130px; height: 130px;
} }
} }
} }
} }
......
body.cloud { body.cloud {
min-width: 600px; min-width: 600px;
.testimonials {
margin-top: 6em;
img { .hero {
max-width: 150px; padding-bottom: 12em;
}
} }
.message { section {
max-width: 900px; padding-bottom: 6em;
margin-left: auto;
margin-right: auto;
p {
color: #929db3;
}
} }
} }
body.community { body.community {
.header { .hero {
margin-bottom: 4em; padding-bottom: 12em;
} }
section {
padding-bottom: 6em;
}
.connect { .connect {
padding-bottom: 1em;
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
...@@ -27,13 +33,7 @@ body.community { ...@@ -27,13 +33,7 @@ body.community {
} }
} }
.left {
margin-top: 4em;
}
.involved { .involved {
margin-bottom: 0;
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
...@@ -60,11 +60,6 @@ body.community { ...@@ -60,11 +60,6 @@ body.community {
} }
@media all and (max-width: 900px) { @media all and (max-width: 900px) {
.header {
margin-bottom: 0;
}
.right img { .right img {
display: none; display: none;
} }
...@@ -76,7 +71,6 @@ body.community { ...@@ -76,7 +71,6 @@ body.community {
.involved ul { .involved ul {
display: block; display: block;
} }
} }
} }
body.contact { body.contact {
section { .hero {
margin-bottom: 0; padding-bottom: 12em;
&.header {
margin-bottom: 3em;
}
}
label, input, textarea {
display: block;
margin-bottom: 5px;
font-size: $font-size;
}
label {
margin-top: 8px;
}
input[type=text] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
} }
textarea { section {
width: 100%; padding-bottom: 6em;
padding: 10px;
min-height: 344px;
border: 1px solid #ddd;
} }
input[type=button] { #message {
margin-top: 10px; padding-top: 0;
display: inline-block;
.address {
padding-top: 3em;
}
} }
} }
...@@ -5,7 +5,7 @@ body.download { ...@@ -5,7 +5,7 @@ body.download {
background-color: $color-dark; background-color: $color-dark;
text-align: center; text-align: center;
color: #fff; color: #fff;
padding: 6em 0 0 ; padding: 6em 0 0;
.wrapper { .wrapper {
padding-bottom: 20em; padding-bottom: 20em;
...@@ -17,7 +17,6 @@ body.download { ...@@ -17,7 +17,6 @@ body.download {
} }
h1 { h1 {
margin-top: 2em;
color: #fff; color: #fff;
} }
...@@ -150,6 +149,7 @@ body.download { ...@@ -150,6 +149,7 @@ body.download {
} }
#support { #support {
padding-bottom: 3em;
.header { .header {
text-align: center; text-align: center;
......
...@@ -3,12 +3,8 @@ body.index { ...@@ -3,12 +3,8 @@ body.index {
.hero { .hero {
background-image: url('images/index/clouds.png'); background-image: url('images/index/clouds.png');
background-repeat: no-repeat;
background-size: contain;
background-position: bottom;
background-color: $color-dark;
padding: 4em 0 12em; padding: 4em 0 12em;
color: #fff; text-align: left;
h1 { h1 {
font-size: 2.5em; font-size: 2.5em;
...@@ -245,8 +241,6 @@ body.index { ...@@ -245,8 +241,6 @@ body.index {
@media all and (max-width: 900px) { @media all and (max-width: 900px) {
.hero { .hero {
padding: 4em 0;
.left { .left {
float: none; float: none;
width: 100%; width: 100%;
......
...@@ -188,9 +188,21 @@ section { ...@@ -188,9 +188,21 @@ section {
padding: 9em 0; padding: 9em 0;
&.hero { &.hero {
background-repeat: no-repeat;
background-size: contain;
background-position: bottom;
background-color: $color-dark;
padding: 6em 0 12em;
text-align: center;
color: #fff;
h1 { h1 {
font-size: 2.2em; font-size: 2.2em;
} }
em {
font-style: normal;
}
} }
} }
...@@ -241,15 +253,15 @@ table { ...@@ -241,15 +253,15 @@ table {
td { td {
padding: 0 1em 1em; padding: 0 1em 1em;
font-size: 1.25em;
} }
.description { .description {
min-height: 100px; min-height: 80px;
vertical-align: top; vertical-align: top;
} }
.pricing { .pricing {
margin-top: 1em;
font-size: 1.25em; font-size: 1.25em;
span { span {
...@@ -332,8 +344,12 @@ table { ...@@ -332,8 +344,12 @@ table {
section { section {
padding: 3em 0; padding: 3em 0;
&.hero {
padding-bottom: 6em;
}
} }
.left { .left {
float: none; float: none;
width: 100%; width: 100%;
......
...@@ -5,8 +5,11 @@ body.partners { ...@@ -5,8 +5,11 @@ body.partners {
list-style: none; list-style: none;
display: grid; display: grid;
grid-template-columns: repeat(2, 0.5fr); grid-template-columns: repeat(2, 0.5fr);
grid-gap: 30px; grid-gap: 50px;
h2 {
margin-top: 0.5em;
}
div { div {
height: 180px; height: 180px;
......
body.press { body.press {
section {
padding-bottom: 3em;
}
.company { .company {
img { img {
margin: 40px auto 0; margin: 40px auto 0;
...@@ -10,7 +14,7 @@ body.press { ...@@ -10,7 +14,7 @@ body.press {
.gabriel { .gabriel {
img { img {
max-width: 260px; max-width: 300px;
} }
} }
...@@ -24,6 +28,7 @@ body.press { ...@@ -24,6 +28,7 @@ body.press {
li { li {
float: left; float: left;
padding: 0 1em;
width: 25%; width: 25%;
} }
...@@ -43,14 +48,40 @@ body.press { ...@@ -43,14 +48,40 @@ body.press {
max-width: 200px; max-width: 200px;
vertical-align: middle; vertical-align: middle;
} }
.more {
margin-top: 2em;
}
} }
.contact { .contact {
margin-bottom: 0; padding-bottom: 6em;
padding-bottom: 3em;
img { img {
max-width: 150px; max-width: 150px;
} }
} }
@media all and (max-width: 800px) {
.company .right {
display: none;
}
.gabriel {
padding-top: 0;
img {
margin-bottom: 3em;
}
}
.logos {
li {
float: none;
width: 100%;
}
}
}
} }
body.team { body.team {
.header { .message {
margin-bottom: 4em; padding-bottom: 3em;
}
.left {
.left { padding-top: 5em;
padding-right: 50px; }
}
.right img {
margin-top: -60px;
} }
ul.team { ul.team {
...@@ -47,6 +43,12 @@ body.team { ...@@ -47,6 +43,12 @@ body.team {
.header { .header {
margin: 0; margin: 0;
} }
.message {
.left {
padding-top: 0;
}
}
.right img { .right img {
display: none; display: none;
......
...@@ -3,51 +3,55 @@ layout: en/default ...@@ -3,51 +3,55 @@ layout: en/default
class: blog class: blog
--- ---
<section class="header center"> <section class="hero">
<h1>Rocket.Chat Blog</h1> <div class="wrapper">
<em>Find out what the Rocket.Chat team and community have been up to</em> <h1>Rocket.Chat Blog</h1>
<em>Find out what the Rocket.Chat team and community have been up to</em>
</div>
</section> </section>
<ul class="posts"> <section class="posts">
{% for post in paginator.posts %} <div class="wrapper">
<li class="post"> <ul>
<a class="header" href="{{ site.url }}{{ post.url | remove: "index.html" }}" {% for post in paginator.posts %}
style="background-image: url('{{ site.url }}/images/blog/post.png')"> <li class="post">
</a> <a class="header" href="{{ site.url }}{{ post.url | remove: "index.html" }}"
<div class="content"> style="background-image: url('{{ site.url }}/images/blog/post.png')">
<div class="top"> </a>
<h2><a href="{{ site.url }}{{ post.url | remove: "index.html" }}">{{ post.title }}</a></h2> <div class="content">
<p class="summary"> <div class="top">
{{ post.summary | strip_html }} <h2><a href="{{ site.url }}{{ post.url | remove: "index.html" }}">{{ post.title }}</a></h2>
</p> <p class="summary">
</div> {{ post.summary }}
<div class="bottom"> </p>
<div class="meta"> </div>
<span class="author">{{ post.author }}</span> - <div class="bottom">
<span class="read"> <div class="meta">
{% assign words = content | number_of_words %} <span class="author">{{ post.author }}</span> -
{% if words < site.wpm %} 1 min {% else %} {{ words | divided_by: site.wpm }} mins {% endif %} read <span class="read">
</span> {% assign words = post.content | number_of_words %}
<span class="date"> {{ post.date | date: "%b %-d, %Y" }}</span> {% if words < site.wpm %} 1 min {% else %} {{ words | divided_by: site.wpm }} mins {% endif %} read
</span>
<span class="date"> {{ post.date | date: "%b %-d, %Y" }}</span>
</div>
</div> </div>
</div> </div>
</div> </li>
</li> {% endfor %}
{% endfor %} </ul>
</ul> <div class="pagination">
<div class="clear"></div> {% if paginator.previous_page %}
<a href="{{ site.url }}{{ paginator.previous_page_path }}" class="previous">Previous</a>
<div class="pagination"> {% else %}
{% if paginator.previous_page %} <span class="previous">Previous</span>
<a href="{{ site.url }}{{ paginator.previous_page_path }}" class="previous">Previous</a> {% endif %}
{% else %} <span class="page ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
<span class="previous">Previous</span> {% if paginator.next_page %}
{% endif %} <a href="{{ site.url }}{{ paginator.next_page_path }}" class="next">Next</a>
<span class="page ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span> {% else %}
{% if paginator.next_page %} <span class="next">Next</span>
<a href="{{ site.url }}{{ paginator.next_page_path }}" class="next">Next</a> {% endif %}
{% else %} </div>
<span class="next">Next</span> </div>
{% endif %} <div class="clear"></div>
</div> </section>
<div class="clear"></div>
...@@ -5,145 +5,151 @@ redirect_from: ...@@ -5,145 +5,151 @@ redirect_from:
- /hosting/ - /hosting/
--- ---
<section class="header center"> <section class="hero">
<h1>Run Rocket.Chat on our Cloud</h1> <div class="wrapper">
<em>The worry free way to affordably host, manage and scale Rocket.Chat</em> <h1>Run Rocket.Chat on our Cloud</h1>
<em>The worry free way to affordably host, manage and scale Rocket.Chat</em>
</div>
</section> </section>
<section class="message"> <section class="message">
<div class="left"> <div class="wrapper">
<h3>Easy</h3> <div class="left">
<p> <h3>Easy</h3>
Rocket.Chat Cloud is the easiest way to install, setup and manage Rocket.Chat. <p>
It requires no technical knowledge and you can start a trial in a couple of minutes, no credit card required. Rocket.Chat Cloud is the easiest way to install, setup and manage Rocket.Chat.
</p> It requires no technical knowledge and you can start a trial in a couple of minutes, no credit card required.
<h3>Affordable</h3> </p>
<p> <h3>Affordable</h3>
We believe in charging a fair rate for the resources your need rather than for every team member or guest, <p>
giving you an affordable and scalable team chat solution for tens of thousands of users. We believe in charging a fair rate for the resources your need rather than for every team member or guest,
</p> giving you an affordable and scalable team chat solution for tens of thousands of users.
</div> </p>
<div class="right"> </div>
<h3>Scalable</h3> <div class="right">
<p> <h3>Scalable</h3>
Rocket.Chat's robust and scalable Cloud, built on Docker and Kubernetes, <p>
gives you the benefits of an open source communication platform Rocket.Chat's robust and scalable Cloud, built on Docker and Kubernetes,
without having to manage and scale your own infrastructure and support team. gives you the benefits of an open source communication platform
</p> without having to manage and scale your own infrastructure and support team.
<h3>Secure</h3> </p>
<p> <h3>Secure</h3>
Every cloud instance runs in it's own secure isolated environment which we monitor 24x7. <p>
Your data is backed-up up to every hour, to give you peace of mind in the case of an emergency. Every cloud instance runs in it's own secure isolated environment which we monitor 24x7.
</p> Your data is backed-up up to every hour, to give you peace of mind in the case of an emergency.
</p>
</div>
<div class="clear"></div>
</div> </div>
<div class="clear"></div>
</section> </section>
{% assign cloud = site.data.cloud %} {% assign cloud = site.data.cloud %}
<section> <section class="plans">
<table> <div class="wrapper">
<thead> <table>
<tr> <thead>
<th></th> <tr>
<th><h2>{{ cloud.small.name }}</h2></th> <th></th>
<th><h2>{{ cloud.medium.name }}</h2></th> <th><h2>{{ cloud.small.name }}</h2></th>
<th><h2>{{ cloud.large.name }}</h2></th> <th><h2>{{ cloud.medium.name }}</h2></th>
</tr> <th><h2>{{ cloud.large.name }}</h2></th>
</thead> </tr>
<tbody> </thead>
<tbody>
{% for key in cloud.keys %} {% for key in cloud.keys %}
{% assign k = key[0] %} {% assign k = key[0] %}
<tr> <tr>
{% unless cloud.large[k] %} {% unless cloud.large[k] %}
<td class="seperator" colspan="4"> <td class="seperator" colspan="4">
{{ key[1] }} {{ key[1] }}
</td> </td>
{% else %} {% else %}
<td>{{ key[1] }}</td> <td>{{ key[1] }}</td>
<td>{{ cloud.small[k] }}</td> <td>{{ cloud.small[k] }}</td>
<td>{{ cloud.medium[k] }}</td> <td>{{ cloud.medium[k] }}</td>
<td>{{ cloud.large[k] }}</td> <td>{{ cloud.large[k] }}</td>
{% endunless %} {% endunless %}
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
</section> </section>