Merge pull request #18 from matfin/develop

Typography fixes

assets/sass/cards.sass

@@ -10,17 +10,18 @@ a.photo-card
 		overflow: hidden
 		display: grid
 		grid-template-columns: 1fr
-		grid-template-rows: 1fr
+		grid-template-rows: 1fr minmax(4rem, auto)
 
-		+transitionWithProperties((transform, background-position), 250ms)
+		+transitionWithProperties(transform, 100ms)
 		transform: translate3d(0, 30%, 0)
 
 		img
 			+transitionWithProperties(opacity, 250ms)
 			opacity: 0
 
 
-		&:hover
+		&:hover,
+		&.is-touch
 			figcaption
 				transform: translate3d(0, 0, 0)
 
@@ -41,13 +42,19 @@ a.photo-card
 		figcaption
 			z-index: $z-over
 			grid-row: 2
-			padding: $units
-			color: $white
-			background-color: rgba($black, 0.75)
+
+			display: grid
+			grid-template-columns: $units auto $units
+			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
 

assets/sass/constants.sass

@@ -19,15 +19,15 @@ $z-under:	-1
  */
 $font-family:			Gill Sans, Gill Sans MT, Calibri, sans-serif
 $base-font-size:		1rem
-$medium-font-size: 		$base-font-size * 1.5
+$medium-font-size: 		$base-font-size * 1.25
 $large-font-size:		$base-font-size * 2
 $teaser-font-size:		$base-font-size * 4
 
 $letter-spacing:		$base-font-size / 8
 $font-weight-light:		100
-$font-weight-normal:	300
-$font-weight-semibold:	400
-$font-weight-bold:		600
+$font-weight-normal:	400
+$font-weight-semibold:	600
+$font-weight-bold:		700
 
 /**
  *	Base measurements

assets/sass/layouts/pages.sass

@@ -34,7 +34,7 @@ main.photo
 		display: grid
 		grid-template-columns: 1fr minmax(auto, $max-width) 1fr
 		grid-template-rows: auto auto
-		grid-row-gap: $units * 2
+		grid-row-gap: $units * 4
 
 		picture
 			grid-row: 1 / 2
@@ -132,8 +132,11 @@ main.about
 		display: grid
 		grid-template-columns: 1fr
 		grid-template-rows: auto
-		grid-row-gap: $units
-		align-content: center
+		grid-row-gap: $units / 2
+		align-content: end
+
+		h2
+			margin-top: $units * 2
 
 	aside
 		grid-row: 1 / 2
@@ -148,7 +151,7 @@ main.about
 
 		+break(min, $break-2)
 			justify-items: end
-			align-items: center
+			align-items: end
 
 		picture
 			grid-row: 1 / 2

assets/sass/mixins.sass

@@ -33,4 +33,22 @@
 	grid-row-gap: $gap
 
 	grid-template-columns: repeat(3, 1fr)
-	grid-template-rows: repeat(3, 33vh)
+	grid-template-rows: repeat(3, 33vh)
+
+=animatedLink
+	position: relative
+
+	&:after
+		content: ''
+		position: absolute
+		bottom: 0 - ($units / 4)
+		left: 0
+		width: 0
+		height: $units / 8
+		background-color: currentColor
+		+transitionWithProperties(width, 200ms)
+
+	&:hover,
+	&.active
+		&:after
+			width: 100%

assets/sass/partials.sass

@@ -8,7 +8,7 @@ header
 		grid-column: 2 / 3
 		display: grid
 		grid-template-rows: minmax($units * 4, $units * 8) 1fr 
-		grid-template-columns: $units repeat(2, auto) $units
+		grid-template-columns: $units 1fr minmax($units * 8, auto)
 		align-items: center
 		background-color: $white
 		overflow-x: hidden
@@ -20,7 +20,8 @@ header
 		button
 			grid-column: 3 / 4
 			grid-row: 1 / 2
-			justify-self: end
+			justify-self: stretch
+			align-self: stretch
 
 			svg.button-close
 				display: none
@@ -40,7 +41,7 @@ header
 		grid-row: 1 / 2
 		grid-column: 2 / 3
 		display: grid
-		grid-template-rows: minmax($units * 4, 1fr)
+		grid-template-rows: 1fr
 		grid-template-columns: $units repeat(2, auto) $units
 		align-items: center
 
@@ -55,6 +56,10 @@ header
  *	Navigation
  */
 nav
+
+	a
+		+animatedLink
+
 	+break(max, $break-2)
 		grid-column: 1 / 5
 		grid-row: 2 / 3
@@ -123,8 +128,14 @@ section.teaser
 		z-index: 1
 		grid-row: 3 / 4
 		grid-column: 1 / 4
-		background-color: rgba($black, 0.75)
-		color: $white
+
+		&.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
@@ -138,7 +149,7 @@ section.teaser
  *	Footer
  */
 footer
-	grid-row: 4 / 5
+	grid-row: 3 / 4
 	grid-column: 2 / 3
 
 	display: grid

assets/sass/setup.sass

@@ -6,7 +6,7 @@
 body
 	display: grid
 	grid-template-columns: 1fr minmax(auto, $max-width) 1fr
-	grid-template-rows: $units * 8 auto
+	grid-template-rows: $units * 8 auto minmax($units * 8, auto) 
 	height: 100vh
 
 	&.menu-open

assets/sass/typography.sass

@@ -3,12 +3,55 @@ body
 	-webkit-font-smoothing: antialiased
 	-moz-osx-font-smoothing: grayscale
 
+h1,
+h2,
+h3
+	font-weight: $font-weight-light
+
 ul,
