diff --git a/assets/sass/components/_gallery.scss b/assets/sass/components/_gallery.scss deleted file mode 100644 index 1e067fb..0000000 --- a/assets/sass/components/_gallery.scss +++ /dev/null @@ -1,617 +0,0 @@ -/* - 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. -*/ - -/* Gallery (transitions) */ - - .gallery { - - // Mixin. - @mixin transition-gallery($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); - } - - &.on#{$event}-fade-in { - article { - .image { - img { - @include vendor('transition', 'opacity #{$y} ease-in-out'); - @include vendor('transition-delay', '#{_misc(gallery-limit) * _duration(gallery-delay)}'); - } - } - - @for $i from 0 through _misc(gallery-limit) { - &:nth-child(#{$i + 1}) { - .image { - img { - @include vendor('transition-delay', '#{$i * _duration(gallery-delay)}'); - } - } - } - } - } - - #{$x} { - article { - .image { - img { - opacity: 0; - } - } - } - } - } - } - - // On Load. - @include transition-gallery('load'); - - // On Scroll. - @include transition-gallery('scroll'); - - } - -/* Gallery (style1) */ - - .gallery.style1 { - @include color-typography(invert); - @include color-button(invert); - @include vendor('align-items', 'center'); - @include vendor('display', 'flex'); - @include vendor('flex-wrap', 'wrap'); - @include vendor('justify-content', 'center'); - position: relative; - width: 100%; - background-color: transparent; - - > .forward, >.backward { - display: none; - } - - > .inner { - @include vendor('align-items', 'inherit'); - @include vendor('display', 'inherit'); - @include vendor('flex-wrap', 'inherit'); - @include vendor('justify-content', 'inherit'); - } - - article { - overflow: hidden; - position: relative; - width: 25%; - - .image { - @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); - display: block; - width: 100%; - border-radius: 0; - - img { - display: block; - width: 100%; - border-radius: 0; - } - } - - .caption { - @include vendor('align-items', 'center'); - @include vendor('display', 'flex'); - @include vendor('flex-direction', 'column'); - @include vendor('justify-content', 'center'); - @include vendor('pointer-events', 'none'); - @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: transparentize(_palette(invert, bg), 1 - _misc(overlay-opacity)); - opacity: 0; - padding: 2rem; - z-index: 1; - font-size: 0.8rem; - - a { - @include vendor('pointer-events', 'auto'); - } - - h2, h3, h4, h5, h6 { - font-size: 1.25rem; - margin-bottom: 0.25rem; - } - - > * { - max-width: 100%; - margin-bottom: 1rem; - } - - > :last-child { - margin-bottom: 0; - } - } - - &:hover { - .caption { - opacity: 1; - } - } - } - - @include breakpoint('<=large') { - article { - width: (100% / 3); - - .caption { - padding: 1rem; - } - } - } - - @include breakpoint('<=medium') { - article { - width: 50%; - - .caption { - padding: 1rem; - } - } - } - - @include breakpoint('<=xsmall') { - article { - width: 100%; - - .caption { - padding: 1rem; - } - } - } - - // Modifiers. - - // size - &.small { - article { - width: 20%; - - .caption { - padding: 1rem; - } - } - - @include breakpoint('<=large') { - article { - width: 25%; - - .caption { - padding: 1rem; - } - } - } - - @include breakpoint('<=medium') { - article { - width: (100% / 3); - - .caption { - padding: 1rem; - } - } - } - - @include breakpoint('<=xsmall') { - article { - width: 50%; - - .caption { - padding: 1rem; - } - } - } - } - - &.medium { - // ... - } - - &.big { - article { - width: (100% / 3); - - .caption { - padding: 3rem; - } - } - - @include breakpoint('<=large') { - article { - width: 50%; - - .caption { - padding: 2rem; - } - } - } - - @include breakpoint('<=medium') { - article { - width: 50%; - - .caption { - padding: 2rem; - } - } - } - - @include breakpoint('<=xsmall') { - article { - width: 100%; - - .caption { - padding: 1rem; - } - } - } - } - - } - -/* Gallery (style2) */ - - .gallery.style2 { - @include color-typography(invert); - @include color-button(invert); - @include vendor('display', 'flex'); - -webkit-overflow-scrolling: touch; - position: relative; - background-color: transparent; - - > .forward, >.backward { - @include icon(false, solid); - @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); - position: absolute; - top: 0; - width: 5rem; - height: 100%; - cursor: pointer; - opacity: 0; - z-index: 2; - - &:before { - display: block; - top: calc(50% - 1.5rem); - width: 4rem; - height: 3rem; - line-height: 1em; - font-size: 3rem; - position: absolute; - text-align: center; - } - } - - &:hover { - > .forward, > .backward { - opacity: 1; - } - } - - > .forward { - right: 0; - background-image: linear-gradient(to left, rgba(0,0,0,0.25) 15%, rgba(0,0,0,0)); - - &:before { - content: '\f105'; - right: 0; - } - } - - > .backward { - left: 0; - background-image: linear-gradient(to right, rgba(0,0,0,0.25) 15%, rgba(0,0,0,0)); - - &:before { - content: '\f104'; - left: 0; - } - } - - > .inner { - @include vendor('display', 'inherit'); - overflow-x: auto; - overflow-y: hidden; - position: relative; - width: 100%; - } - - article { - @include vendor('flex-grow', '0'); - @include vendor('flex-shrink', '0'); - display: block; - position: relative; - overflow: hidden; - width: 22.5rem; - max-width: 75vw; - - .image { - display: block; - width: 100%; - border-radius: 0; - - img { - display: block; - width: 100%; - border-radius: 0; - } - } - - .caption { - @include vendor('align-items', 'center'); - @include vendor('display', 'flex'); - @include vendor('flex-direction', 'column'); - @include vendor('justify-content', 'center'); - @include vendor('pointer-events', 'none'); - @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: transparentize(_palette(invert, bg), 1 - _misc(overlay-opacity)); - opacity: 0; - padding: 3rem; - z-index: 1; - font-size: 0.8rem; - - a { - @include vendor('pointer-events', 'auto'); - } - - h2, h3, h4, h5, h6 { - font-size: 1.25rem; - margin-bottom: 0.25rem; - } - - > * { - max-width: 100%; - margin-bottom: 1rem; - } - - > :last-child { - margin-bottom: 0; - } - } - - &:hover { - .caption { - opacity: 1; - } - } - } - - @include breakpoint('<=medium') { - article { - .caption { - padding: 2rem; - } - } - } - - @include breakpoint('<=small') { - article { - .caption { - padding: 2rem; - } - } - } - - // Modifiers. - - // size - &.small { - article { - width: 17.5rem; - - .caption { - padding: 2rem; - } - } - - @include breakpoint('<=medium') { - article { - .caption { - padding: 2rem; - } - } - } - - @include breakpoint('<=small') { - article { - .caption { - padding: 2rem; - } - } - } - } - - &.medium { - // ... - } - - &.big { - article { - width: 30rem; - - .caption { - padding: 4rem; - } - } - - @include breakpoint('<=medium') { - article { - .caption { - padding: 3rem; - } - } - } - - @include breakpoint('<=small') { - article { - .caption { - padding: 2rem; - } - } - } - } - - } - -/* Gallery (lightbox) */ - - @include keyframes('gallery-modal-spinner') { - 0% { - @include vendor('transform', 'rotate(0deg)'); - } - - 100% { - @include vendor('transform', 'rotate(360deg)'); - } - } - - .gallery.lightbox { - .modal { - @include vendor('display', 'flex'); - @include vendor('align-items', 'center'); - @include vendor('justify-content', 'center'); - @include vendor('pointer-events', 'none'); - @include vendor('user-select', 'none'); - @include vendor('transition', ( - 'opacity #{_duration(gallery-lightbox)} ease', - 'visibility #{_duration(gallery-lightbox)}', - 'z-index #{_duration(gallery-lightbox)}' - )); - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - outline: 0; - background-color: transparentize(_palette(invert, bg), 1 - _misc(lightbox-opacity)); - visibility: none; - opacity: 0; - z-index: 0; - - &:before { - @include vendor('animation', 'gallery-modal-spinner 1s infinite linear'); - @include vendor('transition', 'opacity #{_duration(gallery-lightbox) * 0.5} ease'); - @include vendor('transition-delay', '#{_duration(gallery-lightbox)}'); - content: ''; - display: block; - position: absolute; - top: 50%; - left: 50%; - width: 4rem; - height: 4rem; - margin: -2rem 0 0 -2rem; - background-image: svg-url(''); - background-position: center; - background-repeat: no-repeat; - background-size: 4rem; - opacity: 0; - } - - &:after { - content: ''; - display: block; - position: absolute; - top: 0.5rem; - right: 0.5rem; - width: 4rem; - height: 4rem; - cursor: pointer; - background-image: svg-url(''); - background-position: center; - background-repeat: no-repeat; - background-size: 3rem; - } - - .inner { - @include vendor('transform', 'translateY(0.75rem)'); - @include vendor('transition', ( - 'opacity #{_duration(gallery-lightbox) * 0.5} ease', - 'transform #{_duration(gallery-lightbox) * 0.5} ease' - )); - opacity: 0; - - img { - display: block; - max-width: 90vw; - max-height: 85vh; - box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35); - } - } - - &.visible { - @include vendor('pointer-events', 'auto'); - visibility: visible; - opacity: 1; - z-index: _misc(z-index-base) + 1; - - &:before { - opacity: 1; - } - } - - &.loaded { - .inner { - @include vendor('transform', 'translateY(0)'); - @include vendor('transition', ( - 'opacity #{_duration(gallery-lightbox)} ease', - 'transform #{_duration(gallery-lightbox)} ease' - )); - opacity: 1; - } - - &:before { - @include vendor('transition-delay', '0s'); - opacity: 0; - } - } - } - - @include breakpoint('<=medium') { - .modal { - .inner { - img { - max-width: 100vw; - } - } - } - } - } - -// Mixin - - @mixin color-gallery($p: null) { - .gallery { - article { - .image { - background-color: transparentize(_palette($p, fg-bold), 0.875); - } - } - } - } - - @include color-gallery; \ No newline at end of file