You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
617 lines
12 KiB
617 lines
12 KiB
/* |
|
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: '\232A'; |
|
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: '\2329'; |
|
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; |