From 6f038f1e08d67f0f93cb4f142a486b055fae275e Mon Sep 17 00:00:00 2001 From: Matt Finucane Date: Fri, 23 Jun 2017 14:23:27 +0200 Subject: [PATCH 1/9] Improving the layout of the landing page photo cards --- assets/sass/cards.sass | 57 +++++++++------------------------- assets/sass/layouts/pages.sass | 7 ++--- assets/sass/mixins.sass | 22 +++++++------ 3 files changed, 31 insertions(+), 55 deletions(-) diff --git a/assets/sass/cards.sass b/assets/sass/cards.sass index b336aae..4de46ef 100644 --- a/assets/sass/cards.sass +++ b/assets/sass/cards.sass @@ -1,10 +1,14 @@ /** * Photo card */ + a.photo-card display: grid + &.orientation-portrait + grid-row-end: span 2 + figure position: relative overflow: hidden @@ -12,35 +16,19 @@ a.photo-card grid-template-columns: 1fr grid-template-rows: 1fr minmax(4rem, auto) - +transitionWithProperties(transform, 100ms) - transform: translate3d(0, 30%, 0) - - img - +transitionWithProperties(opacity, 250ms) - opacity: 0 - - - &:hover, - &.is-touch - figcaption - transform: translate3d(0, 0, 0) - - &.loaded - transform: translate3d(0, 0, 0) - img - opacity: 1.0 - img position: absolute top: 0 left: 0 width: 100% height: 100% - grid-row: 1 / 3 object-fit: cover + opacity: 0 + +transitionWithProperties(opacity, 250ms) figcaption - z-index: $z-over + z-index: 2 + grid-column: 1 grid-row: 2 display: grid @@ -48,32 +36,17 @@ a.photo-card align-items: center background-color: rgba($white, 0.75) color: $black - transform: translate3d(0, 100%, 0) +transitionWithProperties(transform, 250ms) h3 grid-column: 2 / 3 - &.orientation-portrait - grid-row-end: span 2 - - +break(max, $break-1) - min-height: $units * 12 - &.orientation-portrait - min-height: $units * 30 - - +break(min-max, $break-1, $break-2) - min-height: $units * 15 - &.orientation-portrait - min-height: $units * 36 - - +break(min-max, $break-2, $break-3) - min-height: $units * 12 - &.orientation-portrait - min-height: $units * 30 + &:hover, + &.is-touch + figcaption + transform: translate3d(0, 0, 0) - +break(min, $break-3) - min-height: $units * 18 - &.orientation-portrait - min-height: $units * 42 \ No newline at end of file + &.loaded + img + opacity: 1 \ No newline at end of file diff --git a/assets/sass/layouts/pages.sass b/assets/sass/layouts/pages.sass index 263ebc9..39242bf 100644 --- a/assets/sass/layouts/pages.sass +++ b/assets/sass/layouts/pages.sass @@ -3,10 +3,9 @@ */ main.landing z-index: 1 - display: grid - grid-column: 2 / 3 + grid-column: 1 / 4 grid-row: 2 / 3 - +photoThumbnailGrid + +photoGrid /** * Albums page @@ -21,7 +20,7 @@ main.albums section.photos grid-row: 3 - +photoThumbnailGrid + // +photoThumbnailGrid /** * Photo detail page diff --git a/assets/sass/mixins.sass b/assets/sass/mixins.sass index 0c6c7e0..5696fae 100644 --- a/assets/sass/mixins.sass +++ b/assets/sass/mixins.sass @@ -13,19 +13,23 @@ transition-property: $props transition-duration: $ms -=photoThumbnailGrid($gap: $units / 4) +=photoGrid($gap: $units / 4) display: grid - grid-column-gap: $gap - grid-row-gap: $gap + grid-gap: $gap + grid-auto-rows: $units * 20 + grid-auto-flow: row dense + padding: $gap - +break(min-max, 0, $break-0) - grid-template-columns: 1fr + @for $i from 0 through 8 + $min: $units * ($i * 20) + $max: $units * (($i + 1) * 20) - +break(min-max, $break-0, $break-2) - grid-template-columns: repeat(2, 1fr) + +break(min-max, $min, $max) + grid-template-columns: repeat($i, 1fr) - +break(min, $break-2) - grid-template-columns: repeat(3, 1fr) + .orientation-landscape + @if $i >= 3 + grid-column-end: span 2 =photoAlbumGrid($gap: $units / 4) display: grid From 2b4948862226e58ef3d41285b2f8e0ed27bd5637 Mon Sep 17 00:00:00 2001 From: Matt Finucane Date: Fri, 23 Jun 2017 16:59:02 +0200 Subject: [PATCH 2/9] Refactoring photo grid layout to handle prominent pictures --- assets/sass/cards.sass | 8 +++++++ assets/sass/mixins.sass | 22 +++++++++++++++++-- site/archetypes/photo.md | 1 + .../photos/city/berlin-expo-messe-nord.md | 2 ++ .../photos/experimental/building-pattern.md | 2 +- .../photos/landscapes/glendalough-path.md | 2 +- site/layouts/index.html | 1 - site/layouts/photos/card.html | 5 +++-- 8 files changed, 36 insertions(+), 7 deletions(-) diff --git a/assets/sass/cards.sass b/assets/sass/cards.sass index 4de46ef..026bbf1 100644 --- a/assets/sass/cards.sass +++ b/assets/sass/cards.sass @@ -9,6 +9,14 @@ a.photo-card &.orientation-portrait grid-row-end: span 2 + &.prominent + grid-column: start / end + grid-row: span 3 + + figure + img + object-position: top + figure position: relative overflow: hidden diff --git a/assets/sass/mixins.sass b/assets/sass/mixins.sass index 5696fae..9d60be4 100644 --- a/assets/sass/mixins.sass +++ b/assets/sass/mixins.sass @@ -13,6 +13,19 @@ transition-property: $props transition-duration: $ms +=gridTemplateAreas($units) + $begin: 'start' + $inner: '' + $end: ' end' + + @if $units <= 2 + grid-template-areas: $begin + $end + @else + @for $i from 1 to $units - 1 + $inner: $inner + ' inner' + + grid-template-areas: $begin + $inner + $end + =photoGrid($gap: $units / 4) display: grid grid-gap: $gap @@ -25,11 +38,16 @@ $max: $units * (($i + 1) * 20) +break(min-max, $min, $max) - grid-template-columns: repeat($i, 1fr) + @if $i == 1 + grid-template-columns: 1fr + @else + grid-template-columns: repeat($i, 1fr) + +gridTemplateAreas($i) .orientation-landscape @if $i >= 3 - grid-column-end: span 2 + &:not(.prominent) + grid-column-end: span 2 =photoAlbumGrid($gap: $units / 4) display: grid diff --git a/site/archetypes/photo.md b/site/archetypes/photo.md index 3c31746..716faa4 100644 --- a/site/archetypes/photo.md +++ b/site/archetypes/photo.md @@ -8,6 +8,7 @@ filename: "" series: "" cl_public_id: "" cl_version: "" +prominent: "" format: "" bytes: "" width: "" diff --git a/site/content/photos/city/berlin-expo-messe-nord.md b/site/content/photos/city/berlin-expo-messe-nord.md index 2e56535..0f63663 100644 --- a/site/content/photos/city/berlin-expo-messe-nord.md +++ b/site/content/photos/city/berlin-expo-messe-nord.md @@ -7,8 +7,10 @@ date: "2016-12-09 13:01:11+00:00" album: "city" filename: "berlin-expo-messe-nord.md" series: "berlin" +weight: 1 cl_public_id: "city/berlin-expo-messe-nord" cl_version: 1497000191 +prominent: true format: "tiff" bytes: 3306448 width: 2560 diff --git a/site/content/photos/experimental/building-pattern.md b/site/content/photos/experimental/building-pattern.md index bfa5e3b..746068f 100644 --- a/site/content/photos/experimental/building-pattern.md +++ b/site/content/photos/experimental/building-pattern.md @@ -7,7 +7,7 @@ date: "2016-12-09 10:47:01+00:00" album: "experimental" filename: "building-pattern.md" series: "architecture" -weight: 3 +weight: 10 cl_public_id: "experimental/building-pattern" cl_version: 1497004427 format: "tiff" diff --git a/site/content/photos/landscapes/glendalough-path.md b/site/content/photos/landscapes/glendalough-path.md index 0502d60..44b82ed 100644 --- a/site/content/photos/landscapes/glendalough-path.md +++ b/site/content/photos/landscapes/glendalough-path.md @@ -7,7 +7,7 @@ date: "2014-04-08 14:40:28+00:00" album: "landscapes" filename: "glendalough-path.md" series: "glendalough" -weight: 1 +weight: 3 cl_public_id: "landscapes/glendalough-path" cl_version: 1497004677 format: "tiff" diff --git a/site/layouts/index.html b/site/layouts/index.html index 4364dda..7854f63 100644 --- a/site/layouts/index.html +++ b/site/layouts/index.html @@ -6,7 +6,6 @@ {{ partial "header" . }}
- {{ $intro := string .Site.Params.intro_photo }} {{ $photos := where .Data.Pages "Section" "photos" }} {{ range $photos.ByWeight}} diff --git a/site/layouts/photos/card.html b/site/layouts/photos/card.html index a46abb2..b720327 100644 --- a/site/layouts/photos/card.html +++ b/site/layouts/photos/card.html @@ -4,7 +4,8 @@ {{ $width := .Params.width }} {{ $height := .Params.height }} {{ $portrait := ( lt $width $height) }} - +{{ $prominent := .Params.prominent }} +
{{ if $portrait }}

- {{ .Params.title }} – {{ .Params.location }} - {{ dateFormat "2006" $date }} + {{ .Params.title }} – {{ .Params.location }} - {{ dateFormat "2006" $date }} {{ $prominent }}

From 7dbc885459c290c32b888fcc21693596f41b91b3 Mon Sep 17 00:00:00 2001 From: Matt Finucane Date: Fri, 23 Jun 2017 21:01:25 +0200 Subject: [PATCH 3/9] Refactoring of the styling, behavior and templates for the picture partial. --- assets/sass/cards.sass | 19 ++++--- assets/scripts/main.js | 12 +++-- site/layouts/_default/single.html | 2 +- site/layouts/albums/single.html | 2 +- site/layouts/index.html | 1 - site/layouts/partials/photo_teaser.html | 15 ------ site/layouts/partials/picture.html | 38 ++++++++++---- site/layouts/partials/picture_thumbnail.html | 23 +++++++++ site/layouts/partials/picture_wide.html | 52 -------------------- site/layouts/photos/card.html | 17 +++---- site/layouts/photos/single.html | 4 +- 11 files changed, 81 insertions(+), 104 deletions(-) delete mode 100644 site/layouts/partials/photo_teaser.html create mode 100644 site/layouts/partials/picture_thumbnail.html delete mode 100644 site/layouts/partials/picture_wide.html diff --git a/assets/sass/cards.sass b/assets/sass/cards.sass index 026bbf1..ebe5bdd 100644 --- a/assets/sass/cards.sass +++ b/assets/sass/cards.sass @@ -24,6 +24,13 @@ a.photo-card grid-template-columns: 1fr grid-template-rows: 1fr minmax(4rem, auto) + picture + opacity: 0 + +transitionWithProperties(opacity, 250ms) + + &.loaded + opacity: 1 + img position: absolute top: 0 @@ -31,8 +38,6 @@ a.photo-card width: 100% height: 100% object-fit: cover - opacity: 0 - +transitionWithProperties(opacity, 250ms) figcaption z-index: 2 @@ -47,14 +52,14 @@ a.photo-card transform: translate3d(0, 100%, 0) +transitionWithProperties(transform, 250ms) + &.dark + background-color: rgba($black, 0.75) + color: $white + h3 grid-column: 2 / 3 &:hover, &.is-touch figcaption - transform: translate3d(0, 0, 0) - - &.loaded - img - opacity: 1 \ No newline at end of file + transform: translate3d(0, 0, 0) \ No newline at end of file diff --git a/assets/scripts/main.js b/assets/scripts/main.js index d52965f..fa8da86 100644 --- a/assets/scripts/main.js +++ b/assets/scripts/main.js @@ -6,9 +6,13 @@ if(window.cinematt == null) { onload = () => { const utils = window.cinematt.utils; - utils.primeCaptionContrast(document.querySelector('.teaser')); - utils.makeBars('a.photo-card figure, picture.photo, picture.photo-wide'); - utils.lazyLoadImages('a.photo-card img, picture.photo source, picture.photo-wide source'); - document.addEventListener('scroll', utils.throttle(utils.lazyLoadImages.bind(null, 'a.photo-card img'))); + + [...document.querySelectorAll('figure')].forEach(utils.primeCaptionContrast); + + utils.makeBars('figure'); + utils.lazyLoadImages('img, source'); + + document.addEventListener('scroll', utils.throttle(utils.lazyLoadImages.bind(null, 'img, source'))); + utils.primeTapEvent('button', utils.toggleMenuReveal); }; \ No newline at end of file diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html index 601e7a4..802db7a 100644 --- a/site/layouts/_default/single.html +++ b/site/layouts/_default/single.html @@ -13,7 +13,7 @@ {{ $photo_id := string .Params.photo }} {{ $photo := .Site.GetPage "page" $photo_id }} {{ with $photo }} - {{ partial "picture_wide" $photo }} + {{ end }}
diff --git a/site/layouts/albums/single.html b/site/layouts/albums/single.html index 39a6b82..3f8a275 100644 --- a/site/layouts/albums/single.html +++ b/site/layouts/albums/single.html @@ -10,7 +10,7 @@ {{ $teaser := string .Params.teaser_image }} {{ $category := printf "%s/%s" "photos" .Params.identifier }} {{ $photo := .Site.GetPage "page" $category $teaser }} - {{ partial "photo_teaser" (dict "photo" $photo "album" .) }} + {{ end }}
{{ $photos := where .Site.Pages "Section" "photos" }} diff --git a/site/layouts/index.html b/site/layouts/index.html index 7854f63..527339e 100644 --- a/site/layouts/index.html +++ b/site/layouts/index.html @@ -7,7 +7,6 @@ {{ partial "header" . }}
{{ $photos := where .Data.Pages "Section" "photos" }} - {{ range $photos.ByWeight}} {{ .Render "card" }} {{ end }} diff --git a/site/layouts/partials/photo_teaser.html b/site/layouts/partials/photo_teaser.html deleted file mode 100644 index cc0817e..0000000 --- a/site/layouts/partials/photo_teaser.html +++ /dev/null @@ -1,15 +0,0 @@ -{{ $colours := .photo.Params.colours }} -{{ $dominant := index $colours 1}} -
-
- {{ partial "picture" .photo }} -
-
-

- {{ .album.Params.title }} -

-

- {{ .album.Params.description }} -

-
-
\ No newline at end of file diff --git a/site/layouts/partials/picture.html b/site/layouts/partials/picture.html index fc1a169..33b3264 100644 --- a/site/layouts/partials/picture.html +++ b/site/layouts/partials/picture.html @@ -1,33 +1,51 @@ {{ $photo := . }} {{ $colours := first 5 $photo.Params.colours }} +{{ $width := .Params.width }} +{{ $height := .Params.height }} +{{ $portrait := ( lt $width $height) }} {{ $base := .Site.Params.cl_media_base }} {{ $cl_public_id := string $photo.Params.cl_public_id }} {{ $cl_version := string $photo.Params.cl_version }} - + + + - - - - + + + + \ No newline at end of file diff --git a/site/layouts/partials/picture_thumbnail.html b/site/layouts/partials/picture_thumbnail.html new file mode 100644 index 0000000..1e1e2e5 --- /dev/null +++ b/site/layouts/partials/picture_thumbnail.html @@ -0,0 +1,23 @@ +{{ $photo := . }} +{{ $colours := first 5 $photo.Params.colours }} +{{ $width := .Params.width }} +{{ $height := .Params.height }} +{{ $portrait := ( lt $width $height) }} +{{ $base := .Site.Params.cl_media_base }} +{{ $cl_public_id := string $photo.Params.cl_public_id }} +{{ $cl_version := string $photo.Params.cl_version }} + + {{ if $portrait }} + + {{ else }} + + {{ end }} + \ No newline at end of file diff --git a/site/layouts/partials/picture_wide.html b/site/layouts/partials/picture_wide.html deleted file mode 100644 index fb9e920..0000000 --- a/site/layouts/partials/picture_wide.html +++ /dev/null @@ -1,52 +0,0 @@ -{{ $photo := . }} -{{ $colours := first 5 $photo.Params.colours }} -{{ $width := .Params.width }} -{{ $height := .Params.height }} -{{ $portrait := ( lt $width $height) }} -{{ $base := .Site.Params.cl_media_base }} -{{ $cl_public_id := string $photo.Params.cl_public_id }} -{{ $cl_version := string $photo.Params.cl_version }} - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/site/layouts/photos/card.html b/site/layouts/photos/card.html index b720327..5693c78 100644 --- a/site/layouts/photos/card.html +++ b/site/layouts/photos/card.html @@ -1,26 +1,21 @@ {{ $base := .Site.Params.cl_media_base }} {{ $date := string .Params.date}} {{ $colours := first 2 .Params.colours }} +{{ $dominant := index $colours 1 }} {{ $width := .Params.width }} {{ $height := .Params.height }} {{ $portrait := ( lt $width $height) }} {{ $prominent := .Params.prominent }} -
- {{ if $portrait }} - +
+ {{ if $prominent }} + {{ partial "picture" . }} {{ else }} - + {{ partial "picture_thumbnail" . }} {{ end }}

- {{ .Params.title }} – {{ .Params.location }} - {{ dateFormat "2006" $date }} {{ $prominent }} + {{ .Params.title }} – {{ .Params.location }} - {{ dateFormat "2006" $date }}

diff --git a/site/layouts/photos/single.html b/site/layouts/photos/single.html index ac5eccf..6ba2158 100644 --- a/site/layouts/photos/single.html +++ b/site/layouts/photos/single.html @@ -6,8 +6,8 @@ {{ partial "header" . }}
-
- {{ partial "picture_wide" . }} +
+ {{ partial "picture" . }}

{{ .Params.title }} – {{ .Params.location }} – {{ dateFormat "January 2006" .Params.date }} From fc214f23638e5d363eb7da0d52340d16635d6145 Mon Sep 17 00:00:00 2001 From: Matt Finucane Date: Fri, 23 Jun 2017 21:33:01 +0200 Subject: [PATCH 4/9] Fixing prominent pictures on the album page. --- assets/sass/layouts/pages.sass | 21 ++++--------------- .../abandoned/cite-foche-reflections.md | 1 + .../photos/events/spwc-dublin-waldos.md | 1 + .../photos/experimental/building-pattern.md | 1 + .../photos/landscapes/lakes-killarney.md | 1 + .../music/hot-sprockets-stage-vantastival.md | 1 + site/content/photos/nature/bird-poised.md | 1 + site/content/photos/people/jonathan-cliffs.md | 1 + site/layouts/albums/single.html | 18 +++++----------- 9 files changed, 16 insertions(+), 30 deletions(-) diff --git a/assets/sass/layouts/pages.sass b/assets/sass/layouts/pages.sass index 39242bf..625a466 100644 --- a/assets/sass/layouts/pages.sass +++ b/assets/sass/layouts/pages.sass @@ -1,27 +1,14 @@ /** - * The landing page + * The landing and + * albums page */ -main.landing +main.landing, +main.albums z-index: 1 grid-column: 1 / 4 grid-row: 2 / 3 +photoGrid -/** - * Albums page - */ -main.albums - grid-column: 2 / 3 - grid-row: 2 / 3 - display: grid - grid-template-columns: 1fr - grid-template-rows: auto $units / 4 auto - align-content: start - - section.photos - grid-row: 3 - // +photoThumbnailGrid - /** * Photo detail page */ diff --git a/site/content/photos/abandoned/cite-foche-reflections.md b/site/content/photos/abandoned/cite-foche-reflections.md index dd00f41..c9e7eff 100644 --- a/site/content/photos/abandoned/cite-foche-reflections.md +++ b/site/content/photos/abandoned/cite-foche-reflections.md @@ -9,6 +9,7 @@ filename: "cite-foche-reflections.md" series: "cite-foche" cl_public_id: "abandoned/cite-foche-reflections" cl_version: 1497000103 +prominent: true format: "tiff" bytes: 6670160 width: 2560 diff --git a/site/content/photos/events/spwc-dublin-waldos.md b/site/content/photos/events/spwc-dublin-waldos.md index e2e1683..949931f 100644 --- a/site/content/photos/events/spwc-dublin-waldos.md +++ b/site/content/photos/events/spwc-dublin-waldos.md @@ -10,6 +10,7 @@ series: "outdoors" weight: 7 cl_public_id: "events/spwc-dublin-waldos" cl_version: 1497002577 +prominent: true format: "tiff" bytes: 8344840 width: 2560 diff --git a/site/content/photos/experimental/building-pattern.md b/site/content/photos/experimental/building-pattern.md index 746068f..b1056b6 100644 --- a/site/content/photos/experimental/building-pattern.md +++ b/site/content/photos/experimental/building-pattern.md @@ -10,6 +10,7 @@ series: "architecture" weight: 10 cl_public_id: "experimental/building-pattern" cl_version: 1497004427 +prominent: true format: "tiff" bytes: 2869740 width: 2158 diff --git a/site/content/photos/landscapes/lakes-killarney.md b/site/content/photos/landscapes/lakes-killarney.md index 7767a37..1e2b013 100644 --- a/site/content/photos/landscapes/lakes-killarney.md +++ b/site/content/photos/landscapes/lakes-killarney.md @@ -7,6 +7,7 @@ date: "2012-04-01 19:23:21" album: "landscapes" filename: "lakes-killarney.md" series: "kerry" +prominent: true cl_public_id: "landscapes/lakes-killarney" cl_version: 1497004733 format: "tiff" diff --git a/site/content/photos/music/hot-sprockets-stage-vantastival.md b/site/content/photos/music/hot-sprockets-stage-vantastival.md index 3a57bb1..3e5ef31 100644 --- a/site/content/photos/music/hot-sprockets-stage-vantastival.md +++ b/site/content/photos/music/hot-sprockets-stage-vantastival.md @@ -9,6 +9,7 @@ filename: "hot-sprockets-stage-vantastival.md" series: "vantastival" cl_public_id: "music/hot-sprockets-stage-vantastival" cl_version: 1497004848 +prominent: true format: "tiff" bytes: 4356456 width: 2174 diff --git a/site/content/photos/nature/bird-poised.md b/site/content/photos/nature/bird-poised.md index 22b6378..5c23760 100644 --- a/site/content/photos/nature/bird-poised.md +++ b/site/content/photos/nature/bird-poised.md @@ -10,6 +10,7 @@ series: "spirit-of-folk" weight: 8 cl_public_id: "nature/bird-poised" cl_version: 1497005045 +prominent: true format: "tiff" bytes: 7984332 width: 2560 diff --git a/site/content/photos/people/jonathan-cliffs.md b/site/content/photos/people/jonathan-cliffs.md index f3d3116..a6d6c1f 100644 --- a/site/content/photos/people/jonathan-cliffs.md +++ b/site/content/photos/people/jonathan-cliffs.md @@ -9,6 +9,7 @@ filename: "jonathan-cliffs.md" series: "family" cl_public_id: "people/jonathan-cliffs" cl_version: 1497005430 +prominent: true format: "tiff" bytes: 4324200 width: 2158 diff --git a/site/layouts/albums/single.html b/site/layouts/albums/single.html index 3f8a275..024965b 100644 --- a/site/layouts/albums/single.html +++ b/site/layouts/albums/single.html @@ -6,20 +6,12 @@ {{ partial "header" . }}
- {{ if .Params.teaser_image}} - {{ $teaser := string .Params.teaser_image }} - {{ $category := printf "%s/%s" "photos" .Params.identifier }} - {{ $photo := .Site.GetPage "page" $category $teaser }} - + {{ $photos := where .Site.Pages "Section" "photos" }} + {{ $album := string .Params.identifier }} + {{ $filtered := where $photos ".Params.album" $album }} + {{ range ($filtered.ByParam "prominent") }} + {{ .Render "card" }} {{ end }} -
- {{ $photos := where .Site.Pages "Section" "photos" }} - {{ $album := string .Params.identifier }} - {{ $filtered := where $photos ".Params.album" $album }} - {{ range ($filtered.ByParam "series") }} - {{ .Render "card" }} - {{ end }} -
{{ partial "footer" . }} {{ partial "scripts" }} From 955e71b982f987b4c70f93864452f3a687efb94d Mon Sep 17 00:00:00 2001 From: Matt Finucane Date: Fri, 23 Jun 2017 22:52:30 +0200 Subject: [PATCH 5/9] Style fixes for loading image transitions. --- assets/sass/cards.sass | 10 ++++++---- assets/scripts/main.js | 8 +++++--- assets/scripts/utils.js | 17 ++++++++++------- .../abandoned/cite-foche-anna-illuminated.md | 1 - .../photos/city/phoenix-park-model-plane.md | 1 + .../photos/experimental/building-pattern.md | 1 - site/content/photos/nature/bird-poised.md | 1 - site/layouts/partials/picture.html | 4 ++-- site/layouts/partials/picture_thumbnail.html | 4 ++-- site/layouts/photos/card.html | 2 +- site/layouts/photos/single.html | 2 +- 11 files changed, 28 insertions(+), 23 deletions(-) diff --git a/assets/sass/cards.sass b/assets/sass/cards.sass index ebe5bdd..1b7d765 100644 --- a/assets/sass/cards.sass +++ b/assets/sass/cards.sass @@ -25,11 +25,11 @@ a.photo-card grid-template-rows: 1fr minmax(4rem, auto) picture - opacity: 0 - +transitionWithProperties(opacity, 250ms) - + grid-column: 1 / 2 + grid-row: 1 / 3 &.loaded - opacity: 1 + img + opacity: 1 img position: absolute @@ -38,6 +38,8 @@ a.photo-card width: 100% height: 100% object-fit: cover + opacity: 0 + +transitionWithProperties(opacity, 250ms) figcaption z-index: 2 diff --git a/assets/scripts/main.js b/assets/scripts/main.js index fa8da86..07a2c99 100644 --- a/assets/scripts/main.js +++ b/assets/scripts/main.js @@ -7,12 +7,14 @@ if(window.cinematt == null) { onload = () => { const utils = window.cinematt.utils; - [...document.querySelectorAll('figure')].forEach(utils.primeCaptionContrast); + [...document.querySelectorAll('a.prominent figure')].forEach(utils.primeCaptionContrast); - utils.makeBars('figure'); + utils.makeBars('picture'); utils.lazyLoadImages('img, source'); - document.addEventListener('scroll', utils.throttle(utils.lazyLoadImages.bind(null, 'img, source'))); + document.addEventListener('scroll', utils.throttle(() => { + utils.lazyLoadImages('img, source'); + })); utils.primeTapEvent('button', utils.toggleMenuReveal); }; \ No newline at end of file diff --git a/assets/scripts/utils.js b/assets/scripts/utils.js index c0a4f71..63c6724 100644 --- a/assets/scripts/utils.js +++ b/assets/scripts/utils.js @@ -51,6 +51,10 @@ window.cinematt.utils = { }, addGradients: (photo_card) => { + if(photo_card.getAttribute('data-colours') == null) { + return + } + let colours = photo_card.getAttribute('data-colours').split(','), step = 100 / colours.length; @@ -133,19 +137,18 @@ window.cinematt.utils = { imageLoaded: (evt) => { let image = evt.target, - parent = image.parentNode; + picture = image.parentNode, + figure = picture.parentNode; - parent.removeAttribute('data-colours'); + picture.removeAttribute('data-colours'); if('ontouchstart' in window) { - parent.classList.add('loaded'); - parent.classList.add('is-touch'); + picture.classList.add('loaded'); + picture.classList.add('is-touch'); } else { - parent.classList.add('loaded'); + picture.classList.add('loaded'); } - - setTimeout(() => parent.style.background = 'none', 400); } }; \ No newline at end of file diff --git a/site/content/photos/abandoned/cite-foche-anna-illuminated.md b/site/content/photos/abandoned/cite-foche-anna-illuminated.md index f6b932a..4cee282 100644 --- a/site/content/photos/abandoned/cite-foche-anna-illuminated.md +++ b/site/content/photos/abandoned/cite-foche-anna-illuminated.md @@ -7,7 +7,6 @@ date: "2016-08-21 19:07:18+00:00" album: "abandoned" filename: "cite-foche-anna-illuminated.md" series: "cite-foche" -weight: 6 cl_public_id: "abandoned/cite-foche-anna-illuminated" cl_version: 1497000046 format: "tiff" diff --git a/site/content/photos/city/phoenix-park-model-plane.md b/site/content/photos/city/phoenix-park-model-plane.md index b66f76c..26811dc 100644 --- a/site/content/photos/city/phoenix-park-model-plane.md +++ b/site/content/photos/city/phoenix-park-model-plane.md @@ -9,6 +9,7 @@ filename: "phoenix-park-model-plane.md" series: "dublin" cl_public_id: "city/phoenix-park-model-plane" cl_version: 1497000364 +weight: 10 format: "tiff" bytes: 3954552 width: 2560 diff --git a/site/content/photos/experimental/building-pattern.md b/site/content/photos/experimental/building-pattern.md index b1056b6..24357e8 100644 --- a/site/content/photos/experimental/building-pattern.md +++ b/site/content/photos/experimental/building-pattern.md @@ -7,7 +7,6 @@ date: "2016-12-09 10:47:01+00:00" album: "experimental" filename: "building-pattern.md" series: "architecture" -weight: 10 cl_public_id: "experimental/building-pattern" cl_version: 1497004427 prominent: true diff --git a/site/content/photos/nature/bird-poised.md b/site/content/photos/nature/bird-poised.md index 5c23760..7c980a2 100644 --- a/site/content/photos/nature/bird-poised.md +++ b/site/content/photos/nature/bird-poised.md @@ -7,7 +7,6 @@ date: "2011-09-24 16:01:53+00:00" album: "nature" filename: "bird-poised.md" series: "spirit-of-folk" -weight: 8 cl_public_id: "nature/bird-poised" cl_version: 1497005045 prominent: true diff --git a/site/layouts/partials/picture.html b/site/layouts/partials/picture.html index 33b3264..e8bfeac 100644 --- a/site/layouts/partials/picture.html +++ b/site/layouts/partials/picture.html @@ -1,12 +1,12 @@ {{ $photo := . }} -{{ $colours := first 5 $photo.Params.colours }} {{ $width := .Params.width }} {{ $height := .Params.height }} +{{ $colours := first 2 .Params.colours }} {{ $portrait := ( lt $width $height) }} {{ $base := .Site.Params.cl_media_base }} {{ $cl_public_id := string $photo.Params.cl_public_id }} {{ $cl_version := string $photo.Params.cl_version }} - + {{ if $portrait }} -
+
{{ if $prominent }} {{ partial "picture" . }} {{ else }} diff --git a/site/layouts/photos/single.html b/site/layouts/photos/single.html index 6ba2158..fd189d7 100644 --- a/site/layouts/photos/single.html +++ b/site/layouts/photos/single.html @@ -6,7 +6,7 @@ {{ partial "header" . }}
-
+
{{ partial "picture" . }}

From dd881c34c5225275e18a5b1ff8f515029c6ac4e8 Mon Sep 17 00:00:00 2001 From: Matt Finucane Date: Sat, 24 Jun 2017 01:32:30 +0200 Subject: [PATCH 6/9] Added mixin to set the rows for the prominent picture. --- assets/sass/cards.sass | 2 +- assets/sass/mixins.sass | 14 ++++++++++++++ assets/scripts/utils.js | 4 ++++ 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/assets/sass/cards.sass b/assets/sass/cards.sass index 1b7d765..ff7b040 100644 --- a/assets/sass/cards.sass +++ b/assets/sass/cards.sass @@ -11,7 +11,7 @@ a.photo-card &.prominent grid-column: start / end - grid-row: span 3 + +prominenceRows figure img diff --git a/assets/sass/mixins.sass b/assets/sass/mixins.sass index 9d60be4..3cf4e56 100644 --- a/assets/sass/mixins.sass +++ b/assets/sass/mixins.sass @@ -26,6 +26,16 @@ grid-template-areas: $begin + $inner + $end +=prominenceRows + +break(max, $units * 64) + grid-row: span 1 + +break(min-max, $units * 64, $units * 80) + grid-row: span 2 + +break(min-max, $units * 80, $units * 120) + grid-row: span 3 + +break(min, $units * 120) + grid-row: span 4 + =photoGrid($gap: $units / 4) display: grid grid-gap: $gap @@ -40,9 +50,13 @@ +break(min-max, $min, $max) @if $i == 1 grid-template-columns: 1fr + .prominent + grid-column: 1 @else grid-template-columns: repeat($i, 1fr) +gridTemplateAreas($i) + .prominent + grid-column: start / end .orientation-landscape @if $i >= 3 diff --git a/assets/scripts/utils.js b/assets/scripts/utils.js index 63c6724..5966fb2 100644 --- a/assets/scripts/utils.js +++ b/assets/scripts/utils.js @@ -149,6 +149,10 @@ window.cinematt.utils = { else { picture.classList.add('loaded'); } + + setTimeout(() => { + picture.style.backgroundImage = 'none'; + }, 700); } }; \ No newline at end of file From 8cb5a4d4477e9575f128cbae78410e6395657a77 Mon Sep 17 00:00:00 2001 From: Matt Finucane Date: Sat, 24 Jun 2017 02:22:23 +0200 Subject: [PATCH 7/9] Setting up grid template areas. --- assets/sass/layouts/pages.sass | 6 +- assets/sass/partials.sass | 100 +++++---------------------------- assets/sass/setup.sass | 3 +- 3 files changed, 19 insertions(+), 90 deletions(-) diff --git a/assets/sass/layouts/pages.sass b/assets/sass/layouts/pages.sass index 625a466..a7c1310 100644 --- a/assets/sass/layouts/pages.sass +++ b/assets/sass/layouts/pages.sass @@ -5,16 +5,14 @@ main.landing, main.albums z-index: 1 - grid-column: 1 / 4 - grid-row: 2 / 3 + grid-area: main +photoGrid /** * Photo detail page */ main.photo - grid-column: 1 / 4 - grid-row: 2 / 3 + grid-area: main figure display: grid diff --git a/assets/sass/partials.sass b/assets/sass/partials.sass index 63f2d88..e743d30 100644 --- a/assets/sass/partials.sass +++ b/assets/sass/partials.sass @@ -2,24 +2,23 @@ * Header */ header - +break(max, $break-2) - grid-row: 1 / 5 - grid-column: 2 / 3 + grid-area: start / header / end display: grid - grid-template-rows: minmax($units * 4, $units * 8) 1fr + grid-template-columns: $units 1fr minmax($units * 8, auto) + grid-template-rows: minmax($units * 4, $units * 8) 1fr + grid-template-areas: '. title button .' 'nav nav nav nav' + align-items: center background-color: $white overflow-x: hidden > a - grid-column: 2 / 3 - grid-row: 1 / 2 + grid-area: title button - grid-column: 3 / 4 - grid-row: 1 / 2 + grid-area: button justify-self: stretch align-self: stretch @@ -38,16 +37,16 @@ header opacity: 1.0 +break(min, $break-2) - grid-row: 1 / 2 - grid-column: 2 / 3 + grid-area: header display: grid - grid-template-rows: 1fr grid-template-columns: $units repeat(2, auto) $units + grid-template-rows: 1fr + grid-template-areas: ". title nav ." + align-items: center > a - grid-column: 2 / 3 - grid-row: 1 / 2 + grid-area: title button display: none @@ -56,15 +55,12 @@ header * Navigation */ nav - a +animatedLink +break(max, $break-2) - grid-column: 1 / 5 - grid-row: 2 / 3 + grid-area: nav align-self: start - opacity: 0 ul @@ -74,84 +70,18 @@ nav grid-row-gap: ($units * 3) +break(min, $break-2) - grid-column: 3 / 4 - grid-row: 1 / 2 + grid-area: nav ul display: grid grid-auto-flow: column justify-items: end -/** - * Teaser photo - */ -section.teaser - grid-row: 1 - grid-column: 1 - display: grid - grid-template-columns: 1fr - grid-template-rows: auto auto - - figure - grid-row: 1 / 4 - grid-column: 1 / 4 - display: grid - grid-template-rows: 1fr - grid-template-columns: 1fr - - picture.photo - grid-row: 1 - grid-column: 1 - - +break(min-max, 0, $break-0) - height: 25vh - +break(min-max, $break-0, $break-1) - height: 30vh - +break(min-max, $break-1, $break-2) - height: 40vh - +break(min, $break-2) - height: 50vh - - img - display: block - width: 100% - height: auto - opacity: 0 - +transitionWithProperties(opacity, 400ms) - - &.loaded - height: unset - img - opacity: 1 - - figcaption - z-index: 1 - grid-row: 3 / 4 - grid-column: 1 / 4 - - &.bright - background-color: rgba($white, 0.75) - color: $black - - &.dark - background-color: rgba($black, 0.75) - color: $white - - +break(min-max, 0, $break-1) - padding: $units / 2 - +break(min-max, $break-1, $break-2) - padding: $units - +break(min, $break-2) - padding: $units * 1.5 - - /** * Footer */ footer - grid-row: 3 / 4 - grid-column: 2 / 3 - + grid-area: footer display: grid grid-template-columns: 1fr align-items: center diff --git a/assets/sass/setup.sass b/assets/sass/setup.sass index 1d061f8..81b8725 100644 --- a/assets/sass/setup.sass +++ b/assets/sass/setup.sass @@ -6,7 +6,8 @@ body display: grid grid-template-columns: 1fr minmax(auto, $max-width) 1fr - grid-template-rows: $units * 8 auto minmax($units * 8, auto) + grid-template-rows: $units * 8 auto minmax($units * 8, auto) + grid-template-areas: ". header ." "main main main" ". footer ." height: 100vh &.menu-open From 0d4bfca6cf5c66b3146d21bcf733f59be0915180 Mon Sep 17 00:00:00 2001 From: Matt Finucane Date: Sat, 24 Jun 2017 11:37:17 +0200 Subject: [PATCH 8/9] Refactoring styles and declaring grid-template-areas. --- assets/sass/cards.sass | 9 ++- assets/sass/layouts/pages.sass | 92 +++++++------------------------ site/layouts/_default/single.html | 7 --- 3 files changed, 23 insertions(+), 85 deletions(-) diff --git a/assets/sass/cards.sass b/assets/sass/cards.sass index ff7b040..498896e 100644 --- a/assets/sass/cards.sass +++ b/assets/sass/cards.sass @@ -23,10 +23,11 @@ a.photo-card display: grid grid-template-columns: 1fr grid-template-rows: 1fr minmax(4rem, auto) + grid-template-areas: 'picture' 'caption' picture - grid-column: 1 / 2 - grid-row: 1 / 3 + grid-column: picture-start / picture-end + grid-row: picture-start / caption-end &.loaded img opacity: 1 @@ -43,9 +44,7 @@ a.photo-card figcaption z-index: 2 - grid-column: 1 - grid-row: 2 - + grid-area: caption display: grid grid-template-columns: $units auto $units align-items: center diff --git a/assets/sass/layouts/pages.sass b/assets/sass/layouts/pages.sass index a7c1310..beab8c1 100644 --- a/assets/sass/layouts/pages.sass +++ b/assets/sass/layouts/pages.sass @@ -17,13 +17,13 @@ main.photo figure display: grid grid-template-columns: 1fr minmax(auto, $max-width) 1fr - grid-template-rows: auto auto + grid-template-rows: auto + grid-template-areas: 'picture picture picture' '. caption .' grid-row-gap: $units * 4 picture - grid-row: 1 / 2 - grid-column: 1 / 4 - + grid-area: picture + +break(max, $break-0) height: 20vh +break(min-max, $break-0, $break-1) @@ -56,20 +56,18 @@ main.photo +transitionWithProperties(opacity, 400ms) figcaption - grid-row: 2 / 3 - grid-column: 2 / 3 + grid-area: caption display: grid - grid-template-rows: repeat(2, auto) grid-template-columns: $units 1fr $units + grid-template-rows: repeat(2, auto) + grid-template-areas: '. title .' '. details .' grid-row-gap: $units * 2 h2 - grid-row: 1 / 2 - grid-column: 2 / 3 + grid-area: title ul - grid-row: 2 / 3 - grid-column: 2 / 3 + grid-area: details display: grid grid-template-columns: 1fr grid-template-rows: 1fr @@ -88,74 +86,22 @@ main.photo * About page */ main.about - grid-column: 2 / 3 - grid-row: 2 / 3 - + grid-area: main display: grid - grid-template-columns: 1fr - grid-template-rows: repeat(2, auto) - - +break(max, $break-2) - grid-row-gap: $units - - +break(min, $break-2) - grid-template-columns: auto - grid-template-rows: auto - grid-column-gap: $units * 8 + grid-template-columns: 1fr minmax(auto, $units * 50) 1fr + grid-template-rows: $units * 6 auto $units * 6 + grid-template-areas: '. . .' '. content .' article - grid-row: 1 / 2 - grid-column: 1 / 2 + grid-area: content - +break(max, $break-3) - padding: $units - - +break(max, $break-2) - grid-row: 2 / 3 - - display: grid - grid-template-columns: 1fr - grid-template-rows: auto - grid-row-gap: $units / 2 - align-content: end + h2, + p + text-align: justify h2 margin-top: $units * 2 - - aside - grid-row: 1 / 2 - grid-column: 2 / 3 - - +break(max, $break-2) - grid-column: 1 / 2 - - display: grid - grid-template-columns: auto - grid-template-rows: auto - - +break(min, $break-2) - justify-items: end - align-items: end - - picture - grid-row: 1 / 2 - grid-column: 1 / 2 - - +break(max, $break-2) - overflow: hidden - - img - width: auto - height: 70vh - opacity: 0 - +transitionWithProperties(opacity, 400ms) - - +break(max, $break-2) - width: 100% - height: auto - - &.loaded - img - opacity: 1.0 + p + margin-top: $units diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html index 802db7a..57d82f1 100644 --- a/site/layouts/_default/single.html +++ b/site/layouts/_default/single.html @@ -9,13 +9,6 @@
{{ .Content }}
-

{{ partial "footer" . }} {{ partial "scripts" }} From 6cbbe7a1a77be2520fed914b906ab92e12a892e5 Mon Sep 17 00:00:00 2001 From: Matt Finucane Date: Sat, 24 Jun 2017 12:00:19 +0200 Subject: [PATCH 9/9] Correction for the header grid layout setup. Adding content for the about page. --- assets/sass/layouts/pages.sass | 2 +- assets/sass/mixins.sass | 8 -------- assets/sass/partials.sass | 2 +- site/content/about.md | 6 +++++- 4 files changed, 7 insertions(+), 11 deletions(-) diff --git a/assets/sass/layouts/pages.sass b/assets/sass/layouts/pages.sass index beab8c1..b21157f 100644 --- a/assets/sass/layouts/pages.sass +++ b/assets/sass/layouts/pages.sass @@ -88,7 +88,7 @@ main.photo main.about grid-area: main display: grid - grid-template-columns: 1fr minmax(auto, $units * 50) 1fr + grid-template-columns: minmax($units, 1fr) minmax(auto, $units * 50) minmax($units, 1fr) grid-template-rows: $units * 6 auto $units * 6 grid-template-areas: '. . .' '. content .' diff --git a/assets/sass/mixins.sass b/assets/sass/mixins.sass index 3cf4e56..1cf3022 100644 --- a/assets/sass/mixins.sass +++ b/assets/sass/mixins.sass @@ -63,14 +63,6 @@ &:not(.prominent) grid-column-end: span 2 -=photoAlbumGrid($gap: $units / 4) - display: grid - grid-column-gap: $gap - grid-row-gap: $gap - - grid-template-columns: repeat(3, 1fr) - grid-template-rows: repeat(3, 33vh) - =animatedLink position: relative diff --git a/assets/sass/partials.sass b/assets/sass/partials.sass index e743d30..38d0747 100644 --- a/assets/sass/partials.sass +++ b/assets/sass/partials.sass @@ -3,7 +3,7 @@ */ header +break(max, $break-2) - grid-area: start / header / end + grid-area: header / main / footer display: grid grid-template-columns: $units 1fr minmax($units * 8, auto) diff --git a/site/content/about.md b/site/content/about.md index 47ab21c..d26cd35 100644 --- a/site/content/about.md +++ b/site/content/about.md @@ -6,7 +6,11 @@ photo: "me.md" --- ## Cinematt -This website contains select images from my archive of over 60,000 photographs. +This website contains select images from my archive of over 60,000 photographs taken from 2004 to the present day. + +If I could describe the type of photographer I am, I would say I am enthusiast who keeps at it - constantly taking the camera out, experimenting, reading, learning and producing. + +I don't do this in any professional capacity - mainly an expensive hobby. I take my camera with me wherever I go because there is always something interesting happening. The trick is to keep going out and keep shooting. ## Motivation I wanted to build something so I could show the world my photography. I wanted to show my work on my terms in a setting I feel comfortable with - something I have built myself.