deblan-mirror/vanilla-tilt.js
deblan-mirror/vanilla-tilt.js
1
0
Fork 0
mirror of https://github.com/micku7zu/vanilla-tilt.js synced 2024-06-28 01:50:02 +02:00
Code Issues Projects Releases Wiki Activity
vanilla-tilt.js/index.html
micku7zu 037406962c Fix text on landing page
2017-01-28 22:07:25 +02:00

3048 lines
91 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- copyright http://gijsroge.github.io/tilt.js/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vanilla-tilt.js</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed" rel="stylesheet">
<meta name="description"
content="vanilla-tilt.js, a small easy to use 60+fps requestAnimationFrame powered parallax tilt effect without any dependencies inspired by Tilt.js. ">
<style>
@charset "UTF-8";
/*
* Settings
* used with preprocessors and contain font, colors definitions, etc.
*/
/*
* Project Settings
* ---
* Tweak default variables from '_settings.default.scss' to suit your project needs
*/
/*
* Base typographical styles and baseline grid.
*/
/**
* Font family's
*/
/**
* Font weights
*/
/**
* Font sizes
*/
/*
* Default Settings
* ---
* Only override the !default variables in '_settings.project.scss' to suit your project needs
*/
/*
* Base typographical styles and baseline grid.
*/
/**
* Font family's
*/
/**
* Font weights
*/
/**
* Font sizes
*/
/**
* Debug mode
*/
/*
* Spacing values are determined based on your project’s global line height (i.e
* your baseline grid). It is not recommended that you modify these following
* variables (it can break your vertical rhythm), but if you need to, you can.
*/
/**
* Wrapper
*/
/*
* How many times larger/smaller than the default should our spacing unit
* variants be?
*/
/**
* z-index levels
*/
/**
* Bootstrap grid
*/
/**
* Grid containers
*
* Define the maximum width of `.container` for different screen sizes.
*/
/**
* Grid columns
*
* Set the number of columns and specify the width of the gutters.
*/
/*
* Settings: Colors
* ---
* Every color that is being used should be defined here.
* Based on : http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
*/
/*
* Easing settings
* ---
* All easings from http://easings.net/nl
*/
/*
* Tools
* Globally used mixins and functions. It’s important not to output any
* CSS in the first 2 layers.
*/
/*
* Tools: Mixins
* ---
* Global mixins available to the entire project.
* Define file-specific mixins inside the file to which they relate.
*/
/**
* Generate a font-size and baseline-compatible line-height.
*
* Usage: @include(font size in pixels, optionaly you can specify a specific line-height);
*/
/**
* Mixin to create a declaration whose value is a rem unit. Also provide pixel fallback
*
* Usage: @include rem(padding, 10px);
*/
/*
* Utilities: Underline
* ---
* Usage: @include underline(currentColor, )
*/
/**
* Hide elements in an accessible way
*
* Usage: @include visually-hidden();
*/
/**
* Clear floats
*
* Usage: @include clearfix();
*/
/**
* Prevent long URL’s from breaking out of container.
*
* Usage: @include word-break();
*/
/**
* Hide text in an accessible way.
*
* Usage: @include hide-text();
*/
/**
* Center align a block-level element
*/
/*
* Tools: Functions
* ---
* Functions that you can use during the theming process.
*/
/**
* Convert any px value into its rem equivalent.
*
* Usage: rem(number);
*/
/**
* Convert any px value into its em equivalent.
*
* Usage: em(number);
*/
/**
* Math functions. Very usefull to stay on baseline grid
*/
/**
* The palette function works with a base color and a tint.
* Reads from '_settings.colors.scss'
*
* Usage: palette(color-alpha,base)
*/
/**
* The index function returns a z-index value based on your
* $z-indexes map.
*
* Usage: z-index(key);
*/
/*
* Tools: Debug
* ---
* Enables a set of debug styles to visualize issues.
*/
/*
* Generic
* Reset and/or normalize styles, box-sizing definition, etc. This is the
* first layer which generates actual CSS.
*/
/*
* Generic: box-sizing
* ---
* Set a better box model as default
*/
html {
box-sizing: border-box; }
*, *:before, *:after {
box-sizing: inherit; }
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif;
/* 1 */
line-height: 1.15;
/* 2 */
-ms-text-size-adjust: 100%;
/* 3 */
-webkit-text-size-adjust: 100%;
/* 3 */ }
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0; }
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block; }
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main {
/* 1 */
display: block; }
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px; }
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */ }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */ }
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0; }
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */ }
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit; }
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder; }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic; }
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000; }
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sub {
bottom: -0.25em; }
sup {
top: -0.5em; }
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block; }
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none; }
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden; }
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */ }
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible; }
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none; }
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */ }
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */ }
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */ }
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto; }
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */ }
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */ }
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details,
menu {
display: block; }
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item; }
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block; }
/**
* Add the correct display in IE.
*/
template {
display: none; }
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none; }
/*
* Generic: Reset
* ---
* A very simple reset that sits on top of Normalize.css.
*/
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
form, fieldset, legend,
figure,
hr {
margin: 0;
padding: 0; }
/**
* Remove trailing margins from nested lists.
*/
li > ul,
li > ol {
margin-bottom: 0; }
/**
* Remove default table spacing.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
/*
* Generic: Shared
* ---
* Shared declarations for certain elements.
*/
/**
* Always declare margins in the same direction:
* csswizardry.com/2012/06/single-direction-margin-declarations
*/
h1, h2, h3, h4, h5, h6,
ul, ol, dl,
blockquote, p, address,
hr,
table,
fieldset, figure,
pre {
margin-bottom: 1em; }
ul, ol,
dd {
margin-left: 2em; }
ul:last-child, ol:last-child,
dd:last-child {
margin-bottom: 0; }
/*
* Elements
* Styling for bare HTML elements (like H1, A, etc.). These come with default
* styling from the browser so we can redefine them here.
*/
/*
* Elements: page
* ---
* Simple page-level setup.
*/
/**
* 1. Set the default `font-size` and `line-height` for the entire project,
* sourced from our default variables. The `font-size` is calculated to exist
* in ems, the `line-height` is calculated to exist unitlessly.
* 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
* navigating between pages that do/do not have enough content to produce
* scrollbars naturally.
* 3. Ensure the page always fills at least the entire height of the viewport.
*/
html {
font-size: 1.125em;
/* [1] */
line-height: 2;
/* [1] */
overflow-y: scroll;
/* [2] */
min-height: 100%;
/* [3] */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #333; }
/*
* Elements: Headings
* ---
* We have all of our heading font sizes defined here. Passing these pixel
* values into our `font-size()` mixin will generate a rem-based
* `font-size` with a pixel fallback, as well as generating a `line-height` that
* will sit on our baseline grid.
*/
h1 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 2rem;
line-height: 1.5; }
h2 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1.55556rem;
line-height: 1.5; }
h3 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1.33333rem;
line-height: 1.5; }
h4 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1.11111rem;
line-height: 1.5; }
h5 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
line-height: 1.5; }
h6 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 0.88889rem;
line-height: 1.5; }
/*
* Images
* ---
* Default styles for images
*/
/**
* 1. Fluid images for responsive purposes.
* 2. Offset `alt` text from surrounding copy.
* 3. Setting `vertical-align` removes the whitespace that appears under `img`
* elements when they are dropped into a page as-is. Safer alternative to
* using `display: block;`.
*/
img {
max-width: 100%;
/* [1] */
font-style: italic;
/* [2] */
vertical-align: middle;
/* [3] */ }
/**
* 1. Google Maps breaks if `max-width: 100%` acts upon it; use their selector
* to remove the effects.
* 2. If a `width` and/or `height` attribute have been explicitly defined, let’s
* not make the image fluid.
*/
.gm-style img,
img[width],
img[height] {
/* [2] */
max-width: none; }
/*
* Form
* ---
* Default styles for form elements
*/
label {
display: block; }
.c-input {
display: inline-block;
vertical-align: middle;
font: inherit;
margin: 0;
cursor: pointer;
overflow: visible;
padding: 8px;
border: 1px solid black; }
/*
* Vendors
*/
/**
* GHColors theme by Avi Aryan (http://aviaryan.in)
* Inspired by Github syntax coloring
*/
code[class*="language-"],
pre[class*="language-"] {
color: #393A34;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
font-size: 0.95em;
line-height: 1.2em;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none; }
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
background: #b3d4fc; }
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
background: #b3d4fc; }
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
overflow: auto;
background: #f8f8f8; }
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .2em;
padding-top: 1px;
padding-bottom: 1px;
background: #f8f8f8;
border: 1px solid #dddddd; }
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999988;
font-style: italic; }
.token.namespace {
opacity: .7; }
.token.string,
.token.attr-value {
color: #e3116c; }
.token.punctuation,
.token.operator {
color: #393A34;
/* no highlight */ }
.token.entity,
.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.property,
.token.regex,
.token.inserted {
color: #36acaa; }
.token.atrule,
.token.keyword,
.token.attr-name,
.language-autohotkey .token.selector {
color: #00a4db; }
.token.function,
.token.deleted,
.language-autohotkey .token.tag {
color: #9a050f; }
.token.tag,
.token.selector,
.language-autohotkey .token.keyword {
color: #00009f; }
.token.important,
.token.function,
.token.bold {
font-weight: bold; }
.token.italic {
font-style: italic; }
/*
* Objects
* Class-based selectors which define undecorated design patterns, for example
* media object known from OOCSS
*/
/*
* Object: Wrapper
* ---
* Class to wrap content
*/
.o-wrapper {
max-width: 1600px; }
@media (max-width: 1690px) {
.o-wrapper {
padding-left: 90px !important;
padding-right: 90px !important;
max-width: 100%; } }
/**
* Center wrapper
*/
.o-wrapper--center {
margin-left: auto;
margin-right: auto; }
/*
* Object: Gutter
* ---
* Object to set gutters on grid items
*/
.o-gutter {
margin-left: -36px;
margin-bottom: -36px; }
.o-gutter > .o-gutter__item {
padding-left: 36px;
padding-bottom: 36px; }
.o-gutter-tiny {
margin-left: -9px;
margin-bottom: -9px; }
.o-gutter-tiny > .o-gutter__item {
padding-left: 9px;
padding-bottom: 9px; }
.o-gutter-small {
margin-left: -18px;
margin-bottom: -18px; }
.o-gutter-small > .o-gutter__item {
padding-left: 18px;
padding-bottom: 18px; }
.o-gutter-medium {
margin-left: -63px;
margin-bottom: -63px; }
.o-gutter-medium > .o-gutter__item {
padding-left: 63px;
padding-bottom: 63px; }
.o-gutter {
margin-left: -36px;
margin-bottom: -36px; }
.o-gutter > .o-gutter__item {
padding-left: 36px;
padding-bottom: 36px; }
.o-gutter-large {
margin-left: -90px;
margin-bottom: -90px; }
.o-gutter-large > .o-gutter__item {
padding-left: 90px;
padding-bottom: 90px; }
.o-gutter-huge {
margin-left: -144px;
margin-bottom: -144px; }
.o-gutter-huge > .o-gutter__item {
padding-left: 144px;
padding-bottom: 144px; }
.o-gutter-none {
margin-left: 0;
margin-bottom: 0; }
.o-gutter-none > .o-gutter__item {
padding-left: 0;
padding-bottom: 0; }
/**
* Gutter variation that only renders
*/
.o-gutter--edges-only {
margin-bottom: 0; }
.o-gutter--edges-only > .o-gutter__item {
padding-bottom: 0; }
/*
* Objects: List
* ---
* Simple unordered list
*/
.o-list--reset {
list-style: none;
padding: 0;
margin-left: 0; }
/*
* Object: List inline
* ---
* The list-inline object simply displays a list of items in one line.
*/
.o-list-inline {
margin: 0;
padding: 0;
list-style: none; }
.o-list-inline > li {
display: inline-block; }
.o-list-inline--spaced > li:not(:last-child) {
margin-right: 18px; }
/*
* Page layout
* ---
*/
body, html {
min-height: 100%; }
aside {
padding: 8em 5em 8em 8em; }
main {
border-left: 1px solid #ededed;
padding: 8em 0;
padding-bottom: 0;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto; }
main > * {
padding-left: 5em;
padding-right: 5em; }
main > *:not(article) {
margin-bottom: 5em; }
/*
* Components
* Specific UI components. This is where majority of our work takes place and
* our UI components are often composed of Objects and Components
*/
/*
* Components: Buttons
* ---
* Collection of buttons
*/
.c-button {
display: inline-block;
vertical-align: middle;
font: inherit;
text-align: center;
margin: 0;
cursor: pointer;
overflow: visible;
padding: 9px 36px;
margin-bottom: 9px;
border: none;
/* [4] */ }
/*
* Components: Buttons
* ---
* Collection of buttons
*/
.c-logo {
width: 200px;
height: 200px;
background-color: #7e56ff;
background-image: -webkit-linear-gradient(300deg, #5a00ff 0%, #ff1ff7 100%, #ff1ff7 100%);
background-image: linear-gradient(150deg, #5a00ff 0%, #ff1ff7 100%, #ff1ff7 100%);
box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: white;
font-size: 2.2rem;
line-height: 1.26316;
text-decoration: none;
font-weight: 300;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: perspective(500px);
transform: perspective(500px);
position: relative; }
.c-logo:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #333;
box-shadow: 0 20px 70px -10px rgba(51, 51, 51, 0.7), 0 50px 100px 0 rgba(51, 51, 51, 0.2);
z-index: -1;
-webkit-transform: translateZ(-50px);
transform: translateZ(-50px); }
.c-logo > span {
display: block;
-webkit-transform: translateZ(50px) scale(0.7);
transform: translateZ(50px) scale(0.7); }
.c-logo:hover:after {
-webkit-transform: translateZ(-100px);
transform: translateZ(-100px); }
.c-logo .backdrop {
width: 70%;
height: 70%;
border-radius: 50%;
position: absolute;
background-image: -webkit-linear-gradient(300deg, #5a00ff 0%, #1fff73 100%, #1fff73 100%);
background-image: linear-gradient(150deg, #5a00ff 0%, #1fff73 100%, #1fff73 100%);
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
opacity: 0;
-webkit-transition: 3s;
transition: 3s; }
/*
* Components: Example
* ---
*/
.c-example {
padding-top: 5em;
padding-bottom: 5em;
border-top: 1px solid #ededed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start; }
.c-example:last-of-type {
border-bottom: 1px solid #ededed; }
.c-example__demo {
-webkit-box-flex: 0;
-ms-flex: 0 1 15%;
flex: 0 1 15%;
min-width: 100px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.c-example__info {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-ms-flex-item-align: center;
align-self: center;
margin-left: 5em; }
.c-example__tilt {
width: 100%;
height: 150px;
display: block;
background-color: #9e21ff;
background-image: -webkit-linear-gradient(315deg, #ed21ff 0%, #9e21ff 100%, #9e21ff 100%);
background-image: linear-gradient(135deg, #ed21ff 0%, #9e21ff 100%, #9e21ff 100%);
box-shadow: 0 3px 47px rgba(0, 0, 0, 0.2); }
.c-example:nth-child(2) .c-example__tilt {
background-image: -webkit-linear-gradient(315deg, #ff008a 0%, #101c25 100%);
background-image: linear-gradient(135deg, #ff008a 0%, #101c25 100%); }
.c-example:nth-child(3) .c-example__tilt {
background-image: -webkit-linear-gradient(315deg, #ff00ba 0%, #fae713 100%);
background-image: linear-gradient(135deg, #ff00ba 0%, #fae713 100%); }
.c-example:nth-child(4) .c-example__tilt {
background-image: -webkit-linear-gradient(315deg, #b118ac 0%, #26c7da 100%);
background-image: linear-gradient(135deg, #b118ac 0%, #26c7da 100%); }
.c-example__output {
max-height: 200px;
overflow-y: auto;
margin: 0;
padding: 1em 2em;
background-color: #f8f8f8;
list-style: none; }
.c-example__output:empty {
display: none; }
/*
* Utilities
* Utilities and helper classes with ability to override anything which goes
* before in the triangle, eg. hide helper class
*/
/*
* @define utilities
* Vertical alignment utilities
* Depends on an appropriate `display` value.
*/
.u-align-baseline {
vertical-align: baseline !important; }
.u-align-bottom {
vertical-align: bottom !important; }
.u-align-middle {
vertical-align: middle !important; }
.u-align-top {
vertical-align: top !important; }
/**
* @define utilities
* Display-type utilities
*/
.u-block {
display: block !important; }
.u-inline {
display: inline !important; }
.u-inline-block {
display: inline-block !important; }
.u-table {
display: table !important; }
.u-table-cell {
display: table-cell !important; }
.u-table-row {
display: table-row !important; }
/*
* Utilities: Hide
* ---
* Set of helper classes to hide content in various ways
*/
/**
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.u-hidden-visually {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }
/**
* Hide visually and from screen readers.
*/
.u-hidden {
display: none !important; }
/*
* Utilities: Font sizes
* ---
* A set of font sizing helper classes
*/
.u-font-tiny {
font-size: 0.66667rem;
line-height: 3; }
.u-font-small {
font-size: 0.88889rem;
line-height: 2.25; }
.u-font-default {
font-size: 1rem;
line-height: 2; }
.u-font-large {
font-size: 1.22222rem;
line-height: 2; }
.u-font-huge {
font-size: 1.55556rem;
line-height: 1.28571; }
/*
* Utilities: Print
* ---
* Predefined print styles to have a decent default
*/
@media print {
*,
*:before,
*:after,
*:first-letter,
*:first-line {
background: transparent !important;
color: #000 !important;
/* Black prints faster: http://www.sanbeiji.com/archives/953 */
box-shadow: none !important;
text-shadow: none !important; }
a,
a:visited {
text-decoration: underline; }
a[href]:after {
content: " (" attr(href) ")"; }
abbr[title]:after {
content: " (" attr(title) ")"; }
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: ""; }
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid; }
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group; }
tr,
img {
page-break-inside: avoid; }
img {
max-width: 100% !important; }
p,
h2,
h3 {
orphans: 3;
widows: 3; }
h2,
h3 {
page-break-after: avoid; } }
/*
* Helpers flexbox
* ---
* A set of helper classes used in combination with flexbox
*/
/* FLEX.css */
/* DECLARATION ---------------------------------------------------------------
/* FLEX CONTAINER ( SET )
Summary: make the elements inside a <tag> flow with flexbox by setting the
tag's display property to 'flex'.
Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_flexbox_to_lay_out_web_applications
*/
.u-flex-set {
/* MID: IE 10 */
/* OLD: Safari, iOS, Android browser, older WebKit browsers. */
/* NEW, Chrome 21–28, Safari 6.1+ */
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important; }
.u-inline-flex-set {
/* MID: IE 10 */
/* OLD: Safari, iOS, Android browser, older WebKit browsers. */
/* NEW, Chrome 21–28, Safari 6.1+ */
display: -webkit-inline-box !important;
display: -ms-inline-flexbox !important;
display: inline-flex !important; }
/* FLEX ITEM
Summary: a shorthand property specifying the ability of a flex item to alter
its dimensions to fill available space. Summarizes {flex-grow, flex-shrink, flex-basis }
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Default: 0 1 0 !important;
*/
.u-flexed-item {
-webkit-box-flex: 1 !important;
-ms-flex: 1 1 0 !important;
flex: 1 1 0 !important;
/* VERY OLD Safari, iOS */
box-flex: 1 !important; }
.u-flex--no-shrink {
-ms-flex-negative: 0 !important;
flex-shrink: 0 !important; }
.u-flexed-item--auto {
-webkit-box-flex: 1 !important;
-ms-flex: 1 1 auto !important;
flex: 1 1 auto !important;
/* VERY OLD Safari, iOS */
box-flex: 1 !important; }
/* DIRECTION ( ORIENTATION ) -------------------------------------------------
Summary: specifies how flex items are placed in the flex container defining
the main axis and the direction (normal or reversed).
Options:
Column: set main axis to vertical
Row : set main axis to horizontal
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
Default: flex-direction: row !important;
*/
.u-flex--column {
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: column !important;
flex-direction: column !important; }
.u-flex--row {
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: row !important;
flex-direction: row !important; }
/* JUSTIFICATION (Main axis) ------------------------------------------------
Summary: defines how the browser distributes space between and around flex
items along the main-axis of their container.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
Default: justify-content: flex-start !important;
*/
/* Pack items around the center */
.u-flex--content-center {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important; }
/* Pack flex items from the start */
.u-flex--content-start {
-webkit-box-pack: start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important; }
/* Pack items from the end */
.u-flex--content-end {
-webkit-box-pack: end !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important; }
/* Distribute items evenly,
The first item at the start, the last at the end */
.u-flex--content-between {
-webkit-box-pack: justify !important;
-ms-flex-pack: justify !important;
justify-content: space-between !important; }
/* Distribute items evenly
Items have equal space around them */
.u-flex--content-around {
-ms-flex-pack: distribute !important;
justify-content: space-around !important; }
/*
ALIGN CONTENT ( Cross axis ) ----------------------------------------------
Summary: aligns a flex container's lines within the flex container when
there is extra space on the cross-axis.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
Default: align-content: flex-start !important;
*/
/* Pack lines from the cross-axis start */
.u-flex--align-content-start {
-ms-flex-line-pack: start !important;
align-content: flex-start !important; }
/* Pack lines to the cross-axis end */
.u-flex--align-content-end {
-ms-flex-line-pack: end !important;
align-content: flex-end !important; }
/* Pack lines around the cross-axis center */
.u-flex--align-content-center {
-ms-flex-line-pack: center !important;
align-content: center !important; }
/* Distribute lines along the cross-axis, start to end */
.u-flex--align-content-between {
-ms-flex-line-pack: justify !important;
align-content: space-between !important; }
/* Distribute lines along the cross-axis, equally spaced */
.u-flex--align-content-around {
-ms-flex-line-pack: distribute !important;
align-content: space-around !important; }
/* Stretch lines to occupy the whole cross-axis */
.u-flex--align-content-stretch {
-ms-flex-line-pack: stretch !important;
align-content: stretch !important; }
/* push flex item to right */
.u-flex--push-right {
margin-right: auto !important; }
/* push flex item to left */
.u-flex--push-left {
margin-left: auto !important; }
/* push flex item to bottom */
.u-flex--push-bottom {
margin-bottom: auto !important; }
/* push flex item to top */
.u-flex--push-top {
margin-top: auto !important; }
/*
ALIGN ITEMS ( Cross axis ) ------------------------------------------------
Summary: aligns flex items of the current flex line the same way as
justify-content but in the perpendicular direction.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
Default: align-items: stretch !important;
*/
/* Center items in the cross-axis */
.u-flex--align-items-center {
-webkit-box-align: center !important;
-ms-flex-align: center !important;
-ms-grid-row-align: center !important;
align-items: center !important; }
/* Align to cross-start */
.u-flex--align-items-start {
-webkit-box-align: start !important;
-ms-flex-align: start !important;
-ms-grid-row-align: flex-start !important;
align-items: flex-start !important; }
/* Align to cross-end */
.u-flex--align-items-end {
-webkit-box-align: end !important;
-ms-flex-align: end !important;
-ms-grid-row-align: flex-end !important;
align-items: flex-end !important; }
/* Align the items' baselines */
.u-flex--align-items-baseline {
-webkit-box-align: baseline !important;
-ms-flex-align: baseline !important;
-ms-grid-row-align: baseline !important;
align-items: baseline !important; }
/* Stretch the items to fit
DEFAULT VALUE */
.u-flex--align-items-stretch {
-webkit-box-align: stretch !important;
-ms-flex-align: stretch !important;
-ms-grid-row-align: stretch !important;
align-items: stretch !important; }
/*
ALIGN SELF ( Cross axis ) ------------------------------------------------
Summary: aligns flex items of the current flex line overriding the align-items value.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
Default: align-self: auto !important;
*/
/* Computes to parent's align-items value or stretch if the element has no parent. */
.u-flex--align-self-auto {
-ms-flex-item-align: auto !important;
align-self: auto !important; }
/* Cross-start margin edge of the flex item is flushed with the cross-start edge of the line. */
.u-flex--align-self-start {
-ms-flex-item-align: start !important;
align-self: flex-start !important; }
/* Cross-end margin edge of the flex item is flushed with the cross-end edge of the line. */
.u-flex--align-self-end {
-ms-flex-item-align: end !important;
align-self: flex-end !important; }
/* Flex item's margin box is centered within the line on the cross-axis.
If the cross-size of the item is larger than the flex container, it will
overflow equally in both directions. */
.u-flex--align-self-center {
-ms-flex-item-align: center !important;
align-self: center !important; }
/* All flex items are aligned such that their baselines align. The item with
the largest distance between its cross-start margin edge and its baseline is
flushed with the cross-start edge of the line. */
.u-flex--align-self-baseline {
-ms-flex-item-align: baseline !important;
align-self: baseline !important; }
/* Flex items are stretched such as the cross-size of the item's margin box is
the same as the line while respecting width and height constraints. */
.u-flex--align-self-stretch {
-ms-flex-item-align: stretch !important;
align-self: stretch !important; }
/*
WRAPPING -------------------------------------------------------------------
Summary: specifies whether flex items are forced into a single line or can
be wrapped onto multiple lines. If wrapping is allowed, this property
also enables you to control the direction in which lines are stacked.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
Default: flex-wrap: nowrap !important;
*/
.u-flex--no-wrap {
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important; }
.u-flex--reverse-wrap {
-ms-flex-wrap: wrap-reverse !important;
flex-wrap: wrap-reverse !important; }
.u-flex--wrap {
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important; }
/*
VISUAL ORDER ---------------------------------------------------------------
Summary: specifies the order used to lay out flex items in their flex container.
Elements are laid out in the ascending order of the order value.
Elements with the same order value are laid out in the order in
which they appear in the source code.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/order
Default: order: 0 !important; { no order }
*/
.u-flex--order-first {
-webkit-box-ordinal-group: 0 !important;
-ms-flex-order: -1 !important;
order: -1 !important; }
.u-flex--order-one {
-webkit-box-ordinal-group: 2 !important;
-ms-flex-order: 1 !important;
order: 1 !important; }
.u-flex--order-two {
-webkit-box-ordinal-group: 3 !important;
-ms-flex-order: 2 !important;
order: 2 !important; }
.u-flex--order-three {
-webkit-box-ordinal-group: 4 !important;
-ms-flex-order: 3 !important;
order: 3 !important; }
/*
* Utilities: Colors
* ---
* Foreground & background color utilities
*/
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-base-x-light {
color: white !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-base-x-light {
background-color: white !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-base-light {
color: #e6e6e6 !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-base-light {
background-color: #e6e6e6 !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-base-base {
color: #333 !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-base-base {
background-color: #333 !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-base-dark {
color: black !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-base-dark {
background-color: black !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-neutral-x-light {
color: white !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-neutral-x-light {
background-color: white !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-neutral-light {
color: #ededed !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-neutral-light {
background-color: #ededed !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-neutral-base {
color: #AAA !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-neutral-base {
background-color: #AAA !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-neutral-dark {
color: #4d4d4d !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-neutral-dark {
background-color: #4d4d4d !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-neutral-x-dark {
color: #1a1a1a !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-neutral-x-dark {
background-color: #1a1a1a !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-accent-light {
color: #e05295 !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-accent-light {
background-color: #e05295 !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-accent-base {
color: #ff0079 !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-accent-base {
background-color: #ff0079 !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-accent-dark {
color: #b30055 !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-accent-dark {
background-color: #b30055 !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-error-light {
color: #e05255 !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-error-light {
background-color: #e05255 !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-error-base {
color: #DA2327 !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-error-base {
background-color: #DA2327 !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-error-dark {
color: #b30004 !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-error-dark {
background-color: #b30004 !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-success-light {
color: #52e0a1 !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-success-light {
background-color: #52e0a1 !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-success-base {
color: #3D9970 !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-success-base {
background-color: #3D9970 !important; }
/**
* text color classes (e.g.: u-color-black-base)
*/
.u-color-success-dark {
color: #1a6644 !important; }
/**
* background color classes (e.g.: u-bgcolor-black-base)
*/
.u-bgcolor-success-dark {
background-color: #1a6644 !important; }
/**
* Inherit font color
*/
.u-color-inherit {
color: inherit !important; }
/*
* Utilities: Spacings
* ---
* Utility classes to put specific spacing values onto elements. The below loop
* will generate us a suite of classes like:
*
* .u-margin-top {}
* .u-padding-left-large {}
* .u-margin-right-small {}
* .u-padding {}
* .u-padding-right-none {}
*/
.u-padding {
padding: 36px !important; }
.u-padding-tiny {
padding: 9px !important; }
.u-padding-small {
padding: 18px !important; }
.u-padding-medium {
padding: 63px !important; }
.u-padding-large {
padding: 90px !important; }
.u-padding-huge {
padding: 144px !important; }
.u-padding-x-huge {
padding: 288px !important; }
.u-padding-none {
padding: 0 !important; }
.u-padding-top {
padding-top: 36px !important; }
.u-padding-top-tiny {
padding-top: 9px !important; }
.u-padding-top-small {
padding-top: 18px !important; }
.u-padding-top-medium {
padding-top: 63px !important; }
.u-padding-top-large {
padding-top: 90px !important; }
.u-padding-top-huge {
padding-top: 144px !important; }
.u-padding-top-x-huge {
padding-top: 288px !important; }
.u-padding-top-none {
padding-top: 0 !important; }
.u-padding-right {
padding-right: 36px !important; }
.u-padding-right-tiny {
padding-right: 9px !important; }
.u-padding-right-small {
padding-right: 18px !important; }
.u-padding-right-medium {
padding-right: 63px !important; }
.u-padding-right-large {
padding-right: 90px !important; }
.u-padding-right-huge {
padding-right: 144px !important; }
.u-padding-right-x-huge {
padding-right: 288px !important; }
.u-padding-right-none {
padding-right: 0 !important; }
.u-padding-bottom {
padding-bottom: 36px !important; }
.u-padding-bottom-tiny {
padding-bottom: 9px !important; }
.u-padding-bottom-small {
padding-bottom: 18px !important; }
.u-padding-bottom-medium {
padding-bottom: 63px !important; }
.u-padding-bottom-large {
padding-bottom: 90px !important; }
.u-padding-bottom-huge {
padding-bottom: 144px !important; }
.u-padding-bottom-x-huge {
padding-bottom: 288px !important; }
.u-padding-bottom-none {
padding-bottom: 0 !important; }
.u-padding-left {
padding-left: 36px !important; }
.u-padding-left-tiny {
padding-left: 9px !important; }
.u-padding-left-small {
padding-left: 18px !important; }
.u-padding-left-medium {
padding-left: 63px !important; }
.u-padding-left-large {
padding-left: 90px !important; }
.u-padding-left-huge {
padding-left: 144px !important; }
.u-padding-left-x-huge {
padding-left: 288px !important; }
.u-padding-left-none {
padding-left: 0 !important; }
.u-margin {
margin: 36px !important; }
.u-margin-tiny {
margin: 9px !important; }
.u-margin-small {
margin: 18px !important; }
.u-margin-medium {
margin: 63px !important; }
.u-margin-large {
margin: 90px !important; }
.u-margin-huge {
margin: 144px !important; }
.u-margin-x-huge {
margin: 288px !important; }
.u-margin-none {
margin: 0 !important; }
.u-margin-top {
margin-top: 36px !important; }
.u-margin-top-tiny {
margin-top: 9px !important; }
.u-margin-top-small {
margin-top: 18px !important; }
.u-margin-top-medium {
margin-top: 63px !important; }
.u-margin-top-large {
margin-top: 90px !important; }
.u-margin-top-huge {
margin-top: 144px !important; }
.u-margin-top-x-huge {
margin-top: 288px !important; }
.u-margin-top-none {
margin-top: 0 !important; }
.u-margin-right {
margin-right: 36px !important; }
.u-margin-right-tiny {
margin-right: 9px !important; }
.u-margin-right-small {
margin-right: 18px !important; }
.u-margin-right-medium {
margin-right: 63px !important; }
.u-margin-right-large {
margin-right: 90px !important; }
.u-margin-right-huge {
margin-right: 144px !important; }
.u-margin-right-x-huge {
margin-right: 288px !important; }
.u-margin-right-none {
margin-right: 0 !important; }
.u-margin-bottom {
margin-bottom: 36px !important; }
.u-margin-bottom-tiny {
margin-bottom: 9px !important; }
.u-margin-bottom-small {
margin-bottom: 18px !important; }
.u-margin-bottom-medium {
margin-bottom: 63px !important; }
.u-margin-bottom-large {
margin-bottom: 90px !important; }
.u-margin-bottom-huge {
margin-bottom: 144px !important; }
.u-margin-bottom-x-huge {
margin-bottom: 288px !important; }
.u-margin-bottom-none {
margin-bottom: 0 !important; }
.u-margin-left {
margin-left: 36px !important; }
.u-margin-left-tiny {
margin-left: 9px !important; }
.u-margin-left-small {
margin-left: 18px !important; }
.u-margin-left-medium {
margin-left: 63px !important; }
.u-margin-left-large {
margin-left: 90px !important; }
.u-margin-left-huge {
margin-left: 144px !important; }
.u-margin-left-x-huge {
margin-left: 288px !important; }
.u-margin-left-none {
margin-left: 0 !important; }
.u-padding--negative {
padding: -36px !important; }
.u-padding-tiny--negative {
padding: -9px !important; }
.u-padding-small--negative {
padding: -18px !important; }
.u-padding-medium--negative {
padding: -63px !important; }
.u-padding-large--negative {
padding: -90px !important; }
.u-padding-huge--negative {
padding: -144px !important; }
.u-padding-x-huge--negative {
padding: -288px !important; }
.u-padding-none--negative {
padding: 0 !important; }
.u-padding-top--negative {
padding-top: -36px !important; }
.u-padding-top-tiny--negative {
padding-top: -9px !important; }
.u-padding-top-small--negative {
padding-top: -18px !important; }
.u-padding-top-medium--negative {
padding-top: -63px !important; }
.u-padding-top-large--negative {
padding-top: -90px !important; }
.u-padding-top-huge--negative {
padding-top: -144px !important; }
.u-padding-top-x-huge--negative {
padding-top: -288px !important; }
.u-padding-top-none--negative {
padding-top: 0 !important; }
.u-padding-right--negative {
padding-right: -36px !important; }
.u-padding-right-tiny--negative {
padding-right: -9px !important; }
.u-padding-right-small--negative {
padding-right: -18px !important; }
.u-padding-right-medium--negative {
padding-right: -63px !important; }
.u-padding-right-large--negative {
padding-right: -90px !important; }
.u-padding-right-huge--negative {
padding-right: -144px !important; }
.u-padding-right-x-huge--negative {
padding-right: -288px !important; }
.u-padding-right-none--negative {
padding-right: 0 !important; }
.u-padding-bottom--negative {
padding-bottom: -36px !important; }
.u-padding-bottom-tiny--negative {
padding-bottom: -9px !important; }
.u-padding-bottom-small--negative {
padding-bottom: -18px !important; }
.u-padding-bottom-medium--negative {
padding-bottom: -63px !important; }
.u-padding-bottom-large--negative {
padding-bottom: -90px !important; }
.u-padding-bottom-huge--negative {
padding-bottom: -144px !important; }
.u-padding-bottom-x-huge--negative {
padding-bottom: -288px !important; }
.u-padding-bottom-none--negative {
padding-bottom: 0 !important; }
.u-padding-left--negative {
padding-left: -36px !important; }
.u-padding-left-tiny--negative {
padding-left: -9px !important; }
.u-padding-left-small--negative {
padding-left: -18px !important; }
.u-padding-left-medium--negative {
padding-left: -63px !important; }
.u-padding-left-large--negative {
padding-left: -90px !important; }
.u-padding-left-huge--negative {
padding-left: -144px !important; }
.u-padding-left-x-huge--negative {
padding-left: -288px !important; }
.u-padding-left-none--negative {
padding-left: 0 !important; }
.u-margin--negative {
margin: -36px !important; }
.u-margin-tiny--negative {
margin: -9px !important; }
.u-margin-small--negative {
margin: -18px !important; }
.u-margin-medium--negative {
margin: -63px !important; }
.u-margin-large--negative {
margin: -90px !important; }
.u-margin-huge--negative {
margin: -144px !important; }
.u-margin-x-huge--negative {
margin: -288px !important; }
.u-margin-none--negative {
margin: 0 !important; }
.u-margin-top--negative {
margin-top: -36px !important; }
.u-margin-top-tiny--negative {
margin-top: -9px !important; }
.u-margin-top-small--negative {
margin-top: -18px !important; }
.u-margin-top-medium--negative {
margin-top: -63px !important; }
.u-margin-top-large--negative {
margin-top: -90px !important; }
.u-margin-top-huge--negative {
margin-top: -144px !important; }
.u-margin-top-x-huge--negative {
margin-top: -288px !important; }
.u-margin-top-none--negative {
margin-top: 0 !important; }
.u-margin-right--negative {
margin-right: -36px !important; }
.u-margin-right-tiny--negative {
margin-right: -9px !important; }
.u-margin-right-small--negative {
margin-right: -18px !important; }
.u-margin-right-medium--negative {
margin-right: -63px !important; }
.u-margin-right-large--negative {
margin-right: -90px !important; }
.u-margin-right-huge--negative {
margin-right: -144px !important; }
.u-margin-right-x-huge--negative {
margin-right: -288px !important; }
.u-margin-right-none--negative {
margin-right: 0 !important; }
.u-margin-bottom--negative {
margin-bottom: -36px !important; }
.u-margin-bottom-tiny--negative {
margin-bottom: -9px !important; }
.u-margin-bottom-small--negative {
margin-bottom: -18px !important; }
.u-margin-bottom-medium--negative {
margin-bottom: -63px !important; }
.u-margin-bottom-large--negative {
margin-bottom: -90px !important; }
.u-margin-bottom-huge--negative {
margin-bottom: -144px !important; }
.u-margin-bottom-x-huge--negative {
margin-bottom: -288px !important; }
.u-margin-bottom-none--negative {
margin-bottom: 0 !important; }
.u-margin-left--negative {
margin-left: -36px !important; }
.u-margin-left-tiny--negative {
margin-left: -9px !important; }
.u-margin-left-small--negative {
margin-left: -18px !important; }
.u-margin-left-medium--negative {
margin-left: -63px !important; }
.u-margin-left-large--negative {
margin-left: -90px !important; }
.u-margin-left-huge--negative {
margin-left: -144px !important; }
.u-margin-left-x-huge--negative {
margin-left: -288px !important; }
.u-margin-left-none--negative {
margin-left: 0 !important; }
/* ==========================================================================
#HEADINGS
========================================================================== */
/*
* Utilities: Headings
* ---
* Redefine all of our basic heading styles against utility classes so as to
* allow for double stranded heading hierarchy, e.g. we semantically need an H2,
* but we want it to be sized like an H1:
*
* <h2 class="u-h1"></h2>
*
*/
.u-h1 {
font-size: 2rem;
line-height: 1.5; }
.u-h2 {
font-size: 1.55556rem;
line-height: 1.5; }
.u-h3 {
font-size: 1.33333rem;
line-height: 1.5; }
.u-h4 {
font-size: 1.11111rem;
line-height: 1.5; }
.u-h5 {
font-size: 1rem;
line-height: 1.5; }
.u-h6 {
font-size: 0.88889rem;
line-height: 1.5; }
/*
* Utilities: Clearfix
* ---
* Helper class to clear floats from a container
*/
.u-clearfix {
*zoom: 1; }
.u-clearfix:before, .u-clearfix:after {
display: table;
content: ''; }
.u-clearfix:after {
clear: both; }
/*
* Utilities: Weights
* ---
* Utility classes for font weights
*/
.u-light {
font-weight: 300 !important; }
.u-normal {
font-weight: 400 !important; }
.u-semi-bold {
font-weight: 600 !important; }
.u-bold {
font-weight: 700 !important; }
.u-extra-bold {
font-weight: 800 !important; }
/*
* Layers
* ---
* Loops trough all z-index levels and generates classes
*/
.u-index-alpha {
z-index: 1; }
.u-index-beta {
z-index: 2; }
.u-index-gamma {
z-index: 3; }
.u-index-delta {
z-index: 4; }
.u-index-epsilon {
z-index: 5; }
/*
* Utilities: Underline
* ---
* Set a underline
*/
.u-underline {
position: relative;
display: inline; }
.u-underline:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: -webkit-linear-gradient(left, currentColor 0%, currentColor 100%);
background-image: linear-gradient(to right, currentColor 0%, currentColor 100%);
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 100% 1px;
opacity: 0.2; }
.u-underline-links a {
position: relative;
display: inline; }
.u-underline-links a:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: -webkit-linear-gradient(left, currentColor 0%, currentColor 100%);
background-image: linear-gradient(to right, currentColor 0%, currentColor 100%);
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 100% 1px;
opacity: 0.2; }
.u-pos-fit,
.u-pos-absolute-center,
.u-pos-absolute {
position: absolute !important; }
/**
* Element will be centered to its nearest relatively-positioned
* ancestor.
*/
.u-pos-fixed-center,
.u-pos-absolute-center {
left: 50% !important;
top: 50% !important;
-webkit-transform: translate(-50%, -50%) !important;
-ms-transform: translate(-50%, -50%) !important;
transform: translate(-50%, -50%) !important; }
.u-pos-fit,
.u-pos-fullscreen {
bottom: 0 !important;
left: 0 !important;
margin: auto !important;
right: 0 !important;
top: 0 !important; }
/**
* 1. Make sure fixed elements are promoted into a new layer, for performance
* reasons.
*/
.u-pos-fullscreen,
.u-pos-fixed-center,
.u-pos-fixed {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* 1 */
position: fixed !important; }
.u-pos-relative {
position: relative !important; }
.u-pos-static {
position: static !important; }
.u-center-block {
display: block;
margin-left: auto;
margin-right: auto; }
/* Pull left / right
* To be used in combination with clearfix on parent
*/
.u-pull-left {
float: left; }
.u-pull-right {
float: right; }
/**
* Word breaking
*
* Break strings when their length exceeds the width of their container.
*/
.u-text-break {
word-wrap: break-word !important; }
/**
* Inherit the ancestor's text color.
*/
.u-text-inherit-color {
color: inherit !important; }
/**
* Enables font kerning in all browsers.
* http://blog.typekit.com/2014/02/05/kerning-on-the-web/
*
* 1. Chrome (not Windows), Firefox, IE 10+
* 2. Safari 7 and future browsers
* 3. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
*/
.u-text-kern {
-webkit-font-feature-settings: "kern" 1;
font-feature-settings: "kern" 1;
/* 1 */
-webkit-font-kerning: normal;
font-kerning: normal;
/* 2 */
text-rendering: optimizeLegibility;
/* 3 */ }
/**
* Prevent whitespace wrapping
*/
.u-text-no-wrap {
white-space: nowrap !important; }
/**
* Text truncation
*
* Prevent text from wrapping onto multiple lines, and truncate with an
* ellipsis.
*
* 1. Ensure that the node has a maximum width after which truncation can
* occur.
* 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
* nodes.
*/
.u-text-truncate {
max-width: 100%;
/* 1 */
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
/* 2 */ }
/**
* Horizontal text alignment
*/
.u-text-justify {
text-align: justify !important; }
.u-text-nowrap {
white-space: nowrap !important; }
.u-text-align-left {
text-align: left !important; }
.u-text-align-center {
text-align: center !important; }
.u-text-align-right {
text-align: right !important; }
/**
* Text transformation
*/
.u-text-lowercase {
text-transform: lowercase !important; }
.u-text-uppercase {
text-transform: uppercase !important; }
.u-text-capitalize {
text-transform: capitalize !important; }
.u-text-strike {
text-decoration: line-through !important; }
/**
* Text weights & italics
*/
.u-font-weight-normal {
font-weight: normal; }
.u-font-weight-bold {
font-weight: bold; }
.u-font-italic {
font-style: italic; }
/*
* Utilities: Icon colors
* ---
* Icon fill color helper classes
*/
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-base {
fill: #333; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-base-x-light {
fill: white; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-base {
fill: #333; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-base-light {
fill: #e6e6e6; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-base {
fill: #333; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-base-base {
fill: #333; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-base {
fill: #333; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-base-dark {
fill: black; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-neutral {
fill: #AAA; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-neutral-x-light {
fill: white; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-neutral {
fill: #AAA; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-neutral-light {
fill: #ededed; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-neutral {
fill: #AAA; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-neutral-base {
fill: #AAA; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-neutral {
fill: #AAA; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-neutral-dark {
fill: #4d4d4d; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-neutral {
fill: #AAA; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-neutral-x-dark {
fill: #1a1a1a; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-accent {
fill: #ff0079; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-accent-light {
fill: #e05295; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-accent {
fill: #ff0079; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-accent-base {
fill: #ff0079; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-accent {
fill: #ff0079; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-accent-dark {
fill: #b30055; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-error {
fill: #DA2327; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-error-light {
fill: #e05255; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-error {
fill: #DA2327; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-error-base {
fill: #DA2327; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-error {
fill: #DA2327; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-error-dark {
fill: #b30004; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-success {
fill: #3D9970; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-success-light {
fill: #52e0a1; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-success {
fill: #3D9970; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-success-base {
fill: #3D9970; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-success {
fill: #3D9970; }
/**
* icon color classes (e.g.: u-icon-color-white)
*/
.u-icon-color-success-dark {
fill: #1a6644; }
/**
* Set icon to current color value
*/
.u-icon-currentColor {
fill: currentColor !important; }
/*
* Utilities: Overflow
* ---
* Helper classes for overflow values.
*/
.u-overflow-hidden {
overflow: hidden !important; }
/*# sourceMappingURL=main.css.map */
</style>
</head>
<body class="u-flex-set">
<aside>
<a href="https://github.com/micku7zu/vanilla-tilt.js" class="c-logo js-tilt" data-tilt-speed="400" data-tilt-scale="1.1" data-tilt-maxtilt="50"
data-tilt-perspective="500">
<span class="backdrop"></span>
<span>vanilla-tilt.js</span>
</a>
</aside>
<main>
<header>
<p class="u-font-huge">
All credits goes to <strong><a href="http://gijsroge.github.io/">Gijs Rogé</a></strong>, he made the Tilt.js library based on jQuery.
</p>
<p class="u-font-huge">
vanilla-tilt.js is Tilt.js but without jQuery dependency. Everything else is copied from Tilt.js!
</p>
<p class="u-font-large">
Inspired, copied, forked, rewritten from <a href="http://gijsroge.github.io/tilt.js/">http://gijsroge.github.io/tilt.js/</a>
</p>
<p class="u-font-large">A tiny requestAnimationFrame powered <strong>60+fps</strong><br>
lightweight parallax tilt effect. </p>
<strong>Notices:</strong>
<ul>
<li>No Javascript dependencies</li>
<li>No CSS is needed</li>
<li><a href="https://github.com/micku7zu/vanilla-tilt.js"
title="Extra documentation about vanilla-tilt.js plugin">Documentation</a></li>
</ul>
</header>
<article class="[ c-example ]">
<div class="[ c-example__demo ]">
<div class="[ c-example__tilt ] js-tilt" data-tilt-perspective="250" data-tilt-speed="1000"
data-tilt-max="50"></div>
</div>
<div class="c-example__info">
<h3>The most basic usage:</h3>
<ol>
<li>Add <code class="language-html">&lt;script src=&quot;vanilla-tilt.js&quot;&gt;&lt;/script&gt;</code>
right before the closing <code class="language-html">&lt;/body&gt;</code> tag
</li>
<li>Mark your elements with <code class="language-html">&lt;span data-tilt&gt;&lt;/span&gt;</code>
</li>
</ol>
</div>
</article>
<article class="[ c-example ]">
<div class="[ c-example__demo ]">
<div class="[ c-example__tilt ] js-tilt" data-tilt-reset="false" data-tilt-speed="1000" data-tilt-max="50"
data-tilt-perspective="250"></div>
</div>
<div class="c-example__info">
<h3>Keep floating:</h3>
<p>Setting this option will not reset the tilt element when the user mouse leaves the element.</p>
<pre><code class="language-javascript">VanillaTilt.init(document.querySelector("your-element"), {
reset: false
})</code></pre>
</div>
</article>
<article class="[ c-example ]">
<div class="[ c-example__demo ]">
<div class="[ c-example__tilt ] js-tilt" data-tilt-speed="1000" data-tilt-max="20" data-tilt-scale="1.2"
data-tilt-perspective="250"></div>
</div>
<div class="c-example__info">
<h3>Scale on hover</h3>
<p>Setting this option will scale tilt element on hover.</p>
<pre><code class="language-javascript">VanillaTilt.init(document.querySelector("your-element"), {
scale: 1.2
})</code></pre>
</div>
</article>
<article class="[ c-example ]">
<div class="[ c-example__demo ]">
<div class="[ c-example__tilt ] js-tilt" data-tilt-speed="250" data-tilt-max="50" data-tilt-axis="x"
data-tilt-perspective="250"></div>
</div>
<div class="c-example__info">
<h3>Disable Y axis</h3>
<p>Setting this option will disable the Y-Axis on the tilt element.</p>
<pre><code class="language-javascript">VanillaTilt.init(document.querySelector("your-element"), {
axis: x
})</code></pre>
</div>
</article>
<article class="[ c-example ]">
<div class="[ c-example__demo ]">
<div class="[ c-example__tilt ] js-tilt" data-tilt-speed="250" data-tilt-max="50" data-tilt-axis="y"
data-tilt-perspective="250"></div>
</div>
<div class="c-example__info">
<h3>Disable X axis</h3>
<p>Setting this option will disable the X-Axis on the tilt element.</p>
<pre><code class="language-javascript">VanillaTilt.init(document.querySelector("your-element"), {
axis: y
})</code></pre>
</div>
</article>
<article class="[ c-example ] js-parent">
<div class="[ c-example__demo ]">
<div class="[ c-example__tilt ] js-tilt js-tilt-destroy" data-tilt-speed="250" data-tilt-reset="false"
data-tilt-max="50"
data-tilt-perspective="250"></div>
</div>
<div class="c-example__info">
<h3>Destroy method</h3>
<p>Call this method will remove all events and classes from the tilt element.</p>
<pre><code class="language-javascript">var element = document.querySelector("your-element");
VanillaTilt.init(element);
element.vanillaTilt.destroy();
</code></pre>
<button class="js-destroy c-button">Destroy</button>
<button class="js-enable c-button">Re-enable</button>
</div>
</article>
<article class="[ c-example ] js-parent">
<div class="[ c-example__demo ]">
<div class="[ c-example__tilt ] js-tilt-output" data-tilt-speed="250" data-tilt-max="50"
data-tilt-perspective="250"></div>
</div>
<div class="c-example__info">
<h3>On change event</h3>
<p>The on change event wil output the x,y & percentages of tilting.</p>
<pre><code class="language-javascript">var element = document.querySelector("your-element");
VanillaTilt.init(element);
element.addEventListener("tiltChange", function(event){ console.log(event.detail); });
</code></pre>
<ul class="c-example__output js-output u-font-tiny"></ul>
</div>
</article>
<article class="[ c-example ]">
<div>
<h3>Features</h3>
<ul>
<li>
<p>Options can be passed with the<code class="language-js">tilt()</code>function.</p>
<pre>
<code class="language-js">VanillaTilt.init(document.querySelector("your-element"), {
option: value,
option: value,
});</code></pre>
</li>
<li>
<p>
All options are configurable trough data-attributes.
<code class="language-html">data-tilt-&lt;option name&gt;=&quot;value&quot;</code>
</p>
</li>
</ul>
</div>
</article>
</main>
<script src="src/vanilla-tilt.js"></script>
<script>
var elements = document.querySelectorAll(".js-tilt");
var tiltOutput = document.querySelector(".js-tilt-output");
var output = document.querySelector(".js-output");
VanillaTilt.init(elements);
VanillaTilt.init(tiltOutput);
tiltOutput.addEventListener("tiltChange", function (event) {
var li = document.createElement("li");
li.textContent = JSON.stringify(event.detail);
output.insertBefore(li, output.firstChild);
});
document.querySelector(".js-destroy").addEventListener("click", function () {
document.querySelector(".js-tilt-destroy").vanillaTilt.destroy();
});
document.querySelector(".js-enable").addEventListener("click", function () {
VanillaTilt.init(document.querySelector(".js-tilt-destroy"));
});
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink