Merge pull request #20 from matfin/develop

Layout refactor

assets/sass/cards.sass

@@ -1,79 +1,66 @@
 /**
  *	Photo card
  */
+
 a.photo-card
 
 	display: grid
 
+	&.orientation-portrait
+		grid-row-end: span 2
+
+	&.prominent
+		grid-column: start / end
+		+prominenceRows
+
+		figure
+			img
+				object-position: top
+
 	figure
 		position: relative
 		overflow: hidden
 		display: grid
 		grid-template-columns: 1fr
 		grid-template-rows: 1fr minmax(4rem, auto)
+		grid-template-areas: 'picture' 'caption'
 
-		+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
+		picture
+			grid-column: picture-start / picture-end
+			grid-row: picture-start / caption-end
+			&.loaded
+				img
+					opacity: 1
 
 		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
-			grid-row: 2
-
+			z-index: 2
+			grid-area: caption
 			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)
 
+			&.dark
+				background-color: rgba($black, 0.75)
+				color: $white
+
 			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
-
-	+break(min, $break-3)
-		min-height: $units * 18
-		&.orientation-portrait
-			min-height: $units * 42
+		&:hover,
+		&.is-touch
+			figcaption
+				transform: translate3d(0, 0, 0)

assets/sass/layouts/pages.sass

@@ -1,45 +1,29 @@
 /**
- *	The landing page
- */
-main.landing
-	z-index: 1
-	display: grid
-	grid-column: 2 / 3
-	grid-row: 2 / 3
-	+photoThumbnailGrid
-
-/**
- *	Albums page
+ *	The landing and 
+ *	albums page
  */
+main.landing,
 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
+	z-index: 1
+	grid-area: main
+	+photoGrid
 
 /**
  *	Photo detail page
  */
 main.photo
-	grid-column: 1 / 4
-	grid-row: 2 / 3
+	grid-area: main
 
 	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)
@@ -72,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
@@ -104,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: minmax($units, 1fr) minmax(auto, $units * 50) minmax($units, 1fr)
+	grid-template-rows: $units * 6 auto $units * 6
+	grid-template-areas: '. . .' '. content .'
 
 	article
-		grid-row: 1 / 2
-		grid-column: 1 / 2
-
-		+break(max, $break-3)
-			padding: $units 
+		grid-area: content
 
-		+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
 
 

assets/sass/mixins.sass

@@ -13,27 +13,55 @@
 	transition-property: $props
 	transition-duration: $ms
 
-=photoThumbnailGrid($gap: $units / 4)
-	display: grid
-	grid-column-gap: $gap
-	grid-row-gap: $gap
-
-	+break(min-max, 0, $break-0)
-		grid-template-columns: 1fr
+=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'
 
-	+break(min-max, $break-0, $break-2)
-		grid-template-columns: repeat(2, 1fr)
+		grid-template-areas: $begin + $inner + $end
 
-	+break(min, $break-2)
-		grid-template-columns: repeat(3, 1fr)
+=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
 
-=photoAlbumGrid($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
+
+	@for $i from 0 through 8
+		$min: $units * ($i * 20)
+		$max: $units * (($i + 1) * 20)
+
+		+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
 
-	grid-template-columns: repeat(3, 1fr)
-	grid-template-rows: repeat(3, 33vh)
+			.orientation-landscape
+				@if $i >= 3
+					&:not(.prominent)
+						grid-column-end: span 2
 
 =animatedLink
 	position: relative