-p
-	font-size: $base-font-size
+p,
+span
+	font-weight: $font-weight-normal
+	+break(max, $break-1)
+		font-size: $base-font-size
+	+break(min, $break-1)
+		font-size: $medium-font-size
+
+b
+	font-weight: $font-weight-semibold
 
 header 
 	h1
-		font-weight: $font-weight-light
 		font-size: $large-font-size
 
+.teaser
+	h1
+		+break(max, $break-1)
+			font-size: $medium-font-size
+		+break(min, $break-1)
+			font-size: $large-font-size
+
+.photo-card
+	h3
+		font-weight: $font-weight-normal
+		+break(max, $break-1)
+			font-size: $base-font-size
+
+		+break(min, $break-1)
+			font-size: $medium-font-size
+
+article
+	h2
+		font-size: $large-font-size
+		font-weight: $font-weight-light
+	p
+		font-weight: $font-weight-light
+
+main.photo
+	h2
+		font-weight: $font-weight-normal
+		+break(max, $break-1)
+			font-size: $medium-font-size
+
+		+break(min, $break-1)
+			font-size: $large-font-size

assets/scripts/main.js

@@ -6,6 +6,7 @@ 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')));

assets/scripts/utils.js

@@ -54,7 +54,10 @@ window.cinematt.utils = {
 		let colours = photo_card.getAttribute('data-colours').split(','),
 			step = 100 / colours.length;
 
-		let gradient = colours.map((colour, index) => `${colour} ${index * step}%, ${colour} ${++index * step}%`).join(',');
+		let gradient = colours.map((colour, index) => {
+			return `${colour} ${++index * step}%`
+		}).join(',');
+
 		photo_card.style.backgroundImage = `linear-gradient(to right, ${gradient})`;
 	},
 
@@ -75,9 +78,7 @@ window.cinematt.utils = {
 		if(img.tagName === 'SOURCE') {
 			let image = parent.querySelector('img');
 			img.setAttribute('srcset', srcset);
-			image.onprogress = cinematt.utils.imageProgress;
 			image.addEventListener('load', cinematt.utils.imageLoaded);
-
 		}
 		else {
 			img.setAttribute('src', src);
@@ -96,24 +97,54 @@ window.cinematt.utils = {
 		return node.getAttribute('src') != null || node.getAttribute('srcset') != null;
 	},
 
+	hexToLuma: (colour) => {
+		let hex = colour.replace(/#/, ''),
+			r 	= parseInt(hex.substr(0, 2), 16),
+			g 	= parseInt(hex.substr(2, 2), 16),
+			b 	= parseInt(hex.substr(4, 2), 16);
+
+		return [
+			0.299 * r,
+			0.587 * g,
+			0.114 * b
+		].reduce((a, b) => a + b) / 255;
+	},
+
+	primeCaptionContrast: (node) => {
+		if(node == null) {
+			return;
+		}
+		let dominant;
+		if((dominant = node.getAttribute('data-dominant-colour')) != null) {
+			let luma 	= cinematt.utils.hexToLuma(dominant),
+				caption = node.querySelector('figcaption');
+
+			node.removeAttribute('data-dominant-colour');
+			caption.classList.add((luma >= 0.5 ? 'bright':'dark'));
+		}
+	},
+
 	lazyLoadImages: (selector) => {
 		let images = [...document.querySelectorAll(selector)];
 		images.filter(image => {
 			return cinematt.utils.inView(image) && !cinematt.utils.hasLoaded(image);
 		}).forEach(cinematt.utils.primeImage);
 	},
 
-	imageProgress: (evt) => {
-		console.log({
-			progress: evt
-		});
-	},
-
 	imageLoaded: (evt) => {
 		let image 	= evt.target, 
 			parent 	= image.parentNode;
+
 		parent.removeAttribute('data-colours');
-		parent.classList.add('loaded');
+
+		if('ontouchstart' in window) {
+			parent.classList.add('loaded');
+			parent.classList.add('is-touch');
+		}
+		else {
+			parent.classList.add('loaded');
+		}
+
 		setTimeout(() => parent.style.background = 'none', 400);
 	}
 

site/content/about.md

@@ -17,7 +17,9 @@ I am also a freelance software engineer and I built this website to learn the CS
 I am from Dublin in Ireland and have been living in Berlin for the last four years. Photography has been a passion of mine for the last fifteen years.
 
 ## Gear
-I shoot on a *Nikon D800* and I have the *Nikon 16mm f2.8 fisheye*, *Nikon 24–70 f2.8* and *Nikkor 50mm f1.4* lenses. I also have an SB–400 which I rarely use.
+I shoot on a *Nikon D800* and I have the *Nikon 16mm f2.8 fisheye*, *Nikon 24–70 f2.8* and *Nikkor 50mm f1.4* lenses. 
+
+I use Adobe Photoshop with Camera Raw to process the images. HDR photos are treated using Photomatix HDR Pro.
 
 ## Terms
 I respect you and your privacy as a visitor to my site. This is why I don't have any third party tracking scripts installed.

site/layouts/partials/photo_teaser.html

@@ -1,4 +1,6 @@
-<section class="teaser">
+{{ $colours 	:= .photo.Params.colours }}
+{{ $dominant 	:= index $colours 1}}
+<section class="teaser" data-dominant-colour="{{ $dominant }}">
 	<figure>
 		{{ partial "picture" .photo }}
 	</figure>

site/layouts/photos/card.html

@@ -1,6 +1,6 @@
 {{ $base 		:= .Site.Params.cl_media_base }}
 {{ $date 		:= string .Params.date}}
-{{ $colours 	:= first 5 .Params.colours }}
+{{ $colours 	:= first 2 .Params.colours }}
 {{ $width 		:= .Params.width }}
 {{ $height 		:= .Params.height }}
 {{ $portrait 	:= ( lt $width $height) }}