_sass/components/_shows.sass
// Show pages
.show
margin-bottom: $baseline * 2
.show-wrap
@include grid-wrap
.show-row
@include grid-row
.show-info
@include grid-x-col(10)
.show-header
@include grid-row
.show-poster
@include grid-x-col(6)
float: right !important // HACK
margin-bottom: 1rem
img
width: 100%
padding-right: 0 // Remove
@include respond-down($grid-column-end)
// Hide on single col
display: none
.show-links
@include grid-x-col(6)
.show-synopsys
@include block
$show-photos-bg: $color-black
$show-photos-mob-gutter: 7px
.show-photos-outer, .show-assets-outer
// Contain gallery and controlls
margin-bottom: $baseline * 2
background: $show-photos-bg
overflow: hidden
// .show-photos-outer
@mixin gallery-outer
@include flex-row
flex-direction: row
flex-wrap: wrap
@mixin gallery-item
@include set-property-to-gutter(padding-right)
@include set-property-to-gutter(margin-bottom)
flex-shrink: 1
flex-grow: 1
// // Mobile, two per line
// @include flex-basis(50%)
// @include respond-up(tab-port)
// // Desktop 4 per line
// @include flex-basis(25%)
.show-photos
// Contains gallery
@include grid-wrap
.show-photos__inner
@include gallery-outer
padding-top: $show-photos-mob-gutter
padding-bottom: 0
margin-bottom: 0
@include respond-up(tab-port)
max-height: 17rem
overflow: hidden
padding-top: $baseline
// Show-y hide-y
transition: max-height 0.3s ease-out
&.show-photos__inner--show
// We now calculate a max-height on an ad-hoc basis
// max-height: 9999px
.show-photo-single
@include gallery-item
// Crop all photos to prevent horrible overflows
max-height: 200px
max-width: 75%
overflow: hidden
@include respond-up(tab-land)
max-width: 45%
&:last-child, &:nth-last-child(2)
// Last and penultimate items cannot be wider than a 1/3
max-width: 33.333333%
img
position: relative
width: 100%
box-shadow: 0px -1px darken($color-black, 20%)
a
@include no-underline
&:focus
// Set whole element background to focus
background: $color-focus
outline: none
img
// Semi-trans the image so you can see the colour thru it
opacity: 0.4
@include respond-down(mob-land)
// 2x2 grid
max-width: 50%
margin-bottom: $show-photos-mob-gutter
max-height: 165px
// Only show 4 photos on mobile
display: none
&:nth-child(1)
display: block
&:nth-child(2)
display: block
&:nth-child(3)
display: block
&:nth-child(4)
display: block
&:nth-child(2n-1)
// Add padding between images
padding-right: 6px
@include respond-down(mob-port)
// Rather limiting, put prevents uglyness
max-height: 100px
.show-photos-controls
@include grid-wrap
overflow: visible
.show-photos-controls--sticky
position: fixed
bottom: 0
left: 0
width: 100%
.show-photos-controls__inner
@include flex-row
flex-direction: horizontal
position: relative // so .fade-out-overlay can be absolute
margin-bottom: 0
@include set-property-to-gutter(padding-right)
.gallery-control, .smugmug-link
a
// Full size anchor, is the inner container
display: block
padding: $baseline / 3
@include no-underline
.gallery-control
flex-basis: 75%
background: darken($color-black, 4%)
a
text-align: center
color: $color-text-white
i
// Padding between icons and text
padding: 0 16px
.hide-label
// Initial state of this until jQuery fiddles with it
display: none
@include respond-down(mob-land)
display: none
.smugmug-link
$color-smugmug: #5B8800
flex-basis: 25%
flex: 1
overflow: hidden
background: darken($color-smugmug, 22%)
&:hover
background: darken($color-smugmug, 15%)
a
// Full size anchor, is the inner container
margin-bottom: 0
overflow: hidden
position: relative // For absolute use in .smugmug-link-logo
.smugmug-link-logo
position: absolute
top: 3px
left: 2px
img
// position: relative
// top: 4px
opacity: 0.2
.smugmug-link-text
padding-left: 41px
padding-top: 3px
font-size: 13px
color: $color-grey
text-align: center
.fade-out-overlay
$fade-out-v-size: 40px
position: absolute
top: -$fade-out-v-size
width: 100%
height: $fade-out-v-size
background: rgba($show-photos-bg, 0.8)
@include respond-down(mob-land)
display: none
.show-assets-list
@include list-unformatted
@include gallery-outer
.show-asset-file, .show-asset-image, .show-asset-video
@include gallery-item
@include respond-down(mob-land)
max-width: 33%
padding-right: 6px
&:nth-child(3n)
padding-right: 0
@include respond-up(tab-port)
max-width: 25%
a
display: block
height: 100%
min-height: 160px // I measured this, 110
display: flex
flex-direction: column
justify-content: space-between
color: $color-text-white
@include no-underline
.show-asset-video__title, .show-asset-file__title
padding: 0.5rem
.show-asset-image
a
background: lighten(grayscale($color-background), 05%)
justify-content: center
img
width: 100%
.show-asset-video
a
background: lighten(grayscale($color-background), 10%)
.show-asset-video__clapper
background: url('/images/svg/clapper-chevron.svg')
background-repeat: repeat-x
// Offset, makes look slightly better
background-position: -19px
opacity: 0.8
img
width: 100%
.show-asset-file
a
background: darken($color-nnt-purple, 25%)
.show-asset-file__icon
font-size: 91px
opacity: 0.2
text-align: center
.show-cast, .show-crew
@include grid-x-col(8)