Glen Cheney
7 years ago
committed by
GitHub
commit
c3c074994d
@ -1,8 +1,10 @@
|
||||
node_modules
|
||||
bower_components
|
||||
coverage
|
||||
.DS_Store
|
||||
_site
|
||||
.sass-cache
|
||||
.jekyll-metadata
|
||||
*.scssc
|
||||
|
||||
# https://github.com/sindresorhus/ama/issues/479#issuecomment-310661514
|
||||
package-lock.json
|
||||
|
||||
@ -1,106 +0,0 @@
|
||||
[
|
||||
{
|
||||
"groups": ["photography"],
|
||||
"date": "2010-09-14",
|
||||
"title": "Baseball",
|
||||
"img": "baseball.png",
|
||||
"original": "baseball.jpg",
|
||||
"cols": [3, 4, 3]
|
||||
},
|
||||
{
|
||||
"groups": ["wallpaper", "3d"],
|
||||
"date": "2011-08-14",
|
||||
"title": "Tennis",
|
||||
"img": "tennis-ball.png",
|
||||
"original": "tennis-ball.jpg",
|
||||
"extras": ["overlay"],
|
||||
"cols": [3, 8, 6]
|
||||
},
|
||||
{
|
||||
"groups": ["wallpaper", "3d"],
|
||||
"date": "2009-05-27",
|
||||
"title": "iMac",
|
||||
"img": "imac.png",
|
||||
"original": "imac.jpg",
|
||||
"cols": [3, 4, 3]
|
||||
},
|
||||
{
|
||||
"groups": ["graphics"],
|
||||
"date": "2012-05-14",
|
||||
"title": "Master Chief",
|
||||
"img": "master-chief.png",
|
||||
"original": "Master_Chief_Portrait_by_Eightfold_Studios.jpg",
|
||||
"description": "Shuffle.js is a package for sorting, filtering, and laying out a group of items. It’s performant, responsive, and fast. Check out the demos!",
|
||||
"extras": ["h2"],
|
||||
"cols": [6, 4, 3]
|
||||
},
|
||||
{
|
||||
"groups": ["wallpaper", "3d"],
|
||||
"date": "2009-09-14",
|
||||
"title": "Eightfold",
|
||||
"img": "es-blue.png",
|
||||
"original": "es-blue.jpg",
|
||||
"cols": [3, 4, 3]
|
||||
},
|
||||
{
|
||||
"groups": ["photography"],
|
||||
"date": "2012-03-14",
|
||||
"title": "Pumpkin",
|
||||
"img": "pumpkin.png",
|
||||
"original": "pumpkin.jpg",
|
||||
"extras": ["overlay"],
|
||||
"cols": [3, 8, 6]
|
||||
},
|
||||
{
|
||||
"groups": ["wallpaper", "3d"],
|
||||
"date": "2013-05-19",
|
||||
"title": "Vestride",
|
||||
"img": "vestride-red.png",
|
||||
"original": "vestride-red.jpg",
|
||||
"extras": ["h2"],
|
||||
"cols": [3, 8, 6]
|
||||
},
|
||||
{
|
||||
"groups": ["graphics"],
|
||||
"date": "2013-02-01",
|
||||
"title": "Newegg",
|
||||
"img": "newegg.png",
|
||||
"original": "newegg.jpg",
|
||||
"description": "Shuffle.js is a package for sorting, filtering, and laying out a group of items. It’s performant, responsive, and fast. Check out the demos!",
|
||||
"extras": ["h2"],
|
||||
"cols": [6, 4, 3]
|
||||
},
|
||||
{
|
||||
"groups": ["wallpaper"],
|
||||
"date": "2000-01-01",
|
||||
"title": "Arc",
|
||||
"img": "eightfoldarc.png",
|
||||
"original": "eightfoldarc.jpg",
|
||||
"cols": [3, 4, 3]
|
||||
},
|
||||
{
|
||||
"groups": ["photography"],
|
||||
"date": "2012-07-04",
|
||||
"title": "Ground",
|
||||
"img": "ground.png",
|
||||
"original": "ground!.jpg",
|
||||
"cols": [3, 4, 3]
|
||||
},
|
||||
{
|
||||
"groups": ["wallpaper"],
|
||||
"date": "2011-08-12",
|
||||
"title": "Grass",
|
||||
"img": "grassy-hills.png",
|
||||
"original": "grassy-hills.tif",
|
||||
"extras": ["overlay"],
|
||||
"cols": [3, 8, 6]
|
||||
},
|
||||
{
|
||||
"groups": ["wallpaper", "3d"],
|
||||
"date": "2013-05-19",
|
||||
"title": "Vestride",
|
||||
"img": "vestride-classy.png",
|
||||
"original": "vestride-classy.jpg",
|
||||
"cols": [3, 4, 3]
|
||||
}
|
||||
]
|
||||
@ -1,5 +0,0 @@
|
||||
<footer class="site-footer light-text-dark-box">
|
||||
<div class="container">
|
||||
<p class="site-footer__credit">Photos and drawings by <a href="https://www.facebook.com/EightfoldStudios" target="_blank">Eightfold Studios</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
@ -1,21 +0,0 @@
|
||||
<h2>Events<a href="#events"></a></h2>
|
||||
<p>Shuffle emits an event when a layout happens and when elements are removed. The event names are <code class="language-javascript">Shuffle.EventType.LAYOUT</code> and <code class="language-javascript">Shuffle.EventType.REMOVED</code>.</p>
|
||||
<p>Shuffle uses the global <code>CustomEvent</code> to <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent">create events</a>. A polyfill for IE<=11 is bundled with Shuffle.</p>
|
||||
|
||||
<h3>Get notified when a layout happens</h3>
|
||||
<div class="code-block">
|
||||
<pre rel="JavaScript"><code class="language-javascript">element.addEventListener(Shuffle.EventType.LAYOUT, function () {
|
||||
console.log('Things finished moving!');
|
||||
});</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Do something when an item is removed</h3>
|
||||
<div class="code-block">
|
||||
<pre rel="JavaScript"><code class="language-javascript">element.addEventListener(Shuffle.EventType.REMOVED, function (evt) {
|
||||
var detail = evt.detail;
|
||||
console.log(this, evt, detail.collection, detail.shuffle);
|
||||
});</code></pre>
|
||||
</div>
|
||||
|
||||
<p class="demo-link-container">Check out the <a href="#demo">demo</a> at the top of the page, or its <a href="/js/demos/homepage.js">JavaScript file.</a></p>
|
||||
@ -1,46 +0,0 @@
|
||||
|
||||
<nav class="site-nav collapsed" id="nav" role="primary">
|
||||
|
||||
<div class="js-tray site-nav__tray light-text-dark-box">
|
||||
<div class="container site-nav__tray-inner">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12@sm">
|
||||
<h3 class="site-nav__title site-nav__title--first">Shuffle.js</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-3@sm">
|
||||
<a class="btn btn--primary" href="{{ site.baseurl }}/">Home</a>
|
||||
</div>
|
||||
<div class="col-3@sm">
|
||||
<a class="btn btn--primary" href="https://github.com/Vestride/Shuffle">GitHub Repo</a>
|
||||
</div>
|
||||
<div class="col-3@sm">
|
||||
<a class="btn btn--primary" href="https://twitter.com/Vestride">By @Vestride</a>
|
||||
</div>
|
||||
<div class="col-3@sm">
|
||||
<a class="btn btn--primary" href="{{ site.baseurl }}/faq">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12@sm">
|
||||
<h3 class="site-nav__title">Demos</h3>
|
||||
</div>
|
||||
</div>
|
||||
{% include demo-list.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="site-nav__band">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12@sm">
|
||||
<button class="js-nav-toggle pull-right" data-close-label="Close Menu">Open Menu</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -1,23 +0,0 @@
|
||||
{% comment %} Ghetto conversion to JSON {% endcomment %}
|
||||
{% capture groups %}["{{ item.groups | join: '","' }}"]{% endcapture %}
|
||||
{% if item.extras | size: > 0 %}
|
||||
{% capture extras %} picture-item--{{ item.extras | join: " picture-item--" }}{% endcapture %}
|
||||
{% else %}
|
||||
{% assign extras = "" %}
|
||||
{% endif %}
|
||||
{% assign description = item.description %}
|
||||
<figure class="col-{{ item.cols[0] }}@xs col-{{ item.cols[1] }}@sm col-{{ item.cols[2] }}@md picture-item{{ extras }}" data-groups='{{ groups }}' data-date-created="{{ item.date }}" data-title="{{ item.title }}">
|
||||
<div class="picture-item__inner">
|
||||
<div class="aspect aspect--16x9">
|
||||
<div class="aspect__inner">
|
||||
<img src="{{ site.baseurl }}/img/{{ item.img }}" alt="" height="145" width="230" />
|
||||
<img class="picture-item__blur" src="{{ site.baseurl }}/img/{{ item.img }}" alt="" height="145" width="230" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="picture-item__details clearfix">
|
||||
<figcaption class="picture-item__title pull-left"><a href="{{ site.baseurl }}/img/originals/{{ item.original }}" target="_blank">{{ item.title }}</a></figcaption>
|
||||
<p class="picture-item__tags pull-right hidden@xs">{{ item.groups | join: ', ' }}</p>
|
||||
</div>
|
||||
{% if description %}{% if description == 'longDescription' %}{% assign description = site.longDescription %}{% endif %}<p class="picture-item__description">{{ description }}</p>{% endif %}
|
||||
</div>
|
||||
</figure>
|
||||
@ -1,173 +0,0 @@
|
||||
|
||||
|
||||
.btn-group {
|
||||
@include clearfix();
|
||||
|
||||
.btn {
|
||||
float: left;
|
||||
border-radius: 0;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn,
|
||||
button {
|
||||
display: inline-block;
|
||||
padding: .75em .375em;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
color: white;
|
||||
border-radius: .0625em;
|
||||
border: 0;
|
||||
background-color: $wetAsphalt;
|
||||
transition: .2s ease-out;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($wetAsphalt, 12);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-color: $midnightBlue;
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--warning {
|
||||
background-color: $carrot;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($carrot, 8);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-color: $pumpkin;
|
||||
// background-color: $carrot;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background-color: $river;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($river, 8);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
// background-color: $belizeHole;
|
||||
background-color: $river;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--danger {
|
||||
background-color: $alizarin;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($alizarin, 8);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
// background-color: $pomegranate;
|
||||
background-color: $alizarin;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--go {
|
||||
background-color: $emerald;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($emerald, 8);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
// background-color: $nephritis;
|
||||
background-color: $emerald;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.filter-group .btn {
|
||||
position: relative;
|
||||
|
||||
$size: 20px;
|
||||
// Circle and check
|
||||
&.active:before,
|
||||
&.active:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: $size;
|
||||
height: $size;
|
||||
margin-left: -$size / 2;
|
||||
margin-top: -$size / 2;
|
||||
opacity: 0;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
// Circle
|
||||
&:before {
|
||||
background-color: $gray10;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// Check
|
||||
&:after {
|
||||
background-size: 60%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../img/check.svg);
|
||||
}
|
||||
|
||||
&.active:before,
|
||||
&.active:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media ( max-width: 47.9375em ) {
|
||||
|
||||
.btn,
|
||||
button {
|
||||
font-size: .875em;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: 30em ) {
|
||||
|
||||
.btn,
|
||||
button {
|
||||
font-size: .75em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,73 +0,0 @@
|
||||
// FAQ
|
||||
|
||||
.search-section {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
input.faq-search {
|
||||
-webkit-appearance: searchfield;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 2px solid $gray40;
|
||||
border-radius: 4px;
|
||||
padding: 0.5em;
|
||||
font-size: 1.125em;
|
||||
color: $gray40;
|
||||
transition: .15s;
|
||||
|
||||
&::placeholder {
|
||||
color: $gray40;
|
||||
transition: .15s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline: 0;
|
||||
color: $gray30;
|
||||
border-color: $gray30;
|
||||
|
||||
&::placeholder {
|
||||
color: $gray30;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
color: $nephritis;
|
||||
border-color: $nephritis;
|
||||
|
||||
&::placeholder {
|
||||
color: $nephritis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.question {
|
||||
margin: 2em 0;
|
||||
overflow: hidden;
|
||||
transition: .2s ease-out;
|
||||
}
|
||||
|
||||
.question--collapsed {
|
||||
height: 0 !important; // Needs to override inline style
|
||||
margin: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.question--collapsed + .question {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.question--unanswered {
|
||||
padding-top: 1.25em;
|
||||
border-top: 2px solid $emerald;
|
||||
}
|
||||
|
||||
.question__title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.question__answer {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -1,424 +0,0 @@
|
||||
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Change the default font family in all browsers (opinionated).
|
||||
* 2. Prevent adjustments of font size after orientation changes in IE and iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
* 2. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details, /* 1 */
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
main, /* 2 */
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
template, /* 1 */
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the outline on focused links when they are also active or hovered
|
||||
* in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 */
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Change font properties to `inherit` in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the font weight unset by the previous rule.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
* 2. Show the overflow in Edge, Firefox, and IE.
|
||||
*/
|
||||
|
||||
button,
|
||||
input, /* 1 */
|
||||
select { /* 2 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the margin in Safari.
|
||||
* 1. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea { /* 1 */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritence of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritence of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the cursor in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the default cursor to disabled elements unset by the previous rule.
|
||||
*/
|
||||
|
||||
[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
input:-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 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the odd appearance of search inputs in Chrome and Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome on OS X and
|
||||
* Safari on OS X.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
.site-nav {
|
||||
|
||||
.site-nav__title {
|
||||
color: $clouds;
|
||||
}
|
||||
|
||||
.site-nav__title--first {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.site-nav__tray {
|
||||
transition: .2s;
|
||||
overflow: hidden;
|
||||
height: 300px;
|
||||
background-color: $wetAsphalt;
|
||||
}
|
||||
|
||||
.site-nav__tray-inner {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
&.collapsed .site-nav__tray {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.site-nav__band {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: $wetAsphalt;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
margin-top: 2em;
|
||||
padding: 1em 0;
|
||||
background-color: $wetAsphalt;
|
||||
}
|
||||
|
||||
.has-code-block .code-block pre {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.has-code-block + .site-footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.site-footer__credit {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@include breakpoint(sm, true) {
|
||||
|
||||
.site-nav .btn {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
@ -1,138 +0,0 @@
|
||||
body {
|
||||
font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif;
|
||||
color: $gray30;
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&,
|
||||
&:visited {
|
||||
color: $river;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $emerald;
|
||||
}
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $wetAsphalt;
|
||||
}
|
||||
|
||||
|
||||
// Headers
|
||||
h1 {
|
||||
margin: 20px 0;
|
||||
font-weight: 300;
|
||||
font-size: 4em;
|
||||
line-height: 1;
|
||||
color: $emerald;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 18px;
|
||||
|
||||
// Bottom border BEHIND the descenders!
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0.1em;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: $emerald;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: .6667em 0 0.5em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
@include breakpoint(sm, true) {
|
||||
h1 {
|
||||
font-size: 8vw;
|
||||
margin: 3vw 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 6vw;
|
||||
margin: 2vw 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 > a,
|
||||
h2 > a,
|
||||
h3 > a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1:hover > a,
|
||||
h2:hover > a,
|
||||
h3:hover > a {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: -40px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background: url('../img/link.svg') no-repeat;
|
||||
overflow: hidden;
|
||||
text-indent: -999em;
|
||||
}
|
||||
|
||||
.unstyled {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.light-text-dark-box {
|
||||
|
||||
p {
|
||||
color: $clouds;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $clouds;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
padding: 0;
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.2em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
color: get-color(black);
|
||||
background-color: rgba(0,0,0,0.04);
|
||||
border-radius: 3px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
letter-spacing: -0.2em;
|
||||
content: "\00a0";
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "normalize";
|
||||
@import "global";
|
||||
@import "type";
|
||||
@import "grid";
|
||||
@import "site-nav";
|
||||
@import "demo-list";
|
||||
@import "faq";
|
||||
@import "buttons";
|
||||
@import "helpers";
|
||||
@import "compound-filters";
|
||||
@ -1,44 +0,0 @@
|
||||
{
|
||||
"name": "shufflejs",
|
||||
"homepage": "https://github.com/Vestride/Shuffle",
|
||||
"authors": [
|
||||
"Glen Cheney <cheney.glen@gmail.com>"
|
||||
],
|
||||
"description": "Categorize, sort, and filter a responsive grid of items",
|
||||
"main": "dist/shuffle.js",
|
||||
"moduleType": [
|
||||
"amd",
|
||||
"globals"
|
||||
],
|
||||
"keywords": [
|
||||
"gallery",
|
||||
"shuffle",
|
||||
"layout",
|
||||
"masonry",
|
||||
"filter",
|
||||
"sort",
|
||||
"responsive",
|
||||
"grid",
|
||||
"mobile",
|
||||
"tiles"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"**/_*",
|
||||
"css",
|
||||
"img",
|
||||
"js",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"gulp",
|
||||
"gulpfile.js",
|
||||
"favicon.png",
|
||||
"index.html",
|
||||
"robots.txt",
|
||||
"test",
|
||||
"tests",
|
||||
"webpack.config.js",
|
||||
"webpack.config.min.js"
|
||||
]
|
||||
}
|
||||
@ -1,122 +0,0 @@
|
||||
/*=============================================* Some styles to show off masonry layout
|
||||
\*=============================================*/
|
||||
.picture-item {
|
||||
height: 220px;
|
||||
margin-top: 24px;
|
||||
margin-left: 0;
|
||||
/* shuffle items shouldn't have a left margin*/ }
|
||||
.picture-item img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover; }
|
||||
.no-objectfit .picture-item img {
|
||||
height: auto;
|
||||
max-width: 100%; }
|
||||
|
||||
.picture-item--h2 {
|
||||
height: 464px;
|
||||
/* 2x the height + 1 gutter */ }
|
||||
|
||||
.picture-item__inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #ECF0F1; }
|
||||
|
||||
.picture-item__blur {
|
||||
display: none; }
|
||||
|
||||
.picture-item__details,
|
||||
.picture-item__description {
|
||||
padding: 1em;
|
||||
width: 100%; }
|
||||
|
||||
.picture-item__description {
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
padding-right: 2em; }
|
||||
|
||||
.picture-item__tags {
|
||||
margin: 0; }
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.picture-item--overlay .picture-item__details {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
overflow: hidden; }
|
||||
.picture-item--overlay .picture-item__description {
|
||||
display: none; }
|
||||
@supports ((-webkit-filter: blur(1px)) or (filter: blur(1px))) and ((-webkit-clip-path: inset(0 0 0 0)) or (clip-path: inset(0 0 0 0))) {
|
||||
.picture-item--overlay .picture-item__blur {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
-webkit-filter: blur(7px);
|
||||
filter: blur(7px);
|
||||
-webkit-clip-path: inset(170px 0 0 0);
|
||||
clip-path: inset(170px 0 0 0); }
|
||||
.picture-item--overlay .picture-item__details {
|
||||
background: none; }
|
||||
.picture-item--overlay .picture-item__tags,
|
||||
.picture-item--overlay .picture-item__title {
|
||||
position: relative;
|
||||
z-index: 2; } } }
|
||||
|
||||
/*
|
||||
Shuffle needs either relative or absolute positioning on the container
|
||||
It will set it for you, but it'll cause another style recalculation and layout.
|
||||
AKA worse performance - so just set it here
|
||||
*/
|
||||
.my-shuffle-container {
|
||||
position: relative;
|
||||
overflow: hidden; }
|
||||
|
||||
.my-sizer-element {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
visibility: hidden; }
|
||||
|
||||
/* Animate in styles */
|
||||
.shuffle--animatein {
|
||||
overflow: visible; }
|
||||
|
||||
.shuffle--animatein .picture-item__inner {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, 220px);
|
||||
transform: translate(0, 220px); }
|
||||
|
||||
.shuffle--animatein .picture-item__inner--transition {
|
||||
transition: all .6s ease; }
|
||||
|
||||
.shuffle--animatein .picture-item.in .picture-item__inner {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0); }
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.picture-item {
|
||||
height: auto;
|
||||
margin-top: 20px; }
|
||||
.picture-item.picture-item--h2 {
|
||||
height: auto; }
|
||||
.picture-item .picture-item__details,
|
||||
.picture-item .picture-item__description {
|
||||
font-size: .875em;
|
||||
padding: .625em; }
|
||||
.picture-item .picture-item__description {
|
||||
padding-right: .875em;
|
||||
padding-bottom: 1.25em; }
|
||||
.filter > .row,
|
||||
.filter > .row > div {
|
||||
margin: 10px 0; }
|
||||
.m-nofloat {
|
||||
float: none; } }
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,188 @@
|
||||
[
|
||||
{
|
||||
"groups": ["nature"],
|
||||
"source": "https://unsplash.com/photos/zshyCr6HGw0",
|
||||
"date": "2017-04-30",
|
||||
"title": "Lake Walchen",
|
||||
"images": {
|
||||
"small": "https://images.unsplash.com/photo-1493585552824-131927c85da2?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=6ef0f8984525fc4500d43ffa53fe8190",
|
||||
"small-2x": "https://images.unsplash.com/photo-1493585552824-131927c85da2?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=6ef0f8984525fc4500d43ffa53fe8190",
|
||||
"large": "https://images.unsplash.com/photo-1493585552824-131927c85da2?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=3bd6c16cb04e08ff57de2001770f8311",
|
||||
"large-2x": "https://images.unsplash.com/photo-1493585552824-131927c85da2?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=3bd6c16cb04e08ff57de2001770f8311"
|
||||
},
|
||||
"description": "A deep blue lake sits in the middle of vast hills covered with evergreen trees",
|
||||
"type": "small",
|
||||
"cols": [3, 4, 3]
|
||||
},
|
||||
{
|
||||
"groups": ["city"],
|
||||
"source": "https://unsplash.com/photos/RRNbMiPmTZY",
|
||||
"date": "2016-07-01",
|
||||
"title": "Golden Gate Bridge",
|
||||
"images": {
|
||||
"small": "https://images.unsplash.com/photo-1467348733814-f93fc480bec6?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=c7e6f790e22b5e61c2a757ead9c34759",
|
||||
"small-2x": "https://images.unsplash.com/photo-1467348733814-f93fc480bec6?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=c7e6f790e22b5e61c2a757ead9c34759",
|
||||
"large": "https://images.unsplash.com/photo-1467348733814-f93fc480bec6?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=2590c736835ec6555e952e19bb37f06e",
|
||||
"large-2x": "https://images.unsplash.com/photo-1467348733814-f93fc480bec6?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=2590c736835ec6555e952e19bb37f06e"
|
||||
},
|
||||
"description": "Looking down over one of the pillars of the Golden Gate Bridge to the roadside and water below",
|
||||
"extras": ["overlay"],
|
||||
"type": "wide",
|
||||
"cols": [3, 8, 6]
|
||||
},
|
||||
{
|
||||
"groups": ["animal"],
|
||||
"source": "https://unsplash.com/photos/YOX8ZMTo7hk",
|
||||
"date": "2016-08-12",
|
||||
"title": "Crocodile",
|
||||
"images": {
|
||||
"small": "https://images.unsplash.com/photo-1471005197911-88e9d4a7834d?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=bd8b952c4c983d4bde5e2018c90c9124",
|
||||
"small-2x": "https://images.unsplash.com/photo-1471005197911-88e9d4a7834d?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=bd8b952c4c983d4bde5e2018c90c9124",
|
||||
"large": "https://images.unsplash.com/photo-1471005197911-88e9d4a7834d?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=e26be7f5704cffb3bddce22148a8118a",
|
||||
"large-2x": "https://images.unsplash.com/photo-1471005197911-88e9d4a7834d?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=e26be7f5704cffb3bddce22148a8118a"
|
||||
},
|
||||
"description": "A close, profile view of a crocodile looking directly into the camera",
|
||||
"type": "small",
|
||||
"cols": [3, 4, 3]
|
||||
},
|
||||
{
|
||||
"groups": ["space"],
|
||||
"source": "https://unsplash.com/photos/GDdRP7U5ct0",
|
||||
"date": "2016-03-07",
|
||||
"title": "SpaceX",
|
||||
"images": {
|
||||
"small": "https://images.unsplash.com/photo-1457364559154-aa2644600ebb?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=3d0e3e8d72fc5667fd9fbe354e80957b",
|
||||
"small-2x": "https://images.unsplash.com/photo-1457364559154-aa2644600ebb?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=3d0e3e8d72fc5667fd9fbe354e80957b",
|
||||
"large": "https://images.unsplash.com/photo-1457364559154-aa2644600ebb?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=62c4791948e0b871c95d0485efca3e74",
|
||||
"large-2x": "https://images.unsplash.com/photo-1457364559154-aa2644600ebb?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=62c4791948e0b871c95d0485efca3e74"
|
||||
},
|
||||
"description": "SpaceX launches a Falcon 9 rocket from Cape Canaveral Air Force Station",
|
||||
"extras": ["h2"],
|
||||
"type": "tall",
|
||||
"cols": [3, 4, 3]
|
||||
},
|
||||
{
|
||||
"groups": ["city"],
|
||||
"source": "https://unsplash.com/photos/7nrsVjvALnA",
|
||||
"date": "2016-06-09",
|
||||
"title": "Crossroads",
|
||||
"images": {
|
||||
"small": "https://images.unsplash.com/photo-1465447142348-e9952c393450?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=7d97e22d36a9a73beb639a936e6774e9",
|
||||
"small-2x": "https://images.unsplash.com/photo-1465447142348-e9952c393450?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=7d97e22d36a9a73beb639a936e6774e9",
|
||||
"large": "https://images.unsplash.com/photo-1465447142348-e9952c393450?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=c5d7cdb3aa81a476198da2648dd9b826",
|
||||
"large-2x": "https://images.unsplash.com/photo-1465447142348-e9952c393450?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=c5d7cdb3aa81a476198da2648dd9b826"
|
||||
},
|
||||
"description": "A multi-level highway stack interchange in Puxi, Shanghai",
|
||||
"type": "small",
|
||||
"cols": [3, 4, 3]
|
||||
},
|
||||
{
|
||||
"groups": ["space", "nature"],
|
||||
"source": "https://unsplash.com/photos/_4Ib-a8g9aA",
|
||||
"date": "2016-06-29",
|
||||
"title": "Milky Way",
|
||||
"images": {
|
||||
"small": "https://images.unsplash.com/photo-1467173572719-f14b9fb86e5f?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=cdc2d3d21c872193c66d31f05aaa421d",
|
||||
"small-2x": "https://images.unsplash.com/photo-1467173572719-f14b9fb86e5f?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=cdc2d3d21c872193c66d31f05aaa421d",
|
||||
"large": "https://images.unsplash.com/photo-1467173572719-f14b9fb86e5f?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=e641d6b3c4c2c967e80e998d02a4d03b",
|
||||
"large-2x": "https://images.unsplash.com/photo-1467173572719-f14b9fb86e5f?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=e641d6b3c4c2c967e80e998d02a4d03b"
|
||||
},
|
||||
"description": "Dimly lit mountains give way to a starry night showing the Milky Way",
|
||||
"extras": ["overlay"],
|
||||
"type": "wide",
|
||||
"cols": [6, 8, 6]
|
||||
},
|
||||
{
|
||||
"groups": ["space"],
|
||||
"source": "https://unsplash.com/photos/yZygONrUBe8",
|
||||
"date": "2015-11-06",
|
||||
"title": "Earth",
|
||||
"images": {
|
||||
"small": "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=d479589955bd9f45f2ee914532ba414e",
|
||||
"small-2x": "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=d479589955bd9f45f2ee914532ba414e",
|
||||
"large": "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=f4856588634def31d5885dc396fe9a2e",
|
||||
"large-2x": "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=f4856588634def31d5885dc396fe9a2e"
|
||||
},
|
||||
"description": "NASA Satellite view of Earth",
|
||||
"extras": ["h2"],
|
||||
"type": "large",
|
||||
"cols": [6, 8, 6]
|
||||
},
|
||||
{
|
||||
"groups": ["animal"],
|
||||
"source": "https://unsplash.com/photos/L-2p8fapOA8",
|
||||
"date": "2015-07-23",
|
||||
"title": "Turtle",
|
||||
"images": {
|
||||
"small": "https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=bc4e1180b6b8789d38c614edc8d0dd01",
|
||||
"small-2x": "https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=bc4e1180b6b8789d38c614edc8d0dd01",
|
||||
"large": "https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=992981aed536106dd1865fb2a97b331d",
|
||||
"large-2x": "https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=992981aed536106dd1865fb2a97b331d"
|
||||
},
|
||||
"description": "A close up of a turtle underwater",
|
||||
"extras": ["h2"],
|
||||
"type": "tall",
|
||||
"cols": [3, 4, 3]
|
||||
},
|
||||
{
|
||||
"groups": ["nature"],
|
||||
"source": "https://unsplash.com/photos/b-yEdfrvQ50",
|
||||
"date": "2014-10-12",
|
||||
"title": "Stanley Park",
|
||||
"images": {
|
||||
"small": "https://images.unsplash.com/uploads/1413142095961484763cf/d141726c?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=6141097da144d759176d77b4024c064b",
|
||||
"small-2x": "https://images.unsplash.com/uploads/1413142095961484763cf/d141726c?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=6141097da144d759176d77b4024c064b",
|
||||
"large": "https://images.unsplash.com/uploads/1413142095961484763cf/d141726c?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=d54eaf9ae3abedc7709a8f2003add79a",
|
||||
"large-2x": "https://images.unsplash.com/uploads/1413142095961484763cf/d141726c?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=d54eaf9ae3abedc7709a8f2003add79a"
|
||||
},
|
||||
"description": "Many trees stand alonside a hill which overlooks a pedestrian path, next to the ocean at Stanley Park in Vancouver, Canada",
|
||||
"type": "small",
|
||||
"cols": [3, 4, 3]
|
||||
},
|
||||
{
|
||||
"groups": ["animal"],
|
||||
"source": "https://unsplash.com/photos/FqkBXo2Nkq0",
|
||||
"date": "2017-01-12",
|
||||
"title": "Astronaut Cat",
|
||||
"images": {
|
||||
"small": "https://images.unsplash.com/photo-1484244233201-29892afe6a2c?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=98423596f72d9f0913a4d44f0580a34c",
|
||||
"small-2x": "https://images.unsplash.com/photo-1484244233201-29892afe6a2c?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=98423596f72d9f0913a4d44f0580a34c",
|
||||
"large": "https://images.unsplash.com/photo-1484244233201-29892afe6a2c?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=af0c7497e581b7efd906db9f20937b8b",
|
||||
"large-2x": "https://images.unsplash.com/photo-1484244233201-29892afe6a2c?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=af0c7497e581b7efd906db9f20937b8b"
|
||||
},
|
||||
"description": "An intrigued cat sits in grass next to a flag planted in front of it with an astronaut space kitty sticker on beige fabric.",
|
||||
"type": "small",
|
||||
"cols": [3, 4, 3]
|
||||
},
|
||||
{
|
||||
"groups": ["city"],
|
||||
"source": "https://unsplash.com/photos/h3jarbNzlOg",
|
||||
"date": "2017-01-19",
|
||||
"title": "San Francisco",
|
||||
"images": {
|
||||
"small": "https://images.unsplash.com/photo-1484851050019-ca9daf7736fb?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=e81b5cec7eec8fef5d4faed3ecc37a1b",
|
||||
"small-2x": "https://images.unsplash.com/photo-1484851050019-ca9daf7736fb?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=e81b5cec7eec8fef5d4faed3ecc37a1b",
|
||||
"large": "https://images.unsplash.com/photo-1484851050019-ca9daf7736fb?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=05325a7cc678f7f765cbbdcf7159ab89",
|
||||
"large-2x": "https://images.unsplash.com/photo-1484851050019-ca9daf7736fb?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=05325a7cc678f7f765cbbdcf7159ab89"
|
||||
},
|
||||
"description": "Pier 14 at night, looking towards downtown San Francisco's brightly lit buildings",
|
||||
"extras": ["overlay"],
|
||||
"type": "wide",
|
||||
"cols": [3, 8, 6]
|
||||
},
|
||||
{
|
||||
"groups": ["nature", "city"],
|
||||
"source": "https://unsplash.com/photos/utwYoEu9SU8",
|
||||
"date": "2015-10-20",
|
||||
"title": "Central Park",
|
||||
"images": {
|
||||
"small": "https://images.unsplash.com/photo-1445346366695-5bf62de05412?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=1822bfd69c4021973a3d926e9294b70f",
|
||||
"small-2x": "https://images.unsplash.com/photo-1445346366695-5bf62de05412?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=1822bfd69c4021973a3d926e9294b70f",
|
||||
"large": "https://images.unsplash.com/photo-1445346366695-5bf62de05412?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=43f26c1f7fce5aa6f763ff71cb422e1b",
|
||||
"large-2x": "https://images.unsplash.com/photo-1445346366695-5bf62de05412?ixlib=rb-0.3.5&auto=format&q=55&fm=jpg&dpr=2&crop=entropy&cs=tinysrgb&w=584&h=329&fit=crop&s=43f26c1f7fce5aa6f763ff71cb422e1b"
|
||||
},
|
||||
"description": "Looking down on central park and the surrounding builds from the Rockefellar Center",
|
||||
"type": "small",
|
||||
"cols": [3, 4, 3]
|
||||
}
|
||||
]
|
||||
@ -1,11 +1,11 @@
|
||||
<h2>Advanced Filtering<a href="#advanced-filters"></a></h2>
|
||||
<h2>Advanced Filters<a href="#advanced-filters"></a></h2>
|
||||
|
||||
<p>By passing a function to <code>filter</code>, you can fully customize filtering items. Shuffle will iterate over each item and give your function the element and the shuffle instance. Return <code>true</code> to keep the element or <code>false</code> to hide it.</p>
|
||||
|
||||
<h3>Example</h3>
|
||||
<div class="code-block">
|
||||
<pre rel="JavaScript"><code class="language-javascript">// Filters elements with a data-title attribute with less than 10 characters
|
||||
instance.filter(function (element) {
|
||||
shuffleInstance.filter(function (element) {
|
||||
return element.getAttribute('data-title').length < 10;
|
||||
});</code></pre>
|
||||
</div>
|
||||
@ -1,5 +1,7 @@
|
||||
<h2>Changes<a href="#changelog"></a></h2>
|
||||
<h2>Changelog<a href="#changelog"></a></h2>
|
||||
<p>For a more detailed changelog, visit <a href="https://github.com/Vestride/Shuffle/releases">the latest releases</a> on GitHub.</p>
|
||||
<ul>
|
||||
<li><code>v5.0.0</code> x/x/17 - Change global export from <code>shuffle</code> to <code>Shuffle</code>. Remove bower support. Expect ES6 environment. Make Shuffle instances Event Emitters instead of dispatching <code>CustomEvent</code>.</li>
|
||||
<li><code>v4.2.0</code> 5/10/17 - Replace <code>webpack</code> build with <code>rollup</code>. Replace <code>jshint</code> and <code>jscs</code> with <code>eslint</code>. Add <code>filterMode</code> option.</li>
|
||||
<li><code>v4.1.1</code> 3/21/17 - the <code>before</code> styles for a <code>ShuffleItem</code> were not applied if the item didn’t move.</li>
|
||||
<li><code>v4.1.0</code> 1/30/17 - Use webpack-2 to bundle Shuffle.</li>
|
||||
@ -0,0 +1,19 @@
|
||||
<h2>Events<a href="#events"></a></h2>
|
||||
<p>Shuffle is a subclass of <a href="https://www.npmjs.com/package/tiny-emitter">TinyEmitter</a>. It emits an event when a layout happens and when elements are removed. The event names are <code>Shuffle.EventType.LAYOUT</code> and <code>Shuffle.EventType.REMOVED</code>.</p>
|
||||
|
||||
<h3>Get notified when a layout happens</h3>
|
||||
<div class="code-block">
|
||||
<pre rel="JavaScript"><code class="language-javascript">shuffleInstance.on(Shuffle.EventType.LAYOUT, function () {
|
||||
console.log('Things finished moving!');
|
||||
});</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Do something when an item is removed</h3>
|
||||
<div class="code-block">
|
||||
<pre rel="JavaScript"><code class="language-javascript">shuffleInstance.on(Shuffle.EventType.REMOVED, function (data) {
|
||||
console.log(this, data, data.collection, data.shuffle);
|
||||
});</code></pre>
|
||||
</div>
|
||||
|
||||
<p class="demo-link-container">Check out the <a href="#demo">demo</a> at the top of the page, or its <a href="/js/demos/homepage.js">JavaScript file.</a></p>
|
||||
@ -0,0 +1,45 @@
|
||||
<h2>Filters<a href="#filters"></a></h2>
|
||||
|
||||
<h3>Filter by a group</h3>
|
||||
<p>Use the <code>filter()</code> method. If, for example, you wanted to show only items that match <code>"space"</code>, you would do this:</p>
|
||||
|
||||
<div class="code-block">
|
||||
<pre rel="JavaScript"><code class="language-javascript">shuffleInstance.filter('space');</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Filter by multiple groups</h3>
|
||||
<p>Show multiple groups at once by using an array.</p>
|
||||
|
||||
<div class="code-block">
|
||||
<pre rel="JavaScript"><code class="language-javascript">shuffleInstance.filter(['space', 'nature']);</code></pre>
|
||||
</div>
|
||||
|
||||
<p>By default, this will show items that match <code>space</code> <em>or</em> <code>nature</code>. To show only groups that match <code>space</code> <em>and</em> <code>nature</code>, set the <code>filterMode</code> option to <code>Shuffle.FilterMode.ALL</code>.</p>
|
||||
|
||||
<h3>Show all items</h3>
|
||||
<p>To go back to having no items filtered, you can call <code>filter()</code> without a parameter, or use <code>Shuffle.ALL_ITEMS</code> (which by default is the string <code>"all"</code>).</p>
|
||||
|
||||
<div class="code-block">
|
||||
<pre rel="JavaScript"><code class="language-javascript">shuffleInstance.filter(Shuffle.ALL_ITEMS); // or .filter()</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Filter and sort</h3>
|
||||
<p>You can filter and sort at the same time by passing a <a href="#sorting">sort object</a> as the second parameter.</p>
|
||||
|
||||
<div class="code-block">
|
||||
<pre rel="JavaScript"><code class="language-javascript">shuffleInstance.filter('space', {
|
||||
by: function (element) {
|
||||
return element.getAttribute('data-title').toLowerCase();
|
||||
},
|
||||
});</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Overrides</h3>
|
||||
<p>You can override both <code>Shuffle.ALL_ITEMS</code> and <code>Shuffle.FILTER_ATTRIBUTE_KEY</code> if you want.</p>
|
||||
|
||||
<div class="code-block">
|
||||
<pre rel="JavaScript"><code class="language-javascript">Shuffle.ALL_ITEMS = 'any';
|
||||
Shuffle.FILTER_ATTRIBUTE_KEY = 'categories';</code></pre>
|
||||
</div>
|
||||
|
||||
<p>Then you would have to use <code>data-categories</code> attribute on your items instead of <code>data-groups</code>.</p>
|
||||
@ -0,0 +1,17 @@
|
||||
<footer class="site-footer light-text-dark-box">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<nav class="col-6@xs visible@xs">
|
||||
<ul class="unstyled">
|
||||
<li><a href="{{ site.baseurl }}/faq">FAQ</a></li>
|
||||
<li><a href="https://github.com/Vestride/Shuffle">View Shuffle on GitHub</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="col-6@xs col-12@sm">
|
||||
{%- if page.photoCredit != false -%}
|
||||
<p class="site-footer__credit">Photos by the amazing people on <a href="https://unsplash.com/collections/1008516/shuffle-images" target="_blank">Unsplash.com</a>.</p>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@ -0,0 +1,14 @@
|
||||
<div class="col-12@sm">
|
||||
<h2>Install<a href="#install"></a></h2>
|
||||
</div>
|
||||
<div class="col-12@sm">
|
||||
<div class="code-block">
|
||||
<pre><code class="language-bash">npm install shufflejs</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6@sm">
|
||||
<nav>
|
||||
<a href="http://codepen.io/pen?template=qrjOpX" target="_blank" rel="noopener">Start a CodePen with a Shuffle template</a>
|
||||
<a href="https://github.com/Vestride/Shuffle/releases">See the latest releases</a>
|
||||
</nav>
|
||||
</div>
|
||||
@ -0,0 +1,72 @@
|
||||
<nav class="site-nav">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12@sm site-nav__content">
|
||||
<a class="site-nav__logo" href="{{ site.baseurl }}/">
|
||||
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
|
||||
<title>Shuffle.js logo</title>
|
||||
<rect x="2" y="2" width="8" height="18" fill="#2dcb71"/>
|
||||
<rect x="12" y="2" width="8" height="8" fill="#9b59b5"/>
|
||||
<rect x="22" y="2" width="8" height="12" fill="#f39b11"/>
|
||||
<rect x="2" y="22" width="8" height="8" fill="#e74b3b"/>
|
||||
<rect x="12" y="12" width="8" height="8" fill="#3397db"/>
|
||||
<rect x="22" y="16" width="8" height="4" fill="#1abb9b"/>
|
||||
<rect x="12" y="22" width="18" height="8" fill="#33495d"/>
|
||||
</svg>
|
||||
<span class="site-nav__name">Shuffle.js</span>
|
||||
</a>
|
||||
<div class="site-nav__links">
|
||||
<div class="site-nav__link site-nav__link--dropdown">
|
||||
<button class="site-nav__link-toggle btn" id="docs-dropdown-btn" aria-label="Click to reveal list of Shuffle demos" aria-haspopup="true" aria-controls="docs-dropdown" aria-expanded="false">Docs</button>
|
||||
<div class="site-nav__dropdown site-nav__dropdown--simple-links" id="docs-dropdown" aria-labelledby="docs-dropdown-btn">
|
||||
<ol class="unstyled">
|
||||
<li><a href="{{ site.baseurl }}/#install">Install</a></li>
|
||||
<li><a href="{{ site.baseurl }}/#features">Features</a></li>
|
||||
<li><a href="{{ site.baseurl }}/#options">Options</a></li>
|
||||
<li><a href="{{ site.baseurl }}/#usage">Usage</a></li>
|
||||
<li><a href="{{ site.baseurl }}/#filters">Filters</a></li>
|
||||
<li><a href="{{ site.baseurl }}/#advanced-filters">Advanced Filters</a></li>
|
||||
<li><a href="{{ site.baseurl }}/#sorting">Sorting</a></li>
|
||||
<li><a href="{{ site.baseurl }}/#events">Events</a></li>
|
||||
<li><a href="{{ site.baseurl }}/#adding-removing">Adding and Removing Items</a></li>
|
||||
<li><a href="{{ site.baseurl }}/#public-methods">Public Methods</a></li>
|
||||
<li><a href="{{ site.baseurl }}/#custom-styles">Custom Styles</a></li>
|
||||
<li><a href="{{ site.baseurl }}/#dependencies">Dependencies</a></li>
|
||||
<li><a href="{{ site.baseurl }}/#supported-browsers">Supported Browsers</a></li>
|
||||
<li><a href="{{ site.baseurl }}/#changelog">Changelog</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-nav__link site-nav__link--dropdown">
|
||||
<button class="site-nav__link-toggle btn" id="demos-dropdown-btn" aria-label="Click to reveal list of Shuffle demos" aria-haspopup="true" aria-controls="demos-dropdown" aria-expanded="false">Demos</button>
|
||||
<div class="site-nav__dropdown" id="demos-dropdown" aria-labelledby="demos-dropdown-btn">
|
||||
<ul class="unstyled">
|
||||
{% for post in site.data.demos %}
|
||||
<li class="">
|
||||
{% if post.external %}
|
||||
<a href="{{ post.url }}" target="_blank" rel="noopener">
|
||||
{% else %}
|
||||
<a href="{{ site.baseurl }}/{{ post.slug }}">
|
||||
{% endif %}
|
||||
<figure>
|
||||
<picture>
|
||||
<source srcset="{{ site.baseurl }}/img/demos/{{ post.slug }}.webp" type="image/webp">
|
||||
<img src="{{ site.baseurl }}/img/demos/{{ post.slug }}.jpg" alt="{{ post.label }}">
|
||||
</picture>
|
||||
<figcaption>{{ post.label }}</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a class="site-nav__link hidden@xs" href="{{ site.baseurl }}/faq">FAQ</a>
|
||||
<a class="site-nav__link hidden@xs" href="https://github.com/Vestride/Shuffle">
|
||||
<img class="site-nav__link-img" src="{{ site.baseurl }}/img/github.svg" alt="View Shuffle on GitHub" title="" width="16" height="16">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,34 @@
|
||||
{%- if item.extras | size: > 0 -%}
|
||||
{%- capture extras %} picture-item--{{ item.extras | join: " picture-item--" }}{%- endcapture -%}
|
||||
{%- else -%}
|
||||
{%- assign extras = "" -%}
|
||||
{%- endif -%}
|
||||
{%- assign description = item.description -%}
|
||||
<figure class="col-{{ item.cols[0] }}@xs col-{{ item.cols[1] }}@sm col-{{ item.cols[2] }}@md picture-item{{ extras }}" data-groups='{{ item.groups | jsonify }}' data-date-created="{{ item.date }}" data-title="{{ item.title }}">
|
||||
<div class="picture-item__inner">
|
||||
{%- if item.type != 'wide' -%}
|
||||
<div class="aspect aspect--16x9">
|
||||
<div class="aspect__inner">
|
||||
{%- endif -%}
|
||||
{%- if item.type == 'small' or item.type == 'tall' -%}
|
||||
{%- assign src1x = item.images.small -%}
|
||||
{%- assign src2x = item.images.small-2x -%}
|
||||
{%- else -%}
|
||||
{%- assign src1x = item.images.large -%}
|
||||
{%- assign src2x = item.images.large-2x -%}
|
||||
{%- endif -%}
|
||||
<img src="{{ src1x }}" srcset="{{ src1x }} 1x, {{ src2x }} 2x" alt="{{ item.description }}" />
|
||||
<img class="picture-item__blur" src="{{ src1x }}" srcset="{{ src1x }} 1x, {{ src2x }} 2x" alt="" aria-hidden="true" />
|
||||
{%- if item.type != 'wide' -%}
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
<div class="picture-item__details">
|
||||
<figcaption class="picture-item__title"><a href="{{ item.source }}" target="_blank">{{ item.title }}</a></figcaption>
|
||||
<p class="picture-item__tags hidden@xs">{{ item.groups | join: ', ' }}</p>
|
||||
</div>
|
||||
{%- if item.type == 'large' or item.type == 'tall' -%}
|
||||
<p class="picture-item__description">{{ item.description }}</p>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</figure>
|
||||
@ -1,26 +1,23 @@
|
||||
{% if page.jquery %}
|
||||
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
|
||||
{% endif %}
|
||||
|
||||
{% if page.shuffle != false %}
|
||||
<!-- Shuffle! -->
|
||||
<script src="{{ site.baseurl }}/dist/shuffle.js"></script>
|
||||
{% endif %}
|
||||
|
||||
{% if page.prism %}
|
||||
{% if page.requirejs %}
|
||||
<script data-main="{{ site.baseurl }}/js/require-main.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>
|
||||
{% else %}
|
||||
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
|
||||
<!-- Syntax highlighting via Prism -->
|
||||
<script src="{{ site.baseurl }}/js/prism.js"></script>
|
||||
<!-- Shuffle! -->
|
||||
<script src="{{ site.baseurl }}/dist/shuffle.js"></script>
|
||||
{% endif %}
|
||||
<script src="{{ site.baseurl }}/js/site-nav.js"></script>
|
||||
|
||||
<script>var site_url = "{{ site.baseurl }}";</script>
|
||||
{% if page.pagejs != false %}
|
||||
<script src="{{ site.baseurl }}/js/evenheights.js"></script>
|
||||
<script src="{{ site.baseurl }}/js/page.js"></script>
|
||||
{% if page.externalJS %}
|
||||
{% for src in page.externalJS %}
|
||||
<script src="{{ src }}"></script>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.extraJS && page.extraJS.length %}
|
||||
{% for src in page.extraJS %}
|
||||
<script src="{{ site.baseurl }}/js/{{ src }}"></script>
|
||||
<script src="{{ site.baseurl }}/js/{{ src }}"{% if page.jsType %} type="{{ page.jsType }}"{% endif %}></script>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
layout: default
|
||||
title: Flexbox Grid Demo
|
||||
description: A demo of Shuffle with a flexbox grid from Bootstrap 4.
|
||||
image: /demos/flexbox-grid.jpg
|
||||
externalCSS: [ "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" ]
|
||||
extraJS: [ "demos/padding-grid.js" ]
|
||||
prism: true
|
||||
photoCredit: false
|
||||
---
|
||||
<style>
|
||||
/* Allow bootstrap grid elements to fit on mobile */
|
||||
@media (max-width: 575px) {
|
||||
.row > [class*="col-"] {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2>Shuffle with Flexbox (Bootstrap 4)</h2>
|
||||
<p>On this page, I have added the minified bootstrap css file from the <a href="https://www.bootstrapcdn.com/">Bootstrap CDN</a> (which is also why some of the site-styles are being overriden).</p>
|
||||
<p>The <a href="https://v4-alpha.getbootstrap.com/layout/grid/">Bootstrap 4 grid</a> system uses flexbox with padding for gutters.</p>
|
||||
<p>The best way to handle this is to have the shuffle container element (<code>#grid</code> in this case), to be a <code>.row</code> so that all the shuffle items remain flex-items.</p>
|
||||
<p class="mb-0">If you cannot make the shuffle container element a <code>.row</code>, you will need to set a <code>width</code> for each column (like <code>width: 25%;</code>).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container mb-4">
|
||||
<div id="grid" class="my-shuffle-container row">
|
||||
{% for i in (1..20) %}
|
||||
<div class="grid__brick mt-3 col-6 col-md-4 col-xl-3">
|
||||
<div class="card {% cycle 'card-primary card-inverse', 'card-success card-inverse', 'card-info card-inverse', 'card-warning card-inverse', 'card-danger card-inverse', 'card-outline-primary', 'card-outline-success', 'card-outline-info', 'card-outline-warning', 'card-outline-danger' %}">
|
||||
<div class="card-block">
|
||||
{% cycle
|
||||
'Return on investment product management equity crowdfunding stock pivot innovator sales ownership.',
|
||||
'Founders ecosystem hackathon product management lean startup MVP.',
|
||||
'Traction bandwidth MVP direct mailing partner network gen-z growth hacking crowdsource channels responsive web design pivot.',
|
||||
'Conversion technology long tail influencer analytics rockstar market seed money.',
|
||||
'Investor bandwidth equity ecosystem vesting period client social media.',
|
||||
'Angel investor niche market client churn rate crowdsource infrastructure paradigm shift marketing prototype.'
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="col-1 my-sizer-element"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mb-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p>The one change I've made to the grid is to allow grid columns to fit on mobile.</p>
|
||||
<p>By default, bootstrap 4 grid gutters are 30px, even on mobile, and they use as 12 column grid. At 320px, each column would need to be 26.667px for 12 columsn to fit, but since there is 30px of inner gutter, the columns are always >= 30px, so they don't fit for us.</p>
|
||||
<p>If you're using Bootstrap's sass files, you can customize the gutter width via the <code>$grid-gutter-widths</code> map. In this example, I'm overriding it instead.</p>
|
||||
<div class="code-block">
|
||||
<pre rel="CSS"><code class="language-css">@media (max-width: 575px) {
|
||||
.row > [class*="col-"] {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2>Source code for this demo</h2>
|
||||
<p>Link to <a href="{{ site.baseurl }}/js/demos/padding-grid.js">demo source</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2>Shuffle.js</h2>
|
||||
<p>{{ site.longDescription }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
layout: default
|
||||
title: Shuffle with React
|
||||
description: TODO
|
||||
image: /demos/flexbox-grid.jpg
|
||||
extraJS: [ "demos/react.js" ]
|
||||
externalJS: ["https://unpkg.com/react@latest/dist/react.js", "https://unpkg.com/react-dom@latest/dist/react-dom.js", "https://unpkg.com/babel-standalone@6.15.0/babel.min.js"]
|
||||
jsType: "text/babel"
|
||||
prism: true
|
||||
---
|
||||
|
||||
<style>
|
||||
.photo-item {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.photo-attribution {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
display: inline-block;
|
||||
padding: 4px 6px;
|
||||
border-radius: 3px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.photo-attribution > span {
|
||||
display: inline-block;
|
||||
padding: 2px 3px;
|
||||
}
|
||||
|
||||
.photo-attribution svg {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
height: 12px;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
img[src^="data:image"] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12@sm">
|
||||
<h2>Shuffle with React</h2>
|
||||
<p>And other view-based libraries like Vue and Preact.</p>
|
||||
<p>The simplest way is to use <code>shuffleInstance.resetItems();</code> inside the <code>componentDidUpdate()</code> lifecycle method.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="root">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12@sm">
|
||||
Loading React...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container has-code-block">
|
||||
<div class="row">
|
||||
<div class="col-12@sm">
|
||||
<h2>Source code for this demo</h2>
|
||||
<p>Link to <a href="{{ site.baseurl }}/js/demos/react.js">demo source</a></p>
|
||||
<div class="code-block">
|
||||
<pre class="language-jsx" data-src="{{ site.baseurl }}/js/demos/react.js"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,143 @@
|
||||
.btn-group {
|
||||
@include clearfix();
|
||||
|
||||
.btn {
|
||||
float: left;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.btn:not(:first-child) {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.btn:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
label.btn input[type=radio] {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: .75em .8em;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $gray20;
|
||||
color: $gray20;
|
||||
font-size: 1rem;
|
||||
background-color: rgba($gray20, 0);
|
||||
transition: .2s ease-out;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
|
||||
@include with-fine-pointer() {
|
||||
&:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
background-color: $gray20;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-width: 0;
|
||||
box-shadow: 0 0 0 2px rgba($gray20, 0.4);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
|
||||
color: white;
|
||||
background-color: $gray20;
|
||||
}
|
||||
|
||||
&:focus.active {
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 0 0 2px rgba($gray20, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
$btn-variants: (
|
||||
'warning': $carrot,
|
||||
'primary': $river,
|
||||
'danger': $alizarin,
|
||||
'go': $emerald,
|
||||
);
|
||||
|
||||
@each $name, $color in $btn-variants {
|
||||
.btn--#{$name} {
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
background-color: rgba($color, 0);
|
||||
|
||||
@include with-fine-pointer() {
|
||||
&:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px rgba($color, 0.4);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
&:focus.active {
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 0 0 2px rgba($color, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(sm, true) {
|
||||
.btn {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-group .btn {
|
||||
position: relative;
|
||||
|
||||
$size: 20px;
|
||||
// Circle and check
|
||||
&.active:before,
|
||||
&.active:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: $size;
|
||||
height: $size;
|
||||
margin-left: -$size / 2;
|
||||
margin-top: -$size / 2;
|
||||
opacity: 0;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
// Circle
|
||||
&:before {
|
||||
background-color: $gray10;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// Check
|
||||
&:after {
|
||||
background-size: 60%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../img/check.svg);
|
||||
}
|
||||
|
||||
&.active:before,
|
||||
&.active:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,349 @@
|
||||
.site-nav {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid $gray90;
|
||||
margin-bottom: 28px;
|
||||
background: $gray95;
|
||||
}
|
||||
|
||||
.site-nav__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.site-nav__logo {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.site-nav__logo,
|
||||
.site-nav__logo:visited {
|
||||
color: $gray20;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav__logo,
|
||||
.site-nav__links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.site-nav__logo svg {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.site-nav__logo rect {
|
||||
transition: 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
.site-nav__link {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.site-nav__link:not(:last-of-type) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.site-nav__dropdown {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
max-height: 100vh;
|
||||
transition: 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
background-color: white;
|
||||
transform: translateY(10px);
|
||||
box-shadow: 0 7px 10px -1px rgba(0, 0, 0, 0.12);
|
||||
|
||||
// Triangle.
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 32px;
|
||||
display: block;
|
||||
border-bottom: 8px solid white;
|
||||
border-left: 9px solid transparent;
|
||||
border-right: 9px solid transparent;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: $gray30;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: $gray95;
|
||||
text-decoration: none;
|
||||
color: $gray30;
|
||||
}
|
||||
|
||||
figure {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
picture {
|
||||
flex-shrink: 0;
|
||||
width: 100px;
|
||||
height: 100px * 0.75;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav__dropdown--simple-links {
|
||||
a {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav__link-toggle {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
// Dropdown link triangle.
|
||||
.site-nav__link-toggle::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: -1px;
|
||||
margin-left: 4px;
|
||||
border-top: 6px solid currentColor;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
transition: transform 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
.site-nav__link--dropdown-active {
|
||||
// Dropdown link triangle.
|
||||
.site-nav__link-toggle::after {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.site-nav__dropdown {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Rules for non-touch screens
|
||||
@include with-fine-pointer() {
|
||||
$interval: 10ms;
|
||||
.site-nav__logo:hover {
|
||||
rect:nth-of-type(1) {
|
||||
transform: translate(20px, 10px);
|
||||
transition-delay: (1 - 1) * $interval;
|
||||
}
|
||||
|
||||
rect:nth-of-type(2) {
|
||||
transform: translate(0px, 20px);
|
||||
transition-delay: (2 - 1) * $interval;
|
||||
}
|
||||
|
||||
rect:nth-of-type(3) {
|
||||
transform: translate(-20px, 6px);
|
||||
transition-delay: (3 - 1) * $interval;
|
||||
}
|
||||
|
||||
rect:nth-of-type(4) {
|
||||
transform: translate(10px, -10px);
|
||||
transition-delay: (4 - 1) * $interval;
|
||||
}
|
||||
|
||||
rect:nth-of-type(5) {
|
||||
transform: translate(-10px, 10px);
|
||||
transition-delay: (5 - 1) * $interval;
|
||||
}
|
||||
|
||||
rect:nth-of-type(6) {
|
||||
transform: translate(-20px, -14px);
|
||||
transition-delay: (6 - 1) * $interval;
|
||||
}
|
||||
|
||||
rect:nth-of-type(7) {
|
||||
transform: translate(0px, -20px);
|
||||
transition-delay: (7 - 1) * $interval;
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav__link-toggle:hover {
|
||||
border-color: $gray20;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(sm, true) {
|
||||
// Affix the nav when a dropdown is open so that scrolling the page
|
||||
// behind the dropdown doesn't scroll away the nav.
|
||||
body.site-nav--open {
|
||||
padding-top: 51px;
|
||||
}
|
||||
|
||||
body.site-nav--open .site-nav {
|
||||
position: fixed;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.site-nav__dropdown {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 51px;
|
||||
width: 100vw;
|
||||
padding: 8px calc(3.5vw + 8px);
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(sm) {
|
||||
.site-nav {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.site-nav__logo {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.site-nav__logo svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.site-nav__link:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.site-nav__link--dropdown:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.site-nav__dropdown {
|
||||
max-height: none !important; // override inline style.
|
||||
right: -100px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
|
||||
|
||||
&::before {
|
||||
right: 132px;
|
||||
}
|
||||
|
||||
ul {
|
||||
column-count: 2;
|
||||
column-gap: 16px;
|
||||
}
|
||||
|
||||
li {
|
||||
-webkit-column-break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.12))) {
|
||||
.site-nav__dropdown {
|
||||
box-shadow: none;
|
||||
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav__link-img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.site-nav__dropdown--simple-links {
|
||||
right: 0;
|
||||
padding: 0;
|
||||
|
||||
&::before {
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(md) {
|
||||
.site-nav__dropdown {
|
||||
right: 0;
|
||||
|
||||
&::before {
|
||||
right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav__dropdown--simple-links {
|
||||
|
||||
&::before {
|
||||
right: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
// -------------
|
||||
.site-footer {
|
||||
margin-top: 2em;
|
||||
padding: 1em 0;
|
||||
background-color: $gray20;
|
||||
|
||||
p {
|
||||
color: $gray95;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
color: $river;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-code-block .code-block pre {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.has-code-block + .site-footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.site-footer__credit {
|
||||
// margin: 0;
|
||||
}
|
||||
|
||||
@include breakpoint(sm) {
|
||||
.site-footer__credit {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
.textfield {
|
||||
-webkit-appearance: none;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 2px solid $gray60;
|
||||
border-radius: 4px;
|
||||
padding: 0.5em;
|
||||
font-size: 1rem;
|
||||
color: $gray20;
|
||||
transition: .15s;
|
||||
|
||||
&::placeholder {
|
||||
color: $gray60;
|
||||
transition: .15s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline-width: 0;
|
||||
color: $gray30;
|
||||
border-color: $gray30;
|
||||
|
||||
&::placeholder {
|
||||
color: $gray30;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-width: 0;
|
||||
// color: $gray20;
|
||||
border-color: $gray20;
|
||||
|
||||
&::placeholder {
|
||||
color: $gray20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.textfield--large {
|
||||
font-size: 1.125em;
|
||||
}
|
||||
@ -0,0 +1,132 @@
|
||||
body {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
|
||||
color: $gray30;
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&,
|
||||
&:visited {
|
||||
color: $river;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $emerald;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $gray20;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 3vw 0;
|
||||
font-size: 10vw;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
font-size: 7vw;
|
||||
margin: 3vw 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 6vw;
|
||||
margin: 2vw 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
margin: 0.7em 0;
|
||||
font-size: 1.125em;
|
||||
}
|
||||
|
||||
@include breakpoint(sm) {
|
||||
h1 {
|
||||
margin: 0.5em 0 0.25em;
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0.45em 0;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0.8em 0 0.5em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h1 > a,
|
||||
h2 > a,
|
||||
h3 > a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1:hover > a,
|
||||
h2:hover > a,
|
||||
h3:hover > a {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background: url('../img/link.svg') no-repeat;
|
||||
overflow: hidden;
|
||||
text-indent: -999em;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.unstyled {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.type--underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code:not([class*="language"]) {
|
||||
padding: 0;
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.2em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
color: $gray10;
|
||||
background-color: rgba(27,31,35,0.05);
|
||||
border-radius: 3px;
|
||||
font-family: Menlo, Consolas, "Liberation Mono", Courier, monospace;
|
||||
}
|
||||
|
||||
code:not([class*="language"])::before,
|
||||
code:not([class*="language"])::after {
|
||||
content: "\00a0";
|
||||
letter-spacing: -.2em;
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
// FAQ
|
||||
|
||||
.search-section {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.question {
|
||||
float: none;
|
||||
margin: 2em 0;
|
||||
overflow: hidden;
|
||||
transition: .2s ease-out;
|
||||
}
|
||||
|
||||
.question--collapsed {
|
||||
height: 0 !important; // Needs to override inline style
|
||||
margin: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.question--collapsed + .question {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.question--unanswered {
|
||||
padding-top: 1.25em;
|
||||
border-top: 2px solid $emerald;
|
||||
}
|
||||
|
||||
.question__title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.question__answer {
|
||||
padding-bottom: 1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
|
||||
// Filters
|
||||
.filter-label {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 4px;
|
||||
color: $gray60;
|
||||
}
|
||||
|
||||
.filters-group {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@include breakpoint(sm) {
|
||||
.filters-group-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
@import "./extensions/variables";
|
||||
@import "./extensions/mixins";
|
||||
|
||||
@import "./global-rules/global";
|
||||
@import "./global-rules/type";
|
||||
@import "./global-rules/grid";
|
||||
@import "./global-rules/forms";
|
||||
@import "./global-rules/helpers";
|
||||
|
||||
@import "./components/buttons";
|
||||
@import "./components/demo-list";
|
||||
@import "./components/site-nav";
|
||||
|
||||
@import "./pages/homepage-filters";
|
||||
@import "./pages/compound-filters";
|
||||
@import "./pages/faq";
|
||||
@ -0,0 +1,3 @@
|
||||
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
/* search cancel styles removed */
|
||||
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
|
||||
@ -0,0 +1 @@
|
||||
.picture-item{height:220px;margin-top:24px;margin-left:0}.picture-item img{display:block;width:100%}@supports ((-o-object-fit:cover) or (object-fit:cover)){.picture-item img{max-width:none;height:100%;-o-object-fit:cover;object-fit:cover}}.picture-item--h2{height:464px}.picture-item__inner{position:relative;height:100%;overflow:hidden;background:#ecf0f1}img.picture-item__blur{display:none}.picture-item__details{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding:1em}.picture-item__description{width:100%;padding:0 2em 1em 1em;margin:0}.picture-item__title{-ms-flex-negative:0;flex-shrink:0;margin-right:4px}.picture-item__tags{-ms-flex-negative:1;flex-shrink:1;text-align:right;margin:0}@media screen and (min-width:768px){.picture-item--overlay .picture-item__details{position:absolute;bottom:0;left:0;width:100%;background-color:rgba(0,0,0,.6);color:#fff;overflow:hidden}.picture-item--overlay .picture-item__description{display:none}@supports ((-webkit-filter:blur(1px)) or (filter:blur(1px))) and ((-webkit-clip-path:inset(0 0 0 0)) or (clip-path:inset(0 0 0 0))){.picture-item--overlay .picture-item__blur{position:absolute;z-index:1;top:0;left:0;display:block;-webkit-filter:blur(7px);filter:blur(7px);-webkit-clip-path:inset(170px 0 0 0);clip-path:inset(170px 0 0 0)}.picture-item--overlay .picture-item__details{background:none}.picture-item--overlay .picture-item__tags,.picture-item--overlay .picture-item__title{position:relative;z-index:2}}}.my-shuffle-container{position:relative;overflow:hidden}.my-sizer-element{position:absolute;opacity:0;visibility:hidden}.shuffle--animatein{overflow:visible}.shuffle--animatein .picture-item__inner{opacity:0;-webkit-transform:translateY(220px);transform:translateY(220px)}.shuffle--animatein .picture-item__inner--transition{transition:all .6s ease}.shuffle--animatein .picture-item.in .picture-item__inner{opacity:1;-webkit-transform:translate(0);transform:translate(0)}@media screen and (max-width:767px){.picture-item{height:auto;margin-top:20px}.picture-item__description,.picture-item__details{font-size:.875em;padding:.625em}.picture-item__description{padding-right:.875em;padding-bottom:1.25em}.picture-item--h2{height:auto}}
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 199 B After Width: | Height: | Size: 199 B |
|
Before Width: | Height: | Size: 519 B After Width: | Height: | Size: 519 B |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue