Commit 61c0561e authored by Sean Packham's avatar Sean Packham

New index hero and simplified css includes

parent 9da8a5e9
......@@ -9,14 +9,14 @@ paginate_path: /blog/page/:num/
paginate: 8
# bump if alterting styles
version: 22
version: 23
# read speed
wpm: 160
# on GitHub project
stars: 14.6
forks: 3.1
stars: 15.3
forks: 3.2
# set default template for posts
defaults:
......
@import "variables";
@import "inlined/layouts/default";
@import "inlined/index";
@import "inlined/download";
<!-- Deferred styles -->
<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="/css/deferred.css?v={{ site.version }}"/>
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
<!-- Deferred styles -->
......@@ -8,13 +8,12 @@
<link rel="canonical" href="{{ page.url | absolute_url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="/feed.xml">
<link rel="shortcut icon" href="/favicon.ico?v=1"/>
{% capture scss %}{% include css/inlined.scss %}{% endcapture %}<style>{{ scss | scssify }}</style>
<link rel="stylesheet" href="/styles.css?v={{ site.version }}">
</head>
<body class="{{ page.class }}">
{{ content }}
{% include livechat.html %}
{% include deferred.html %}
{% include analytics.html %}
</body>
</html>
......@@ -12,7 +12,7 @@ class: index
<li><a {% if page.class == 'download' %}class="active"{%endif%} href="/download">Download</a></li>
<li><a {% if page.class == 'cloud' %}class="active"{%endif%} href="/cloud">Cloud</a></li>
<li><a {% if page.class == 'community' %}class="active"{%endif%} href="/community">Community</a></li>
<li><a {% if page.class == 'docs' %}class="active"{%endif%} href="/docs/">Docs</a></li>
<li><a href="https://rocket.chat/docs/">Docs</a></li>
<li><a {% if page.class == 'blog' %}class="active"{%endif%} href="/blog/">Blog</a></li>
<li><a {% if page.class == 'contact' %}class="active"{%endif%} href="/contact">Contact</a></li>
</ul>
......@@ -27,7 +27,7 @@ class: index
<ul>
<li><a href="/download">Download</a></li>
<li><a href="/cloud">Cloud</a></li>
<li><a href="/docs/">Docs</a></li>
<li><a href="https://rocket.chat/docs/">Docs</a></li>
</ul>
<ul>
<li><a href="/team">Team</a></li>
......
body.download {
.desktop {
width: 55%;
float: left;
li {
width: 33.3%;
}
}
.mobile {
width: 40%;
float: right;
li {
width: 50%;
}
}
.desktop, .mobile {
display: block;
h2 {
margin-bottom: 3em;
text-align: center;
}
img {
width: 44px;
}
a {
display: block;
img {
width: 160px;
height: 40px;
&.itunes {
height: 42px;
margin-top: -1px;
}
}
}
ul {
list-style: none;
padding: 0;
}
li {
float: left;
text-align: center;
div {
height: 60px;
}
}
}
#server {
background-color: $color-dark;
color: #fff;
p {
color: #929db3;
}
.left {
float: left;
width: 500px;
padding: 0 40px;
code {
background-color: #272b33;
color: #fff;
display: block;
padding: 0.75em 1em;
margin-top: 2em;
border: 1px solid #2f343d;
border-radius: 5px;
max-width: 370px;
}
}
.right {
float: right;
width: 40%;
h2 {
text-align: center;
}
a, a:visited {
display: block;
color: #fff;
}
img {
width: 50px;
margin-bottom: 1em;
}
ul {
margin-top: 2em;
list-style: none;
}
li {
text-align: center;
float: left;
width: 33.3%;
padding-top: 1em;
}
}
}
#support {
padding-bottom: 3em;
.header {
text-align: center;
margin-bottom: 9em;
}
h2 {
font-size: 2.2em;
margin-bottom: 10px;
}
}
@media all and (max-width: 900px) {
.server {
padding: 0;
.main {
padding: 4em 2em;
}
.left, .right {
float: none;
width: 100%;
}
.right {
margin-top: 2em;
}
}
.desktop {
margin: 2em 0;
float: none;
width: 100%;
}
.mobile {
margin: 2em 0;
float: none;
width: 100%;
}
}
}
ul, ol {
padding: 0 0 0 1.5em;
margin: 0 0 1.5em;
}
code, pre {
font-family: $code-font-family;
color: $color-light;
}
blockquote {
margin: 2em 0;
font-style: italic;
font-size: 1.25em;
color: $color-dark;
opacity: 0.6;
}
table {
width: 100%;
border-collapse: collapse;
color: $color-dark;
tr {
width: 100%;
border-top: 1px solid #eef0f3;
}
td {
width: 26%;
padding: 0.75em;
border-left: 1px solid #eef0f3;
text-align: center;
}
tr:nth-child(1) {
border: none;
td {
padding: 0 1em 1em;
}
.description {
min-height: 80px;
vertical-align: top;
}
.pricing {
margin-top: 1em;
font-size: 1.25em;
span {
font-size: 1.5em;
font-weight: 600;
color: $color-dark;
}
}
}
td:nth-child(1) {
width: 22%;
border: none;
text-align: left;
}
.seperator {
background: #f7f8fa;
font-size: 1.2em;
font-weight: 600;
}
span.yes:before {
content: '';
height: 3px;
background-color: #26d198;
position: relative;
display: block;
top: 50%;
left: 50%;
width: 9px;
margin-left: -15px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
span.yes:after {
content: '';
height: 3px;
background-color: #26d198;
position: relative;
display: block;
top: 50%;
left: 50%;
width: 20px;
margin-left: -11px;
margin-top: -6px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
footer {
padding: 4em 0 3em;
background-color: $color-dark;
color: #fff;
ul {
width: 25%;
float: left;
padding: 0;
list-style: none;
li {
line-height: 2;
}
}
a, a:visited {
color: #fff;
}
a:hover {
color: #fff;
}
}
.testimonials {
.wrapper {
max-width: 800px;
}
p {
font-size: 16px;
}
.left {
width: 200px;
}
.right {
width: 550px;
}
}
// tablet
@media all and (max-width: 900px) {
.testimonials {
margin: 0;
}
}
// mobile
@media all and (max-width: 600px) {
footer {
ul {
width: 50%;
padding-left: 0;
}
}
}
body.download {
.hero {
background-color: $color-dark;
text-align: center;
color: #fff;
padding-bottom: 6em;
em {
margin-bottom: 2em;
display: block;
font-style: normal;
}
}
.desktop {
width: 55%;
float: left;
li {
width: 33.3%;
}
}
.mobile {
width: 40%;
float: right;
li {
width: 50%;
}
}
.desktop, .mobile {
display: block;
h2 {
margin-bottom: 3em;
text-align: center;
}
img {
width: 44px;
}
a {
display: block;
img {
width: 160px;
height: 40px;
&.itunes {
height: 42px;
margin-top: -1px;
}
}
}
ul {
list-style: none;
padding: 0;
}
li {
float: left;
text-align: center;
div {
height: 60px;
}
}
}
#server {
background-color: $color-dark;
color: #fff;
p {
color: #929db3;
}
.left {
float: left;
width: 500px;
padding: 0 40px;
code {
background-color: #272b33;
color: #fff;
display: block;
padding: 0.75em 1em;
margin-top: 2em;
border: 1px solid #2f343d;
border-radius: 5px;
max-width: 370px;
}
}
.right {
float: right;
width: 40%;
h2 {
text-align: center;
}
a, a:visited {
display: block;
color: #fff;
}
img {
width: 50px;
margin-bottom: 1em;
}
ul {
margin-top: 2em;
list-style: none;
}
li {
text-align: center;
float: left;
width: 33.3%;
padding-top: 1em;
}
}
}
#support {
padding-bottom: 3em;
.header {
text-align: center;
margin-bottom: 9em;
}
h2 {
font-size: 2.2em;
margin-bottom: 10px;
}
}
// tablet
@media all and (max-width: 900px) {
.server {
padding: 0;
.main {
padding: 4em 2em;
}
.left, .right {
float: none;
width: 100%;
}
.right {
margin-top: 2em;
}
}
.desktop {
margin: 2em 0;
float: none;
width: 100%;
}
.mobile {
margin: 2em 0;
float: none;
width: 100%;
}
}
}
<
body.index {
section {
padding-bottom: 9em;
}
.twinkle {
background-color: $color-dark;
}
.hero {
background-color: $color-dark;
text-align: center;
color: #fff;
padding: 0;
.left, .right {
margin-bottom: 3em;
}
.left {
padding-left: 5em;
}
.right {
padding-right: 5em;
}
.wrapper {
padding-bottom: 285px;
background-image: url('../images/index/devices.png');
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
margin-bottom: -12px;
}
h1 {
margin: 1.25em 0 1em;
font-size: 2.75em;
}
}
.focus {
em {
color: $color-primary;
font-style: normal;
font-weight: 600;
}
img {
max-height: 400px;
}
}
.community {
padding-bottom: 3em;
.left {
margin-top: 4em;
}
.github {
margin-top: 2em;
.name, .stars, .forks {
float: left;
}
a, a:visited {
color: $color-dark;
}
a:hover {
color: $color-secondary;
}
svg {
fill: $color-dark;
margin-bottom: -8px;
margin-right: 10px;
}
.name {
display: inline-block;
margin: 4px 50px 0 0;
height: 32px;
line-height: 32px;
font-size: 20px;
font-weight: 600;
}
.stars, .forks {
padding: 0 1.2em;
border-left: 1px solid #fff;
text-transform: uppercase;
font-weight: 800;
text-align: center;
font-size: 0.75em;
.top {
padding-bottom: 0.75em;
margin-bottom: 0.75em;
}
span {
display: block;
font-size: 20px;
line-height: 22px;
font-weight: 600;
}
}
}
}
.features {
ul {
list-style: none;
......@@ -137,8 +250,27 @@ body.index {
}
}
@media all and (max-width: 900px) {
// tablet
@media all and (max-width: 1000px) {
.hero {
padding: 0 1em;
.wrapper {
padding-bottom: 220px;
}
.left, .right {
float: none;
width: 100%;
padding: 0 2em;
}
h1 {
margin-top: 2em;
}
}
.focus {
padding: 3em 0;
}
......@@ -163,5 +295,14 @@ body.index {
}
}