diff options
author | Rasmus Andersson <rasmus@notion.se> | 2018-02-21 23:20:04 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2018-02-21 23:20:04 +0300 |
commit | 2e929794e7095cb9a4552f9a8a53917fcbfe06e6 (patch) | |
tree | eaf5afe1b5015e6bd60798fdd06c95cadd7f49f7 /docs/res | |
parent | bd425b8fb85efebfae31e45b0c30b521ecd82a79 (diff) | |
download | inter-2e929794e7095cb9a4552f9a8a53917fcbfe06e6.tar.xz |
website
Diffstat (limited to 'docs/res')
-rw-r--r-- | docs/res/base.css | 33 | ||||
-rw-r--r-- | docs/res/base.js | 38 |
2 files changed, 69 insertions, 2 deletions
diff --git a/docs/res/base.css b/docs/res/base.css index bf0c440b7..555bf4fa6 100644 --- a/docs/res/base.css +++ b/docs/res/base.css @@ -269,8 +269,8 @@ h1 > a, h2 > a, h3 > a { color: #aaa; } .row.dark a:hover { - color: rgba(160, 190, 255, 1); - text-decoration: underline rgba(164, 188, 255, 0.6); + color: rgb(95, 170, 255); + text-decoration: underline rgb(95, 170, 255); } .row.dark h2, .row.dark h2 > a { color: #ccc; @@ -467,6 +467,35 @@ box h3 { margin-bottom:0.8em; } +#hud-notification { + position: fixed; + bottom: 20px; + left: 0; + right: 0; + display: flex; + justify-content: center; + z-index: 9; + pointer-events: none; +} + #hud-notification .msg { + background: #000; + color: white; + height: 50px; + line-height: 50px; + font-size: 22px; + letter-spacing: -0.012em; + padding: 0 0.7em; + border-radius: 4px; + opacity: 0.1; + transition: 250ms all ease-in; + transform: translate3d(0, 71px, 0); /* height + bottom offset + 1 */ + } + #hud-notification.visible .msg { + transform: translate3d(0, 0, 0); + transition: 120ms all cubic-bezier(0.25, 0.47, 0.44, 0.93); + opacity: 1; + } + /* ------------------------------------------------------ */ diff --git a/docs/res/base.js b/docs/res/base.js index 3ef970cc3..859b8d56f 100644 --- a/docs/res/base.js +++ b/docs/res/base.js @@ -48,6 +48,44 @@ var timeNow = ( ) +var HUDNotification = { + el: $('#hud-notification'), + timer: null, + visible: false, + + show: function(message, duration) { + var n = this + n.el.firstChild.innerText = message + n.el.classList.add('visible') + if (n.visible) { + n.hide() + setTimeout(function(){ n.show(message, duration) }, 120) + return + } + n.visible = true + clearTimeout(n.timer) + n.timer = setTimeout(function(){ n.hide() }, duration || 1200) + }, + + hide: function() { + var n = this + if (n.visible) { + n.el.classList.remove('visible') + n.visible = false + } + } +} + + +// InterUIDynamicTracking takes the font size in points or pixels and returns +// the compensating tracking in EM. +// +function InterUIDynamicTracking(fontSize) { + // tracking = a + b * e ^ (c * fontSize) + return -0.016 + 0.21 * Math.pow(Math.E, -0.18 * fontSize) +} + + // Mac or not? Maybe even a buggy Safari? var isMac = false if (!window.MSStream && |