Commit ccd08742 authored by Danilo Woznica's avatar Danilo Woznica

feat(Support): Styling page

parent fb069b39
......@@ -233,7 +233,6 @@ PLATFORMS
DEPENDENCIES
github-pages
jekyll-watch
BUNDLED WITH
1.16.1
keys:
description:
pricing: <span id="pricing">Pricing <small>(per one thousand monthly active users)</small></span>
onpremise: On-premise
cloud: Rocket.Chat Cloud
sla: Support SLA
critical: Critical business impact
normal: Normal business impact
minimum: Minimal business impact
contact: Contact
resources: Self-help resources
ticket: Online ticket creation
email: Email support
chat: 24/7 chat support
phone: 24/7 phone support
extras: Extras
onboarding: Account onboarding
migration: Migration assistance
access: Direct access to product team
basic:
name: Basic
description: |
<div class="description">
For smaller teams who need basic support and help in case of emergencies
</div>
<a class="button secondary" href="/contact/">Contact Us</a>
onpremise: <div class="pricing">From <span>$525</span>/month</div>
cloud: <div class="pricing">Included</div>
critical: 1 hour
normal: 12 hours
minimum: 2 business days
resources: <span class="yes"></span>
ticket: <span class="yes"></span>
email:
chat:
phone:
onboarding:
migration:
access:
premium:
name: Premium
description: |
<div class="description">
For larger teams who need a quicker response and 24/7 phone support
</div>
<a class="button secondary" href="/contact/">Contact Us</a>
onpremise: <div class="pricing">From <span>$1275</span>/month</div>
cloud: <div class="pricing">From <span>$749</span>/month</div>
critical: 30 minutes
normal: 8 hours
minimum: 1 business day
resources: <span class="yes"></span>
ticket: <span class="yes"></span>
email: <span class="yes"></span>
chat: <span class="yes"></span>
phone: <span class="yes"></span>
onboarding: <span class="yes"></span>
migration: <span class="yes"></span>
access: <span class="yes"></span>
keys:
description:
pricing: <span id="pricing">Preços</span>
onpremise: Local
cloud: Rocket.Chat Cloud
sla: Suporte SLA
critical: Impacto administrativo crítico
normal: Impacto administrativo normal
minimum: Impacto administrativo mínimo
contact: Contato
resources: Recursos de auto-ajuda
ticket: Geração de ticket online
email: Suporte por email
chat: Suporte por chat 24/7
phone: Suporte por telefone 24/7
extras: Extras
onboarding: Onboarding de contas
migration: Assitência em migrações
access: Acesso direto ao time de produto
basic:
name: Básico
description: |
<div class="description">
Para times menores que precisam de suporte básico e ajuda em caso de emergências
</div>
<a class="button secondary" href="/contact/">Entre em Contato</a>
onpremise: <div class="pricing">A partir de <span>$525</span>/mês</div>
cloud: <div class="pricing">Incluso</div>
critical: 1 hora
normal: 12 horas
minimum: 2 dias úteis
resources: <span class="yes"></span>
ticket: <span class="yes"></span>
email:
chat:
phone:
onboarding:
migration:
access:
premium:
name: Premium
description: |
<div class="description">
Para times maiores que precisam de respostas rápidas e suporte por telefone 24/7
</div>
<a class="button secondary" href="/contact/">Entre em Contato</a>
onpremise: <div class="pricing">A partir de <span>$1275</span>/mês</div>
cloud: <div class="pricing">A partir de <span>$749</span>/mês</div>
critical: 30 minutos
normal: 8 horas
minimum: 1 dia útil
resources: <span class="yes"></span>
ticket: <span class="yes"></span>
email: <span class="yes"></span>
chat: <span class="yes"></span>
phone: <span class="yes"></span>
onboarding: <span class="yes"></span>
migration: <span class="yes"></span>
access: <span class="yes"></span>
......@@ -29,6 +29,7 @@
<button disabled class="button--text">Button disabled</button>
<a class="button--text" href="">Link element</a>
<a class="button--text disabled" href="">Link disabled</a>
<a class="button--text button--with-arrow" href="">.button--with-arrow {}</a>
</p>
<h2 class="display--small">Tags — Light Background</h2>
......
......@@ -7,7 +7,7 @@
<h1 class="display">Card with grid component</h1>
<section class="container" style="padding: 2em; background: #030c1a; margin-bottom: 2em;">
<section class="container theme_box--space" style="padding: 2em; margin-bottom: 2em;">
<p class="theme_type--dark">.flex-grid {}</p>
<div class="flex-grid">
<div class="col">
......@@ -65,4 +65,35 @@
</div>
</div>
</div>
</section>
\ No newline at end of file
</section>
<h1 class="display">Table</h1>
<div class="flex-grid">
<div class="col theme_box--space" style="padding: 2em">
<table class="table--dark">
<tr>
<th colspan="2">rocket.chat cloud</th>
</tr>
<tr>
<td>
Critical business impact <strong>1 hour</strong>
</td>
<td>
Column
</td>
</tr>
<tr>
<th colspan="2">rocket.chat cloud</th>
</tr>
<tr>
<td>
Column
</td>
<td>
Column
</td>
</tr>
</table>
</div>
</div>
\ No newline at end of file
......@@ -105,4 +105,8 @@
<h2 class="tag theme_type--grey theme_box--space">Rocket.Chat</h2>
<p>.tag {}</p>
</div>
</div>
\ No newline at end of file
</div>
<h2 class="display--small">Helpers</h2>
<h3 class="display">.align--center {}</h3>
<p class="align--center">Occaecat nulla adipisicing pariatur cupidatat quis aliqua ad deserunt. Amet consectetur dolore aute exercitation proident eu aliqua qui nostrud. Aliquip elit aute id consectetur sint ullamco officia dolor exercitation mollit nisi tempor. Aliqua est non ex enim nulla velit duis est incididunt. Ea reprehenderit qui dolor consectetur aute aliqua incididunt nostrud cupidatat incididunt sint elit eiusmod. Do tempor ex aliqua cupidatat.</p>
\ No newline at end of file
......@@ -19,7 +19,7 @@
{% include gtm/head.html %}
</head>
<body class="{{ page.class }}">
<body class="{{ page.class }} {{ page.theme }}">
{% include gtm/body.html %}
{{ content }}
<script src="/main.js"></script>
......
......@@ -7,4 +7,9 @@
padding-top: 5em;
height: 70vh;
}
p {
max-width: 26em;
display: inline-block;
}
}
body.download {
background: $space;
}
.download-apps {
margin-bottom: 5em;
......
body.index {
background: $space;
}
//
// Hero section
//
......@@ -34,11 +30,11 @@ body.index {
position: absolute;
right: 0;
top: 8em;
height: calc(70vh - 10em);
height: calc(70vh - 6em);
}
@media screen and (min-width: 75em) {
height: calc(90vh - 10em);
height: calc(90vh - 6em);
}
}
......
......@@ -80,6 +80,8 @@
@include reset;
@include defaultStyle;
@include disabledStyle;
padding: 0;
font-weight: 600;
&:hover {
color: $brand-dark;
......@@ -95,6 +97,44 @@
}
}
.button--with-arrow {
position: relative;
padding-right: 2em;
&:before {
content: "";
display: block;
border-top: 1px solid $brand;
width: 1em;
position: absolute;
top: 0.6em;
right: 0.1em;
}
&:after {
content: "";
display: block;
width: 0.5em;
height: 0.5em;
border-right: 1px solid $brand;
border-bottom: 1px solid $brand;
transform: rotate(-45deg);
position: absolute;
top: 0.4em;
right: 0;
}
&:hover {
&:before {
border-top: 1px solid $brand-dark;
}
&:after {
border-right: 1px solid $brand-dark;
border-bottom: 1px solid $brand-dark;
}
}
}
.button--tags {
@include reset;
@include defaultStyle;
......
......@@ -16,38 +16,62 @@
@media (min-width: $tablet) {
display: flex;
margin-left: -$gutter / 2;
margin-right: -$gutter / 2;
margin-left: -$gutter-larger / 2;
margin-right: -$gutter-larger / 2;
}
&.grid--justify-around {
justify-content: space-around;
}
}
@mixin column {
margin-bottom: 1em;
@mixin column {
margin-bottom: $gutter-larger;
@media (min-width: $tablet) {
flex: 1;
padding-left: $gutter / 2;
padding-right: $gutter / 2;
@media (min-width: $tablet) {
flex: 1;
padding-left: $gutter-larger / 2;
padding-right: $gutter-larger / 2;
}
&.no-margin {
margin-bottom: 0;
}
}
&.no-margin {
margin-bottom: 0;
.col {
@include column;
}
}
.col {
@include column;
}
.col--haft {
@include column;
.col--third {
@include column;
@media (min-width: $tablet) {
max-width: 50%;
}
}
@media (min-width: $tablet) {
max-width: 33%;
.col--third {
@include column;
@media (min-width: $tablet) {
max-width: 33%;
}
}
.col--fourth {
@include column;
@media (min-width: $tablet) {
max-width: 25%;
}
}
.col--three-quarter {
@include column;
@media (min-width: $tablet) {
max-width: 75%;
}
}
}
......@@ -56,9 +80,42 @@
margin-left: -$gutter / 2;
margin-right: -$gutter / 2;
.col {
@media (min-width: $tablet) {
margin-left: -$gutter-larger / 2;
margin-right: -$gutter-larger / 2;
}
@mixin column {
flex: 1;
padding-left: $gutter / 2;
padding-right: $gutter / 2;
padding-left: $gutter-larger / 2;
padding-right: $gutter-larger / 2;
@media (min-width: $tablet) {
padding-left: $gutter-larger / 2;
padding-right: $gutter-larger / 2;
}
&.no-margin {
margin-bottom: 0;
}
}
.col {
@include column;
}
.col--haft {
@include column;
max-width: 50%;
}
.col--third {
@include column;
max-width: 33%;
}
.col--fourth {
@include column;
max-width: 25%;
}
}
.table--dark {
overflow: auto;
margin-left: -$gutter;
margin-right: -$gutter;
padding-left: $gutter;
@media screen and (min-width: $tablet) {
margin-left: 0;
margin-right: 0;
padding-left: 0;
}
table {
width: 100%;
color: $grey-light;
}
th {
background: $space-grey;
color: $grey-light;
font-size: 0.6em;
text-transform: uppercase;
letter-spacing: 0.8px;
line-height: 1.2;
padding: 1em 3.2em;
text-align: left;
}
td {
padding: 2em;
border: 1px solid $space-grey;
width: 50%;
vertical-align: top;
min-width: 14em;
}
strong {
color: #fff;
}
img {
display: inline-block;
margin-right: 0.5em;
}
p {
margin-bottom: 1em;
}
p:last-child {
margin-bottom: 0;
}
}
body.dark {
background: $space;
}
body.light {
background: #fff;
}
.theme_type--brand {
color: $brand;
}
......
......@@ -36,6 +36,7 @@ pre {
line-height: 1.4;
letter-spacing: 0.5px;
color: $space;
font-weight: 600;
@media screen and (min-width: $tablet) {
font-size: 1.25em;
......@@ -119,3 +120,12 @@ strong {
.display--small + .button {
margin-top: 2.5em;
}
// Helpers
.align--center {
text-align: center;
}
.type--nomargin {
margin-bottom: 0 !important;
}
......@@ -26,5 +26,5 @@ $tranitions: 0.3s ease;
// 4. Breackpoints
$gutter: 1em; // 32px;
$gutter-larger: 2em; // 16px;
$container: 70em; // 1120px;
$container: 74em; // 1184px;
$tablet: 48.1em; // 768px;
......@@ -8,6 +8,8 @@ description: |
permalink: /download
theme: dark
redirect_from:
- /installation
- /installation/
......@@ -137,7 +139,7 @@ redirect_from:
<div class="flex-grid grid--justify-around">
<div class="col--third">
<h3 class="display--small theme_type--dark"><strong>Server Snap</strong></h3>
<h3 class="display--small theme_type--dark">Server Snap</h3>
<p class="theme_type--grey">Snaps are an easy and secure way to install and manage apps and their dependencies.</p>
<br />
<p class="label theme_type--dark">On a Snaps enabled system run</p>
......@@ -145,7 +147,7 @@ redirect_from:
</div>
<div class="col--third">
<h3 class="display--small theme_type--dark"><strong>Server Source</strong></h3>
<h3 class="display--small theme_type--dark">Server Source</h3>
<p class="theme_type--grey">Something can say here about how server source that can be helpful to the users.</p>
<br />
<p class="label theme_type--dark">Select version</p>
......
<svg width="18" height="14" viewBox="0 0 18 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>check</title><desc>Created with Sketch.</desc><defs><path id="a" d="M0 0h24v24h-24z"/></defs><g transform="translate(-3 -5)" fill="none"><mask id="b"><use xlink:href="#a"/></mask><path stroke="#1D74F5" stroke-width="2" stroke-linecap="square" mask="url(#b)" d="M19 7l-9.817 10-4.183-5"/></g></svg>
\ No newline at end of file
---
layout: en/default
class: index
theme: dark
redirect_from:
- /services
......
......@@ -8,6 +8,7 @@
@import "ui/grid";
@import "ui/buttons";
@import "ui/form";
@import "ui/table";
@import "ui/header";
@import "ui/footer";
......
This diff is collapsed.
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