Use new images from unsplash.com for demos.

pull/160/head
Glen Cheney 7 years ago
parent 14a416c121
commit 6d19b27789

@ -1,106 +1,188 @@
[
{
"groups": ["photography"],
"date": "2010-09-14",
"title": "Baseball",
"img": "baseball.png",
"original": "baseball.jpg",
"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": ["wallpaper", "3d"],
"date": "2011-08-14",
"title": "Tennis",
"img": "tennis-ball.png",
"original": "tennis-ball.jpg",
"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": ["wallpaper", "3d"],
"date": "2009-05-27",
"title": "iMac",
"img": "imac.png",
"original": "imac.jpg",
"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": ["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!",
"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": [6, 4, 3]
},
{
"groups": ["wallpaper", "3d"],
"date": "2009-09-14",
"title": "Eightfold",
"img": "es-blue.png",
"original": "es-blue.jpg",
"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": ["photography"],
"date": "2012-03-14",
"title": "Pumpkin",
"img": "pumpkin.png",
"original": "pumpkin.jpg",
"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": [3, 8, 6]
},
{
"groups": ["wallpaper", "3d"],
"date": "2013-05-19",
"title": "Vestride",
"img": "vestride-red.png",
"original": "vestride-red.jpg",
"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": [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!",
"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": [6, 4, 3]
},
{
"groups": ["wallpaper"],
"date": "2000-01-01",
"title": "Arc",
"img": "eightfoldarc.png",
"original": "eightfoldarc.jpg",
"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": ["photography"],
"groups": ["animal"],
"source": "https://unsplash.com/photos/FqkBXo2Nkq0",
"date": "2012-07-04",
"title": "Ground",
"img": "ground.png",
"original": "ground!.jpg",
"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": ["wallpaper"],
"date": "2011-08-12",
"title": "Grass",
"img": "grassy-hills.png",
"original": "grassy-hills.tif",
"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": ["wallpaper", "3d"],
"date": "2013-05-19",
"title": "Vestride",
"img": "vestride-classy.png",
"original": "vestride-classy.jpg",
"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,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>

@ -0,0 +1,9 @@
<footer class="site-footer light-text-dark-box">
<div class="container">
<div class="row">
<div class="col-12@sm">
<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>
</div>
</div>
</div>
</footer>

@ -1,23 +1,34 @@
{% 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 }}">
{%- 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">
<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" />
{%- 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>
<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>
{%- 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 description %}{% if description == 'longDescription' %}{% assign description = site.longDescription %}{% endif %}<p class="picture-item__description">{{ description }}</p>{% endif %}
{%- if item.type == 'large' or item.type == 'tall' -%}
<p class="picture-item__description">{{ item.description }}</p>
{%- endif -%}
</div>
</figure>

@ -43,4 +43,4 @@ extraJS: [ "demos/homepage.js" ]
</div>
</div>
{% include credit-jake.html %}
{% include photo-credit.html %}

@ -47,7 +47,7 @@ prism: true
<figure class="js-item img-item col-3@sm col-3@xs">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="{{ site.baseurl }}/img/{{ item.img }}" alt="{{item.title}}"/>
<img src="{{ item.images.small }}" srcset="{{ item.images.small }} 1x, {{ item.images.small-2x }} 2x" alt="{{ item.description }}" />
</div>
</div>
<figcaption>{{ item.groups | join: ', ' }}</figcaption>
@ -124,4 +124,4 @@ prism: true
</div>
{% include credit-jake.html %}
{% include photo-credit.html %}

@ -38,7 +38,7 @@ extraJS: [ "demos/images.js"]
<div class="my-grid-with-images row">
{% for item in site.data.items %}
<figure class="js-item img-item col-3@sm col-3@xs">
<img src="{{ site.baseurl }}/img/{{ item.img }}" alt="{{item.title}}"/>
<img src="{{ item.images.small }}" srcset="{{ item.images.small }} 1x, {{ item.images.small-2x }} 2x" alt="{{ item.description }}" />
<figcaption>{{ item.groups | join: ', ' }}</figcaption>
</figure>
{% endfor %}
@ -46,4 +46,4 @@ extraJS: [ "demos/images.js"]
</div>
</div>
{% include credit-jake.html %}
{% include photo-credit.html %}

@ -50,4 +50,4 @@ extraJS: [ "demos/animate-in.js" ]
</div>
</div>
{% include credit-jake.html %}
{% include photo-credit.html %}

@ -40,7 +40,7 @@ requirejs: true
<figure class="js-item img-item col-3@sm col-3@xs">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="{{ site.baseurl }}/img/{{ item.img }}" alt="{{item.title}}"/>
<img src="{{ item.images.small }}" srcset="{{ item.images.small }} 1x, {{ item.images.small-2x }} 2x" alt="{{ item.description }}" />
</div>
</div>
<figcaption>{{ item.groups }}</figcaption>
@ -61,4 +61,4 @@ requirejs: true
</section>
{% include credit-jake.html %}
{% include photo-credit.html %}

@ -292,6 +292,19 @@
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 {
@ -306,18 +319,3 @@
margin: 0;
text-align: right;
}
.light-text-dark-box {
p {
color: $gray95;
}
a {
color: $gray95;
&:hover {
color: white;
}
}
}

@ -41,18 +41,28 @@ $item-height: 220px;
display: none;
}
.picture-item__details,
.picture-item__description {
padding: 1em;
.picture-item__details {
display: flex;
align-items: baseline;
justify-content: space-between;
width: 100%;
padding: 1em;
}
.picture-item__description {
width: 100%;
padding: 0 2em 1em 1em;
margin: 0;
padding-top: 0;
padding-right: 2em;
}
.picture-item__title {
flex-shrink: 0;
margin-right: 4px;
}
.picture-item__tags {
flex-shrink: 1;
text-align: right;
margin: 0;
}
@ -146,29 +156,20 @@ $item-height: 220px;
.picture-item {
height: auto;
margin-top: 20px;
}
&.picture-item--h2 {
height: auto;
}
.picture-item__details,
.picture-item__description {
font-size: .875em;
padding: .625em;
}
.picture-item__description {
padding-right: .875em;
padding-bottom: 1.25em;
}
.picture-item__details,
.picture-item__description {
font-size: .875em;
padding: .625em;
}
.filter > .row,
.filter > .row > div {
margin: 10px 0;
.picture-item__description {
padding-right: .875em;
padding-bottom: 1.25em;
}
.m-nofloat {
float: none;
.picture-item--h2 {
height: auto;
}
}

@ -1 +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}.picture-item__blur{display:none}.picture-item__description,.picture-item__details{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,.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.picture-item--h2{height:auto}.picture-item .picture-item__description,.picture-item .picture-item__details{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}}
.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}.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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 238 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 214 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 240 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" enable-background="new 0 0 96 96">
<g fill="#34495e">
<path d="M68.1,28.3c-2.4-2.5-5.6-3.9-9.1-4c-3.7-0.1-7.1,1.5-9.7,4.1l-6,6c1.4-0.3,2.9-0.3,4.3-0.1c0.7,0.1,1.3,0.2,2,0.4 c0,0,0,0,0,0c0.8,0.3,1.7,0.1,2.3-0.5l1.6-1.6c1.2-1.2,2.8-2.1,4.6-2.2c2.3-0.2,4.4,0.7,5.9,2.5c2.4,2.8,2,7-0.6,9.6l-8,8 c-0.8,0.8-1.9,1.4-3,1.8c-0.6,0.2-1.1,0.2-1.7,0.3l-0.2,0c-0.5,0-0.9,0-1.4-0.1c-1.3-0.3-2.5-0.9-3.5-1.9c-0.8-0.8-1.4-1.9-1.8-3 c-0.3,0.2-0.6,0.4-0.9,0.7l-1.6,1.6c-1.4,1.4-1.4,3.6-0.1,4.9c0,0,0,0,0,0c1.1,1.1,2.3,1.9,3.6,2.5c0.5,0.3,1.1,0.5,1.8,0.7 c0.7,0.2,1.3,0.4,2,0.4c0.6,0.1,1.2,0.1,1.8,0.1c2.1,0,4.2-0.5,6.1-1.5c1-0.5,1.9-1.2,2.6-1.9c0.2-0.1,0.3-0.3,0.5-0.4l7.9-7.9 C72.6,41.7,73,33.5,68.1,28.3z"/>
<path d="M48.7,61.8c-0.7-0.1-1.3-0.2-2-0.4c0,0,0,0,0,0c-1-0.3-2.1-0.1-2.9,0.7l-1.5,1.5c-1.2,1.2-2.8,2-4.5,2.2 c-2.1,0.2-4.1-0.5-5.5-2c-1.5-1.5-2.2-3.5-2-5.5c0.1-1.7,1-3.3,2.2-4.5l8-8c0.8-0.8,1.9-1.4,3-1.8c0.5-0.2,1.1-0.2,1.7-0.3l0.3,0 c0.5,0,0.9,0,1.4,0.1c1.3,0.3,2.5,0.9,3.5,1.9c0.8,0.8,1.4,1.9,1.7,3c0.3-0.2,0.6-0.4,0.8-0.7l1.6-1.6c1.3-1.3,1.4-3.6,0.1-4.9 c0,0,0,0,0,0c-1.1-1.1-2.3-1.9-3.6-2.5c-0.5-0.3-1.1-0.5-1.8-0.7c-0.7-0.2-1.3-0.4-2-0.4c-2.7-0.4-5.5,0.1-7.9,1.4 c-1,0.5-1.9,1.2-2.6,1.8c-0.2,0.1-0.3,0.2-0.5,0.4l-7.9,7.9c-5,5-5.4,13.2-0.5,18.3c2.4,2.5,5.6,3.9,9.1,4c3.7,0.1,7.1-1.5,9.7-4.1 l5.8-5.8c-0.7,0.1-1.3,0.2-2,0.2C49.9,61.9,49.3,61.9,48.7,61.8z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 219 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 684 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 396 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 162 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 806 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 451 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 211 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

@ -38,10 +38,10 @@ prism: true
<div class="col-12@sm col-9@md filters-group">
<p class="filter-label">Filter</p>
<div class="btn-group filter-options">
<button class="btn btn--primary" data-group="wallpaper">Wallpapers</button>
<button class="btn btn--primary" data-group="graphics">Graphic Design</button>
<button class="btn btn--primary" data-group="photography">Photos</button>
<button class="btn btn--primary" data-group="3d">3D Renders</button>
<button class="btn btn--primary" data-group="space">Space</button>
<button class="btn btn--primary" data-group="nature">Nature</button>
<button class="btn btn--primary" data-group="animal">Animal</button>
<button class="btn btn--primary" data-group="city">City</button>
</div>
</div>
@ -65,10 +65,10 @@ prism: true
<div class="container">
<div id="grid" class="row my-shuffle-container">
{% for item in site.data.items %}
{% assign item = item %}
{% include picture-item.html %}
{% endfor %}
{%- for item in site.data.items -%}
{%- assign item = item -%}
{%- include picture-item.html -%}
{%- endfor -%}
<div class="col-1@sm col-1@xs my-sizer-element"></div>
</div>
</div>
@ -247,7 +247,7 @@ prism: true
</section>
{% include credit-jake.html %}
{% include photo-credit.html %}
<script>

Loading…
Cancel
Save