diff --git a/src/css/layout/_main.scss b/src/css/layout/_main.scss index e8d4b06..d9071c1 100644 --- a/src/css/layout/_main.scss +++ b/src/css/layout/_main.scss @@ -6,12 +6,24 @@ margin: 8em 0; > section { + @include vendor('transition', ( + 'text-shadow #{_duration(slow-transition)} ease' + )); width: 61.805%; margin: 8em auto; background-color: #fff; - + text-shadow: 0 0 1px rgba(0,0,0,0.40), + 0 1px 2px rgba(0,0,0,0.20), + 0 3px 4px rgba(0,0,0,0.10), + 0 7px 8px rgba(0,0,0,0.10); &:hover { cursor: pointer; + text-shadow: 0 0 1px rgba(0,0,0,0.20), + 0 1px 2px rgba(0,0,0,0.20), + 0 3px 4px rgba(0,0,0,0.20), + 0 7px 8px rgba(0,0,0,0.20), + 0 15px 16px rgba(0,0,0,0.20), + 0 31px 32px rgba(0,0,0,0.20); } > a { @@ -24,10 +36,17 @@ padding-bottom: 61.805%; overflow: hidden; - > .siteTitle { + &.siteTitle { > h2 { position: absolute; z-index: 99; + text-align: center; + width: 61.805%; + line-height: 38.198vw; + color: #fff; + pointer-events: none; + font-family: Maven Pro,sans-serif; + font-size: 73pt; } } > picture > img { @@ -37,11 +56,11 @@ 'transform #{_duration(slow-transition)} ease' )); @include vendor('filter', 'brightness(1.15) contrast(0.8) grayscale(1)'); - @include vendor('transform', 'scale(1)'); + @include vendor('transform', 'scale(1.2)'); &:hover { @include vendor('filter', 'brightness(1.0) contrast(1.0) grayscale(0.2)'); - @include vendor('transform', 'scale(1.2)'); + @include vendor('transform', 'scale(1.0)'); } } } @@ -49,29 +68,53 @@ } @include breakpoint('<=xlarge') { - + > section { + > a > div.siteTitle > h2 { + font-size: 57pt; + } + } } @include breakpoint('<=large') { - + > section { + > a > div.siteTitle > h2 { + font-size: 44pt; + } + } } @include breakpoint('<=medium') { - + > section { + > a > div.siteTitle > h2 { + font-size: 32pt; + } + } } @include breakpoint('<=small') { - + > section { + > a > div.siteTitle > h2 { + font-size: 21pt; + } + } } @include breakpoint('<=xsmall') { > section { margin: 2em auto; + + > a > div.siteTitle > h2 { + font-size: 15pt; + } } } @include breakpoint('<=xxsmall') { - + > section { + > a > div.siteTitle > h2 { + font-size: 10pt; + } + } } }