Skip to content
Permalink
Browse files

Add an art gallery.

  • Loading branch information...
ChrisCummins committed Aug 13, 2019
1 parent a5305ef commit 632fd441437060d89368986625cfc81fb543bb3a
Showing with 404 additions and 9 deletions.
  1. +38 −4 Makefile
  2. +156 −0 _data/art.json
  3. +5 −0 _includes/banner.html
  4. +31 −0 art/index.html
  5. +121 −0 css/styles.scss
  6. BIN img/banners/negatives.jpg
  7. +52 −4 js/site.js
  8. +1 −1 js/site.min.js
@@ -1,21 +1,55 @@
.PHONY: all, run, help
.PHONY: all

all:
bundle install
all: js/site.min.js img
bundle exec jekyll build --drafts

js/site.min.js: js/site.js
uglifyjs $< > $@

.PHONY: img

img:
for img in $$(ls img/art/*.jpg | grep -v small.jpg); do \
ffmpeg -y -i $$img -vf scale=1080:-1 $$(echo $$img | sed 's/\.jpg//')-small.jpg 2>/dev/null; \
done

.PHONY: run

run:
bundle exec jekyll serve --drafts --host=0.0.0.0

# Dependencies.

.PHONY: install, install-ffmpeg, install-deps

install: install-ffmpeg
bundle install
npm install uglify-js -g

ifeq ($(shell uname),Darwin)
install-ffmpeg:
brew install ffmpeg
else
install-ffmpeg:
sudo add-apt-repository ppa:mc3man/trusty-media
sudo apt-get update
sudo apt-get install ffmpeg
endif

.PHONY: ls-unused-banners

ls-unused-banners:
@mkdir -p .build
@ls img/banners/* | sed 's,^,/,' > .build/banners.txt
@git grep -h 'banner:' | awk '{print $$2;}' | sort -u > .build/used-banners.txt
@grep -F -x -v -f .build/used-banners.txt .build/banners.txt

.PHONY: help

help:
@echo "usage: make {all,run,ls-unused-banners}"
@echo "usage: make {all,install,run,ls-unused-banners}"
@echo
@echo " all build site"
@echo " install install build dependencies"
@echo " run build and serve site on http://localhost:4000"
@echo " ls-unused-banners list banner images which have not appeared in posts"
@@ -0,0 +1,156 @@
{
"README": "Used by /art/index.html to generate gallery. Images appear in the order listed.",
"tags": ["Travel", "Street", "Portrait"],
"images": [
{
"name": "Oregon, 2017",
"url-small": "/img/art/trillium-lake-small.jpg",
"url-full": "/img/art/trillium-lake.jpg",
"tags": ["Travel"]
},
{
"name": "Manhattan, 2017",
"url-small": "/img/art/manhattan-small.jpg",
"url-full": "/img/art/manhattan.jpg",
"tags": ["Travel"]
},
{
"name": "Scotland, 2017",
"url-small": "/img/art/stirling-small.jpg",
"url-full": "/img/art/stirling.jpg",
"tags": ["Travel"]
},
{
"name": "Scotland, 2017",
"url-small": "/img/art/loch-lomond-small.jpg",
"url-full": "/img/art/loch-lomond.jpg",
"tags": ["Travel"]
},
{
"name": "Ashleigh, 2010",
"url-small": "/img/art/ashleigh-small.jpg",
"url-full": "/img/art/ashleigh.jpg",
"tags": ["Portrait"]
},
{
"name": "Scotland, 2017",
"url-small": "/img/art/loch-lomond-2-small.jpg",
"url-full": "/img/art/loch-lomond-2.jpg",
"tags": ["Travel"]
},
{
"name": "California, 2015",
"url-small": "/img/art/death-valley-small.jpg",
"url-full": "/img/art/death-valley.jpg",
"tags": ["Travel"]
},
{
"name": "Washington, 2017",
"url-small": "/img/art/mt-rainier-small.jpg",
"url-full": "/img/art/mt-rainier.jpg",
"tags": ["Travel"]
},
{
"name": "British Columbia, 2017",
"url-small": "/img/art/whistler-small.jpg",
"url-full": "/img/art/whistler.jpg",
"tags": ["Travel"]
},
{
"name": "Manhattan, 2017",
"url-small": "/img/art/empire-state-small.jpg",
"url-full": "/img/art/empire-state.jpg",
"tags": ["Travel", "Street"]
},
{
"name": "Ireland, 2019",
"url-small": "/img/art/poisoned-glen-small.jpg",
"url-full": "/img/art/poisoned-glen.jpg",
"tags": ["Travel"]
},
{
"name": "Manhattan, 2017",
"url-small": "/img/art/manhattan-2-small.jpg",
"url-full": "/img/art/manhattan-2.jpg",
"tags": ["Travel"]
},
{
"name": "Birmingham, 2011",
"url-small": "/img/art/birmingham-1-small.jpg",
"url-full": "/img/art/birmingham-1.jpg",
"tags": ["Street"]
},
{
"name": "Birmingham, 2012",
"url-small": "/img/art/birmingham-2-small.jpg",
"url-full": "/img/art/birmingham-2.jpg",
"tags": ["Street"]
},
{
"name": "Birmingham, 2012",
"url-small": "/img/art/birmingham-3-small.jpg",
"url-full": "/img/art/birmingham-3.jpg",
"tags": ["Street", "Portrait"]
},
{
"name": "Manhattan, 2017",
"url-small": "/img/art/flat-iron-small.jpg",
"url-full": "/img/art/flat-iron.jpg",
"tags": ["Travel", "Street"]
},
{
"name": "Birmingham, 2012",
"url-small": "/img/art/birmingham-4-small.jpg",
"url-full": "/img/art/birmingham-4.jpg",
"tags": ["Street", "Portrait"]
},
{
"name": "Manhattan, 2017",
"url-small": "/img/art/manhattan-3-small.jpg",
"url-full": "/img/art/manhattan-3.jpg",
"tags": ["Travel", "Street"]
},
{
"name": "Birmingham, 2012",
"url-small": "/img/art/birmingham-5-small.jpg",
"url-full": "/img/art/birmingham-5.jpg",
"tags": ["Street", "Portrait"]
},
{
"name": "Birmingham, 2012",
"url-small": "/img/art/birmingham-6-small.jpg",
"url-full": "/img/art/birmingham-6.jpg",
"tags": ["Street", "Portrait"]
},
{
"name": "Birmingham, 2012",
"url-small": "/img/art/birmingham-7-small.jpg",
"url-full": "/img/art/birmingham-7.jpg",
"tags": ["Street", "Portrait"]
},
{
"name": "Birmingham, 2012",
"url-small": "/img/art/birmingham-8-small.jpg",
"url-full": "/img/art/birmingham-8.jpg",
"tags": ["Street"]
},
{
"name": "Birmingham, 2012",
"url-small": "/img/art/birmingham-9-small.jpg",
"url-full": "/img/art/birmingham-9.jpg",
"tags": ["Street"]
},
{
"name": "Nature Aquarium, 2019",
"url-small": "/img/art/nature-aquarium-1-small.jpg",
"url-full": "/img/art/nature-aquarium-1.jpg",
"tags": []
},
{
"name": "Nature Aquarium, 2019",
"url-small": "/img/art/nature-aquarium-2-small.jpg",
"url-full": "/img/art/nature-aquarium-2.jpg",
"tags": []
}
]
}
@@ -16,5 +16,10 @@ <h1 class="noselect"><a href="{{ '/' | relative_url }}">CHRIS<strong>CUMMINS</st
{% else %}
<a href="{{ '/software/' | relative_url }}">software</a> |
{% endif %}
{% if page.url == "/art/" %}
<span>art</span>
{% else %}
<a href="{{ '/art/' | relative_url }}">art</a>
{% endif %}
</p>
</div>
@@ -0,0 +1,31 @@
---
layout: default
title: Art
banner: /img/banners/negatives.jpg
---

<div class="art-container">

<div class="row">
<div class="col-md-12 d-flex justify-content-center mb-5 btn-row">
<button type="button" class="btn btn-primary undecorated art-filter" data-rel="art-category-all">All</button>
{% for tag in site.data.art.tags %}
<button type="button" class="btn btn-primary undecorated art-filter" data-rel="art-category-{{ tag | lower }}">{{ tag }}</button>
{% endfor %}
</div>
</div>

<div class="gallery" id="gallery">
{% for image in site.data.art.images %}
<div class="mb-3 pics animation art-category-all {% for tag in image.tags %}art-category-{{ tag | lower }} {%endfor%}">
<img class="img-fluid" src="{{ image.url-small }}" alt="{{ image.name }}" data-fullsize="{{ image.url-full }}">
</div>
{% endfor %}
</div>

</div>

<div id="art-modal" class="modal">
<img id="modal-img" class="modal-content">
<div id="modal-caption"></div>
</div>
@@ -717,3 +717,124 @@ pre {
border: $color-subtle;
font-size: 16px;
}




// Art
$column-count: 3;

.gallery {
-webkit-column-count: $column-count;
-moz-column-count: $column-count;
column-count: $column-count;
-webkit-column-width: 100% / $column-count;
-moz-column-width: 100% / $column-count;
column-width: 100% / $column-count;

.pics {
margin: .3em 0 1em 0;
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
}

.animation {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

@media (max-width: $screen-sm-min) {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-width: 100%;
-moz-column-width: 100%;
column-width: 100%;
}

img {
cursor: pointer;
transition: 0.3s;
padding: 0;

&:hover {
opacity: 0.7;
cursor: zoom-in;
}

@media (max-width: $screen-sm-min) {
display: block;
margin-left: auto;
margin-right: auto;
}
}
}

@media (max-width: $screen-md-min) {
.btn.filter {
padding-left: 1.1rem;
padding-right: 1.1rem;
}
}


// Modal
.modal {
display: none; // Hidden by default
position: fixed; // Stay in place
z-index: 5; // Sit on top
padding-top: 100px; // Location of the box
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; // Enable scroll if needed
background-color: rgb(0,0,0); // Fallback color
background-color: rgba(0,0,0,0.9); // Black w/ opacity

&:hover {
cursor: zoom-out;
}

img {
padding: 0;
max-height: 1000px;
width: auto;
height: auto;

&:hover {
cursor: pointer;
}
}

#modal-caption {
margin: auto;
display: block;
max-width: 95%;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

.modal-content, a {
margin: auto;
display: block;
height: auto;

@media only screen and (max-width: 700px){
width: 100%;
}
}

.modal-content, #modal-caption {
animation-name: zoom;
animation-duration: 0.6s;
}
}

@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
Binary file not shown.

0 comments on commit 632fd44

Please sign in to comment.
You can’t perform that action at this time.