Pagination, responsive video, and lightbox
This commit is contained in:
Sodbileg Gansukh
parent
1d4860cd87
commit
06d844910a
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
File diff suppressed because one or more lines are too long
@ -43,6 +43,7 @@ production stylesheet in assets/built/screen.css
|
|||||||
21.1. Footer styles
|
21.1. Footer styles
|
||||||
21.2. Footer bar
|
21.2. Footer bar
|
||||||
21.3. Footer signup
|
21.3. Footer signup
|
||||||
|
22. Lightbox
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@ -934,14 +935,14 @@ Search LOGO Login Subscribe
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-title {
|
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-title {
|
||||||
font-size: clamp(2rem, 2.73vw + 0.91rem, 4.4rem);
|
font-size: clamp(3.2rem, 1.82vw + 2.47rem, 4.8rem);
|
||||||
font-weight: 750;
|
font-weight: 750;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: -0.022em;
|
letter-spacing: -0.022em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt {
|
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt {
|
||||||
margin-top: 16px;
|
margin-top: clamp(12px, 0.45vw + 10.18px, 16px);
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1065,14 +1066,14 @@ Search LOGO Login Subscribe
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-title {
|
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-title {
|
||||||
font-size: clamp(2.4rem, 2.73vw + 1.31rem, 4.8rem);
|
font-size: clamp(3.2rem, 1.82vw + 2.47rem, 4.8rem);
|
||||||
font-weight: 750;
|
font-weight: 750;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: -0.022em;
|
letter-spacing: -0.022em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-excerpt {
|
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-excerpt {
|
||||||
margin-top: 16px;
|
margin-top: clamp(12px, 0.45vw + 10.18px, 16px);
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1192,6 +1193,10 @@ Search LOGO Login Subscribe
|
|||||||
.gh-header.is-highlight .gh-card-image {
|
.gh-header.is-highlight .gh-card-image {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gh-header.is-highlight .gh-header-middle .gh-card .gh-card-excerpt {
|
||||||
|
display: -webkit-box;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 8.3. Classic layout */
|
/* 8.3. Classic layout */
|
||||||
@ -1591,6 +1596,16 @@ Search LOGO Login Subscribe
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.gh-container.is-list .gh-card-link {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-container.is-list .gh-card-image {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* 12.2. Grid style */
|
/* 12.2. Grid style */
|
||||||
|
|
||||||
.gh-container.is-grid .gh-feed {
|
.gh-container.is-grid .gh-feed {
|
||||||
@ -1688,7 +1703,7 @@ Search LOGO Login Subscribe
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gh-article-header {
|
.gh-article-header {
|
||||||
margin: 72px 0 40px;
|
margin: clamp(40px, 3.64vw + 25.45px, 72px) 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-article-tag {
|
.gh-article-tag {
|
||||||
@ -1701,15 +1716,15 @@ Search LOGO Login Subscribe
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gh-article-title {
|
.gh-article-title {
|
||||||
font-size: calc(clamp(3.2rem, 1.59vw + 2.56rem, 4.6rem) * var(--factor, 1));
|
font-size: calc(clamp(3.4rem, 1.36vw + 2.85rem, 4.6rem) * var(--factor, 1));
|
||||||
line-height: 1.05;
|
line-height: 1.05;
|
||||||
letter-spacing: -0.022em;
|
letter-spacing: -0.022em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-article-excerpt {
|
.gh-article-excerpt {
|
||||||
margin-top: 16px;
|
margin-top: clamp(12px, 0.45vw + 10.18px, 16px);
|
||||||
max-width: 720px;
|
max-width: 720px;
|
||||||
font-size: 2.2rem;
|
font-size: clamp(2rem, 0.23vw + 1.91rem, 2.2rem);
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
letter-spacing: -0.018em;
|
letter-spacing: -0.018em;
|
||||||
}
|
}
|
||||||
@ -1814,34 +1829,34 @@ headings, text, images and lists. We deal with cards lower down. */
|
|||||||
|
|
||||||
.gh-content {
|
.gh-content {
|
||||||
font-size: calc(var(--content-font-size, 1.8rem) * var(--font-multiplier, 1));
|
font-size: calc(var(--content-font-size, 1.8rem) * var(--font-multiplier, 1));
|
||||||
letter-spacing: var(--content-letter-spacing, 0);
|
letter-spacing: -0.014em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Default vertical spacing */
|
/* Default vertical spacing */
|
||||||
.gh-content > * + * {
|
.gh-content > * + * {
|
||||||
margin-top: calc(28px * var(--content-spacing-multiplier, 1));
|
margin-top: calc(28px * var(--content-spacing-factor, 1));
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Add back a top margin to all headings,
|
/* Add back a top margin to all headings,
|
||||||
unless a heading is the very first element in the post content */
|
unless a heading is the very first element in the post content */
|
||||||
.gh-content > [id]:not(:first-child) {
|
.gh-content > [id]:not(:first-child) {
|
||||||
margin-top: calc(48px * var(--content-spacing-multiplier, 1));
|
margin-top: calc(48px * var(--content-spacing-factor, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Add a small margin between a heading and anything after it */
|
/* Add a small margin between a heading and anything after it */
|
||||||
.gh-content > [id] + * {
|
.gh-content > [id] + * {
|
||||||
margin-top: calc(16px * var(--content-spacing-multiplier, 1));
|
margin-top: calc(16px * var(--content-spacing-factor, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* A larger margin before/after dividers, blockquotes and embeds */
|
/* A larger margin before/after dividers, blockquotes and embeds */
|
||||||
.gh-content > :is(hr, blockquote, iframe) {
|
.gh-content > :is(hr, blockquote, iframe) {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: calc(48px * var(--content-spacing-multiplier, 1)) !important;
|
margin-top: calc(48px * var(--content-spacing-factor, 1)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-content > :is(hr, blockquote, iframe) + * {
|
.gh-content > :is(hr, blockquote, iframe) + * {
|
||||||
margin-top: calc(48px * var(--content-spacing-multiplier, 1)) !important;
|
margin-top: calc(48px * var(--content-spacing-factor, 1)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Now the content typography styles */
|
/* Now the content typography styles */
|
||||||
@ -1953,19 +1968,19 @@ unless a heading is the very first element in the post content */
|
|||||||
/* Add extra margin before/after any cards, except for when immediately preceeded by a heading */
|
/* Add extra margin before/after any cards, except for when immediately preceeded by a heading */
|
||||||
|
|
||||||
.gh-content :not(.kg-card):not(table):not([id]) + :is(.kg-card, table) {
|
.gh-content :not(.kg-card):not(table):not([id]) + :is(.kg-card, table) {
|
||||||
margin-top: calc(48px * var(--content-spacing-multiplier, 1));
|
margin-top: calc(48px * var(--content-spacing-factor, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-content :is(.kg-card, table) + :not(.kg-card):not(table):not([id]) {
|
.gh-content :is(.kg-card, table) + :not(.kg-card):not(table):not([id]) {
|
||||||
margin-top: calc(48px * var(--content-spacing-multiplier, 1));
|
margin-top: calc(48px * var(--content-spacing-factor, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-content :not(.kg-card):not([id]) + .kg-card.kg-width-full {
|
.gh-content :not(.kg-card):not([id]) + .kg-card.kg-width-full {
|
||||||
margin-top: calc(68px * var(--content-spacing-multiplier, 1));
|
margin-top: calc(68px * var(--content-spacing-factor, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-content .kg-card.kg-width-full + :not(.kg-card):not([id]) {
|
.gh-content .kg-card.kg-width-full + :not(.kg-card):not([id]) {
|
||||||
margin-top: calc(68px * var(--content-spacing-multiplier, 1));
|
margin-top: calc(68px * var(--content-spacing-factor, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Image */
|
/* Image */
|
||||||
@ -2177,25 +2192,17 @@ figcaption a {
|
|||||||
.gh-archive {
|
.gh-archive {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
align-items: center;
|
|
||||||
gap: var(--grid-gap);
|
gap: var(--grid-gap);
|
||||||
margin-block: 80px 24px;
|
margin-block: 80px 24px;
|
||||||
padding-bottom: 48px;
|
padding-bottom: clamp(40px, 2.73vw + 29.09px, 64px);
|
||||||
border-bottom: 1px solid var(--color-border);
|
border-bottom: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-archive.has-image {
|
.gh-archive.has-image {
|
||||||
|
align-items: center;
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-archive.has-image .gh-article-title {
|
|
||||||
font-size: 5.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gh-archive .gh-article-excerpt {
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gh-archive .gh-article-image {
|
.gh-archive .gh-article-image {
|
||||||
grid-column: auto;
|
grid-column: auto;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
@ -2214,8 +2221,8 @@ figcaption a {
|
|||||||
|
|
||||||
.author-template .gh-article-image {
|
.author-template .gh-article-image {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
width: 160px;
|
width: 120px;
|
||||||
height: 160px;
|
height: 120px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2251,12 +2258,12 @@ figcaption a {
|
|||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.gh-archive {
|
.gh-archive {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column-reverse;
|
||||||
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-template .gh-archive {
|
.author-template .gh-archive {
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
align-items: flex-start;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2440,22 +2447,22 @@ figcaption a {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-bottom: 120px;
|
padding-bottom: 160px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-footer-signup-header {
|
.gh-footer-signup-header {
|
||||||
font-size: calc(clamp(3.2rem, 2.5vw + 2.2rem, 5.4rem) * var(--factor, 1));
|
font-size: calc(clamp(3.2rem, 1.82vw + 2.47rem, 4.8rem) * var(--factor, 1));
|
||||||
font-weight: 750;
|
font-weight: 750;
|
||||||
letter-spacing: -0.03em;
|
letter-spacing: -0.03em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-footer-signup-subhead {
|
.gh-footer-signup-subhead {
|
||||||
margin-top: 8px;
|
margin-top: 12px;
|
||||||
max-width: 720px;
|
max-width: 640px;
|
||||||
font-size: clamp(1.6rem, 0.68vw + 1.33rem, 2.2rem);
|
font-size: clamp(1.6rem, 0.68vw + 1.33rem, 2.2rem);
|
||||||
font-weight: 450;
|
font-weight: 450;
|
||||||
line-height: 1.5;
|
line-height: 1.4;
|
||||||
letter-spacing: -0.018em;
|
letter-spacing: -0.018em;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
@ -2478,4 +2485,500 @@ figcaption a {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 22. Lightbox
|
||||||
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
|
.pswp {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 3999999;
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
-ms-touch-action: none;
|
||||||
|
touch-action: none;
|
||||||
|
outline: none;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp img {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--animate_opacity {
|
||||||
|
opacity: 0.001;
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
will-change: opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--zoom-allowed .pswp__img {
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--zoomed-in .pswp__img {
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--dragging .pswp__img {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.85);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
transform: translateZ(0);
|
||||||
|
backface-visibility: hidden;
|
||||||
|
will-change: opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__scroll-wrap {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__container,
|
||||||
|
.pswp__zoom-wrap {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
touch-action: none;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__container,
|
||||||
|
.pswp__img {
|
||||||
|
user-select: none;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__zoom-wrap {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
transform-origin: left top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--animated-in .pswp__bg,
|
||||||
|
.pswp--animated-in .pswp__zoom-wrap {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__item {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__img--placeholder {
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__img--placeholder--blank {
|
||||||
|
background: var(--color-black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--ie .pswp__img {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__error-msg {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: -8px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 16px;
|
||||||
|
color: var(--color-secondary-text);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__error-msg a {
|
||||||
|
color: var(--color-secondary-text);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
float: right;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
appearance: none;
|
||||||
|
cursor: pointer;
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 .pswp__button--close {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button,
|
||||||
|
.pswp__button--arrow--left::before,
|
||||||
|
.pswp__button--arrow--right::before {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
background: url("../images/default-skin.png") 0 0 no-repeat;
|
||||||
|
background-size: 264px 88px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
|
||||||
|
.pswp--svg .pswp__button,
|
||||||
|
.pswp--svg .pswp__button--arrow--left::before,
|
||||||
|
.pswp--svg .pswp__button--arrow--right::before {
|
||||||
|
background-image: url("../images/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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--touch .pswp__button--arrow--left,
|
||||||
|
.pswp--touch .pswp__button--arrow--right {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--arrow--left,
|
||||||
|
.pswp__button--arrow--right {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 70px;
|
||||||
|
height: 100px;
|
||||||
|
margin-top: -50px;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--arrow--left {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--arrow--right {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--arrow--left::before,
|
||||||
|
.pswp__button--arrow--right::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 35px;
|
||||||
|
width: 32px;
|
||||||
|
height: 30px;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--arrow--left::before {
|
||||||
|
left: 6px;
|
||||||
|
background-position: -138px -44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--arrow--right::before {
|
||||||
|
right: 6px;
|
||||||
|
background-position: -94px -44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__counter {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 44px;
|
||||||
|
padding: 0 15px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 44px;
|
||||||
|
color: var(--color-white);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption__center {
|
||||||
|
max-width: 420px;
|
||||||
|
padding: 25px 15px 30px;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--color-white);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption__center .post-caption-title {
|
||||||
|
margin-bottom: 7px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption__center .post-caption-meta-item + .post-caption-meta-item::before {
|
||||||
|
padding: 0 4px;
|
||||||
|
content: "\02022";
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption--empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption--fake {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__preloader {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
margin-left: -22px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.25s ease-out;
|
||||||
|
direction: ltr;
|
||||||
|
will-change: opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__preloader__icn {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__preloader--active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__preloader--active .pswp__preloader__icn {
|
||||||
|
background: url("../images/preloader.gif") 0 0 no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader--active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
|
||||||
|
animation: clockwise 500ms linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
|
||||||
|
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader__icn {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: 15px;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
margin: 0;
|
||||||
|
background: none;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader__cut {
|
||||||
|
position: relative;
|
||||||
|
width: 7px;
|
||||||
|
height: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader__donut {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
margin: 0;
|
||||||
|
background: none;
|
||||||
|
border: 2px solid var(--color-white);
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.pswp__preloader {
|
||||||
|
position: relative;
|
||||||
|
top: auto;
|
||||||
|
left: auto;
|
||||||
|
float: right;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes clockwise {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes donut-rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: rotate(-140deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__ui {
|
||||||
|
z-index: 1550;
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-font-smoothing: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__top-bar {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption,
|
||||||
|
.pswp__top-bar,
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--left,
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--right {
|
||||||
|
backface-visibility: hidden;
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
will-change: opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--left,
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--right {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 .pswp__top-bar,
|
||||||
|
.pswp__ui--hidden .pswp__caption,
|
||||||
|
.pswp__ui--hidden .pswp__button--arrow--left,
|
||||||
|
.pswp__ui--hidden .pswp__button--arrow--right {
|
||||||
|
opacity: 0.001;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|||||||
BIN
assets/images/default-skin.png
Executable file
BIN
assets/images/default-skin.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
1
assets/images/default-skin.svg
Executable file
1
assets/images/default-skin.svg
Executable file
@ -0,0 +1 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
BIN
assets/images/preloader.gif
Executable file
BIN
assets/images/preloader.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
@ -1,91 +1,3 @@
|
|||||||
/* Dropdown menu */
|
|
||||||
(function () {
|
|
||||||
const mediaQuery = window.matchMedia('(max-width: 767px)');
|
|
||||||
|
|
||||||
const head = document.querySelector('.gh-navigation');
|
|
||||||
const menu = head.querySelector('.gh-navigation-menu');
|
|
||||||
const nav = menu?.querySelector('.nav');
|
|
||||||
if (!nav) return;
|
|
||||||
|
|
||||||
const logo = document.querySelector('.gh-navigation-logo');
|
|
||||||
const navHTML = nav.innerHTML;
|
|
||||||
|
|
||||||
if (mediaQuery.matches) {
|
|
||||||
const items = nav.querySelectorAll('li');
|
|
||||||
items.forEach(function (item, index) {
|
|
||||||
item.style.transitionDelay = `${0.03 * (index + 1)}s`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const makeDropdown = function () {
|
|
||||||
if (mediaQuery.matches) return;
|
|
||||||
const submenuItems = [];
|
|
||||||
|
|
||||||
while ((nav.offsetWidth + 64) > menu.offsetWidth) {
|
|
||||||
if (nav.lastElementChild) {
|
|
||||||
submenuItems.unshift(nav.lastElementChild);
|
|
||||||
nav.lastElementChild.remove();
|
|
||||||
} else {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!submenuItems.length) {
|
|
||||||
head.classList.add('is-dropdown-loaded');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const toggle = document.createElement('button');
|
|
||||||
toggle.setAttribute('class', 'gh-more-toggle gh-icon-button');
|
|
||||||
toggle.setAttribute('aria-label', 'More');
|
|
||||||
toggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M21.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM13.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM5.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0z"></path></svg>';
|
|
||||||
|
|
||||||
const wrapper = document.createElement('div');
|
|
||||||
wrapper.setAttribute('class', 'gh-dropdown');
|
|
||||||
|
|
||||||
if (submenuItems.length >= 10) {
|
|
||||||
head.classList.add('is-dropdown-mega');
|
|
||||||
wrapper.style.gridTemplateRows = `repeat(${Math.ceil(submenuItems.length / 2)}, 1fr)`;
|
|
||||||
} else {
|
|
||||||
head.classList.remove('is-dropdown-mega');
|
|
||||||
}
|
|
||||||
|
|
||||||
submenuItems.forEach(function (child) {
|
|
||||||
wrapper.appendChild(child);
|
|
||||||
});
|
|
||||||
|
|
||||||
toggle.appendChild(wrapper);
|
|
||||||
nav.appendChild(toggle);
|
|
||||||
|
|
||||||
head.classList.add('is-dropdown-loaded');
|
|
||||||
|
|
||||||
window.addEventListener('click', function (e) {
|
|
||||||
if (head.classList.contains('is-dropdown-open')) {
|
|
||||||
head.classList.remove('is-dropdown-open');
|
|
||||||
} else if (toggle.contains(e.target)) {
|
|
||||||
head.classList.add('is-dropdown-open');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
imagesLoaded(logo, function () {
|
|
||||||
makeDropdown();
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('load', function () {
|
|
||||||
if (!logo) {
|
|
||||||
makeDropdown();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('resize', function () {
|
|
||||||
setTimeout(() => {
|
|
||||||
nav.innerHTML = navHTML;
|
|
||||||
makeDropdown();
|
|
||||||
}, 1);
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
|
|
||||||
/* Mobile menu burger toggle */
|
/* Mobile menu burger toggle */
|
||||||
(function () {
|
(function () {
|
||||||
const navigation = document.querySelector('.gh-navigation');
|
const navigation = document.querySelector('.gh-navigation');
|
||||||
@ -99,4 +11,36 @@
|
|||||||
navigation.classList.remove('is-open');
|
navigation.classList.remove('is-open');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
})();
|
||||||
|
|
||||||
|
/* Add lightbox to gallery images */
|
||||||
|
(function () {
|
||||||
|
lightbox(
|
||||||
|
'.kg-image-card > .kg-image[width][height], .kg-gallery-image > img'
|
||||||
|
);
|
||||||
|
})();
|
||||||
|
|
||||||
|
/* Responsive video in post content */
|
||||||
|
(function () {
|
||||||
|
const sources = [
|
||||||
|
'.gh-content iframe[src*="youtube.com"]',
|
||||||
|
'.gh-content iframe[src*="youtube-nocookie.com"]',
|
||||||
|
'.gh-content iframe[src*="player.vimeo.com"]',
|
||||||
|
'.gh-content iframe[src*="kickstarter.com"][src*="video.html"]',
|
||||||
|
'.gh-content object',
|
||||||
|
'.gh-content embed',
|
||||||
|
];
|
||||||
|
reframe(document.querySelectorAll(sources.join(',')));
|
||||||
|
})();
|
||||||
|
|
||||||
|
/* Turn the main nav into dropdown menu when there are more than 5 menu items */
|
||||||
|
(function () {
|
||||||
|
dropdown();
|
||||||
|
})();
|
||||||
|
|
||||||
|
/* Infinite scroll pagination */
|
||||||
|
(function () {
|
||||||
|
if (document.body.classList.contains('paged')) {
|
||||||
|
pagination();
|
||||||
|
}
|
||||||
})();
|
})();
|
||||||
86
assets/js/dropdown.js
Normal file
86
assets/js/dropdown.js
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
function dropdown() {
|
||||||
|
const mediaQuery = window.matchMedia('(max-width: 767px)');
|
||||||
|
|
||||||
|
const head = document.querySelector('.gh-navigation');
|
||||||
|
const menu = head.querySelector('.gh-navigation-menu');
|
||||||
|
const nav = menu?.querySelector('.nav');
|
||||||
|
if (!nav) return;
|
||||||
|
|
||||||
|
const logo = document.querySelector('.gh-navigation-logo');
|
||||||
|
const navHTML = nav.innerHTML;
|
||||||
|
|
||||||
|
if (mediaQuery.matches) {
|
||||||
|
const items = nav.querySelectorAll('li');
|
||||||
|
items.forEach(function (item, index) {
|
||||||
|
item.style.transitionDelay = `${0.03 * (index + 1)}s`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const makeDropdown = function () {
|
||||||
|
if (mediaQuery.matches) return;
|
||||||
|
const submenuItems = [];
|
||||||
|
|
||||||
|
while ((nav.offsetWidth + 64) > menu.offsetWidth) {
|
||||||
|
if (nav.lastElementChild) {
|
||||||
|
submenuItems.unshift(nav.lastElementChild);
|
||||||
|
nav.lastElementChild.remove();
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!submenuItems.length) {
|
||||||
|
head.classList.add('is-dropdown-loaded');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggle = document.createElement('button');
|
||||||
|
toggle.setAttribute('class', 'gh-more-toggle gh-icon-button');
|
||||||
|
toggle.setAttribute('aria-label', 'More');
|
||||||
|
toggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M21.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM13.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM5.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0z"></path></svg>';
|
||||||
|
|
||||||
|
const wrapper = document.createElement('div');
|
||||||
|
wrapper.setAttribute('class', 'gh-dropdown');
|
||||||
|
|
||||||
|
if (submenuItems.length >= 10) {
|
||||||
|
head.classList.add('is-dropdown-mega');
|
||||||
|
wrapper.style.gridTemplateRows = `repeat(${Math.ceil(submenuItems.length / 2)}, 1fr)`;
|
||||||
|
} else {
|
||||||
|
head.classList.remove('is-dropdown-mega');
|
||||||
|
}
|
||||||
|
|
||||||
|
submenuItems.forEach(function (child) {
|
||||||
|
wrapper.appendChild(child);
|
||||||
|
});
|
||||||
|
|
||||||
|
toggle.appendChild(wrapper);
|
||||||
|
nav.appendChild(toggle);
|
||||||
|
|
||||||
|
head.classList.add('is-dropdown-loaded');
|
||||||
|
|
||||||
|
window.addEventListener('click', function (e) {
|
||||||
|
if (head.classList.contains('is-dropdown-open')) {
|
||||||
|
head.classList.remove('is-dropdown-open');
|
||||||
|
} else if (toggle.contains(e.target)) {
|
||||||
|
head.classList.add('is-dropdown-open');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
imagesLoaded(logo, function () {
|
||||||
|
makeDropdown();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('load', function () {
|
||||||
|
if (!logo) {
|
||||||
|
makeDropdown();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
setTimeout(() => {
|
||||||
|
nav.innerHTML = navHTML;
|
||||||
|
makeDropdown();
|
||||||
|
}, 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
4
assets/js/lib/photoswipe-ui-default.min.js
vendored
Executable file
4
assets/js/lib/photoswipe-ui-default.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
4
assets/js/lib/photoswipe.min.js
vendored
Executable file
4
assets/js/lib/photoswipe.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
1
assets/js/lib/reframe.min.js
vendored
Normal file
1
assets/js/lib/reframe.min.js
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).reframe=t()}(this,function(){"use strict";function t(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;for(var i=Array(e),o=0,t=0;t<n;t++)for(var r=arguments[t],f=0,d=r.length;f<d;f++,o++)i[o]=r[f];return i}return function(e,s){return void 0===s&&(s="js-reframe"),("string"==typeof e?t(document.querySelectorAll(e)):"length"in e?t(e):[e]).forEach(function(e){var t,n,i,o,r,f,d,l;-1!==e.className.split(" ").indexOf(s)||-1<e.style.width.indexOf("%")||(i=e.getAttribute("height")||e.offsetHeight,o=e.getAttribute("width")||e.offsetWidth,r=("string"==typeof i?parseInt(i):i)/("string"==typeof o?parseInt(o):o)*100,(f=document.createElement("div")).className=s,(d=f.style).position="relative",d.width="100%",d.paddingTop=r+"%",(l=e.style).position="absolute",l.width="100%",l.height="100%",l.left="0",l.top="0",null!==(t=e.parentNode)&&void 0!==t&&t.insertBefore(f,e),null!==(n=e.parentNode)&&void 0!==n&&n.removeChild(e),f.appendChild(e))})}});
|
||||||
103
assets/js/lightbox.js
Normal file
103
assets/js/lightbox.js
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
function lightbox(trigger) {
|
||||||
|
var onThumbnailsClick = function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
var items = [];
|
||||||
|
var index = 0;
|
||||||
|
|
||||||
|
var prevSibling = e.target.closest('.kg-card').previousElementSibling;
|
||||||
|
|
||||||
|
while (prevSibling && (prevSibling.classList.contains('kg-image-card') || prevSibling.classList.contains('kg-gallery-card'))) {
|
||||||
|
var prevItems = [];
|
||||||
|
|
||||||
|
prevSibling.querySelectorAll('img').forEach(function (item) {
|
||||||
|
prevItems.push({
|
||||||
|
src: item.getAttribute('src'),
|
||||||
|
msrc: item.getAttribute('src'),
|
||||||
|
w: item.getAttribute('width'),
|
||||||
|
h: item.getAttribute('height'),
|
||||||
|
el: item,
|
||||||
|
})
|
||||||
|
|
||||||
|
index += 1;
|
||||||
|
});
|
||||||
|
prevSibling = prevSibling.previousElementSibling;
|
||||||
|
|
||||||
|
items = prevItems.concat(items);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.target.classList.contains('kg-image')) {
|
||||||
|
items.push({
|
||||||
|
src: e.target.getAttribute('src'),
|
||||||
|
msrc: e.target.getAttribute('src'),
|
||||||
|
w: e.target.getAttribute('width'),
|
||||||
|
h: e.target.getAttribute('height'),
|
||||||
|
el: e.target,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
var reachedCurrentItem = false;
|
||||||
|
|
||||||
|
e.target.closest('.kg-gallery-card').querySelectorAll('img').forEach(function (item) {
|
||||||
|
items.push({
|
||||||
|
src: item.getAttribute('src'),
|
||||||
|
msrc: item.getAttribute('src'),
|
||||||
|
w: item.getAttribute('width'),
|
||||||
|
h: item.getAttribute('height'),
|
||||||
|
el: item,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!reachedCurrentItem && item !== e.target) {
|
||||||
|
index += 1;
|
||||||
|
} else {
|
||||||
|
reachedCurrentItem = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var nextSibling = e.target.closest('.kg-card').nextElementSibling;
|
||||||
|
|
||||||
|
while (nextSibling && (nextSibling.classList.contains('kg-image-card') || nextSibling.classList.contains('kg-gallery-card'))) {
|
||||||
|
nextSibling.querySelectorAll('img').forEach(function (item) {
|
||||||
|
items.push({
|
||||||
|
src: item.getAttribute('src'),
|
||||||
|
msrc: item.getAttribute('src'),
|
||||||
|
w: item.getAttribute('width'),
|
||||||
|
h: item.getAttribute('height'),
|
||||||
|
el: item,
|
||||||
|
})
|
||||||
|
});
|
||||||
|
nextSibling = nextSibling.nextElementSibling;
|
||||||
|
}
|
||||||
|
|
||||||
|
var pswpElement = document.querySelectorAll('.pswp')[0];
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
bgOpacity: 0.9,
|
||||||
|
closeOnScroll: true,
|
||||||
|
fullscreenEl: false,
|
||||||
|
history: false,
|
||||||
|
index: index,
|
||||||
|
shareEl: false,
|
||||||
|
zoomEl: false,
|
||||||
|
getThumbBoundsFn: function(index) {
|
||||||
|
var thumbnail = items[index].el,
|
||||||
|
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
|
||||||
|
rect = thumbnail.getBoundingClientRect();
|
||||||
|
|
||||||
|
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
|
||||||
|
gallery.init();
|
||||||
|
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
var triggers = document.querySelectorAll(trigger);
|
||||||
|
triggers.forEach(function (trig) {
|
||||||
|
trig.addEventListener('click', function (e) {
|
||||||
|
onThumbnailsClick(e);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
95
assets/js/pagination.js
Normal file
95
assets/js/pagination.js
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
function pagination(isInfinite = true, done, isMasonry = false) {
|
||||||
|
const feedElement = document.querySelector('.gh-feed');
|
||||||
|
if (!feedElement) return;
|
||||||
|
|
||||||
|
let loading = false;
|
||||||
|
const target = feedElement.nextElementSibling || document.querySelector('.gh-footer');
|
||||||
|
const buttonElement = document.querySelector('.gh-loadmore');
|
||||||
|
|
||||||
|
if (!document.querySelector('link[rel=next]') && buttonElement) {
|
||||||
|
buttonElement.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadNextPage = async function () {
|
||||||
|
const nextElement = document.querySelector('link[rel=next]');
|
||||||
|
if (!nextElement) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(nextElement.href);
|
||||||
|
const html = await res.text();
|
||||||
|
const parser = new DOMParser();
|
||||||
|
const doc = parser.parseFromString(html, 'text/html');
|
||||||
|
|
||||||
|
const postElements = doc.querySelectorAll('.gh-feed:not(.gh-featured):not(.gh-related) > *');
|
||||||
|
const fragment = document.createDocumentFragment();
|
||||||
|
const elems = [];
|
||||||
|
|
||||||
|
postElements.forEach(function (post) {
|
||||||
|
var clonedItem = document.importNode(post, true);
|
||||||
|
|
||||||
|
if (isMasonry) {
|
||||||
|
clonedItem.style.visibility = 'hidden';
|
||||||
|
}
|
||||||
|
|
||||||
|
fragment.appendChild(clonedItem);
|
||||||
|
elems.push(clonedItem);
|
||||||
|
});
|
||||||
|
|
||||||
|
feedElement.appendChild(fragment);
|
||||||
|
|
||||||
|
if (done) {
|
||||||
|
done(elems, loadNextWithCheck);
|
||||||
|
}
|
||||||
|
|
||||||
|
const resNextElement = doc.querySelector('link[rel=next]');
|
||||||
|
if (resNextElement && resNextElement.href) {
|
||||||
|
nextElement.href = resNextElement.href;
|
||||||
|
} else {
|
||||||
|
nextElement.remove();
|
||||||
|
if (buttonElement) {
|
||||||
|
buttonElement.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
nextElement.remove();
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadNextWithCheck = async function () {
|
||||||
|
if (target.getBoundingClientRect().top <= window.innerHeight && document.querySelector('link[rel=next]')) {
|
||||||
|
await loadNextPage();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const callback = async function (entries) {
|
||||||
|
if (loading) return;
|
||||||
|
|
||||||
|
loading = true;
|
||||||
|
|
||||||
|
if (entries[0].isIntersecting) {
|
||||||
|
// keep loading next page until target is out of the viewport or we've loaded the last page
|
||||||
|
if (!isMasonry) {
|
||||||
|
while (target.getBoundingClientRect().top <= window.innerHeight && document.querySelector('link[rel=next]')) {
|
||||||
|
await loadNextPage();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
await loadNextPage();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loading = false;
|
||||||
|
|
||||||
|
if (!document.querySelector('link[rel=next]')) {
|
||||||
|
observer.disconnect();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(callback);
|
||||||
|
|
||||||
|
if (isInfinite) {
|
||||||
|
observer.observe(target);
|
||||||
|
} else {
|
||||||
|
buttonElement.addEventListener('click', loadNextPage);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -53,6 +53,10 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{#is "post, page"}}
|
||||||
|
{{> "lightbox"}}
|
||||||
|
{{/is}}
|
||||||
|
|
||||||
{{!-- Scripts - handle responsive videos, infinite scroll, and navigation dropdowns --}}
|
{{!-- Scripts - handle responsive videos, infinite scroll, and navigation dropdowns --}}
|
||||||
<script src="{{asset "built/casper.js"}}"></script>
|
<script src="{{asset "built/casper.js"}}"></script>
|
||||||
|
|
||||||
|
|||||||
@ -61,7 +61,7 @@
|
|||||||
"defaults"
|
"defaults"
|
||||||
],
|
],
|
||||||
"config": {
|
"config": {
|
||||||
"posts_per_page": 25,
|
"posts_per_page": 24,
|
||||||
"image_sizes": {
|
"image_sizes": {
|
||||||
"xxs": {
|
"xxs": {
|
||||||
"width": 30
|
"width": 30
|
||||||
|
|||||||
41
partials/lightbox.hbs
Normal file
41
partials/lightbox.hbs
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||||
|
<div class="pswp__bg"></div>
|
||||||
|
|
||||||
|
<div class="pswp__scroll-wrap">
|
||||||
|
<div class="pswp__container">
|
||||||
|
<div class="pswp__item"></div>
|
||||||
|
<div class="pswp__item"></div>
|
||||||
|
<div class="pswp__item"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pswp__ui pswp__ui--hidden">
|
||||||
|
<div class="pswp__top-bar">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
Loading…
Reference in New Issue
Block a user