Pagination, responsive video, and lightbox

2023-08-15 09:59:19 +08:00
parent 1d4860cd87
commit 06d844910a
18 changed files with 917 additions and 131 deletions
@@ -43,6 +43,7 @@ production stylesheet in assets/built/screen.css
  21.1. Footer styles
  21.2. Footer bar
  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 {
-    font-size: clamp(2rem, 2.73vw + 0.91rem, 4.4rem);
+    font-size: clamp(3.2rem, 1.82vw + 2.47rem, 4.8rem);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.022em;
 }

 .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;
 }

@@ -1065,14 +1066,14 @@ Search                         LOGO                    Login Subscribe
 }

 .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;
    line-height: 1;
    letter-spacing: -0.022em;
 }

 .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;
 }

@@ -1192,6 +1193,10 @@ Search                         LOGO                    Login Subscribe
    .gh-header.is-highlight .gh-card-image {
        display: block !important;
    }
+
+    .gh-header.is-highlight .gh-header-middle .gh-card .gh-card-excerpt {
+        display: -webkit-box;
+    }
 }

 /* 8.3. Classic layout */
@@ -1591,6 +1596,16 @@ Search                         LOGO                    Login Subscribe
    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 */

 .gh-container.is-grid .gh-feed {
@@ -1688,7 +1703,7 @@ Search                         LOGO                    Login Subscribe
 }

 .gh-article-header {
-    margin: 72px 0 40px;
+    margin: clamp(40px, 3.64vw + 25.45px, 72px) 0 40px;
 }

 .gh-article-tag {
@@ -1701,15 +1716,15 @@ Search                         LOGO                    Login Subscribe
 }

 .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;
    letter-spacing: -0.022em;
 }

 .gh-article-excerpt {
-    margin-top: 16px;
+    margin-top: clamp(12px, 0.45vw + 10.18px, 16px);
    max-width: 720px;
-    font-size: 2.2rem;
+    font-size: clamp(2rem, 0.23vw + 1.91rem, 2.2rem);
    line-height: 1.35;
    letter-spacing: -0.018em;
 }
@@ -1814,34 +1829,34 @@ headings, text, images and lists. We deal with cards lower down. */

 .gh-content {
    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 */
 .gh-content > * + * {
-    margin-top: calc(28px * var(--content-spacing-multiplier, 1));
+    margin-top: calc(28px * var(--content-spacing-factor, 1));
    margin-bottom: 0;
 }

 /* Add back a top margin to all headings,
 unless a heading is the very first element in the post content */
 .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 */
 .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 */
 .gh-content > :is(hr, blockquote, iframe) {
    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) + * {
-    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 */
@@ -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 */

 .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]) {
-    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 {
-    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]) {
-    margin-top: calc(68px * var(--content-spacing-multiplier, 1));
+    margin-top: calc(68px * var(--content-spacing-factor, 1));
 }

 /* Image */
@@ -2177,25 +2192,17 @@ figcaption a {
 .gh-archive {
    display: grid;
    grid-template-columns: 1fr 1fr;
-    align-items: center;
    gap: var(--grid-gap);
    margin-block: 80px 24px;
-    padding-bottom: 48px;
+    padding-bottom: clamp(40px, 2.73vw + 29.09px, 64px);
    border-bottom: 1px solid var(--color-border);
 }

 .gh-archive.has-image {
+    align-items: center;
    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 {
    grid-column: auto;
    margin-top: 0;
@@ -2214,8 +2221,8 @@ figcaption a {

 .author-template .gh-article-image {
    margin-top: 0;
-    width: 160px;
-    height: 160px;
+    width: 120px;
+    height: 120px;
    border-radius: 50%;
 }

@@ -2251,12 +2258,12 @@ figcaption a {
@media (max-width: 767px) {
    .gh-archive {
        display: flex;
-        flex-direction: column;
+        flex-direction: column-reverse;
+        align-items: flex-start;
    }

    .author-template .gh-archive {
        flex-direction: column-reverse;
-        align-items: flex-start;
    }
 }

@@ -2440,22 +2447,22 @@ figcaption a {
    display: flex;
    flex-direction: column;
    align-items: center;
-    padding-bottom: 120px;
+    padding-bottom: 160px;
    text-align: center;
 }

 .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;
    letter-spacing: -0.03em;
 }

 .gh-footer-signup-subhead {
-    margin-top: 8px;
-    max-width: 720px;
+    margin-top: 12px;
+    max-width: 640px;
    font-size: clamp(1.6rem, 0.68vw + 1.33rem, 2.2rem);
    font-weight: 450;
-    line-height: 1.5;
+    line-height: 1.4;
    letter-spacing: -0.018em;
    opacity: 0.6;
 }
@@ -2478,4 +2485,500 @@ figcaption a {
        flex-direction: column;
        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;
+}
@@ -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>
@@ -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 */
 (function () {
    const navigation = document.querySelector('.gh-navigation');
@@ -99,4 +11,36 @@
            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();
+    }
 })();
@@ -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);
+    });
+}
@@ -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))})}});
@@ -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);
+        });
+    });
+}
@@ -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);
+    }
+}
				`@@ -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>
				`@@ -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))})}});