slide in animation added, photoswipe -> fancybox
This commit is contained in:
zzossig
parent
68d9875d2e
commit
42420cc642
File diff suppressed because one or more lines are too long
|
|
@ -1,581 +0,0 @@
|
|||
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
/*
|
||||
Contents:
|
||||
1. Buttons
|
||||
2. Share modal and links
|
||||
3. Index indicator ("1 of X" counter)
|
||||
4. Caption
|
||||
5. Loading indicator
|
||||
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
|
||||
*/
|
||||
/*
|
||||
|
||||
1. Buttons
|
||||
*/
|
||||
/* <button> css reset */
|
||||
.pswp__button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: right;
|
||||
opacity: 0.75;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pswp__button:focus,
|
||||
.pswp__button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp__button:active {
|
||||
outline: none;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.pswp__button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
|
||||
.pswp__ui--over-close .pswp__button--close {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp__button,
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
background: url(../../images/photoswipe/default-skin.png) 0 0 no-repeat;
|
||||
background-size: 264px 88px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 1.1),
|
||||
(-webkit-min-device-pixel-ratio: 1.09375),
|
||||
(min-resolution: 105dpi),
|
||||
(min-resolution: 1.1dppx) {
|
||||
|
||||
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
|
||||
.pswp--svg .pswp__button,
|
||||
.pswp--svg .pswp__button--arrow--left:before,
|
||||
.pswp--svg .pswp__button--arrow--right:before {
|
||||
background-image: url(../../images/photoswipe/default-skin.svg);
|
||||
}
|
||||
|
||||
.pswp--svg .pswp__button--arrow--left,
|
||||
.pswp--svg .pswp__button--arrow--right {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__button--close {
|
||||
background-position: 0 -44px;
|
||||
}
|
||||
|
||||
.pswp__button--share {
|
||||
background-position: -44px -44px;
|
||||
}
|
||||
|
||||
.pswp__button--fs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pswp--supports-fs .pswp__button--fs {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pswp--fs .pswp__button--fs {
|
||||
background-position: -44px 0;
|
||||
}
|
||||
|
||||
.pswp__button--zoom {
|
||||
display: none;
|
||||
background-position: -88px 0;
|
||||
}
|
||||
|
||||
.pswp--zoom-allowed .pswp__button--zoom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pswp--zoomed-in .pswp__button--zoom {
|
||||
background-position: -132px 0;
|
||||
}
|
||||
|
||||
/* no arrows on touch screens */
|
||||
.pswp--touch .pswp__button--arrow--left,
|
||||
.pswp--touch .pswp__button--arrow--right {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
Arrow buttons hit area
|
||||
(icon is added to :before pseudo-element)
|
||||
*/
|
||||
.pswp__button--arrow--left,
|
||||
.pswp__button--arrow--right {
|
||||
background: none;
|
||||
top: 50%;
|
||||
margin-top: -50px;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
background-color: #212121;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
content: '';
|
||||
top: 35px;
|
||||
color: #fff;
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--left:before {
|
||||
left: 6px;
|
||||
background-position: -138px -44px;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--right:before {
|
||||
right: 6px;
|
||||
background-position: -94px -44px;
|
||||
}
|
||||
|
||||
/*
|
||||
2. Share modal/popup and links
|
||||
*/
|
||||
.pswp__counter,
|
||||
.pswp__share-modal {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pswp__share-modal {
|
||||
display: block;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
z-index: 1600;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.pswp__share-modal--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pswp__share-tooltip {
|
||||
z-index: 1620;
|
||||
position: absolute;
|
||||
background: #FFF;
|
||||
top: 56px;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
width: auto;
|
||||
right: 44px;
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
-webkit-transform: translateY(6px);
|
||||
-ms-transform: translateY(6px);
|
||||
transform: translateY(6px);
|
||||
-webkit-transition: -webkit-transform 0.25s;
|
||||
transition: transform 0.25s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.pswp__share-tooltip a {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.pswp__share-tooltip a:hover {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.pswp__share-tooltip a:first-child {
|
||||
/* round corners on the first/last list item */
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.pswp__share-tooltip a:last-child {
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
|
||||
.pswp__share-modal--fade-in {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp__share-modal--fade-in .pswp__share-tooltip {
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* increase size of share links on touch devices */
|
||||
.pswp--touch .pswp__share-tooltip a {
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
a.pswp__share--facebook:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: 15px;
|
||||
border: 6px solid transparent;
|
||||
border-bottom-color: #FFF;
|
||||
-webkit-pointer-events: none;
|
||||
-moz-pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
a.pswp__share--facebook:hover {
|
||||
background: #3E5C9A;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
a.pswp__share--facebook:hover:before {
|
||||
border-bottom-color: #3E5C9A;
|
||||
}
|
||||
|
||||
a.pswp__share--twitter:hover {
|
||||
background: #55ACEE;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
a.pswp__share--pinterest:hover {
|
||||
background: #CCC;
|
||||
color: #CE272D;
|
||||
}
|
||||
|
||||
a.pswp__share--download:hover {
|
||||
background: #DDD;
|
||||
}
|
||||
|
||||
/*
|
||||
3. Index indicator ("1 of X" counter)
|
||||
*/
|
||||
.pswp__counter {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
color: #FFF;
|
||||
opacity: 0.75;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
4. Caption
|
||||
*/
|
||||
.pswp__caption {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.pswp__caption small {
|
||||
font-size: 11px;
|
||||
color: #BBB;
|
||||
}
|
||||
|
||||
.pswp__caption__center {
|
||||
text-align: left;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
line-height: 20px;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.pswp__caption--empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Fake caption element, used to calculate height of next/prev image */
|
||||
.pswp__caption--fake {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
5. Loading indicator (preloader)
|
||||
You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
|
||||
*/
|
||||
.pswp__preloader {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -22px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out;
|
||||
will-change: opacity;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.pswp__preloader__icn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.pswp__preloader--active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp__preloader--active .pswp__preloader__icn {
|
||||
/* We use .gif in browsers that don't support CSS animation */
|
||||
background: url(../../images/photoswipe/preloader.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader--active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
|
||||
-webkit-animation: clockwise 500ms linear infinite;
|
||||
animation: clockwise 500ms linear infinite;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
|
||||
-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
|
||||
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader__icn {
|
||||
background: none;
|
||||
opacity: 0.75;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader__cut {
|
||||
/*
|
||||
The idea of animating inner circle is based on Polymer ("material") loading indicator
|
||||
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
|
||||
*/
|
||||
position: relative;
|
||||
width: 7px;
|
||||
height: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader__donut {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 50%;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.pswp__preloader {
|
||||
position: relative;
|
||||
left: auto;
|
||||
top: auto;
|
||||
margin: 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes clockwise {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes clockwise {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes donut-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(-140deg);
|
||||
transform: rotate(-140deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes donut-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(-140deg);
|
||||
transform: rotate(-140deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
6. Additional styles
|
||||
*/
|
||||
/* root element of UI */
|
||||
.pswp__ui {
|
||||
-webkit-font-smoothing: auto;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 1550;
|
||||
}
|
||||
|
||||
/* top black bar with buttons and "1 of X" indicator */
|
||||
.pswp__top-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pswp__caption,
|
||||
.pswp__top-bar,
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
}
|
||||
|
||||
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.pswp__top-bar,
|
||||
.pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
|
||||
.pswp__ui--fit .pswp__top-bar,
|
||||
.pswp__ui--fit .pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
|
||||
.pswp__ui--idle .pswp__top-bar {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pswp__ui--idle .pswp__button--arrow--left,
|
||||
.pswp__ui--idle .pswp__button--arrow--right {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
pswp__ui--hidden class is added when controls are hidden
|
||||
e.g. when user taps to toggle visibility of controls
|
||||
*/
|
||||
.pswp__ui--hidden .pswp__top-bar,
|
||||
.pswp__ui--hidden .pswp__caption,
|
||||
.pswp__ui--hidden .pswp__button--arrow--left,
|
||||
.pswp__ui--hidden .pswp__button--arrow--right {
|
||||
/* Force paint & create composition layer for controls. */
|
||||
opacity: 0.001;
|
||||
}
|
||||
|
||||
/* pswp__ui--one-slide class is added when there is just one item in gallery */
|
||||
.pswp__ui--one-slide .pswp__button--arrow--left,
|
||||
.pswp__ui--one-slide .pswp__button--arrow--right,
|
||||
.pswp__ui--one-slide .pswp__counter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pswp__element--disabled {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.pswp--minimal--dark .pswp__top-bar {
|
||||
background: none;
|
||||
}
|
||||
|
|
@ -1,204 +0,0 @@
|
|||
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
/*
|
||||
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
|
||||
*/
|
||||
/* pswp = photoswipe */
|
||||
.pswp {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
z-index: 1500;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
|
||||
-webkit-backface-visibility: hidden;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.pswp * {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pswp img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* style is added when JS option showHideOpacity is set to true */
|
||||
.pswp--animate_opacity {
|
||||
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
|
||||
opacity: 0.001;
|
||||
will-change: opacity;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
}
|
||||
|
||||
.pswp--open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pswp--zoom-allowed .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.pswp--zoomed-in .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.pswp--dragging .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/*
|
||||
Background is added as a separate element.
|
||||
As animating opacity is much faster than animating rgba() background-color.
|
||||
*/
|
||||
.pswp__bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.pswp__scroll-wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* Prevent selection and tap highlights */
|
||||
.pswp__container,
|
||||
.pswp__img {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
.pswp__zoom-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
-webkit-transform-origin: left top;
|
||||
-ms-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
}
|
||||
|
||||
.pswp__bg {
|
||||
will-change: opacity;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
}
|
||||
|
||||
.pswp--animated-in .pswp__bg,
|
||||
.pswp--animated-in .pswp__zoom-wrap {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.pswp__item {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pswp__img {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
stretched thumbnail or div placeholder element (see below)
|
||||
style is added to avoid flickering in webkit/blink when layers overlap
|
||||
*/
|
||||
.pswp__img--placeholder {
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
div element that matches size of large image
|
||||
large image loads on top of it
|
||||
*/
|
||||
.pswp__img--placeholder--blank {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.pswp--ie .pswp__img {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Error message appears when image is not loaded
|
||||
(JS option errorMsg controls markup)
|
||||
*/
|
||||
.pswp__error-msg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-top: -8px;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.pswp__error-msg a {
|
||||
color: #CCC;
|
||||
text-decoration: underline;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -124,14 +124,23 @@ $(document).ready(function() {
|
|||
$('#mobileSearchBtn').click(function() {
|
||||
$('#search-mobile-container').fadeIn(250);
|
||||
$('#search-mobile').focus();
|
||||
$('html').css('overflow-y', 'hidden');
|
||||
});
|
||||
$('#search-mobile-close').click(function() {
|
||||
$('#search-mobile-container').fadeOut(250);
|
||||
$('#search-mobile').val('');
|
||||
$('#search-mobile-results').empty();
|
||||
$('html').css('overflow-y', 'visible');
|
||||
});
|
||||
$('#search-mobile').keydown(function(e) {
|
||||
// e.key === "Enter"
|
||||
if (e.key === "Escape") {
|
||||
$('#search-mobile-container').fadeOut(250);
|
||||
$('#search-mobile').val('');
|
||||
$('#search-mobile-results').empty();
|
||||
$('html').css('overflow-y', 'visible');
|
||||
}
|
||||
});
|
||||
|
||||
// animation
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ $code-font-stack: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "
|
|||
"DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
|
||||
monospace !default;
|
||||
|
||||
$z-indexes: ("modal", "navbar", "dropdown", "header", "grid", "search", "content", "footer", "taxo", "toc", "gallery-mask");
|
||||
$z-indexes: ("modal", "navbar", "dropdown", "header", "grid", "search-btn", "search", "content", "footer", "taxo", "toc", "gallery-mask");
|
||||
$ls: (
|
||||
base: -10,
|
||||
heading: 10,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0,-24%);
|
||||
transform: translate(0,-12%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0,24%);
|
||||
transform: translate(0,12%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-24%,0);
|
||||
transform: translate(-12%,0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -46,14 +46,14 @@
|
|||
}
|
||||
|
||||
100% {
|
||||
transform: translate(24%,0);
|
||||
transform: translate(12%,0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(slide-in-up) {
|
||||
0% {
|
||||
transform: translate(0,24%);
|
||||
transform: translate(0,12%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
|
||||
@include keyframes(slide-in-down) {
|
||||
0% {
|
||||
transform: translate(0,-24%);
|
||||
transform: translate(0,-12%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
// Slide in Left to Center
|
||||
@include keyframes(slide-in-left) {
|
||||
0% {
|
||||
transform: translate(-24%,0);
|
||||
transform: translate(-12%,0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
|
@ -91,7 +91,31 @@
|
|||
// Slide in Right to Center
|
||||
@include keyframes(slide-in-right) {
|
||||
0% {
|
||||
transform: translate(24%,0);
|
||||
transform: translate(12%,0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0,0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(slide-in-down-2) {
|
||||
0% {
|
||||
transform: translate(0,-6%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0,0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(slide-in-down-3) {
|
||||
0% {
|
||||
transform: translate(0,-2%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
@include justify-content(center);
|
||||
@include align-items(flex-start);
|
||||
@include flex-direction(column);
|
||||
@include animation('slide-in-down-2 .5s .2s 1 ease both');
|
||||
|
||||
width: 100%;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
// flowchart.js
|
||||
.diagram {
|
||||
overflow: auto;
|
||||
background-color: #FCFCFA;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0.25rem;
|
||||
|
|
|
|||
|
|
@ -1,68 +0,0 @@
|
|||
a.pswp__share--facebook:hover {
|
||||
@include themify($themes) {
|
||||
background: themed('photoswipe-hover-background-color');
|
||||
color: themed('photoswipe-hover-color');
|
||||
}
|
||||
}
|
||||
|
||||
a.pswp__share--facebook:hover:before {
|
||||
@include themify($themes) {
|
||||
border-bottom-color: themed('photoswipe-hover-background-color');
|
||||
}
|
||||
}
|
||||
|
||||
a.pswp__share--twitter:hover {
|
||||
@include themify($themes) {
|
||||
background: themed('photoswipe-hover-background-color');
|
||||
color: themed('photoswipe-hover-color');
|
||||
}
|
||||
}
|
||||
|
||||
a.pswp__share--pinterest:hover {
|
||||
@include themify($themes) {
|
||||
background: themed('photoswipe-hover-background-color');
|
||||
color: themed('photoswipe-hover-color');
|
||||
}
|
||||
}
|
||||
|
||||
a.pswp__share--download:hover {
|
||||
@include themify($themes) {
|
||||
background: themed('photoswipe-hover-background-color');
|
||||
color: themed('photoswipe-hover-color');
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__share-tooltip {
|
||||
@include themify($themes) {
|
||||
background: themed('photoswipe-background-color');
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__share-tooltip a {
|
||||
@include themify($themes) {
|
||||
color: themed('photoswipe-color');
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__share-tooltip a:hover {
|
||||
text-decoration: none;
|
||||
@include themify($themes) {
|
||||
color: themed('photoswipe-color');
|
||||
}
|
||||
}
|
||||
|
||||
a.pswp__share--facebook:before {
|
||||
@include themify($themes) {
|
||||
border-bottom-color: themed('photoswipe-background-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
background-color: rgba(189, 189, 189, 0.3);
|
||||
}
|
||||
|
||||
.pswp__bg {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
|
@ -116,13 +116,15 @@
|
|||
.mobile-search {
|
||||
position: absolute;
|
||||
z-index: z('modal');
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&__top {
|
||||
width: 100%;
|
||||
height: $grid_navbar_height;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include themify($themes) {
|
||||
|
|
@ -134,6 +136,8 @@
|
|||
width: 50px;
|
||||
height: $grid_navbar_height;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
|
|
@ -168,7 +172,8 @@
|
|||
|
||||
&__body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('body-color');
|
||||
|
|
@ -184,6 +189,7 @@
|
|||
height: $grid_navbar_height;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
z-index: z('search-btn');
|
||||
|
||||
@include respond-to(sm) {
|
||||
@include flexbox();
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
.summary-card {
|
||||
@for $i from 1 through 8 {
|
||||
&:nth-child(#{$i}) {
|
||||
@include animation('slide-in-down-2 .3s #{$i * .15}s 1 ease both');
|
||||
}
|
||||
}
|
||||
|
||||
margin: 0 0.5rem;
|
||||
padding: 0 0.5rem;
|
||||
|
||||
|
|
@ -77,6 +83,12 @@
|
|||
}
|
||||
|
||||
.summary-classic {
|
||||
@for $i from 1 through 13 {
|
||||
&:nth-child(#{$i}) {
|
||||
@include animation('slide-in-left .25s #{$i * .15}s 1 ease both');
|
||||
}
|
||||
}
|
||||
|
||||
padding: 0 1rem;
|
||||
.title {
|
||||
font-size: 24px;
|
||||
|
|
@ -138,6 +150,12 @@
|
|||
}
|
||||
|
||||
.summary-compact {
|
||||
@for $i from 1 through 20 {
|
||||
&:nth-child(#{$i}) {
|
||||
@include animation('slide-in-left .25s #{$i * .15}s 1 ease both');
|
||||
}
|
||||
}
|
||||
|
||||
padding: 0 1rem;
|
||||
&__flexbox {
|
||||
@include flexbox();
|
||||
|
|
|
|||
|
|
@ -24,6 +24,14 @@
|
|||
&--show {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&__slide-down {
|
||||
@for $i from 1 through 8 {
|
||||
&:nth-child(#{$i}) {
|
||||
@include animation('slide-in-down .25s #{$i * .1}s 1 ease both');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__brand {
|
||||
height: $grid_navbar_height;
|
||||
|
|
@ -118,7 +126,7 @@
|
|||
height: $grid_navbar_height;
|
||||
font-size: 1.5rem;
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include align-items(center);
|
||||
|
||||
&-link {
|
||||
@include themify($themes) {
|
||||
|
|
@ -149,6 +157,7 @@
|
|||
font-size: 1rem;
|
||||
font-family: $navbar_item_font;
|
||||
font-weight: 400;
|
||||
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
|
|
@ -158,7 +167,6 @@
|
|||
color: themed('navbar-title-hover-color');
|
||||
background-color: themed('navbar-menu-hover-background-color');
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid themed('navbar-border-bottom-color');
|
||||
}
|
||||
&.active {
|
||||
color: themed('navbar-title-active-color') !important;
|
||||
|
|
@ -232,6 +240,12 @@
|
|||
display: block;
|
||||
font-size: 1rem;
|
||||
|
||||
// @for $i from 1 through 4 {
|
||||
// &:nth-child(#{$i}) {
|
||||
// @include animation('slide-in-down .25s #{$i * .1}s 1 ease both');
|
||||
// }
|
||||
// }
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("dropdown-item-color");
|
||||
@include on-event {
|
||||
|
|
|
|||
|
|
@ -158,7 +158,6 @@ $avatar_background_color: {{ $scr.Get "avatar_background_color" }};
|
|||
@import 'components/toc';
|
||||
@import 'components/taxo';
|
||||
@import 'components/pagination';
|
||||
@import 'components/photoswipe';
|
||||
@import 'components/search';
|
||||
@import 'components/breadcrumb';
|
||||
@import 'components/related';
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@
|
|||
color: themed('archive-key-color');
|
||||
background-color: themed('archive-key-background-color');
|
||||
}
|
||||
@include animation('slide-in-down .4s .1s 1 ease both');
|
||||
|
||||
&:not(:first-child) {
|
||||
margin: 4rem 0 1rem 0;
|
||||
|
|
@ -76,6 +77,7 @@
|
|||
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include animation('slide-in-left .2s .4s 1 ease both');
|
||||
}
|
||||
|
||||
&__type {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
font-family: $single_title_font;
|
||||
line-height: 3rem;
|
||||
|
||||
@include animation('slide-in-down .5s 0s 1 ease both');
|
||||
@include animation('slide-in-down .5s .2s 1 ease both');
|
||||
@include themify($themes) {
|
||||
color: themed("single-header-title-color");
|
||||
}
|
||||
|
|
@ -17,12 +17,23 @@
|
|||
|
||||
&__meta {
|
||||
font-size: 0.8rem;
|
||||
//@include animation(0.5s, 0.5s, animation-slide-in-left, ease);
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include animation('slide-in-down .5s .4s 1 ease both');
|
||||
}
|
||||
|
||||
&__contents {
|
||||
@include animation('slide-in-down-3 .6s .6s 1 ease both');
|
||||
&--gallery {
|
||||
overflow: hidden;
|
||||
@include animation('slide-in-down-3 .6s .0s 1 ease both');
|
||||
}
|
||||
|
||||
&--about {
|
||||
@include animation('slide-in-down-3 .6s .2s 1 ease both');
|
||||
}
|
||||
|
||||
|
||||
font-size: 1rem;
|
||||
font-family: $single_contents_font;
|
||||
margin: 1rem 0;
|
||||
|
|
|
|||
|
|
@ -1,581 +0,0 @@
|
|||
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
/*
|
||||
Contents:
|
||||
1. Buttons
|
||||
2. Share modal and links
|
||||
3. Index indicator ("1 of X" counter)
|
||||
4. Caption
|
||||
5. Loading indicator
|
||||
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
|
||||
*/
|
||||
/*
|
||||
|
||||
1. Buttons
|
||||
*/
|
||||
/* <button> css reset */
|
||||
.pswp__button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: right;
|
||||
opacity: 0.75;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pswp__button:focus,
|
||||
.pswp__button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp__button:active {
|
||||
outline: none;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.pswp__button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
|
||||
.pswp__ui--over-close .pswp__button--close {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp__button,
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
background: url(images/photoswipe/default-skin.png) 0 0 no-repeat;
|
||||
background-size: 264px 88px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 1.1),
|
||||
(-webkit-min-device-pixel-ratio: 1.09375),
|
||||
(min-resolution: 105dpi),
|
||||
(min-resolution: 1.1dppx) {
|
||||
|
||||
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
|
||||
.pswp--svg .pswp__button,
|
||||
.pswp--svg .pswp__button--arrow--left:before,
|
||||
.pswp--svg .pswp__button--arrow--right:before {
|
||||
background-image: url(images/photoswipe/default-skin.svg);
|
||||
}
|
||||
|
||||
.pswp--svg .pswp__button--arrow--left,
|
||||
.pswp--svg .pswp__button--arrow--right {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__button--close {
|
||||
background-position: 0 -44px;
|
||||
}
|
||||
|
||||
.pswp__button--share {
|
||||
background-position: -44px -44px;
|
||||
}
|
||||
|
||||
.pswp__button--fs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pswp--supports-fs .pswp__button--fs {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pswp--fs .pswp__button--fs {
|
||||
background-position: -44px 0;
|
||||
}
|
||||
|
||||
.pswp__button--zoom {
|
||||
display: none;
|
||||
background-position: -88px 0;
|
||||
}
|
||||
|
||||
.pswp--zoom-allowed .pswp__button--zoom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pswp--zoomed-in .pswp__button--zoom {
|
||||
background-position: -132px 0;
|
||||
}
|
||||
|
||||
/* no arrows on touch screens */
|
||||
.pswp--touch .pswp__button--arrow--left,
|
||||
.pswp--touch .pswp__button--arrow--right {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
Arrow buttons hit area
|
||||
(icon is added to :before pseudo-element)
|
||||
*/
|
||||
.pswp__button--arrow--left,
|
||||
.pswp__button--arrow--right {
|
||||
background: none;
|
||||
top: 50%;
|
||||
margin-top: -50px;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
background-color: #212121;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
content: '';
|
||||
top: 35px;
|
||||
color: #fff;
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--left:before {
|
||||
left: 6px;
|
||||
background-position: -138px -44px;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--right:before {
|
||||
right: 6px;
|
||||
background-position: -94px -44px;
|
||||
}
|
||||
|
||||
/*
|
||||
2. Share modal/popup and links
|
||||
*/
|
||||
.pswp__counter,
|
||||
.pswp__share-modal {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pswp__share-modal {
|
||||
display: block;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
z-index: 1600;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.pswp__share-modal--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pswp__share-tooltip {
|
||||
z-index: 1620;
|
||||
position: absolute;
|
||||
background: #FFF;
|
||||
top: 56px;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
width: auto;
|
||||
right: 44px;
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
-webkit-transform: translateY(6px);
|
||||
-ms-transform: translateY(6px);
|
||||
transform: translateY(6px);
|
||||
-webkit-transition: -webkit-transform 0.25s;
|
||||
transition: transform 0.25s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.pswp__share-tooltip a {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.pswp__share-tooltip a:hover {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.pswp__share-tooltip a:first-child {
|
||||
/* round corners on the first/last list item */
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.pswp__share-tooltip a:last-child {
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
|
||||
.pswp__share-modal--fade-in {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp__share-modal--fade-in .pswp__share-tooltip {
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* increase size of share links on touch devices */
|
||||
.pswp--touch .pswp__share-tooltip a {
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
a.pswp__share--facebook:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: 15px;
|
||||
border: 6px solid transparent;
|
||||
border-bottom-color: #FFF;
|
||||
-webkit-pointer-events: none;
|
||||
-moz-pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
a.pswp__share--facebook:hover {
|
||||
background: #3E5C9A;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
a.pswp__share--facebook:hover:before {
|
||||
border-bottom-color: #3E5C9A;
|
||||
}
|
||||
|
||||
a.pswp__share--twitter:hover {
|
||||
background: #55ACEE;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
a.pswp__share--pinterest:hover {
|
||||
background: #CCC;
|
||||
color: #CE272D;
|
||||
}
|
||||
|
||||
a.pswp__share--download:hover {
|
||||
background: #DDD;
|
||||
}
|
||||
|
||||
/*
|
||||
3. Index indicator ("1 of X" counter)
|
||||
*/
|
||||
.pswp__counter {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
color: #FFF;
|
||||
opacity: 0.75;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
4. Caption
|
||||
*/
|
||||
.pswp__caption {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.pswp__caption small {
|
||||
font-size: 11px;
|
||||
color: #BBB;
|
||||
}
|
||||
|
||||
.pswp__caption__center {
|
||||
text-align: left;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
line-height: 20px;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.pswp__caption--empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Fake caption element, used to calculate height of next/prev image */
|
||||
.pswp__caption--fake {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
5. Loading indicator (preloader)
|
||||
You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
|
||||
*/
|
||||
.pswp__preloader {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -22px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out;
|
||||
will-change: opacity;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.pswp__preloader__icn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.pswp__preloader--active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp__preloader--active .pswp__preloader__icn {
|
||||
/* We use .gif in browsers that don't support CSS animation */
|
||||
background: url(/images/photoswipe/preloader.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader--active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
|
||||
-webkit-animation: clockwise 500ms linear infinite;
|
||||
animation: clockwise 500ms linear infinite;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
|
||||
-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
|
||||
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader__icn {
|
||||
background: none;
|
||||
opacity: 0.75;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader__cut {
|
||||
/*
|
||||
The idea of animating inner circle is based on Polymer ("material") loading indicator
|
||||
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
|
||||
*/
|
||||
position: relative;
|
||||
width: 7px;
|
||||
height: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader__donut {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 50%;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.pswp__preloader {
|
||||
position: relative;
|
||||
left: auto;
|
||||
top: auto;
|
||||
margin: 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes clockwise {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes clockwise {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes donut-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(-140deg);
|
||||
transform: rotate(-140deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes donut-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(-140deg);
|
||||
transform: rotate(-140deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
6. Additional styles
|
||||
*/
|
||||
/* root element of UI */
|
||||
.pswp__ui {
|
||||
-webkit-font-smoothing: auto;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 1550;
|
||||
}
|
||||
|
||||
/* top black bar with buttons and "1 of X" indicator */
|
||||
.pswp__top-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pswp__caption,
|
||||
.pswp__top-bar,
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
}
|
||||
|
||||
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.pswp__top-bar,
|
||||
.pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
|
||||
.pswp__ui--fit .pswp__top-bar,
|
||||
.pswp__ui--fit .pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
|
||||
.pswp__ui--idle .pswp__top-bar {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pswp__ui--idle .pswp__button--arrow--left,
|
||||
.pswp__ui--idle .pswp__button--arrow--right {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
pswp__ui--hidden class is added when controls are hidden
|
||||
e.g. when user taps to toggle visibility of controls
|
||||
*/
|
||||
.pswp__ui--hidden .pswp__top-bar,
|
||||
.pswp__ui--hidden .pswp__caption,
|
||||
.pswp__ui--hidden .pswp__button--arrow--left,
|
||||
.pswp__ui--hidden .pswp__button--arrow--right {
|
||||
/* Force paint & create composition layer for controls. */
|
||||
opacity: 0.001;
|
||||
}
|
||||
|
||||
/* pswp__ui--one-slide class is added when there is just one item in gallery */
|
||||
.pswp__ui--one-slide .pswp__button--arrow--left,
|
||||
.pswp__ui--one-slide .pswp__button--arrow--right,
|
||||
.pswp__ui--one-slide .pswp__counter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pswp__element--disabled {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.pswp--minimal--dark .pswp__top-bar {
|
||||
background: none;
|
||||
}
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
{{ if $.Param "enablePhotoSwipe" }}
|
||||
|
||||
<!-- Root element of PhotoSwipe. Must have class pswp. -->
|
||||
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
|
||||
<!-- Background of PhotoSwipe.
|
||||
It's a separate element as animating opacity is faster than rgba(). -->
|
||||
<div class="pswp__bg"></div>
|
||||
|
||||
<!-- Slides wrapper with overflow:hidden. -->
|
||||
<div class="pswp__scroll-wrap">
|
||||
|
||||
<!-- Container that holds slides.
|
||||
PhotoSwipe keeps only 3 of them in the DOM to save memory.
|
||||
Don't modify these 3 pswp__item elements, data is added later on. -->
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
|
||||
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
|
||||
<div class="pswp__top-bar">
|
||||
|
||||
<!-- Controls are self-explanatory. Order can be changed. -->
|
||||
|
||||
<div class="pswp__counter"></div>
|
||||
|
||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--share" title="Share"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
||||
|
||||
<!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
|
||||
<!-- element will get class pswp__preloader--active when preloader is running -->
|
||||
<div class="pswp__preloader">
|
||||
<div class="pswp__preloader__icn">
|
||||
<div class="pswp__preloader__cut">
|
||||
<div class="pswp__preloader__donut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||
<div class="pswp__share-tooltip"></div>
|
||||
</div>
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
|
||||
</button>
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
|
||||
</button>
|
||||
|
||||
<div class="pswp__caption">
|
||||
<div class="pswp__caption__center"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{ $photoSwipe := resources.Get `js/photoswipe.min.js` | resources.Fingerprint }}
|
||||
<script defer src="{{ $photoSwipe.RelPermalink }}"></script>
|
||||
{{ $photoSwipeUi := resources.Get `js/photoswipe-ui-default.min.js` | resources.Fingerprint }}
|
||||
<script defer src="{{ $photoSwipeUi.RelPermalink }}"></script>
|
||||
|
||||
{{ $photoSwipeStyle := resources.Get "css/photoswipe/photoswipe.css" | minify }}
|
||||
<link rel="stylesheet" href="{{ $photoSwipeStyle.RelPermalink }}">
|
||||
{{ $photoSwipeSkin := resources.Get "css/photoswipe/custom-skin.css" | minify }}
|
||||
<link rel="stylesheet" href="{{ $photoSwipeSkin.RelPermalink }}">
|
||||
|
||||
<script>
|
||||
window.onload(function() {
|
||||
var pswpElement = $('.pswp')[0];
|
||||
var imgElements = $('.single__contents').find('img');
|
||||
var items = [];
|
||||
|
||||
imgElements.each(function (i, v) {
|
||||
$(this).click(function (e) {
|
||||
initGallery(i);
|
||||
});
|
||||
$(this).css('cursor', 'pointer');
|
||||
console.log(v['src'])
|
||||
items.push({
|
||||
src: v['src'],
|
||||
w: 0,
|
||||
h: 0,
|
||||
title: filename(v['src']),
|
||||
});
|
||||
});
|
||||
|
||||
function filename(str) {
|
||||
var s = str.replace(/\\/g, '/');
|
||||
s = s.substring(s.lastIndexOf('/') + 1);
|
||||
return str ? s.replace(/[?#].+$/, '') : s.split('.')[0];
|
||||
}
|
||||
|
||||
function initGallery(index) {
|
||||
var options = { index: index };
|
||||
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
|
||||
gallery.listen('imageLoadComplete', function (index, item) {
|
||||
if (item.h < 1 || item.w < 1) {
|
||||
let img = new Image();
|
||||
img.onload = () => {
|
||||
item.w = img.width;
|
||||
item.h = img.height;
|
||||
gallery.invalidateCurrItems();
|
||||
gallery.updateSize(true);
|
||||
}
|
||||
img.src = item.src;
|
||||
}
|
||||
})
|
||||
gallery.init();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<article class="summary-card">
|
||||
<header>
|
||||
<h5 class="title h5"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
|
||||
<h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} · ☕{{ .ReadingTime }} min read</h6>
|
||||
</header>
|
||||
{{ $params := .Params }}
|
||||
<div class="summary-card__content">
|
||||
<div class="summary-card__text p2">
|
||||
{{ with $params.Description }}
|
||||
{{ . }}
|
||||
{{ else }}
|
||||
{{ .Summary }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ if $params.featured_image }}
|
||||
<div class="summary-card__image-wrapper">
|
||||
{{ with (print "images/" $params.featured_image) }}
|
||||
<img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-card__image">
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ else if $params.featured_video }}
|
||||
{{ with print ("videos/poster/" | relURL) $params.featured_video_poster }}
|
||||
<div class="summary-card__video-wrapper">
|
||||
<video class="summary-card__video" controls preload='none' poster='{{ . | relURL }}' data-setup='{"fluid": true}'>
|
||||
{{ with print ("videos/" | relURL) $params.featured_video }}
|
||||
<source src="{{ . | relURL }}" type='video/mp4'>
|
||||
{{ end }}
|
||||
</video>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<hr />
|
||||
</article>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<article class="summary-classic">
|
||||
<div class="summary-classic__flex-box">
|
||||
{{ $params := .Params }}
|
||||
{{ if $params.featured_image }}
|
||||
<div class="summary-classic__image-wrapper">
|
||||
{{ with (print "images/" $params.featured_image) }}
|
||||
<img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-classic__image">
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="summary-classic__content">
|
||||
<header>
|
||||
<h5 class="title h5"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
|
||||
<h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} · ☕{{ .ReadingTime }} min read
|
||||
</h6>
|
||||
</header>
|
||||
<div>
|
||||
<div class="summary-classic__text p2">
|
||||
{{ with $params.Description }}
|
||||
{{ . }}
|
||||
{{ else }}
|
||||
{{ .Summary }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</article>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<article class="summary-compact">
|
||||
<div class="summary-compact__flex-box">
|
||||
{{ $params := .Params }}
|
||||
<div class="summary-compact__meta">
|
||||
<header>
|
||||
<h5 class="title h6"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
|
||||
<h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} · ☕{{ .ReadingTime }} min read
|
||||
</h6>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</article>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 547 B |
|
|
@ -1 +0,0 @@
|
|||
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 866 B |
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ block "title" . }}{{ .Title }} – {{ .Site.Title }}{{ end }}</title>
|
||||
{{ partialCached "head/scripts" . }}
|
||||
{{ partialCached "head/styles" . }}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
{{ partial "body/related" . }}
|
||||
{{ partial "pagination/pagination-single" . }}
|
||||
{{ partial "comments/comments.html" . }}
|
||||
{{ partial "body/photoswipe" . }}
|
||||
{{ partial "body/lib" . }}
|
||||
|
||||
<div class="hide">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
</h3>
|
||||
</header>
|
||||
<main class="main">
|
||||
<article class="single__contents about">
|
||||
<article class="single__contents single__contents--about about">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@
|
|||
{{ if in (lower .Params.Mode) "one" }}
|
||||
|
||||
<main class="gallery main">
|
||||
<div class="grid single__contents">
|
||||
<div class="grid single__contents single__contents--gallery">
|
||||
<div class="grid-sizer"></div>
|
||||
{{ if .File.Dir }}
|
||||
{{ $basename := (replace .File.Dir "\\" "/") }}
|
||||
{{ range .Params.Images }}
|
||||
<div class="grid-item">
|
||||
<img src="{{ $basename | relURL }}{{ .image }}" alt="{{ print .caption }}"/>
|
||||
<a data-alt="{{ print .caption }}" data-fancybox="gallery" href="{{ $basename | relURL }}{{ .image }}"><img src="{{ $basename | relURL }}{{ .image }}" alt="{{ print .caption }}"/></a>
|
||||
<div class="grid-item__desc hide">{{ .caption }}</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -27,13 +27,13 @@
|
|||
{{ else }}
|
||||
|
||||
<main class="gallery main">
|
||||
<div class="grid single__contents">
|
||||
<div class="grid single__contents single__contents--gallery">
|
||||
<div class="grid-sizer"></div>
|
||||
{{ if .File.Dir }}
|
||||
{{ $basename := (replace .File.Dir "\\" "/") }}
|
||||
{{ range (readDir (print "./static/" $basename)) }}
|
||||
<div class="grid-item">
|
||||
<img src="{{ $basename | relURL }}{{ .Name }}" alt="{{ index (split .Name ".") 0 }}"/>
|
||||
<a data-alt="{{ index (split .Name ".") 0 }}" data-fancybox="gallery" href="{{ $basename | relURL }}{{ .Name }}"><img src="{{ $basename | relURL }}{{ .Name }}" alt="{{ index (split .Name ".") 0 }}"/></a>
|
||||
<div class="grid-item__desc hide">{{ index (split .Name ".") 0 }}</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
<div class="hide">
|
||||
{{ partial "sidebar/site-search" . }}
|
||||
</div>
|
||||
{{ partial "body/photoswipe" . }}
|
||||
{{ partial "body/fancybox" . }}
|
||||
|
||||
{{ $masonry := resources.Get `js/masonry.pkgd.min.js` | resources.Fingerprint }}
|
||||
<script defer src="{{ $masonry.RelPermalink }}"></script>
|
||||
|
|
@ -73,6 +73,10 @@
|
|||
$(this).children('.grid-item__desc').hide();
|
||||
});
|
||||
|
||||
$('.grid-item').click(function() {
|
||||
$(this).children('a').get(0).click();
|
||||
});
|
||||
|
||||
enquire.register("screen and (max-width:500px)", {
|
||||
match: function () {
|
||||
$('.grid-item').addClass('full');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
{{ if $.Param "enablePhotoSwipe" }}
|
||||
|
||||
{{ $fancyboxjs := resources.Get `js/jquery.fancybox.min.js` | resources.Fingerprint }}
|
||||
<script defer src="{{ $fancyboxjs.RelPermalink }}"></script>
|
||||
{{ $fancyboxcss := resources.Get "css/jquery.fancybox.min.css" | resources.Fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $fancyboxcss.RelPermalink }}">
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('[data-fancybox="gallery"]').fancybox({
|
||||
loop: true,
|
||||
keyboard: true,
|
||||
clickContent: true,
|
||||
buttons: [
|
||||
"zoom",
|
||||
"slideShow",
|
||||
"fullScreen",
|
||||
"download",
|
||||
"thumbs",
|
||||
"close",
|
||||
],
|
||||
caption: function (instance, item) {
|
||||
console.log($(this).data('alt'));
|
||||
return $(this).data('alt') || '111';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
$('code.language-msc:odd').each(function() {
|
||||
$(this).unwrap('pre');
|
||||
$(this).replaceWith(function () {
|
||||
return $("<div />").append($(this).contents()).addClass('diagram').css('padding', '30px 8px 8px');
|
||||
return $("<div />").append($(this).contents()).addClass('diagram').css('padding', '30px 8px 8px').css('margin-top', '40px');
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -218,7 +218,7 @@
|
|||
|
||||
WaveDrom.RenderWaveForm(index, source, "WaveDrom_Display_");
|
||||
|
||||
$(this).closest('td').css('padding', '40px 8px 8px');
|
||||
$(this).closest('td').css('padding', '40px 12px 12px 0');
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,136 +0,0 @@
|
|||
{{ if $.Param "enablePhotoSwipe" }}
|
||||
|
||||
<!-- Root element of PhotoSwipe. Must have class pswp. -->
|
||||
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
|
||||
<!-- Background of PhotoSwipe.
|
||||
It's a separate element as animating opacity is faster than rgba(). -->
|
||||
<div class="pswp__bg"></div>
|
||||
|
||||
<!-- Slides wrapper with overflow:hidden. -->
|
||||
<div class="pswp__scroll-wrap">
|
||||
|
||||
<!-- Container that holds slides.
|
||||
PhotoSwipe keeps only 3 of them in the DOM to save memory.
|
||||
Don't modify these 3 pswp__item elements, data is added later on. -->
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
|
||||
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
|
||||
<div class="pswp__top-bar">
|
||||
|
||||
<!-- Controls are self-explanatory. Order can be changed. -->
|
||||
|
||||
<div class="pswp__counter"></div>
|
||||
|
||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--share" title="Share"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
||||
|
||||
<!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
|
||||
<!-- element will get class pswp__preloader--active when preloader is running -->
|
||||
<div class="pswp__preloader">
|
||||
<div class="pswp__preloader__icn">
|
||||
<div class="pswp__preloader__cut">
|
||||
<div class="pswp__preloader__donut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||
<div class="pswp__share-tooltip"></div>
|
||||
</div>
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
|
||||
</button>
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
|
||||
</button>
|
||||
|
||||
<div class="pswp__caption">
|
||||
<div class="pswp__caption__center"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{ $photoSwipe := resources.Get `js/photoswipe.min.js` | resources.Fingerprint }}
|
||||
<script defer src="{{ $photoSwipe.RelPermalink }}"></script>
|
||||
{{ $photoSwipeUi := resources.Get `js/photoswipe-ui-default.min.js` | resources.Fingerprint }}
|
||||
<script defer src="{{ $photoSwipeUi.RelPermalink }}"></script>
|
||||
|
||||
{{ $photoSwipeStyle := resources.Get "css/photoswipe/photoswipe.css" | minify }}
|
||||
<link rel="stylesheet" href="{{ $photoSwipeStyle.RelPermalink }}">
|
||||
{{ $photoSwipeSkin := resources.Get "css/photoswipe/custom-skin.css" | minify }}
|
||||
<link rel="stylesheet" href="{{ $photoSwipeSkin.RelPermalink }}">
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
var pswpElement = $('.pswp')[0];
|
||||
var imgElements = $('.single__contents').find('img');
|
||||
var items = [];
|
||||
|
||||
{{ $mode:= .Params.Mode }}
|
||||
var mode = JSON.parse({{ $mode | jsonify }});
|
||||
|
||||
imgElements.each(function (i, v) {
|
||||
$(this).siblings().click(function (e) {
|
||||
initGallery(i);
|
||||
});
|
||||
$(this).css('cursor', 'pointer');
|
||||
|
||||
var caption = null;
|
||||
if (mode && mode.toLowerCase().includes('one')) {
|
||||
caption = $(this).attr('alt');
|
||||
} else {
|
||||
caption = filename(v['src']);
|
||||
}
|
||||
|
||||
items.push({
|
||||
src: v['src'],
|
||||
w: 0,
|
||||
h: 0,
|
||||
title: caption,
|
||||
});
|
||||
});
|
||||
|
||||
function filename(str) {
|
||||
var s = str.replace(/\\/g, '/');
|
||||
s = s.substring(s.lastIndexOf('/') + 1);
|
||||
return str ? s.replace(/[?#].+$/, '') : s.split('.')[0];
|
||||
}
|
||||
|
||||
function initGallery(index) {
|
||||
var options = { index: index };
|
||||
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
|
||||
gallery.listen('imageLoadComplete', function (index, item) {
|
||||
if (item.h < 1 || item.w < 1) {
|
||||
let img = new Image();
|
||||
img.onload = () => {
|
||||
item.w = img.width;
|
||||
item.h = img.height;
|
||||
gallery.invalidateCurrItems();
|
||||
gallery.updateSize(true);
|
||||
}
|
||||
img.src = item.src;
|
||||
}
|
||||
})
|
||||
gallery.init();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
</div>
|
||||
{{ range .Site.Menus.main -}}
|
||||
{{ if .HasChildren }}
|
||||
<div class="navbar__dropdown">
|
||||
<div class="navbar__dropdown navbar__slide-down">
|
||||
<a href="{{ .URL | relLangURL }}" class="navbar__menu-item">
|
||||
{{ safeHTML .Name }}
|
||||
<span class="navbar__menu-icon">
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<a href="{{ .URL | relLangURL }}" class="navbar__menu-item">{{ safeHTML .Name }}</a>
|
||||
<a href="{{ .URL | relLangURL }}" class="navbar__menu-item navbar__slide-down">{{ safeHTML .Name }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 547 B |
|
|
@ -1 +0,0 @@
|
|||
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 866 B |
Loading…
Reference in New Issue