diff options
Diffstat (limited to 'assets/sass/components/_spotlight.scss')
| -rw-r--r-- | assets/sass/components/_spotlight.scss | 1013 |
1 files changed, 1013 insertions, 0 deletions
diff --git a/assets/sass/components/_spotlight.scss b/assets/sass/components/_spotlight.scss new file mode 100644 index 0000000..0d081ad --- /dev/null +++ b/assets/sass/components/_spotlight.scss @@ -0,0 +1,1013 @@ +/* + Hugo Story by CaressOfSteel + A (modular, highly tweakable) responsive one-page theme for Hugo. + Ported from Story by HTML5UP. + This Hugo theme is licensed under the Creative Commons Attribution 3.0 License. +*/ + +/* Spotlight (transitions) */ + + .spotlight { + + // Mixin. + @mixin transition-spotlight($event) { + $x: null; + $y: null; + + @if ($event == 'load') { + $x: 'body.is-preload &'; + $y: _duration(on-load); + } + @else if ($event == 'scroll') { + $x: '&.is-inactive'; + $y: _duration(on-scroll); + } + + // Content. + &.on#{$event}-content-fade-up { + .content { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + } + + #{$x} { + .content { + @include vendor('transform', 'translateY(1rem)'); + opacity: 0; + } + } + } + + &.on#{$event}-content-fade-down { + .content { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + } + + #{$x} { + .content { + @include vendor('transform', 'translateY(-1rem)'); + opacity: 0; + } + } + } + + &.on#{$event}-content-fade-left { + .content { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + } + + #{$x} { + .content { + @include vendor('transform', 'translateX(1rem)'); + opacity: 0; + } + } + } + + &.on#{$event}-content-fade-right { + .content { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + } + + #{$x} { + .content { + @include vendor('transform', 'translateX(-1rem)'); + opacity: 0; + } + } + } + + &.on#{$event}-content-fade-in { + .content { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + } + + #{$x} { + .content { + opacity: 0; + } + } + } + + // Image. + &.on#{$event}-image-fade-up { + .image { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + @include vendor('transition-delay', '#{$y * 0.75}'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'translateY(1rem)'); + opacity: 0; + + img { + opacity: 0; + } + } + } + } + + &.on#{$event}-image-fade-down { + .image { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + @include vendor('transition-delay', '#{$y * 0.75}'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'translateY(-1rem)'); + opacity: 0; + + img { + opacity: 0; + } + } + } + } + + &.on#{$event}-image-fade-left { + .image { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + @include vendor('transition-delay', '#{$y * 0.75}'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'translateX(1rem)'); + opacity: 0; + + img { + opacity: 0; + } + } + } + } + + &.on#{$event}-image-fade-right { + .image { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + @include vendor('transition-delay', '#{$y * 0.75}'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'translateX(-1rem)'); + opacity: 0; + + img { + opacity: 0; + } + } + } + } + + &.on#{$event}-image-fade-in { + .image { + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + } + } + + #{$x} { + .image { + img { + opacity: 0; + } + } + } + } + + } + + // On Load. + @include transition-spotlight('load'); + + // On Scroll. + @include transition-spotlight('scroll'); + + } + +/* Spotlight (style1) */ + + .spotlight.style1 { + @include vendor('align-items', 'stretch'); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'row'); + @include vendor('justify-content', 'flex-end'); + position: relative; + overflow-x: hidden; + text-align: left; + + .content { + @include padding(_size(padding, default), _size(padding, default)); + @include vendor('align-self', 'center'); + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + width: 65%; + max-width: _size(inner); + margin: 0 auto; + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + width: 35%; + min-width: 25rem; + border-radius: 0; + + img { + @include vendor('object-fit', 'cover'); + @include vendor('object-position', 'center'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + } + + @include breakpoint('<=xlarge') { + .content { + @include padding(_size(padding, xlarge), _size(padding, xlarge)); + } + } + + @include breakpoint('<=large') { + .content { + @include padding(_size(padding, large), _size(padding, large)); + } + } + + @include breakpoint('<=medium') { + .content { + @include padding(_size(padding, medium) * 1.25, _size(padding, medium)); + width: 50%; + min-width: 0; + } + + .image { + width: 50%; + min-width: 0; + } + } + + @include breakpoint('<=small') { + .content { + @include padding(_size(padding, small) * 1.25, _size(padding, small)); + } + + @include orientation(portrait) { + @include vendor('flex-direction', 'column-reverse'); + text-align: center !important; + + .content { + width: 100%; + } + + .image { + width: 100%; + + img { + position: relative; + } + } + } + } + + // Modifiers. + + // Orientation. + &.orient-left { + // ... + } + + &.orient-right { + @include vendor('flex-direction', 'row-reverse'); + + @include breakpoint('<=small') { + @include orientation(portrait) { + @include vendor('flex-direction', 'column-reverse'); + } + } + } + + // Content Alignment. + &.content-align-left { + // ... + } + + &.content-align-center { + text-align: center; + } + + &.content-align-right { + text-align: right; + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + // ... + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +/* Spotlight (style2) */ + + .spotlight.style2 { + $image-size: 21rem; + $content-size: (_size(inner) * 0.75) - (_size(element-margin) * 1.75); + + @include padding(_size(padding, default), _size(padding, default)); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'row-reverse'); + @include vendor('justify-content', 'center'); + position: relative; + overflow-x: hidden; + text-align: left; + + .content { + width: $content-size; + max-width: 100%; + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + width: $image-size; + height: $image-size; + border-radius: 100%; + margin: 0 (_size(element-margin) * 1.75) _size(element-margin) 0; + + img { + @include vendor('object-fit', 'cover'); + @include vendor('object-position', 'center'); + display: block; + width: 100%; + height: 100%; + border-radius: 100%; + } + } + + @include breakpoint('<=xlarge') { + @include padding(_size(padding, xlarge), _size(padding, xlarge)); + } + + @include breakpoint('<=large') { + @include padding(_size(padding, large), _size(padding, large)); + } + + @include breakpoint('<=medium') { + @include padding(_size(padding, medium) * 1.25, _size(padding, medium)); + + .image { + width: ($image-size * 0.875); + height: ($image-size * 0.875); + } + } + + @include breakpoint('<=small') { + @include padding(_size(padding, small) * 1.25, _size(padding, small)); + @include vendor('align-items', 'flex-start'); + + .image { + width: ($image-size * 0.75); + height: ($image-size * 0.75); + margin: 0 (_size(element-margin) * 1) _size(element-margin) 0; + } + } + + @include orientation(portrait) { + @include vendor('align-items', 'center'); + @include vendor('flex-direction', 'column-reverse'); + text-align: center !important; + + .content { + width: 34rem; + max-width: 100%; + } + + .image { + margin-right: 0; + } + } + + // Modifiers. + + // Orientation. + &.orient-left { + @include vendor('flex-direction', 'row'); + + .image { + margin: 0 0 _size(element-margin) (_size(element-margin) * 1.75); + } + + @include breakpoint('<=small') { + .image { + margin: 0 0 _size(element-margin) (_size(element-margin) * 1); + } + } + + @include orientation(portrait) { + @include vendor('flex-direction', 'column-reverse'); + + .image { + margin-left: 0; + } + } + } + + &.orient-right { + // ... + } + + // Content Alignment. + &.content-align-left { + // ... + } + + &.content-align-center { + text-align: center; + } + + &.content-align-right { + text-align: right; + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + // ... + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +/* Spotlight (style3) */ + + .spotlight.style3 { + $image-width: 13rem; + $content-size: (_size(inner) * 0.75) - (_size(element-margin) * 1.75); + + @include padding(_size(padding, default), _size(padding, default)); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'row-reverse'); + @include vendor('justify-content', 'center'); + position: relative; + overflow-x: hidden; + text-align: left; + + .content { + width: $content-size; + max-width: 100%; + } + + .image { + @include phone($image-width); + margin-right: (_size(element-margin) * 1.75); + } + + @include breakpoint('<=xlarge') { + @include padding(_size(padding, xlarge), _size(padding, xlarge)); + } + + @include breakpoint('<=large') { + @include padding(_size(padding, large), _size(padding, large)); + } + + @include breakpoint('<=medium') { + @include padding(_size(padding, medium) * 1.25, _size(padding, medium)); + + .image { + @include resize-phone($image-width, 0.875); + } + } + + @include breakpoint('<=small') { + @include padding(_size(padding, small) * 1.25, _size(padding, small)); + @include vendor('align-items', 'flex-start'); + + .image { + @include resize-phone($image-width, 0.625); + } + } + + @include orientation(portrait) { + @include vendor('align-items', 'center'); + @include vendor('flex-direction', 'column-reverse'); + text-align: center !important; + + .content { + width: 34rem; + max-width: 100%; + } + + .image { + margin-right: 0; + margin-left: 0; + } + } + + // Modifiers. + + // Variant. + &.iphone { + // ... + } + + &.android { + // ... + } + + // Orientation. + &.orient-left { + @include vendor('flex-direction', 'row'); + + .image { + margin-right: 0; + margin-left: (_size(element-margin) * 1.75); + } + + @include orientation(portrait) { + @include vendor('flex-direction', 'column-reverse'); + + .image { + margin-right: 0; + margin-left: 0; + } + } + } + + &.orient-right { + // ... + } + + // Content Alignment. + &.content-align-left { + // ... + } + + &.content-align-center { + text-align: center; + } + + &.content-align-right { + text-align: right; + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + // ... + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +/* Spotlight (style4) */ + + .spotlight.style4 { + @include padding(_size(padding, default), _size(padding, default) * 0.75); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('justify-content', 'center'); + background-color: inherit; + position: relative; + overflow-x: hidden; + text-align: center; + + .content { + @include padding(_size(padding, default) * 0.5, _size(padding, default) * 0.5); + position: relative; + width: (_size(inner) * 0.625); + max-width: 50%; + background-color: inherit; + border-radius: _size(border-radius-alt); + margin-bottom: _size(element-margin); + z-index: 1; + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border-radius: 0; + + img { + @include vendor('object-fit', 'cover'); + @include vendor('object-position', 'center'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + } + + @include breakpoint('<=xlarge') { + @include padding(_size(padding, xlarge), _size(padding, xlarge) * 0.75); + + .content { + @include padding(_size(padding, xlarge) * 0.5, _size(padding, xlarge) * 0.5); + } + } + + @include breakpoint('<=large') { + @include padding(_size(padding, large), _size(padding, large) * 0.75); + + .content { + @include padding(_size(padding, large) * 0.75, _size(padding, large) * 0.75); + } + } + + @include breakpoint('<=medium') { + @include padding(_size(padding, medium), _size(padding, medium) * 0.75); + + .content { + @include padding(_size(padding, medium) * 0.75, _size(padding, medium) * 0.75); + } + } + + @include breakpoint('<=small') { + @include padding(_size(padding, small), _size(padding, small) * 0.75); + + .content { + @include padding(_size(padding, small) * 0.75, _size(padding, small) * 0.75); + } + } + + @include breakpoint('<=xsmall') { + .content { + max-width: 80%; + } + } + + // Modifiers. + + // Size. + &.fullscreen { + min-height: 100vh; + } + + &.halfscreen { + min-height: 50vh; + } + + // Orientation. + &.orient-left { + @include vendor('justify-content', 'flex-start'); + padding-left: 0; + + .content { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + + &.orient-center { + // ... + } + + &.orient-right { + @include vendor('justify-content', 'flex-end'); + padding-right: 0; + + .content { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + // Content Alignment. + &.content-align-left { + text-align: left; + } + + &.content-align-center { + // ... + } + + &.content-align-right { + text-align: right; + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + // ... + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +/* Spotlight (style5) */ + + .spotlight.style5 { + @include padding(_size(padding, default), _size(padding, default) * 0.75); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('justify-content', 'center'); + background-color: inherit; + position: relative; + overflow-x: hidden; + text-align: center; + + .content { + @include padding(_size(padding, default) * 0.5, _size(padding, default) * 0.5); + position: relative; + width: (_size(inner) * 0.625); + max-width: 52.5%; + background-color: inherit; + border-radius: _size(border-radius-alt); + margin-bottom: _size(element-margin); + z-index: 1; + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border-radius: 0; + + img { + @include vendor('object-fit', 'cover'); + @include vendor('object-position', 'center'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + } + + @include breakpoint('<=xlarge') { + @include padding(_size(padding, xlarge), _size(padding, xlarge) * 0.75); + + .content { + @include padding(_size(padding, xlarge) * 0.5, _size(padding, xlarge) * 0.5); + } + } + + @include breakpoint('<=large') { + @include padding(_size(padding, large), _size(padding, large) * 0.75); + + .content { + @include padding(_size(padding, large) * 0.75, _size(padding, large) * 0.75); + } + } + + @include breakpoint('<=medium') { + @include padding(_size(padding, medium), _size(padding, medium) * 0.75); + + .content { + @include padding(_size(padding, medium) * 0.75, _size(padding, medium) * 0.75); + } + } + + @include breakpoint('<=small') { + @include padding(_size(padding, small), _size(padding, small) * 0.75); + + .content { + @include padding(_size(padding, small) * 0.75, _size(padding, small) * 0.75); + } + } + + @include breakpoint('<=xsmall') { + .content { + max-width: 80%; + } + } + + // Modifiers. + + // Size. + &.fullscreen { + min-height: 100vh; + } + + &.halfscreen { + min-height: 50vh; + } + + // Orientation. + &.orient-left { + @include vendor('justify-content', 'flex-start'); + } + + &.orient-center { + // ... + } + + &.orient-right { + @include vendor('justify-content', 'flex-end'); + } + + // Content Alignment. + &.content-align-left { + text-align: left; + } + + &.content-align-center { + // ... + } + + &.content-align-right { + text-align: right; + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + // ... + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +// Mixin + + @mixin color-spotlight($p: null) { + .spotlight { + .image { + background-color: transparentize(_palette($p, fg-bold), 0.875); + } + + @if ($p != 'invert') { + &.invert { + .image { + background-color: transparentize(_palette(invert, fg-bold), 0.875); + } + } + } + } + + .spotlight.style3 { + .image { + @include color-phone($p); + } + + // Variant. + &.iphone { + .image { + @include color-phone-variant('iphone', $p); + } + } + + &.android { + .image { + @include color-phone-variant('android', $p); + } + } + + @if ($p != 'invert') { + &.invert { + .image { + @include color-phone(invert); + } + + // Variant. + &.iphone { + .image { + @include color-phone-variant('iphone', invert); + } + } + + &.android { + .image { + @include color-phone-variant('android', invert); + } + } + + } + } + } + } + + @include color-spotlight;
\ No newline at end of file |