Commit 77f1869b authored by Danilo Woznica's avatar Danilo Woznica

Merge branch 'feat/free-page' of github.com:RocketChat/rocketchat.github.io into feat/free-page

parents 2016697f da2ff121
......@@ -2,34 +2,36 @@
layout: default
---
<header class="app-header {% if page.theme == 'light' %}app-header--light{% else %}app-header--black{% endif %}">
<div class="container">
<h1 class="app-header_logo">
<a href="/">
{% if page.theme == 'light' %}
<img src="/images/default/logo--dark.svg" alt="Rocket.Chat">
{% else %}
<img src="/images/default/logo.svg" alt="Rocket.Chat">
{% endif %}
</a>
</h1>
<div class="app-header {% if page.theme == 'light' %}app-header--light{% else %}app-header--black{% endif %}">
<header class="app-header_wrap">
<div class="container">
<h1 class="app-header_logo">
<a href="/">
{% if page.theme == 'light' %}
<img src="/images/default/logo--dark.svg" alt="Rocket.Chat">
{% else %}
<img src="/images/default/logo.svg" alt="Rocket.Chat">
{% endif %}
</a>
</h1>
<input type="checkbox" id="handle-menu" />
<label class="app-header_handle-menu" for="handle-menu"><span /></label>
<input type="checkbox" id="handle-menu" />
<label class="app-header_handle-menu" for="handle-menu"><span /></label>
<nav class="app-header_menu">
<ul>
<li><a {% if page.class == 'support' %}class="current-page"{%endif%} href="/support">Support</a></li>
<li><a {% if page.class == 'cloud' %}class="current-page"{%endif%} href="/cloud">Cloud</a></li>
<li><a {% if page.class == 'community' %}class="current-page"{%endif%} href="/community">Community</a></li>
<li><a href="https://rocket.chat/docs/">Docs</a></li>
<li><a {% if page.class == 'blog' %}class="current-page"{%endif%} href="/blog/">Blog</a></li>
<li><a {% if page.class == 'contact' %}class="current-page"{%endif%} href="/contact">Contact</a></li>
</ul>
<a class="app-header_download" href="/download"><span><img src="/images/default/download.svg" alt="Download"></span> Download</a>
</nav>
</div>
</header>
<nav class="app-header_menu">
<ul>
<li><a {% if page.class == 'support' %}class="current-page"{%endif%} href="/support">Support</a></li>
<li><a {% if page.class == 'cloud' %}class="current-page"{%endif%} href="/cloud">Cloud</a></li>
<li><a {% if page.class == 'community' %}class="current-page"{%endif%} href="/community">Community</a></li>
<li><a href="https://rocket.chat/docs/">Docs</a></li>
<li><a {% if page.class == 'blog' %}class="current-page"{%endif%} href="/blog/">Blog</a></li>
<li><a {% if page.class == 'contact' %}class="current-page"{%endif%} href="/contact">Contact</a></li>
</ul>
<a class="app-header_download" href="/download"><span><img src="/images/default/download.svg" alt="Download"></span> Download</a>
</nav>
</div>
</header>
</div>
{{ content }}
......
.app-header {
height: 4.3em;
}
.app-header_wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
transition: transform 0.4s ease;
z-index: 9999;
&.headroom--unpinned {
transform: translateY(-100%);
}
.container {
display: flex;
justify-content: space-between;
......@@ -132,11 +147,12 @@
.app-header--black {
background: $space;
.app-header_wrap,
.app-header_menu {
background: $space;
}
&:after {
.app-header_wrap:after {
background-image: linear-gradient(
-90deg,
#030c1a 0%,
......@@ -178,11 +194,14 @@
// Light version
.app-header--light {
background: #fff;
.app-header_wrap,
.app-header_menu {
background: #fff;
}
&:after {
.app-header_wrap:after {
background-image: linear-gradient(
-90deg,
#ffffff 0%,
......
......@@ -267,7 +267,7 @@ body.category {
margin-top: 1.5em;
@media screen and (min-width: $tablet) {
margin-top: 3em;
margin-top: 2em;
}
}
}
......
/*!
* headroom.js v0.9.4 - Give your page some headroom. Hide your header until you need it
* Copyright (c) 2017 Nick Williams - http://wicky.nillia.ms/headroom.js
* License: MIT
*/
!(function(a, b) {
"use strict";
"function" == typeof define && define.amd
? define([], b)
: "object" == typeof exports ? (module.exports = b()) : (a.Headroom = b());
})(this, function() {
"use strict";
function a(a) {
(this.callback = a), (this.ticking = !1);
}
function b(a) {
return a && "undefined" != typeof window && (a === window || a.nodeType);
}
function c(a) {
if (arguments.length <= 0)
throw new Error("Missing arguments in extend function");
var d,
e,
f = a || {};
for (e = 1; e < arguments.length; e++) {
var g = arguments[e] || {};
for (d in g)
"object" != typeof f[d] || b(f[d])
? (f[d] = f[d] || g[d])
: (f[d] = c(f[d], g[d]));
}
return f;
}
function d(a) {
return a === Object(a) ? a : { down: a, up: a };
}
function e(a, b) {
(b = c(b, e.options)),
(this.lastKnownScrollY = 0),
(this.elem = a),
(this.tolerance = d(b.tolerance)),
(this.classes = b.classes),
(this.offset = b.offset),
(this.scroller = b.scroller),
(this.initialised = !1),
(this.onPin = b.onPin),
(this.onUnpin = b.onUnpin),
(this.onTop = b.onTop),
(this.onNotTop = b.onNotTop),
(this.onBottom = b.onBottom),
(this.onNotBottom = b.onNotBottom);
}
var f = {
bind: !!function() {}.bind,
classList: "classList" in document.documentElement,
rAF: !!(
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame
)
};
return (
(window.requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame),
(a.prototype = {
constructor: a,
update: function() {
this.callback && this.callback(), (this.ticking = !1);
},
requestTick: function() {
this.ticking ||
(requestAnimationFrame(
this.rafCallback || (this.rafCallback = this.update.bind(this))
),
(this.ticking = !0));
},
handleEvent: function() {
this.requestTick();
}
}),
(e.prototype = {
constructor: e,
init: function() {
if (e.cutsTheMustard)
return (
(this.debouncer = new a(this.update.bind(this))),
this.elem.classList.add(this.classes.initial),
setTimeout(this.attachEvent.bind(this), 100),
this
);
},
destroy: function() {
var a = this.classes;
this.initialised = !1;
for (var b in a)
a.hasOwnProperty(b) && this.elem.classList.remove(a[b]);
this.scroller.removeEventListener("scroll", this.debouncer, !1);
},
attachEvent: function() {
this.initialised ||
((this.lastKnownScrollY = this.getScrollY()),
(this.initialised = !0),
this.scroller.addEventListener("scroll", this.debouncer, !1),
this.debouncer.handleEvent());
},
unpin: function() {
var a = this.elem.classList,
b = this.classes;
(!a.contains(b.pinned) && a.contains(b.unpinned)) ||
(a.add(b.unpinned),
a.remove(b.pinned),
this.onUnpin && this.onUnpin.call(this));
},
pin: function() {
var a = this.elem.classList,
b = this.classes;
a.contains(b.unpinned) &&
(a.remove(b.unpinned),
a.add(b.pinned),
this.onPin && this.onPin.call(this));
},
top: function() {
var a = this.elem.classList,
b = this.classes;
a.contains(b.top) ||
(a.add(b.top),
a.remove(b.notTop),
this.onTop && this.onTop.call(this));
},
notTop: function() {
var a = this.elem.classList,
b = this.classes;
a.contains(b.notTop) ||
(a.add(b.notTop),
a.remove(b.top),
this.onNotTop && this.onNotTop.call(this));
},
bottom: function() {
var a = this.elem.classList,
b = this.classes;
a.contains(b.bottom) ||
(a.add(b.bottom),
a.remove(b.notBottom),
this.onBottom && this.onBottom.call(this));
},
notBottom: function() {
var a = this.elem.classList,
b = this.classes;
a.contains(b.notBottom) ||
(a.add(b.notBottom),
a.remove(b.bottom),
this.onNotBottom && this.onNotBottom.call(this));
},
getScrollY: function() {
return void 0 !== this.scroller.pageYOffset
? this.scroller.pageYOffset
: void 0 !== this.scroller.scrollTop
? this.scroller.scrollTop
: (
document.documentElement ||
document.body.parentNode ||
document.body
).scrollTop;
},
getViewportHeight: function() {
return (
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight
);
},
getElementPhysicalHeight: function(a) {
return Math.max(a.offsetHeight, a.clientHeight);
},
getScrollerPhysicalHeight: function() {
return this.scroller === window || this.scroller === document.body
? this.getViewportHeight()
: this.getElementPhysicalHeight(this.scroller);
},
getDocumentHeight: function() {
var a = document.body,
b = document.documentElement;
return Math.max(
a.scrollHeight,
b.scrollHeight,
a.offsetHeight,
b.offsetHeight,
a.clientHeight,
b.clientHeight
);
},
getElementHeight: function(a) {
return Math.max(a.scrollHeight, a.offsetHeight, a.clientHeight);
},
getScrollerHeight: function() {
return this.scroller === window || this.scroller === document.body
? this.getDocumentHeight()
: this.getElementHeight(this.scroller);
},
isOutOfBounds: function(a) {
var b = a < 0,
c = a + this.getScrollerPhysicalHeight() > this.getScrollerHeight();
return b || c;
},
toleranceExceeded: function(a, b) {
return Math.abs(a - this.lastKnownScrollY) >= this.tolerance[b];
},
shouldUnpin: function(a, b) {
var c = a > this.lastKnownScrollY,
d = a >= this.offset;
return c && d && b;
},
shouldPin: function(a, b) {
var c = a < this.lastKnownScrollY,
d = a <= this.offset;
return (c && b) || d;
},
update: function() {
var a = this.getScrollY(),
b = a > this.lastKnownScrollY ? "down" : "up",
c = this.toleranceExceeded(a, b);
this.isOutOfBounds(a) ||
(a <= this.offset ? this.top() : this.notTop(),
a + this.getViewportHeight() >= this.getScrollerHeight()
? this.bottom()
: this.notBottom(),
this.shouldUnpin(a, c)
? this.unpin()
: this.shouldPin(a, c) && this.pin(),
(this.lastKnownScrollY = a));
}
}),
(e.options = {
tolerance: { up: 0, down: 0 },
offset: 0,
scroller: window,
classes: {
pinned: "headroom--pinned",
unpinned: "headroom--unpinned",
top: "headroom--top",
notTop: "headroom--not-top",
bottom: "headroom--bottom",
notBottom: "headroom--not-bottom",
initial: "headroom"
}
}),
(e.cutsTheMustard =
"undefined" != typeof f && f.rAF && f.bind && f.classList),
e
);
});
var headroom = new Headroom(document.querySelector(".app-header_wrap"));
headroom.init();
if (document.querySelector("body.download")) {
var selects = document.querySelectorAll(".js-select-download");
......
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