Merge pull request #12 from matfin/develop

Merge from develop

.docker/nginx/Dockerfile

@@ -0,0 +1,4 @@
+FROM 		nginx:alpine
+MAINTAINER	Matt Finucane <me@mattfinucane.com>
+ARG			nginx_conf
+COPY		$nginx_conf /etc/nginx/nginx.conf

.docker/nginx/nginx.build.conf

@@ -0,0 +1,36 @@
+worker_processes 4;
+
+events {
+	worker_connections 1024;
+}
+
+http {
+	default_type	application/octet-stream;
+	include			/etc/nginx/mime.types;
+
+	map $sent_http_content_type $expires {
+		default 				off;
+		text/html				off;
+		text/css 				max;
+		application/javasvript 	max;
+		-image/ 				max;
+	}
+
+	server {
+		listen 		80;
+		server_name	cinematt.build;
+		expires		$expires;
+
+		gzip 					on;
+		gzip_proxied 			any;
+		gzip_types 				text/plain text/css application/x-javascript;
+		gzip_vary 				on;
+		gzip_disable			"MSIE [1-6]\.(?!.*SV1)";
+
+		access_log				/var/log/access.log;
+		error_log				/var/log/error.log;
+
+		error_page 404			/404.html;
+		root					/opt/public;
+	}
+}

.docker/nginx/nginx.development.conf

@@ -0,0 +1,34 @@
+worker_processes 4;
+
+events {
+	worker_connections 1024;
+}
+
+http {
+	default_type	application/octet-stream;
+	include			/etc/nginx/mime.types;
+
+	server {
+		listen 		80;
+		server_name	cinematt.dev;
+
+		gzip 					on;
+		gzip_proxied 			any;
+		gzip_types 				text/plain text/css application/x-javascript;
+		gzip_vary 				on;
+		gzip_disable			"MSIE [1-6]\.(?!.*SV1)";
+
+		access_log				/var/log/access.log;
+		error_log				/var/log/error.log;
+
+		location / {
+			proxy_pass				http://cinematt-site-dev:1313;
+			proxy_http_version		1.1;
+			proxy_set_header		Host $host;
+			proxy_set_header		X-Forwarded-For $remote_addr;
+			proxy_intercept_errors	on;
+			error_page 404			/404.html;
+		}
+
+	}
+}

.docker/site/Dockerfile

@@ -0,0 +1,16 @@
+FROM		alpine:latest
+MAINTAINER	Matt Finucane <me@mattfinucane.com>
+
+ARG			hugo_version
+RUN			rm -rf /opt/public
+
+RUN 		apk add --update wget ca-certificates && \
+		    cd /tmp/ && \
+		    wget https://github.com/spf13/hugo/releases/download/v${hugo_version}/hugo_${hugo_version}_Linux-64bit.tar.gz && \
+		    tar xzf hugo_${hugo_version}_Linux-64bit.tar.gz && \
+		    rm -r hugo_${hugo_version}_Linux-64bit.tar.gz && \
+		    mv hugo /usr/bin/hugo && \
+		    apk del wget ca-certificates && \
+		    rm /var/cache/apk/*
+
+WORKDIR		/opt

assets/sass/cards.sass

@@ -0,0 +1,72 @@
+/**
+ *	Photo card
+ */
+a.photo-card
+
+	display: grid
+
+	figure
+		position: relative
+		overflow: hidden
+		display: grid
+		grid-template-columns: 1fr
+		grid-template-rows: 1fr
+
+		+transitionWithProperties((transform, background-position), 250ms)
+		transform: translate3d(0, 30%, 0)
+
+		img
+			+transitionWithProperties(opacity, 250ms)
+			opacity: 0
+
+
+		&:hover
+			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
+
+		figcaption
+			z-index: $z-over
+			grid-row: 2
+			padding: $units
+			color: $white
+			background-color: rgba($black, 0.75)
+
+			transform: translate3d(0, 100%, 0)
+			+transitionWithProperties(transform, 250ms)
+
+	&.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
+
+	+break(min, $break-3)
+		min-height: $units * 18
+		&.orientation-portrait
+			min-height: $units * 42

assets/sass/constants.sass

@@ -0,0 +1,43 @@
+/**
+ *	Breakpoints
+ */
+$break-0:	30rem
+$break-1:	48rem
+$break-2:	64rem
+$break-3:	90rem
+
+/**
+ *	Layers
+ */
+$z-top: 	2
+$z-over:	1
+$z-middle:	0
+$z-under:	-1
+
+/**
+ *	Typography
+ */
+$font-family:			Gill Sans, Gill Sans MT, Calibri, sans-serif
+$base-font-size:		1rem
+$medium-font-size: 		$base-font-size * 1.5
+$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
+
+/**
+ *	Base measurements
+ */
+$max-width:				90rem
+$units:					1rem
+$transition-duration:	350ms
+
+/**
+ *	Colours
+ */
+$white:					#fff
+$black:					#000

assets/sass/layouts/pages.sass

@@ -0,0 +1,173 @@
+/**
+ *	The landing page
+ */
+main.landing
+	display: grid
+	grid-column: 2 / 3
+	grid-row: 2 / 3
+	+photoThumbnailGrid
+
+/**
+ *	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
+ */
+main.photo
+	grid-column: 1 / 4
+	grid-row: 2 / 3
+
+	figure
+		display: grid
+		grid-template-columns: 1fr minmax(auto, $max-width) 1fr
+		grid-template-rows: auto auto
+		grid-row-gap: $units * 2
+
+		picture
+			grid-row: 1 / 2
+			grid-column: 1 / 4
+
+			+break(max, $break-0)
+				height: 20vh
+			+break(min-max, $break-0, $break-1)
+				height: 25vh
+			+break(min-max, $break-1, $break-2)
+				height: 30vh
+			+break(min-max, $break-2, $break-3)
+				height: 40vh
+			+break(min, $break-3)
+				height: 60vh
+
+			&.loaded
+				height: unset
+				img
+					opacity: 1
+
+			&.orientation-portrait
+				img
+					margin: 0 auto
+					+break(min, $break-1)
+						width: auto
+						height: 75vh
+
+
+		img
+			display: block
+			width: 100%
+			height: auto
+			opacity: 0
+			+transitionWithProperties(opacity, 400ms)
+
+		figcaption
+			grid-row: 2 / 3
+			grid-column: 2 / 3
+			display: grid
+			grid-template-rows: repeat(2, auto)
+			grid-template-columns: $units 1fr $units
+			grid-row-gap: $units * 2
+
+			h2
+				grid-row: 1 / 2
+				grid-column: 2 / 3
+
+			ul
+				grid-row: 2 / 3
+				grid-column: 2 / 3
+				display: grid
+				grid-template-columns: 1fr
+				grid-template-rows: 1fr
+				grid-row-gap: $units
+
+				+break(min, $break-0)
+					grid-template-columns: repeat(2, 1fr)
+
+				li
+					display: grid
+					grid-template-columns: 1fr
+					grid-template-rows: repeat(2, 1fr)
+					grid-row-gap: $units / 2
+
+/**
+ *	About page
+ */
+main.about
+	grid-column: 2 / 3
+	grid-row: 2 / 3
+
+	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
+
+	article
+		grid-row: 1 / 2
+		grid-column: 1 / 2
+
+		+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
+		align-content: center
+
+	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: center
+
+		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
+
+