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

Finsihed refactor

parent dd9d5a09
......@@ -21,7 +21,7 @@ small:
<div class="description">
For new teams or small communities
</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>
total: 500
concurrent: Up to 50
......@@ -38,7 +38,7 @@ medium:
<div class="description">
For growing teams or communities with increased activity
</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>
total: 5,000
concurrent: Up to 200
......@@ -55,7 +55,7 @@ large:
<div class="description">
For active or large enterprises or communities
</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>
total: 50,000
concurrent: Up to 500
......
body.blog {
ul.posts {
.posts ul {
margin: 0;
list-style: none;
padding: 0;
......@@ -65,8 +65,7 @@ body.blog {
}
@media all and (max-width: 900px) {
ul.posts {
.posts ul {
display: block;
li {
......@@ -80,8 +79,6 @@ body.blog {
height: 130px;
}
}
}
}
......
......@@ -2,21 +2,11 @@
body.cloud {
min-width: 600px;
.testimonials {
margin-top: 6em;
img {
max-width: 150px;
}
.hero {
padding-bottom: 12em;
}
.message {
max-width: 900px;
margin-left: auto;
margin-right: auto;
p {
color: #929db3;
}
section {
padding-bottom: 6em;
}
}
body.community {
.header {
margin-bottom: 4em;
.hero {
padding-bottom: 12em;
}
section {
padding-bottom: 6em;
}
.connect {
padding-bottom: 1em;
ul {
list-style: none;
padding: 0;
......@@ -27,13 +33,7 @@ body.community {
}
}
.left {
margin-top: 4em;
}
.involved {
margin-bottom: 0;
ul {
list-style: none;
padding: 0;
......@@ -60,11 +60,6 @@ body.community {
}
@media all and (max-width: 900px) {
.header {
margin-bottom: 0;
}
.right img {
display: none;
}
......@@ -76,7 +71,6 @@ body.community {
.involved ul {
display: block;
}
}
}
body.contact {
section {
margin-bottom: 0;
&.header {
margin-bottom: 3em;
}
}
label, input, textarea {
display: block;
margin-bottom: 5px;
font-size: $font-size;
.hero {
padding-bottom: 12em;
}
label {
margin-top: 8px;
section {
padding-bottom: 6em;
}
input[type=text] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
}
#message {
padding-top: 0;
textarea {
width: 100%;
padding: 10px;
min-height: 344px;
border: 1px solid #ddd;
.address {
padding-top: 3em;
}
input[type=button] {
margin-top: 10px;
display: inline-block;
}
}
......@@ -5,7 +5,7 @@ body.download {
background-color: $color-dark;
text-align: center;
color: #fff;
padding: 6em 0 0 ;
padding: 6em 0 0;
.wrapper {
padding-bottom: 20em;
......@@ -17,7 +17,6 @@ body.download {
}
h1 {
margin-top: 2em;
color: #fff;
}
......@@ -150,6 +149,7 @@ body.download {
}
#support {
padding-bottom: 3em;
.header {
text-align: center;
......
......@@ -3,12 +3,8 @@ body.index {
.hero {
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;
color: #fff;
text-align: left;
h1 {
font-size: 2.5em;
......@@ -245,8 +241,6 @@ body.index {
@media all and (max-width: 900px) {
.hero {
padding: 4em 0;
.left {
float: none;
width: 100%;
......
......@@ -188,9 +188,21 @@ section {
padding: 9em 0;
&.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 {
font-size: 2.2em;
}
em {
font-style: normal;
}
}
}
......@@ -241,15 +253,15 @@ table {
td {
padding: 0 1em 1em;
font-size: 1.25em;
}
.description {
min-height: 100px;
min-height: 80px;
vertical-align: top;
}
.pricing {
margin-top: 1em;
font-size: 1.25em;
span {
......@@ -332,6 +344,10 @@ table {
section {
padding: 3em 0;
&.hero {
padding-bottom: 6em;
}
}
.left {
......
......@@ -5,8 +5,11 @@ body.partners {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 0.5fr);
grid-gap: 30px;
grid-gap: 50px;
h2 {
margin-top: 0.5em;
}
div {
height: 180px;
......
body.press {
section {
padding-bottom: 3em;
}
.company {
img {
margin: 40px auto 0;
......@@ -10,7 +14,7 @@ body.press {
.gabriel {
img {
max-width: 260px;
max-width: 300px;
}
}
......@@ -24,6 +28,7 @@ body.press {
li {
float: left;
padding: 0 1em;
width: 25%;
}
......@@ -43,14 +48,40 @@ body.press {
max-width: 200px;
vertical-align: middle;
}
.more {
margin-top: 2em;
}
}
.contact {
margin-bottom: 0;
padding-bottom: 3em;
padding-bottom: 6em;
img {
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 {
.header {
margin-bottom: 4em;
}
.message {
padding-bottom: 3em;
.left {
padding-right: 50px;
padding-top: 5em;
}
.right img {
margin-top: -60px;
}
ul.team {
......@@ -48,6 +44,12 @@ body.team {
margin: 0;
}
.message {
.left {
padding-top: 0;
}
}
.right img {
display: none;
}
......
......@@ -3,12 +3,16 @@ layout: en/default
class: blog
---
<section class="header center">
<section class="hero">
<div class="wrapper">
<h1>Rocket.Chat Blog</h1>
<em>Find out what the Rocket.Chat team and community have been up to</em>
</div>
</section>
<ul class="posts">
<section class="posts">
<div class="wrapper">
<ul>
{% for post in paginator.posts %}
<li class="post">
<a class="header" href="{{ site.url }}{{ post.url | remove: "index.html" }}"
......@@ -18,14 +22,14 @@ class: blog
<div class="top">
<h2><a href="{{ site.url }}{{ post.url | remove: "index.html" }}">{{ post.title }}</a></h2>
<p class="summary">
{{ post.summary | strip_html }}
{{ post.summary }}
</p>
</div>
<div class="bottom">
<div class="meta">
<span class="author">{{ post.author }}</span> -
<span class="read">
{% assign words = content | number_of_words %}
{% assign words = post.content | number_of_words %}
{% 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>
......@@ -34,10 +38,8 @@ class: blog
</div>
</li>
{% endfor %}
</ul>
<div class="clear"></div>
<div class="pagination">
</ul>
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ site.url }}{{ paginator.previous_page_path }}" class="previous">Previous</a>
{% else %}
......@@ -49,5 +51,7 @@ class: blog
{% else %}
<span class="next">Next</span>
{% endif %}
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</section>
......@@ -5,12 +5,15 @@ redirect_from:
- /hosting/
---
<section class="header center">
<section class="hero">
<div class="wrapper">
<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 class="message">
<div class="wrapper">
<div class="left">
<h3>Easy</h3>
<p>
......@@ -37,11 +40,13 @@ redirect_from:
</p>
</div>
<div class="clear"></div>
</div>
</section>
{% assign cloud = site.data.cloud %}
<section>
<section class="plans">
<div class="wrapper">
<table>
<thead>
<tr>
......@@ -73,11 +78,11 @@ redirect_from:
</tbody>
</table>
</div>
</section>
<section class="testimonials">
<ul>
<li class="procempa">
<div class="wrapper">
<div class="left">
<img src="{{ site.url }}/images/testimonials/procempa.jpg" alt="">
</div>
......@@ -92,11 +97,11 @@ redirect_from:
</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</section>
<section class="faq">
<div class="wrapper">
<h2>FAQ</h2>
<ol>
<div class="left">
......@@ -146,4 +151,5 @@ redirect_from:
</div>
<div class="clear"></div>
</ol>
</div>
</section>
......@@ -3,12 +3,15 @@ layout: en/default
class: community
---
<section class="header center">
<section class="hero">
<div class="wrapper">
<h1>Join the Rocket.Chat Community</h1>
<em>Be part of a passionate, global and active open source community</em>
</div>
</section>
<section class="connect">
<div class="wrapper">
<div class="left">
<p>
Rocket.Chat exists today because of the incredible support from the Meteor,
......@@ -31,9 +34,11 @@ class: community
<img src="{{ site.url }}/images/index/community.svg" alt="">
</div>
<div class="clear"></div>
</div>
</section>
<section class="involved">
<div class="wrapper">
<ul>
<li>
<img src="{{ site.url }}/images/community/star.svg" alt="">
......@@ -90,4 +95,5 @@ class: community
</li>
</ul>
<div class="clear"></div>
</div>
</section>
......@@ -3,12 +3,13 @@ layout: en/default
class: contact
---
<section class="header center">
<section class="hero">
<h1>Contact the Rocket.Chat Team</h1>
<em>Feature request, bug, sales enquiry or just share your Rocket.Chat story with us</em>
</section>
<section>
<div class="wrapper">
<div class="left">
<h2>On Rocket.Chat</h2>
<p>
......@@ -20,7 +21,6 @@ class: contact
<li><a href="https://demo.rocket.chat/channel/support" target="_blank">#support</a> Rocket.Chat support channel</li>
</ul>
</div>
<div class="right">
<h2>About Features or Bugs</h2>
<p>
......@@ -33,22 +33,25 @@ class: contact
</ul>
</div>
<div class="clear"></div>
</div>
</section>
<section id="message">
<div class="wrapper">
<h2>Send us a message</h2>
<input onclick="message()" type="button" value="Start Chatting"> or email us at <a href="mailto: contact@rocket.chat" title="contact@rocket.chat" target="_blank">contact@rocket.chat</a>
<input onclick="message()" class="primary" type="button" value="Start Chatting"> or email us at <a href="mailto: contact@rocket.chat" title="contact@rocket.chat" target="_blank">contact@rocket.chat</a>
or <a href="mailto: sales@rocket.chat" title="sales@rocket.chat" target="_blank">sales@rocket.chat</a>
</section>
<section>
<div class="address">
<p>
<h2>Headquarters Address</h2> 2711 Centerville Road, Suite 400 Wilmington, DE 19808, USA
</p>
<p>
<h2>R&amp;D Address</h2> Rua Carvalho Monteiro, 234, Porto Alegre / RS, Brazil
</p>
</div>
</div>
</section>
<!-- Start of Rocket.Chat Livechat Script -->
......
......@@ -3,12 +3,16 @@ layout: en/default
class: partners
---
<section class="header center">
<section class="hero">
<div class="wrapper">
<h1>Rocket.Chat Partners</h1>
<em></em>
<em>Let's work together to improve communication and collaboration</em>
</div>
</section>
<ul class="partners">
<section>
<div class="wrapper">
<ul class="partners">
{% for partner in site.data.partners %}
<li>
<div style="background-image: url('{{ site.url }}{{ partner.logo }}')"></div>
......@@ -17,4 +21,6 @@ class: partners
<a href="{{ partner.website }}">Website</a>
</li>
{% endfor %}
</ul>
</ul>
</div>
</section>
......@@ -3,12 +3,15 @@ layout: en/default
class: press
---
<section class="center">
<section class="hero">
<div class="wrapper">
<h1>Rocket.Chat in the Press</h1>
<em>What people have been saying about us</em>
</div>
</section>
<section class="company">
<div class="wrapper">
<div class="left">
<h2>Company</h2>
<p>
......@@ -30,12 +33,13 @@ class: press
<img src="{{ site.url }}/images/press/logos/512x512.png" alt="Rocket.Chat Logo">
</div>
<div class="clear"></div>
</div>
</section>
<section class="gabriel">
<div class="wrapper">
<div class="left">
<img src="{{ site.url }}/images/team/gabriel-engel/large.jpg" alt="Gabriel Engel">
<img src="{{ site.url }}/images/team/member/gabriel-engel-02.jpg" alt="Gabriel Engel">
</div>
<div class="right">
<h2>Gabriel Engel</h2>
......@@ -49,12 +53,12 @@ class: press
</p>
</div>
<div class="clear"></div>
</div>
</section>
<section class="logos">
<div class="wrapper">
<h2>Logos</h2>
<ul>
{% for logo in site.data.logos %}
<li>
......@@ -73,17 +77,16 @@ class: press
</li>
{% endfor %}
</ul>
<div class="clear"></div>
<br>
<p>
<p class="more">
For more artwork, check out our
<a target="_blank" href="https://github.com/RocketChat/Rocket.Chat.Artwork" target="_blank">Artwork Repository</a>
</p>
<div class="clear"></div>
</div>
</section>
<section class="contact">
<div class="wrapper">
<div class="left">
<h2>In the Press</h2>
<ul>
......@@ -103,4 +106,5 @@ class: press
</p>
</div>
<div class="clear"></div>
</div>
</section>
......@@ -3,12 +3,15 @@ layout: en/default
class: team
---
<section class="header center">
<section class="hero">
<div class="wrapper">
<h1>Team Rocket.Chat</h1>
<em>The core team keeping the rockets firing</em>
</div>
</section>
<section>
<section class="message">
<div class="wrapper">
<div class="left">
<p>
What started simply as a proof of concept code published to GitHub almost
......@@ -25,10 +28,11 @@ class: team
<div class="right">
<img src="{{ site.url }}/images/index/community.svg" alt="">
</div>
<div class="clear"></div>
<div class="clear"></div> </div>
</section>
<section>
<div class="wrapper">
<ul class="team">
{% for member in site.data.team %}
<li>
......@@ -52,4 +56,5 @@ class: team
</li>
{% endfor %}
</ul>
</div>
</section>
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