stash
This commit is contained in:
Set Hallstrom
parent
b747089fca
commit
5113069605
171 changed files with 9868 additions and 10786 deletions
27
_sass/photos/layout/_footer.scss
Normal file
27
_sass/photos/layout/_footer.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
///
|
||||
/// Lens by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Footer */
|
||||
|
||||
#footer {
|
||||
@include padding(2.25em, 2.25em);
|
||||
|
||||
.copyright {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
margin-left: 0.35em;
|
||||
padding: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
16
_sass/photos/layout/_header.scss
Normal file
16
_sass/photos/layout/_header.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
///
|
||||
/// Lens by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Header */
|
||||
|
||||
#header {
|
||||
@include padding(3em, 2.25em);
|
||||
|
||||
h1 {
|
||||
font-size: 2.25em;
|
||||
font-weight: _font(weight-bold);
|
||||
}
|
||||
}
|
||||
118
_sass/photos/layout/_main.scss
Normal file
118
_sass/photos/layout/_main.scss
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
///
|
||||
/// Lens by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Main */
|
||||
|
||||
#main {
|
||||
@include vendor('transition', ('opacity #{_duration(layout)} ease', 'right #{_duration(layout)} ease', 'left #{_duration(layout)} ease', 'visibility #{_duration(layout)}'));
|
||||
-webkit-overflow-scrolling: touch;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: _size(main);
|
||||
height: 100%;
|
||||
background: _palette(bg);
|
||||
outline: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
text-align: _misc(main-align);
|
||||
visibility: visible;
|
||||
z-index: _misc(z-index-base);
|
||||
|
||||
@if _misc(main-side) == 'left' {
|
||||
left: 0;
|
||||
}
|
||||
@else {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
background-image: url('images/close-small-alt.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 32px 32px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
|
||||
@if _misc(main-side) == 'left' {
|
||||
background-position: calc(100% - 0.5em) 0.5em;
|
||||
right: 0;
|
||||
}
|
||||
@else {
|
||||
background-position: 0.5em 0.5em;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body.fullscreen & {
|
||||
visibility: hidden;
|
||||
|
||||
@if _misc(main-side) == 'left' {
|
||||
left: (_size(main) * -1);
|
||||
}
|
||||
@else {
|
||||
right: (_size(main) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
body.is-preload-1 & {
|
||||
opacity: 0;
|
||||
|
||||
@if _misc(main-side) == 'left' {
|
||||
left: -2em;
|
||||
}
|
||||
@else {
|
||||
right: -2em;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
width: _size(main-alt);
|
||||
|
||||
body.fullscreen & {
|
||||
@if _misc(main-side) == 'left' {
|
||||
left: (_size(main-alt) * -1);
|
||||
}
|
||||
@else {
|
||||
right: (_size(main-alt) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
background: transparentize(_palette(bg), 0.075);
|
||||
|
||||
.toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
@include vendor('transition', ('opacity #{_duration(layout-alt)} ease', 'visibility #{_duration(layout-alt)}'));
|
||||
width: 100%;
|
||||
background: _palette(bg);
|
||||
text-align: center;
|
||||
|
||||
body.is-preload-1 & {
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
}
|
||||
|
||||
body.fullscreen & {
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
75
_sass/photos/layout/_thumbnails.scss
Normal file
75
_sass/photos/layout/_thumbnails.scss
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
///
|
||||
/// Lens by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Thumbnails */
|
||||
|
||||
#thumbnails {
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-wrap', 'wrap');
|
||||
padding: 0 0.75em;
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
width: #{100% / _misc(thumbnails-per-row)};
|
||||
background: #101010;
|
||||
outline: 0;
|
||||
|
||||
.thumbnail {
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
display: block;
|
||||
position: relative;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include vendor('pointer-events', 'none');
|
||||
@include vendor('transition', 'opacity 0.25s ease');
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: inset 0 0 0 2px _palette(accent), inset 0 0 0px 3px rgba(0,0,0,0.15);
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&:before {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2, p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.thumbnail {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
article {
|
||||
.thumbnail {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
267
_sass/photos/layout/_viewer.scss
Normal file
267
_sass/photos/layout/_viewer.scss
Normal file
|
|
@ -0,0 +1,267 @@
|
|||
///
|
||||
/// Lens by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Viewer */
|
||||
|
||||
@include keyframes(spinner) {
|
||||
0% {
|
||||
@include vendor('transform', 'rotate(0deg)');
|
||||
}
|
||||
|
||||
100% {
|
||||
@include vendor('transform', 'rotate(360deg)');
|
||||
}
|
||||
}
|
||||
|
||||
#viewer {
|
||||
@include vendor('transition', ('opacity #{_duration(layout)} ease', 'width #{_duration(layout)} ease'));
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: calc(100% - #{_size(main)});
|
||||
height: 100%;
|
||||
|
||||
@if _misc(main-side) == 'left' {
|
||||
right: 0;
|
||||
}
|
||||
@else {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.inner {
|
||||
@include vendor('pointer-events', 'none');
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
|
||||
> * {
|
||||
@include vendor('pointer-events', 'auto');
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include vendor('background-image', (
|
||||
'linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0))',
|
||||
'linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0))'
|
||||
));
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
background-image: url('images/close.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 64px 64px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
|
||||
@if _misc(main-side) == 'left' {
|
||||
left: 0;
|
||||
background-position: 0.75em 0.75em;
|
||||
}
|
||||
@else {
|
||||
right: 0;
|
||||
background-position: calc(100% - 0.75em) 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-next,
|
||||
.nav-previous {
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 6em;
|
||||
height: 6em;
|
||||
margin-top: -3em;
|
||||
background-image: url('images/arrow.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-previous {
|
||||
@include vendor('transform', 'scaleX(-1)');
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nav-next {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slide {
|
||||
@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
|
||||
.caption {
|
||||
@include vendor('background-image', (
|
||||
'linear-gradient(bottom, rgba(16,16,16,0.75), rgba(16,16,16,0.25) 80%, rgba(16,16,16,0))',
|
||||
));
|
||||
@include padding(2em, 2em);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: rgba(255,255,255,0.5);
|
||||
z-index: 1;
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include vendor('animation', 'spinner #{_duration(spinner)} linear infinite');
|
||||
@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
background-image: url('images/spinner.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
margin: -1.5em 0 0 -1.5em;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.image {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.fullscreen & {
|
||||
width: 100%;
|
||||
|
||||
.inner {
|
||||
.toggle {
|
||||
background-image: url('images/open.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.is-preload-1 & {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
body.is-preload-2 & {
|
||||
.slide {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
width: calc(100% - #{_size(main-alt)});
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
width: 100%;
|
||||
|
||||
.inner {
|
||||
.toggle {
|
||||
@include vendor('transition', 'opacity #{_duration(layout)} ease');
|
||||
background-image: url('images/open.svg');
|
||||
opacity: 0;
|
||||
|
||||
@if _misc(main-side) == 'left' {
|
||||
left: 0;
|
||||
}
|
||||
@else {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.fullscreen & {
|
||||
.inner {
|
||||
.toggle {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
.inner {
|
||||
.toggle {
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
|
||||
.nav-next,
|
||||
.nav-previous {
|
||||
background-image: url('images/arrow-small.svg');
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
body.fullscreen & {
|
||||
.inner {
|
||||
.toggle {
|
||||
background-image: url('images/open-small.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
@include vendor('transition', ('opacity #{_duration(layout-alt)} ease'));
|
||||
@include vendor('transition-delay', '0s');
|
||||
opacity: 0;
|
||||
|
||||
.inner {
|
||||
.toggle {
|
||||
background-image: url('images/close-small.svg') !important;
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
body.fullscreen & {
|
||||
@include vendor('transition-delay', '#{_duration(layout-alt)}');
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue