x0rg/agr.asia
1
0
Fork 0
forked from Git/hugo-story
Code Pull Requests Activity

Delete 'assets/sass/components/_gallery.scss'

Browse Source
This commit is contained in:
Olivier
2023-07-02 00:19:18 +02:00
parent a209c68878
commit e754527ed7
1 changed files with 0 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files

617
assets/sass/components/_gallery.scss
View File

@@ -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('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="96px" viewBox="0 0 96 96" zoomAndPan="disable"><style>circle {fill: transparent; stroke: #{_palette(invert, fg-bold)}; stroke-width: 1.5px; }</style><defs><clipPath id="corner"><polygon points="0,0 48,0 48,48 96,48 96,96 0,96" /></clipPath></defs><g clip-path="url(#corner)"><circle cx="48" cy="48" r="32"/></g></svg>');
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('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" zoomAndPan="disable"><style>line {stroke: #{_palette(invert, fg-bold)};stroke-width: 1.5px;}</style><line x1="20" y1="20" x2="44" y2="44" /><line x1="20" y1="44" x2="44" y2="20" /></svg>');
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;