Skip to content

Tenzing / Tenzing-Web-2023

Go to a project
Toggle navigation
Toggle navigation pinning
cab404f6 by Jeff Balicki
Options

sss 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 7e740cb2
Inline Side-by-side
Showing 13 changed files with 2834 additions and 116 deletions
......@@ -11,26 +11,63 @@
?>
<?php if( have_rows('work') ): ?>
<?php $rowCount = count( get_field('work') ); //GET THE COUNT ?>
<?php $rowCount = count( get_field('work') ); //GET THE COUNT ?>
<?php $i = 1; ?>
<div class="tiles">
<?php while( the_repeater_field('work') ): ?>
<div class="tile <?php if($i == $rowCount): ?> last <?php endif; ?>">
<div class="tile_image" style="background-image:url(<?php the_sub_field('background_image'); ?>);">
<div class="hover_content">
<?php the_sub_field('hover_text'); ?>
</div>
<div class="tile_content">
<?php the_sub_field('content'); ?>
<div class="tiles">
<?php while( the_repeater_field('work') ): ?>
<div class="tile <?php if($i == $rowCount): ?> last <?php endif; ?>">
<div class="tile_image" style="background-image:url(<?php the_sub_field('background_image'); ?>);">
<div class="hover_content">
<?php the_sub_field('hover_text'); ?>
</div>
<div class="tile_content">
<div class="title-mobile">
<h3> <?php the_sub_field('content_title'); ?> </h3>
</div>
<div class="image">
<?php $image = get_sub_field('content_image'); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<div class="text">
<div>
<h3><?php the_sub_field('content_title'); ?> </h3>
<?php the_sub_field('content'); ?>
</div>
<a class="whole-story" href="#">Get the whole story… </a>
</div>
</div>
</div>
</div>
</div>
<div class="tile_content mobile">
<div class="title-mobile">
<h3> <?php the_sub_field('content_title'); ?> </h3>
</div>
<div class="image">
<?php $image = get_sub_field('content_image'); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<div class="text">
<div>
<h3><?php the_sub_field('content_title'); ?> </h3>
<?php the_sub_field('content'); ?>
</div>
<a class="whole-story" href="#">Get the whole story… </a>
</div>
</div>
</div>
<?php $i++; ?>
<?php endwhile; ?>
<br clear="both">
</div>
<?php endif; ?>
<!--
<div class="tiles">
<div class="tile"><span>1</span></div>
<div class="tile"><span>2</span></div>
<div class="tile"><span>3</span></div>
<div class="tile"><span>4</span></div>
<div class="tile"><span>5</span></div>
<div class="tile last"><span>6</span></div>
</div> -->
\ No newline at end of file
......
......@@ -15764,14 +15764,30 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
margin-left: -12px;
margin-right: -12px;
}
@media (max-width: 900px) {
.the-numbers {
margin-left: -50px;
margin-right: -50px;
}
}
.the-numbers .wp-block-columns {
gap: 0em;
}
@media (max-width: 900px) {
.the-numbers .wp-block-columns {
flex-wrap: wrap !important;
}
}
.the-numbers .wp-block-column {
padding: 50px;
background-color: #7AA6AD;
color: #fff;
}
@media (max-width: 900px) {
.the-numbers .wp-block-column {
flex-basis: 50% !important;
}
}
.the-numbers .wp-block-column:nth-of-type(2) {
background-color: #C2B59B;
color: #666666;
......@@ -15820,13 +15836,13 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
line-height: 72px;
font-weight: 400;
margin-bottom: 20px;
padding: 0px 2%;
padding: 0px 25%;
}
.the-work p.first-of-type {
color: #fff;
font-size: 20px;
line-height: 24px;
padding: 0px 20%;
padding: 0px 25%;
}
.wp-block-getwid-tabs__nav-link {
......@@ -15917,19 +15933,30 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
.tiles {
display: grid;
grid-template-columns: auto auto auto;
-moz-column-width: 33%;
column-width: 33%;
grid-template-columns: 33.3% 33.3% 33.3%;
-moz-column-width: 33.3%;
column-width: 33.3%;
-moz-column-gap: 0px;
column-gap: 0px;
grid-auto-flow: dense;
grid-template-rows: masonry;
margin-top: 40px;
max-width: 100vw;
max-width: 1300px;
margin: auto;
margin-top: 40px;
transition: 0.5s;
background: #333;
}
@media (max-width: 1300px) {
.tiles {
max-width: 100vw;
}
}
@media (max-width: 800px) {
.tiles {
width: 100vw;
display: block;
height: auto;
}
}
.tile {
display: inline-grid;
......@@ -15940,6 +15967,12 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
vertical-align: top;
grid-column-end: span 1;
grid-row-end: span 1;
height: 275px;
}
@media (max-width: 800px) {
.tile {
display: block;
}
}
.tile .tile_image {
background-size: cover;
......@@ -15950,41 +15983,200 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
}
.tile .hover_content {
opacity: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
}
@media (max-width: 800px) {
.tile .hover_content {
opacity: 1;
}
}
.tile .hover_content h3, .tile .hover_content .h3 {
color: #fff;
font-size: 20px;
line-height: 24px;
text-transform: uppercase;
font-family: "TradeGothic";
text-align: left;
}
.tile .hover_content p {
color: #fff;
font-size: 20px;
line-height: 24px;
font-weight: 400;
font-family: "TradeGothic";
max-width: 70%;
text-align: left;
}
.tile .tile_content {
display: none;
flex-direction: column;
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
padding: 70px;
}
@media (max-width: 1300px) {
.tile .tile_content {
padding: 40px;
}
}
.tile .tile_content h3, .tile .tile_content .h3 {
color: #fff;
font-size: 30px;
line-height: 36px;
text-transform: uppercase;
font-family: "TradeGothic";
text-align: left;
}
@media (max-width: 800px) {
.tile .tile_content h3, .tile .tile_content .h3 {
text-align: center;
font-size: 20px;
line-height: 24px;
margin-bottom: 30px;
}
}
.tile .tile_content p {
color: #fff;
font-size: 20px;
line-height: 24px;
font-weight: 400;
font-family: "TradeGothic";
text-align: left;
}
@media (max-width: 800px) {
.tile .tile_content p {
text-align: center;
font-size: 16px;
line-height: 19px;
}
}
.tile .tile_content .image {
height: 100%;
width: 40%;
display: inline-block;
margin-right: 30px;
}
@media (max-width: 800px) {
.tile .tile_content .image {
width: 80%;
height: auto;
margin: auto;
}
}
.tile .tile_content .tile_content.mobile {
display: none;
}
.tile .tile_content .title-mobile {
display: none;
}
@media (max-width: 800px) {
.tile .tile_content .title-mobile {
display: block;
}
}
.tile .tile_content .text {
display: flex;
flex-direction: column;
width: 55%;
justify-content: space-between;
flex-wrap: wrap;
height: 90%;
}
@media (max-width: 800px) {
.tile .tile_content .text {
display: block;
margin-top: 30px;
height: auto;
width: 100%;
}
}
@media (max-width: 800px) {
.tile .tile_content .text h3, .tile .tile_content .text .h3 {
display: none;
}
}
.tile .tile_content .text .whole-story {
align-items: flex-end;
display: flex;
align-content: flex-end;
flex-wrap: wrap;
font-size: 24px;
line-height: 29px;
color: #fff;
text-decoration: none;
font-weight: 400;
}
@media (max-width: 800px) {
.tile .tile_content .text .whole-story {
display: block;
text-align: center;
margin-top: 100px;
}
}
.tile .tile_content .text .whole-story:hover {
text-decoration: underline;
}
.tile:hover .hover_content {
opacity: 1;
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
}
.tile.expand {
grid-column-end: span 2;
grid-row-end: span 2;
height: 550px;
}
@media (max-width: 800px) {
.tile.expand {
height: auto;
}
}
.tile.expand .hover_content {
display: none;
}
.tile.expand .tile_content {
margin-top: -16px;
display: block;
display: flex;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
@media (max-width: 800px) {
.tile.expand .tile_content {
display: none;
}
}
.tile.expand .tile_image {
height: 550px;
}
.tile.expand:hover .hover_content {
@media (max-width: 800px) {
.tile.expand .tile_image {
height: 275px;
}
}
.tile.expand .tile_content.mobile {
display: none;
background-color: #333;
}
.tile.expand:hover .tile_content {
display: block;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
@media (max-width: 800px) {
.tile.expand .tile_content.mobile {
display: block;
}
}
.last-expand .tile:nth-of-type(4) {
grid-column-end: 2;
}
.last-expand .tile:nth-of-type(5) {
grid-row-end: 4;
grid-column-end: 2;
}
/*# sourceMappingURL=child-theme.css.map */
\ No newline at end of file
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -24,17 +24,17 @@ $container = get_theme_mod( 'understrap_container_type' );
<!-- Your site branding in the menu -->
<?php get_template_part( 'global-templates/navbar-branding' ); ?>
<button
<!-- <button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>"
aria-label="<?php // esc_attr_e( 'Toggle navigation', 'understrap' ); ?>"
>
<span class="navbar-toggler-icon"></span>
</button>
</button> -->
<!-- The WordPress Menu goes here -->
<?php
......
......@@ -3422,7 +3422,7 @@
}, []);
}
function debounce(fn) {
function debounce$1(fn) {
var pending;
return function () {
if (!pending) {
......@@ -3571,7 +3571,7 @@
},
// Async and optimistically optimized update – it will not be executed if
// not necessary (debounced to run at most once-per-tick)
update: debounce(function () {
update: debounce$1(function () {
return new Promise(function (resolve) {
instance.forceUpdate();
resolve(state);
......@@ -7321,7 +7321,7 @@
return !_isString$1(value) || !(v = _unitExp.exec(value)) ? "" : v[1];
},
// note: protect against padded numbers as strings, like "100.100". That shouldn't return "00" as the unit. If it's numeric, return no unit.
clamp = function clamp(min, max, value) {
clamp$3 = function clamp(min, max, value) {
return _conditionalReturn(value, function (v) {
return _clamp$1(min, max, v);
});
......@@ -7485,7 +7485,7 @@
return _isArray(min) ? min[~~(Math.random() * min.length)] : (roundingIncrement = roundingIncrement || 1e-5) && (returnFunction = roundingIncrement < 1 ? Math.pow(10, (roundingIncrement + "").length - 2) : 1) && Math.floor(Math.round((min - roundingIncrement / 2 + Math.random() * (max - min + roundingIncrement * .99)) / roundingIncrement) * roundingIncrement * returnFunction) / returnFunction;
});
},
pipe = function pipe() {
pipe$1 = function pipe() {
for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {
functions[_key] = arguments[_key];
}
......@@ -10404,12 +10404,12 @@
snap: snap,
normalize: normalize,
getUnit: getUnit,
clamp: clamp,
clamp: clamp$3,
splitColor: splitColor,
toArray: toArray,
selector: selector,
mapRange: mapRange,
pipe: pipe,
pipe: pipe$1,
unitize: unitize,
interpolate: interpolate,
shuffle: shuffle
......@@ -12136,8 +12136,8 @@
_context$1 = gsap$1.core.context || function () {};
_pointerType = "onpointerenter" in _body$1 ? "pointer" : "mouse"; // isTouch is 0 if no touch, 1 if ONLY touch, and 2 if it can accommodate touch but also other types like mouse/pointer.
_isTouch = Observer.isTouch = _win$1.matchMedia && _win$1.matchMedia("(hover: none), (pointer: coarse)").matches ? 1 : "ontouchstart" in _win$1 || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 ? 2 : 0;
_eventTypes = Observer.eventTypes = ("ontouchstart" in _docEl$1 ? "touchstart,touchmove,touchcancel,touchend" : !("onpointerdown" in _docEl$1) ? "mousedown,mousemove,mouseup,mouseup" : "pointerdown,pointermove,pointercancel,pointerup").split(",");
_isTouch = Observer$1.isTouch = _win$1.matchMedia && _win$1.matchMedia("(hover: none), (pointer: coarse)").matches ? 1 : "ontouchstart" in _win$1 || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 ? 2 : 0;
_eventTypes = Observer$1.eventTypes = ("ontouchstart" in _docEl$1 ? "touchstart,touchmove,touchcancel,touchend" : !("onpointerdown" in _docEl$1) ? "mousedown,mousemove,mouseup,mouseup" : "pointerdown,pointermove,pointercancel,pointerup").split(",");
setTimeout(function () {
return _startup$1 = 0;
}, 500);
......@@ -12148,7 +12148,7 @@
};
_horizontal.op = _vertical;
_scrollers.cache = 0;
var Observer = /*#__PURE__*/function () {
var Observer$1 = /*#__PURE__*/function () {
function Observer(vars) {
this.init(vars);
}
......@@ -12507,20 +12507,20 @@
}]);
return Observer;
}();
Observer.version = "3.11.4";
Observer.create = function (vars) {
return new Observer(vars);
Observer$1.version = "3.11.4";
Observer$1.create = function (vars) {
return new Observer$1(vars);
};
Observer.register = _initCore;
Observer.getAll = function () {
Observer$1.register = _initCore;
Observer$1.getAll = function () {
return _observers.slice();
};
Observer.getById = function (id) {
Observer$1.getById = function (id) {
return _observers.filter(function (o) {
return o.vars.id === id;
})[0];
};
_getGSAP$1() && gsap$1.registerPlugin(Observer);
_getGSAP$1() && gsap$1.registerPlugin(Observer$1);
/*!
* ScrollTrigger 3.11.4
......@@ -14116,10 +14116,10 @@
if (_body) {
_enabled = 1;
Observer.register(gsap); // isTouch is 0 if no touch, 1 if ONLY touch, and 2 if it can accommodate touch but also other types like mouse/pointer.
Observer$1.register(gsap); // isTouch is 0 if no touch, 1 if ONLY touch, and 2 if it can accommodate touch but also other types like mouse/pointer.
ScrollTrigger.isTouch = Observer.isTouch;
_fixIOSBug = Observer.isTouch && /(iPad|iPhone|iPod|Mac)/g.test(navigator.userAgent); // since 2017, iOS has had a bug that causes event.clientX/Y to be inaccurate when a scroll occurs, thus we must alternate ignoring every other touchmove event to work around it. See https://bugs.webkit.org/show_bug.cgi?id=181954 and https://codepen.io/GreenSock/pen/ExbrPNa/087cef197dc35445a0951e8935c41503
ScrollTrigger.isTouch = Observer$1.isTouch;
_fixIOSBug = Observer$1.isTouch && /(iPad|iPhone|iPod|Mac)/g.test(navigator.userAgent); // since 2017, iOS has had a bug that causes event.clientX/Y to be inaccurate when a scroll occurs, thus we must alternate ignoring every other touchmove event to work around it. See https://bugs.webkit.org/show_bug.cgi?id=181954 and https://codepen.io/GreenSock/pen/ExbrPNa/087cef197dc35445a0951e8935c41503
_addListener(_win, "wheel", _onScroll); // mostly for 3rd party smooth scrolling libraries.
......@@ -14361,7 +14361,7 @@
if (direction === true) {
target.style.removeProperty("touch-action");
} else {
target.style.touchAction = direction === true ? "auto" : direction ? "pan-" + direction + (Observer.isTouch ? " pinch-zoom" : "") : "none"; // note: Firefox doesn't support it pinch-zoom properly, at least in addition to a pan-x or pan-y.
target.style.touchAction = direction === true ? "auto" : direction ? "pan-" + direction + (Observer$1.isTouch ? " pinch-zoom" : "") : "none"; // note: Firefox doesn't support it pinch-zoom properly, at least in addition to a pan-x or pan-y.
}
target === _docEl && _allowNativePanning(_body, direction);
......@@ -14393,7 +14393,7 @@
},
// capture events on scrollable elements INSIDE the <body> and allow those by calling stopPropagation() when we find a scrollable ancestor
_inputObserver = function _inputObserver(target, type, inputs, nested) {
return Observer.create({
return Observer$1.create({
target: target,
capture: true,
debounce: false,
......@@ -14404,10 +14404,10 @@
onDrag: nested,
onScroll: nested,
onEnable: function onEnable() {
return inputs && _addListener(_doc, Observer.eventTypes[0], _captureInputs, false, true);
return inputs && _addListener(_doc, Observer$1.eventTypes[0], _captureInputs, false, true);
},
onDisable: function onDisable() {
return _removeListener(_doc, Observer.eventTypes[0], _captureInputs, true);
return _removeListener(_doc, Observer$1.eventTypes[0], _captureInputs, true);
}
});
},
......@@ -14439,7 +14439,7 @@
scrollFuncY = _getScrollFunc(target, _vertical),
scrollFuncX = _getScrollFunc(target, _horizontal),
scale = 1,
initialScale = (Observer.isTouch && _win.visualViewport ? _win.visualViewport.scale * _win.visualViewport.width : _win.outerWidth) / _win.innerWidth,
initialScale = (Observer$1.isTouch && _win.visualViewport ? _win.visualViewport.scale * _win.visualViewport.width : _win.outerWidth) / _win.innerWidth,
wheelRefresh = 0,
resolveMomentumDuration = _isFunction(momentum) ? function () {
return momentum(self);
......@@ -14583,7 +14583,7 @@
inputObserver.kill();
};
vars.lockAxis = vars.lockAxis !== false;
self = new Observer(vars);
self = new Observer$1(vars);
self.iOS = _fixIOSBug; // used in the Observer getCachedScroll() function to work around an iOS bug that wreaks havoc with TouchEvent.clientY if we allow scroll to go all the way back to 0.
_fixIOSBug && !scrollFuncY() && scrollFuncY(1); // iOS bug causes event.clientY values to freak out (wildly inaccurate) if the scroll position is exactly 0.
......@@ -14606,7 +14606,7 @@
});
};
ScrollTrigger.observe = function (vars) {
return new Observer(vars);
return new Observer$1(vars);
};
ScrollTrigger.normalizeScroll = function (vars) {
if (typeof vars === "undefined") {
......@@ -14618,7 +14618,7 @@
if (vars === false) {
return _normalizer && _normalizer.kill();
}
var normalizer = vars instanceof Observer ? vars : _getScrollNormalizer(vars);
var normalizer = vars instanceof Observer$1 ? vars : _getScrollNormalizer(vars);
_normalizer && _normalizer.target === normalizer.target && _normalizer.kill();
_isViewport(normalizer.target) && (_normalizer = normalizer);
return normalizer;
......@@ -14643,26 +14643,2342 @@
};
_getGSAP() && gsap.registerPlugin(ScrollTrigger);
//const grid = document.querySelector(".tiles");
//wrapGrid(grid);
var DEFAULT_OVERSHOOT_STRENGTH = 1.525;
var reversed = function (easing) {
return function (p) {
return 1 - easing(1 - p);
};
};
var mirrored = function (easing) {
return function (p) {
return p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
};
};
var createReversedEasing = reversed;
var createExpoIn = function (power) {
return function (p) {
return Math.pow(p, power);
};
};
var createBackIn = function (power) {
return function (p) {
return p * p * ((power + 1) * p - power);
};
};
var createAnticipateEasing = function (power) {
var backEasing = createBackIn(power);
return function (p) {
return (p *= 2) < 1 ? 0.5 * backEasing(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
};
};
var linear = function (p) {
return p;
};
var easeIn = /*#__PURE__*/createExpoIn(2);
var easeOut = /*#__PURE__*/reversed(easeIn);
var easeInOut = /*#__PURE__*/mirrored(easeIn);
var circIn = function (p) {
return 1 - Math.sin(Math.acos(p));
};
var circOut = /*#__PURE__*/reversed(circIn);
var circInOut = /*#__PURE__*/mirrored(circOut);
var backIn = /*#__PURE__*/createBackIn(DEFAULT_OVERSHOOT_STRENGTH);
var backOut = /*#__PURE__*/reversed(backIn);
var backInOut = /*#__PURE__*/mirrored(backIn);
var anticipate = /*#__PURE__*/createAnticipateEasing(DEFAULT_OVERSHOOT_STRENGTH);
const defaultTimestep = 1 / 60 * 1000;
const getCurrentTime = typeof performance !== "undefined" ? () => performance.now() : () => Date.now();
const onNextFrame$1 = typeof window !== "undefined" ? callback => window.requestAnimationFrame(callback) : callback => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
function createRenderStep(runNextFrame) {
let toRun = [];
let toRunNextFrame = [];
let numToRun = 0;
let isProcessing = false;
let flushNextFrame = false;
const toKeepAlive = new WeakSet();
const step = {
schedule: (callback, keepAlive = false, immediate = false) => {
const addToCurrentFrame = immediate && isProcessing;
const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
if (keepAlive) toKeepAlive.add(callback);
if (buffer.indexOf(callback) === -1) {
buffer.push(callback);
if (addToCurrentFrame && isProcessing) numToRun = toRun.length;
}
return callback;
},
cancel: callback => {
const index = toRunNextFrame.indexOf(callback);
if (index !== -1) toRunNextFrame.splice(index, 1);
toKeepAlive.delete(callback);
},
process: frameData => {
if (isProcessing) {
flushNextFrame = true;
return;
}
isProcessing = true;
[toRun, toRunNextFrame] = [toRunNextFrame, toRun];
toRunNextFrame.length = 0;
numToRun = toRun.length;
if (numToRun) {
for (let i = 0; i < numToRun; i++) {
const callback = toRun[i];
callback(frameData);
if (toKeepAlive.has(callback)) {
step.schedule(callback);
runNextFrame();
}
}
}
isProcessing = false;
if (flushNextFrame) {
flushNextFrame = false;
step.process(frameData);
}
}
};
return step;
}
//const scroll = new LocomotiveScroll();
const maxElapsed$1 = 40;
let useDefaultElapsed$1 = true;
let runNextFrame = false;
let isProcessing$1 = false;
const frame$1 = {
delta: 0,
timestamp: 0
};
const stepsOrder$1 = ["read", "update", "preRender", "render", "postRender"];
const steps$1 = stepsOrder$1.reduce((acc, key) => {
acc[key] = createRenderStep(() => runNextFrame = true);
return acc;
}, {});
const sync$1 = stepsOrder$1.reduce((acc, key) => {
const step = steps$1[key];
acc[key] = (process, keepAlive = false, immediate = false) => {
if (!runNextFrame) startLoop$1();
return step.schedule(process, keepAlive, immediate);
};
return acc;
}, {});
stepsOrder$1.reduce((acc, key) => {
acc[key] = steps$1[key].cancel;
return acc;
}, {});
stepsOrder$1.reduce((acc, key) => {
acc[key] = () => steps$1[key].process(frame$1);
return acc;
}, {});
const processStep$1 = stepId => steps$1[stepId].process(frame$1);
const processFrame$1 = timestamp => {
runNextFrame = false;
frame$1.delta = useDefaultElapsed$1 ? defaultTimestep : Math.max(Math.min(timestamp - frame$1.timestamp, maxElapsed$1), 1);
frame$1.timestamp = timestamp;
isProcessing$1 = true;
stepsOrder$1.forEach(processStep$1);
isProcessing$1 = false;
if (runNextFrame) {
useDefaultElapsed$1 = false;
onNextFrame$1(processFrame$1);
}
};
const startLoop$1 = () => {
runNextFrame = true;
useDefaultElapsed$1 = true;
if (!isProcessing$1) onNextFrame$1(processFrame$1);
};
document.addEventListener("DOMContentLoaded", function () {
window.addEventListener('scroll', function () {
if (window.scrollY > 57) {
document.getElementById('main-nav').classList.add('fixed-top');
} else {
document.getElementById('main-nav').classList.remove('fixed-top');
/**
* lodash (Custom Build) <https://lodash.com/>
* Build: `lodash modularize exports="npm" -o ./`
* Copyright jQuery Foundation and other contributors <https://jquery.org/>
* Released under MIT license <https://lodash.com/license>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
*/
/** Used as the `TypeError` message for "Functions" methods. */
var FUNC_ERROR_TEXT = 'Expected a function';
/** Used as references for various `Number` constants. */
var NAN = 0 / 0;
/** `Object#toString` result references. */
var symbolTag = '[object Symbol]';
/** Used to match leading and trailing whitespace. */
var reTrim = /^\s+|\s+$/g;
/** Used to detect bad signed hexadecimal string values. */
var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
/** Used to detect binary string values. */
var reIsBinary = /^0b[01]+$/i;
/** Used to detect octal string values. */
var reIsOctal = /^0o[0-7]+$/i;
/** Built-in method references without a dependency on `root`. */
var freeParseInt = parseInt;
/** Detect free variable `global` from Node.js. */
var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
/** Detect free variable `self`. */
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
/** Used as a reference to the global object. */
var root = freeGlobal || freeSelf || Function('return this')();
/** Used for built-in method references. */
var objectProto = Object.prototype;
/**
* Used to resolve the
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
* of values.
*/
var objectToString = objectProto.toString;
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeMax = Math.max,
nativeMin = Math.min;
/**
* Gets the timestamp of the number of milliseconds that have elapsed since
* the Unix epoch (1 January 1970 00:00:00 UTC).
*
* @static
* @memberOf _
* @since 2.4.0
* @category Date
* @returns {number} Returns the timestamp.
* @example
*
* _.defer(function(stamp) {
* console.log(_.now() - stamp);
* }, _.now());
* // => Logs the number of milliseconds it took for the deferred invocation.
*/
var now = function () {
return root.Date.now();
};
/**
* Creates a debounced function that delays invoking `func` until after `wait`
* milliseconds have elapsed since the last time the debounced function was
* invoked. The debounced function comes with a `cancel` method to cancel
* delayed `func` invocations and a `flush` method to immediately invoke them.
* Provide `options` to indicate whether `func` should be invoked on the
* leading and/or trailing edge of the `wait` timeout. The `func` is invoked
* with the last arguments provided to the debounced function. Subsequent
* calls to the debounced function return the result of the last `func`
* invocation.
*
* **Note:** If `leading` and `trailing` options are `true`, `func` is
* invoked on the trailing edge of the timeout only if the debounced function
* is invoked more than once during the `wait` timeout.
*
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
* until to the next tick, similar to `setTimeout` with a timeout of `0`.
*
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
* for details over the differences between `_.debounce` and `_.throttle`.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Function
* @param {Function} func The function to debounce.
* @param {number} [wait=0] The number of milliseconds to delay.
* @param {Object} [options={}] The options object.
* @param {boolean} [options.leading=false]
* Specify invoking on the leading edge of the timeout.
* @param {number} [options.maxWait]
* The maximum time `func` is allowed to be delayed before it's invoked.
* @param {boolean} [options.trailing=true]
* Specify invoking on the trailing edge of the timeout.
* @returns {Function} Returns the new debounced function.
* @example
*
* // Avoid costly calculations while the window size is in flux.
* jQuery(window).on('resize', _.debounce(calculateLayout, 150));
*
* // Invoke `sendMail` when clicked, debouncing subsequent calls.
* jQuery(element).on('click', _.debounce(sendMail, 300, {
* 'leading': true,
* 'trailing': false
* }));
*
* // Ensure `batchLog` is invoked once after 1 second of debounced calls.
* var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
* var source = new EventSource('/stream');
* jQuery(source).on('message', debounced);
*
* // Cancel the trailing debounced invocation.
* jQuery(window).on('popstate', debounced.cancel);
*/
function debounce(func, wait, options) {
var lastArgs,
lastThis,
maxWait,
result,
timerId,
lastCallTime,
lastInvokeTime = 0,
leading = false,
maxing = false,
trailing = true;
if (typeof func != 'function') {
throw new TypeError(FUNC_ERROR_TEXT);
}
wait = toNumber(wait) || 0;
if (isObject(options)) {
leading = !!options.leading;
maxing = 'maxWait' in options;
maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
trailing = 'trailing' in options ? !!options.trailing : trailing;
}
function invokeFunc(time) {
var args = lastArgs,
thisArg = lastThis;
lastArgs = lastThis = undefined;
lastInvokeTime = time;
result = func.apply(thisArg, args);
return result;
}
function leadingEdge(time) {
// Reset any `maxWait` timer.
lastInvokeTime = time;
// Start the timer for the trailing edge.
timerId = setTimeout(timerExpired, wait);
// Invoke the leading edge.
return leading ? invokeFunc(time) : result;
}
function remainingWait(time) {
var timeSinceLastCall = time - lastCallTime,
timeSinceLastInvoke = time - lastInvokeTime,
result = wait - timeSinceLastCall;
return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
}
function shouldInvoke(time) {
var timeSinceLastCall = time - lastCallTime,
timeSinceLastInvoke = time - lastInvokeTime;
// Either this is the first call, activity has stopped and we're at the
// trailing edge, the system time has gone backwards and we're treating
// it as the trailing edge, or we've hit the `maxWait` limit.
return lastCallTime === undefined || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
}
function timerExpired() {
var time = now();
if (shouldInvoke(time)) {
return trailingEdge(time);
}
// Restart the timer.
timerId = setTimeout(timerExpired, remainingWait(time));
}
function trailingEdge(time) {
timerId = undefined;
// Only invoke if we have `lastArgs` which means `func` has been
// debounced at least once.
if (trailing && lastArgs) {
return invokeFunc(time);
}
lastArgs = lastThis = undefined;
return result;
}
function cancel() {
if (timerId !== undefined) {
clearTimeout(timerId);
}
lastInvokeTime = 0;
lastArgs = lastCallTime = lastThis = timerId = undefined;
}
function flush() {
return timerId === undefined ? result : trailingEdge(now());
}
function debounced() {
var time = now(),
isInvoking = shouldInvoke(time);
lastArgs = arguments;
lastThis = this;
lastCallTime = time;
if (isInvoking) {
if (timerId === undefined) {
return leadingEdge(lastCallTime);
}
if (maxing) {
// Handle invocations in a tight loop.
timerId = setTimeout(timerExpired, wait);
return invokeFunc(lastCallTime);
}
}
if (timerId === undefined) {
timerId = setTimeout(timerExpired, wait);
}
return result;
}
debounced.cancel = cancel;
debounced.flush = flush;
return debounced;
}
/**
* Creates a throttled function that only invokes `func` at most once per
* every `wait` milliseconds. The throttled function comes with a `cancel`
* method to cancel delayed `func` invocations and a `flush` method to
* immediately invoke them. Provide `options` to indicate whether `func`
* should be invoked on the leading and/or trailing edge of the `wait`
* timeout. The `func` is invoked with the last arguments provided to the
* throttled function. Subsequent calls to the throttled function return the
* result of the last `func` invocation.
*
* **Note:** If `leading` and `trailing` options are `true`, `func` is
* invoked on the trailing edge of the timeout only if the throttled function
* is invoked more than once during the `wait` timeout.
*
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
* until to the next tick, similar to `setTimeout` with a timeout of `0`.
*
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
* for details over the differences between `_.throttle` and `_.debounce`.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Function
* @param {Function} func The function to throttle.
* @param {number} [wait=0] The number of milliseconds to throttle invocations to.
* @param {Object} [options={}] The options object.
* @param {boolean} [options.leading=true]
* Specify invoking on the leading edge of the timeout.
* @param {boolean} [options.trailing=true]
* Specify invoking on the trailing edge of the timeout.
* @returns {Function} Returns the new throttled function.
* @example
*
* // Avoid excessively updating the position while scrolling.
* jQuery(window).on('scroll', _.throttle(updatePosition, 100));
*
* // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
* var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
* jQuery(element).on('click', throttled);
*
* // Cancel the trailing throttled invocation.
* jQuery(window).on('popstate', throttled.cancel);
*/
function throttle(func, wait, options) {
var leading = true,
trailing = true;
if (typeof func != 'function') {
throw new TypeError(FUNC_ERROR_TEXT);
}
if (isObject(options)) {
leading = 'leading' in options ? !!options.leading : leading;
trailing = 'trailing' in options ? !!options.trailing : trailing;
}
return debounce(func, wait, {
'leading': leading,
'maxWait': wait,
'trailing': trailing
});
}
/**
* Checks if `value` is the
* [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
* of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
* @example
*
* _.isObject({});
* // => true
*
* _.isObject([1, 2, 3]);
* // => true
*
* _.isObject(_.noop);
* // => true
*
* _.isObject(null);
* // => false
*/
function isObject(value) {
var type = typeof value;
return !!value && (type == 'object' || type == 'function');
}
/**
* Checks if `value` is object-like. A value is object-like if it's not `null`
* and has a `typeof` result of "object".
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
* @example
*
* _.isObjectLike({});
* // => true
*
* _.isObjectLike([1, 2, 3]);
* // => true
*
* _.isObjectLike(_.noop);
* // => false
*
* _.isObjectLike(null);
* // => false
*/
function isObjectLike(value) {
return !!value && typeof value == 'object';
}
/**
* Checks if `value` is classified as a `Symbol` primitive or object.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
* @example
*
* _.isSymbol(Symbol.iterator);
* // => true
*
* _.isSymbol('abc');
* // => false
*/
function isSymbol(value) {
return typeof value == 'symbol' || isObjectLike(value) && objectToString.call(value) == symbolTag;
}
/**
* Converts `value` to a number.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to process.
* @returns {number} Returns the number.
* @example
*
* _.toNumber(3.2);
* // => 3.2
*
* _.toNumber(Number.MIN_VALUE);
* // => 5e-324
*
* _.toNumber(Infinity);
* // => Infinity
*
* _.toNumber('3.2');
* // => 3.2
*/
function toNumber(value) {
if (typeof value == 'number') {
return value;
}
if (isSymbol(value)) {
return NAN;
}
if (isObject(value)) {
var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
value = isObject(other) ? other + '' : other;
}
if (typeof value != 'string') {
return value === 0 ? value : +value;
}
value = value.replace(reTrim, '');
var isBinary = reIsBinary.test(value);
return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
}
var lodash_throttle = throttle;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf || {
__proto__: []
} instanceof Array && function (d, b) {
d.__proto__ = b;
} || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
};
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign$2 = function () {
__assign$2 = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign$2.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
return r;
}
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign$1 = function () {
__assign$1 = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign$1.apply(this, arguments);
};
var clamp$2 = function (min, max) {
return function (v) {
return Math.max(Math.min(v, max), min);
};
};
var sanitize = function (v) {
return v % 1 ? Number(v.toFixed(5)) : v;
};
var floatRegex = /(-)?(\d[\d\.]*)/g;
var colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
var singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
var number = {
test: function (v) {
return typeof v === 'number';
},
parse: parseFloat,
transform: function (v) {
return v;
}
};
var alpha = __assign$1(__assign$1({}, number), {
transform: clamp$2(0, 1)
});
jQuery(document).ready(function ($) {
$('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left', "-" + $('#content').css('margin-left'));
$('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right', "-" + $('#content').css('margin-right'));
window.addEventListener('resize', function () {
$('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left', "-" + $('#content').css('margin-left'));
$('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right', "-" + $('#content').css('margin-right'));
__assign$1(__assign$1({}, number), {
default: 1
});
var createUnitType = function (unit) {
return {
test: function (v) {
return typeof v === 'string' && v.endsWith(unit) && v.split(' ').length === 1;
},
parse: parseFloat,
transform: function (v) {
return "" + v + unit;
}
};
};
var degrees = createUnitType('deg');
var percent = createUnitType('%');
var px = createUnitType('px');
var vh = createUnitType('vh');
var vw = createUnitType('vw');
__assign$1(__assign$1({}, percent), {
parse: function (v) {
return percent.parse(v) / 100;
},
transform: function (v) {
return percent.transform(v * 100);
}
});
var getValueFromFunctionString = function (value) {
return value.substring(value.indexOf('(') + 1, value.lastIndexOf(')'));
};
var clampRgbUnit = clamp$2(0, 255);
var isRgba = function (v) {
return v.red !== undefined;
};
var isHsla = function (v) {
return v.hue !== undefined;
};
function getValuesAsArray(value) {
return getValueFromFunctionString(value).replace(/(,|\/)/g, ' ').split(/ \s*/);
}
var splitColorValues = function (terms) {
return function (v) {
if (typeof v !== 'string') return v;
var values = {};
var valuesArray = getValuesAsArray(v);
for (var i = 0; i < 4; i++) {
values[terms[i]] = valuesArray[i] !== undefined ? parseFloat(valuesArray[i]) : 1;
}
return values;
};
};
var rgbaTemplate = function (_a) {
var red = _a.red,
green = _a.green,
blue = _a.blue,
_b = _a.alpha,
alpha = _b === void 0 ? 1 : _b;
return "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")";
};
var hslaTemplate = function (_a) {
var hue = _a.hue,
saturation = _a.saturation,
lightness = _a.lightness,
_b = _a.alpha,
alpha = _b === void 0 ? 1 : _b;
return "hsla(" + hue + ", " + saturation + ", " + lightness + ", " + alpha + ")";
};
var rgbUnit = __assign$1(__assign$1({}, number), {
transform: function (v) {
return Math.round(clampRgbUnit(v));
}
});
function isColorString(color, colorType) {
return color.startsWith(colorType) && singleColorRegex.test(color);
}
var rgba = {
test: function (v) {
return typeof v === 'string' ? isColorString(v, 'rgb') : isRgba(v);
},
parse: splitColorValues(['red', 'green', 'blue', 'alpha']),
transform: function (_a) {
var red = _a.red,
green = _a.green,
blue = _a.blue,
_b = _a.alpha,
alpha$1 = _b === void 0 ? 1 : _b;
return rgbaTemplate({
red: rgbUnit.transform(red),
green: rgbUnit.transform(green),
blue: rgbUnit.transform(blue),
alpha: sanitize(alpha.transform(alpha$1))
});
}
};
var hsla = {
test: function (v) {
return typeof v === 'string' ? isColorString(v, 'hsl') : isHsla(v);
},
parse: splitColorValues(['hue', 'saturation', 'lightness', 'alpha']),
transform: function (_a) {
var hue = _a.hue,
saturation = _a.saturation,
lightness = _a.lightness,
_b = _a.alpha,
alpha$1 = _b === void 0 ? 1 : _b;
return hslaTemplate({
hue: Math.round(hue),
saturation: percent.transform(sanitize(saturation)),
lightness: percent.transform(sanitize(lightness)),
alpha: sanitize(alpha.transform(alpha$1))
});
}
};
var hex = __assign$1(__assign$1({}, rgba), {
test: function (v) {
return typeof v === 'string' && isColorString(v, '#');
},
parse: function (v) {
var r = '';
var g = '';
var b = '';
if (v.length > 4) {
r = v.substr(1, 2);
g = v.substr(3, 2);
b = v.substr(5, 2);
} else {
r = v.substr(1, 1);
g = v.substr(2, 1);
b = v.substr(3, 1);
r += r;
g += g;
b += b;
}
return {
red: parseInt(r, 16),
green: parseInt(g, 16),
blue: parseInt(b, 16),
alpha: 1
};
}
});
var color = {
test: function (v) {
return typeof v === 'string' && singleColorRegex.test(v) || isRgba(v) || isHsla(v);
},
parse: function (v) {
if (rgba.test(v)) {
return rgba.parse(v);
} else if (hsla.test(v)) {
return hsla.parse(v);
} else if (hex.test(v)) {
return hex.parse(v);
}
return v;
},
transform: function (v) {
if (isRgba(v)) {
return rgba.transform(v);
} else if (isHsla(v)) {
return hsla.transform(v);
}
return v;
}
};
var COLOR_TOKEN = '${c}';
var NUMBER_TOKEN = '${n}';
var convertNumbersToZero = function (v) {
return typeof v === 'number' ? 0 : v;
};
var complex = {
test: function (v) {
if (typeof v !== 'string' || !isNaN(v)) return false;
var numValues = 0;
var foundNumbers = v.match(floatRegex);
var foundColors = v.match(colorRegex);
if (foundNumbers) numValues += foundNumbers.length;
if (foundColors) numValues += foundColors.length;
return numValues > 0;
},
parse: function (v) {
var input = v;
var parsed = [];
var foundColors = input.match(colorRegex);
if (foundColors) {
input = input.replace(colorRegex, COLOR_TOKEN);
parsed.push.apply(parsed, foundColors.map(color.parse));
}
var foundNumbers = input.match(floatRegex);
if (foundNumbers) {
parsed.push.apply(parsed, foundNumbers.map(number.parse));
}
return parsed;
},
createTransformer: function (prop) {
var template = prop;
var token = 0;
var foundColors = prop.match(colorRegex);
var numColors = foundColors ? foundColors.length : 0;
if (foundColors) {
for (var i = 0; i < numColors; i++) {
template = template.replace(foundColors[i], COLOR_TOKEN);
token++;
}
}
var foundNumbers = template.match(floatRegex);
var numNumbers = foundNumbers ? foundNumbers.length : 0;
if (foundNumbers) {
for (var i = 0; i < numNumbers; i++) {
template = template.replace(foundNumbers[i], NUMBER_TOKEN);
token++;
}
}
return function (v) {
var output = template;
for (var i = 0; i < token; i++) {
output = output.replace(i < numColors ? COLOR_TOKEN : NUMBER_TOKEN, i < numColors ? color.transform(v[i]) : sanitize(v[i]));
}
return output;
};
},
getAnimatableNone: function (target) {
var parsedTarget = complex.parse(target);
var targetTransformer = complex.createTransformer(target);
return targetTransformer(parsedTarget.map(convertNumbersToZero));
}
};
var invariant = function () {};
var isNum = function (v) {
return typeof v === 'number';
};
var curryRange = function (func) {
return function (min, max, v) {
return v !== undefined ? func(min, max, v) : function (cv) {
return func(min, max, cv);
};
};
};
var clamp = function (min, max, v) {
return Math.min(Math.max(v, min), max);
};
var clamp$1 = curryRange(clamp);
var progress = function (from, to, value) {
var toFromDifference = to - from;
return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
};
var mix = function (from, to, progress) {
return -progress * from + progress * to + from;
};
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var mixLinearColor = function (from, to, v) {
var fromExpo = from * from;
var toExpo = to * to;
return Math.sqrt(Math.max(0, v * (toExpo - fromExpo) + fromExpo));
};
var colorTypes = [hex, rgba, hsla];
var getColorType = function (v) {
return colorTypes.find(function (type) {
return type.test(v);
});
};
var mixColor = function (from, to) {
var fromColorType = getColorType(from);
var toColorType = getColorType(to);
invariant(fromColorType.transform === toColorType.transform);
var fromColor = fromColorType.parse(from);
var toColor = toColorType.parse(to);
var blended = __assign({}, fromColor);
var mixFunc = fromColorType === hsla ? mix : mixLinearColor;
return function (v) {
for (var key in blended) {
if (key !== 'alpha') {
blended[key] = mixFunc(fromColor[key], toColor[key], v);
}
}
blended.alpha = mix(fromColor.alpha, toColor.alpha, v);
return fromColorType.transform(blended);
};
};
var combineFunctions = function (a, b) {
return function (v) {
return b(a(v));
};
};
var pipe = function () {
var transformers = [];
for (var _i = 0; _i < arguments.length; _i++) {
transformers[_i] = arguments[_i];
}
return transformers.reduce(combineFunctions);
};
function getMixer(origin, target) {
if (isNum(origin)) {
return function (v) {
return mix(origin, target, v);
};
} else if (color.test(origin)) {
return mixColor(origin, target);
} else {
return mixComplex(origin, target);
}
}
var mixArray = function (from, to) {
var output = from.slice();
var numValues = output.length;
var blendValue = from.map(function (fromThis, i) {
return getMixer(fromThis, to[i]);
});
return function (v) {
for (var i = 0; i < numValues; i++) {
output[i] = blendValue[i](v);
}
return output;
};
};
function analyse(value) {
var parsed = complex.parse(value);
var numValues = parsed.length;
var numNumbers = 0;
var numRGB = 0;
var numHSL = 0;
for (var i = 0; i < numValues; i++) {
if (numNumbers || typeof parsed[i] === 'number') {
numNumbers++;
} else {
if (parsed[i].hue !== undefined) {
numHSL++;
} else {
numRGB++;
}
}
}
return {
parsed: parsed,
numNumbers: numNumbers,
numRGB: numRGB,
numHSL: numHSL
};
}
var mixComplex = function (origin, target) {
var template = complex.createTransformer(target);
var originStats = analyse(origin);
var targetStats = analyse(target);
return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
};
var velocityPerFrame = function (xps, frameDuration) {
return isNum(xps) ? xps / (1000 / frameDuration) : 0;
};
var velocityPerSecond = function (velocity, frameDuration) {
return frameDuration ? velocity * (1000 / frameDuration) : 0;
};
clamp$1(0, 1);
var prevTime = 0;
var onNextFrame = typeof window !== 'undefined' && window.requestAnimationFrame !== undefined ? function (callback) {
return window.requestAnimationFrame(callback);
} : function (callback) {
var timestamp = Date.now();
var timeToCall = Math.max(0, 16.7 - (timestamp - prevTime));
prevTime = timestamp + timeToCall;
setTimeout(function () {
return callback(prevTime);
}, timeToCall);
};
var createStep = function (setRunNextFrame) {
var processToRun = [];
var processToRunNextFrame = [];
var numThisFrame = 0;
var isProcessing = false;
var i = 0;
var cancelled = new WeakSet();
var toKeepAlive = new WeakSet();
var renderStep = {
cancel: function (process) {
var indexOfCallback = processToRunNextFrame.indexOf(process);
cancelled.add(process);
if (indexOfCallback !== -1) {
processToRunNextFrame.splice(indexOfCallback, 1);
}
},
process: function (frame) {
var _a;
isProcessing = true;
_a = [processToRunNextFrame, processToRun], processToRun = _a[0], processToRunNextFrame = _a[1];
processToRunNextFrame.length = 0;
numThisFrame = processToRun.length;
if (numThisFrame) {
var process_1;
for (i = 0; i < numThisFrame; i++) {
process_1 = processToRun[i];
process_1(frame);
if (toKeepAlive.has(process_1) === true && !cancelled.has(process_1)) {
renderStep.schedule(process_1);
setRunNextFrame(true);
}
}
}
isProcessing = false;
},
schedule: function (process, keepAlive, immediate) {
if (keepAlive === void 0) {
keepAlive = false;
}
if (immediate === void 0) {
immediate = false;
}
var addToCurrentBuffer = immediate && isProcessing;
var buffer = addToCurrentBuffer ? processToRun : processToRunNextFrame;
cancelled.delete(process);
if (keepAlive) toKeepAlive.add(process);
if (buffer.indexOf(process) === -1) {
buffer.push(process);
if (addToCurrentBuffer) numThisFrame = processToRun.length;
}
}
};
return renderStep;
};
var maxElapsed = 40;
var defaultElapsed = 1 / 60 * 1000;
var useDefaultElapsed = true;
var willRunNextFrame = false;
var isProcessing = false;
var frame = {
delta: 0,
timestamp: 0
};
var stepsOrder = ["read", "update", "preRender", "render", "postRender"];
var setWillRunNextFrame = function (willRun) {
return willRunNextFrame = willRun;
};
var steps = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {
acc[key] = createStep(setWillRunNextFrame);
return acc;
}, {});
var sync = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {
var step = steps[key];
acc[key] = function (process, keepAlive, immediate) {
if (keepAlive === void 0) {
keepAlive = false;
}
if (immediate === void 0) {
immediate = false;
}
if (!willRunNextFrame) startLoop();
step.schedule(process, keepAlive, immediate);
return process;
};
return acc;
}, {});
var cancelSync = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {
acc[key] = steps[key].cancel;
return acc;
}, {});
var processStep = function (stepId) {
return steps[stepId].process(frame);
};
var processFrame = function (timestamp) {
willRunNextFrame = false;
frame.delta = useDefaultElapsed ? defaultElapsed : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);
if (!useDefaultElapsed) defaultElapsed = frame.delta;
frame.timestamp = timestamp;
isProcessing = true;
stepsOrder.forEach(processStep);
isProcessing = false;
if (willRunNextFrame) {
useDefaultElapsed = false;
onNextFrame(processFrame);
}
};
var startLoop = function () {
willRunNextFrame = true;
useDefaultElapsed = true;
if (!isProcessing) onNextFrame(processFrame);
};
var getFrameData = function () {
return frame;
};
var Chainable = /*#__PURE__*/function () {
function Chainable(props) {
if (props === void 0) {
props = {};
}
this.props = props;
}
Chainable.prototype.applyMiddleware = function (middleware) {
return this.create(__assign$2(__assign$2({}, this.props), {
middleware: this.props.middleware ? __spreadArrays([middleware], this.props.middleware) : [middleware]
}));
};
Chainable.prototype.pipe = function () {
var funcs = [];
for (var _i = 0; _i < arguments.length; _i++) {
funcs[_i] = arguments[_i];
}
var pipedUpdate = funcs.length === 1 ? funcs[0] : pipe.apply(void 0, funcs);
return this.applyMiddleware(function (update) {
return function (v) {
return update(pipedUpdate(v));
};
});
};
Chainable.prototype.while = function (predicate) {
return this.applyMiddleware(function (update, complete) {
return function (v) {
return predicate(v) ? update(v) : complete();
};
});
};
Chainable.prototype.filter = function (predicate) {
return this.applyMiddleware(function (update) {
return function (v) {
return predicate(v) && update(v);
};
});
};
return Chainable;
}();
var Observer = /*#__PURE__*/function () {
function Observer(_a, observer) {
var _this = this;
var middleware = _a.middleware,
onComplete = _a.onComplete;
this.isActive = true;
this.update = function (v) {
if (_this.observer.update) _this.updateObserver(v);
};
this.complete = function () {
if (_this.observer.complete && _this.isActive) _this.observer.complete();
if (_this.onComplete) _this.onComplete();
_this.isActive = false;
};
this.error = function (err) {
if (_this.observer.error && _this.isActive) _this.observer.error(err);
_this.isActive = false;
};
this.observer = observer;
this.updateObserver = function (v) {
return observer.update(v);
};
this.onComplete = onComplete;
if (observer.update && middleware && middleware.length) {
middleware.forEach(function (m) {
return _this.updateObserver = m(_this.updateObserver, _this.complete);
});
}
}
return Observer;
}();
var createObserver = function (observerCandidate, _a, onComplete) {
var middleware = _a.middleware;
if (typeof observerCandidate === 'function') {
return new Observer({
middleware: middleware,
onComplete: onComplete
}, {
update: observerCandidate
});
} else {
return new Observer({
middleware: middleware,
onComplete: onComplete
}, observerCandidate);
}
};
var Action = /*#__PURE__*/function (_super) {
__extends(Action, _super);
function Action() {
return _super !== null && _super.apply(this, arguments) || this;
}
Action.prototype.create = function (props) {
return new Action(props);
};
Action.prototype.start = function (observerCandidate) {
if (observerCandidate === void 0) {
observerCandidate = {};
}
var isComplete = false;
var subscription = {
stop: function () {
return undefined;
}
};
var _a = this.props,
init = _a.init,
observerProps = __rest(_a, ["init"]);
var observer = createObserver(observerCandidate, observerProps, function () {
isComplete = true;
subscription.stop();
});
var api = init(observer);
subscription = api ? __assign$2(__assign$2({}, subscription), api) : subscription;
if (observerCandidate.registerParent) {
observerCandidate.registerParent(subscription);
}
if (isComplete) subscription.stop();
return subscription;
};
return Action;
}(Chainable);
var action = function (init) {
return new Action({
init: init
});
};
var multi = function (_a) {
var getCount = _a.getCount,
getFirst = _a.getFirst,
getOutput = _a.getOutput,
mapApi = _a.mapApi,
setProp = _a.setProp,
startActions = _a.startActions;
return function (actions) {
return action(function (_a) {
var update = _a.update,
complete = _a.complete,
error = _a.error;
var numActions = getCount(actions);
var output = getOutput();
var updateOutput = function () {
return update(output);
};
var numCompletedActions = 0;
var subs = startActions(actions, function (a, name) {
var hasCompleted = false;
return a.start({
complete: function () {
if (!hasCompleted) {
hasCompleted = true;
numCompletedActions++;
if (numCompletedActions === numActions) sync.update(complete);
}
},
error: error,
update: function (v) {
setProp(output, name, v);
sync.update(updateOutput, false, true);
}
});
});
return Object.keys(getFirst(subs)).reduce(function (api, methodName) {
api[methodName] = mapApi(subs, methodName);
return api;
}, {});
});
};
};
var composite = /*#__PURE__*/multi({
getOutput: function () {
return {};
},
getCount: function (subs) {
return Object.keys(subs).length;
},
getFirst: function (subs) {
return subs[Object.keys(subs)[0]];
},
mapApi: function (subs, methodName) {
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return Object.keys(subs).reduce(function (output, propKey) {
var _a;
if (subs[propKey][methodName]) {
args[0] && args[0][propKey] !== undefined ? output[propKey] = subs[propKey][methodName](args[0][propKey]) : output[propKey] = (_a = subs[propKey])[methodName].apply(_a, args);
}
return output;
}, {});
};
},
setProp: function (output, name, v) {
return output[name] = v;
},
startActions: function (actions, starter) {
return Object.keys(actions).reduce(function (subs, key) {
subs[key] = starter(actions[key], key);
return subs;
}, {});
}
});
var parallel = /*#__PURE__*/multi({
getOutput: function () {
return [];
},
getCount: function (subs) {
return subs.length;
},
getFirst: function (subs) {
return subs[0];
},
mapApi: function (subs, methodName) {
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subs.map(function (sub, i) {
if (sub[methodName]) {
return Array.isArray(args[0]) ? sub[methodName](args[0][i]) : sub[methodName].apply(sub, args);
}
});
};
},
setProp: function (output, name, v) {
return output[name] = v;
},
startActions: function (actions, starter) {
return actions.map(function (action, i) {
return starter(action, i);
});
}
});
var parallel$1 = function () {
var actions = [];
for (var _i = 0; _i < arguments.length; _i++) {
actions[_i] = arguments[_i];
}
return parallel(actions);
};
var createVectorTests = function (typeTests) {
var testNames = Object.keys(typeTests);
var isVectorProp = function (prop, key) {
return prop !== undefined && !typeTests[key](prop);
};
var getVectorKeys = function (props) {
return testNames.reduce(function (vectorKeys, key) {
if (isVectorProp(props[key], key)) vectorKeys.push(key);
return vectorKeys;
}, []);
};
var testVectorProps = function (props) {
return props && testNames.some(function (key) {
return isVectorProp(props[key], key);
});
};
return {
getVectorKeys: getVectorKeys,
testVectorProps: testVectorProps
};
};
var unitTypes = [px, percent, degrees, vh, vw];
var findUnitType = function (prop) {
return unitTypes.find(function (type) {
return type.test(prop);
});
};
var isUnitProp = function (prop) {
return Boolean(findUnitType(prop));
};
var createAction = function (action, props) {
return action(props);
};
var reduceArrayValue = function (i) {
return function (props, key) {
props[key] = props[key][i];
return props;
};
};
var createArrayAction = function (action, props, vectorKeys) {
var firstVectorKey = vectorKeys[0];
var actionList = props[firstVectorKey].map(function (v, i) {
var childActionProps = vectorKeys.reduce(reduceArrayValue(i), __assign$2({}, props));
return getActionCreator(v)(action, childActionProps);
});
return parallel$1.apply(void 0, actionList);
};
var reduceObjectValue = function (key) {
return function (props, propKey) {
props[propKey] = props[propKey][key];
return props;
};
};
var createObjectAction = function (action, props, vectorKeys) {
var firstVectorKey = vectorKeys[0];
var actionMap = Object.keys(props[firstVectorKey]).reduce(function (map, key) {
var childActionProps = vectorKeys.reduce(reduceObjectValue(key), __assign$2({}, props));
map[key] = getActionCreator(props[firstVectorKey][key])(action, childActionProps);
return map;
}, {});
return composite(actionMap);
};
var createUnitAction = function (action, _a) {
var from = _a.from,
to = _a.to,
props = __rest(_a, ["from", "to"]);
var unitType = findUnitType(from) || findUnitType(to);
var transform = unitType.transform,
parse = unitType.parse;
return action(__assign$2(__assign$2({}, props), {
from: typeof from === 'string' ? parse(from) : from,
to: typeof to === 'string' ? parse(to) : to
})).pipe(transform);
};
var createMixerAction = function (mixer) {
return function (action, _a) {
var from = _a.from,
to = _a.to,
props = __rest(_a, ["from", "to"]);
return action(__assign$2(__assign$2({}, props), {
from: 0,
to: 1
})).pipe(mixer(from, to));
};
};
var createColorAction = /*#__PURE__*/createMixerAction(mixColor);
var createComplexAction = /*#__PURE__*/createMixerAction(mixComplex);
var createVectorAction = function (action, typeTests) {
var _a = createVectorTests(typeTests),
testVectorProps = _a.testVectorProps,
getVectorKeys = _a.getVectorKeys;
var vectorAction = function (props) {
var isVector = testVectorProps(props);
if (!isVector) return action(props);
var vectorKeys = getVectorKeys(props);
var testKey = vectorKeys[0];
var testProp = props[testKey];
return getActionCreator(testProp)(action, props, vectorKeys);
};
return vectorAction;
};
var getActionCreator = function (prop) {
if (typeof prop === 'number') {
return createAction;
} else if (Array.isArray(prop)) {
return createArrayAction;
} else if (isUnitProp(prop)) {
return createUnitAction;
} else if (color.test(prop)) {
return createColorAction;
} else if (complex.test(prop)) {
return createComplexAction;
} else if (typeof prop === 'object') {
return createObjectAction;
} else {
return createAction;
}
};
var decay = function (props) {
if (props === void 0) {
props = {};
}
return action(function (_a) {
var complete = _a.complete,
update = _a.update;
var _b = props.velocity,
velocity = _b === void 0 ? 0 : _b,
_c = props.from,
from = _c === void 0 ? 0 : _c,
_d = props.power,
power = _d === void 0 ? 0.8 : _d,
_e = props.timeConstant,
timeConstant = _e === void 0 ? 350 : _e,
_f = props.restDelta,
restDelta = _f === void 0 ? 0.5 : _f,
modifyTarget = props.modifyTarget;
var elapsed = 0;
var amplitude = power * velocity;
var idealTarget = from + amplitude;
var target = typeof modifyTarget === 'undefined' ? idealTarget : modifyTarget(idealTarget);
if (target !== idealTarget) amplitude = target - from;
var process = sync.update(function (_a) {
var frameDelta = _a.delta;
elapsed += frameDelta;
var delta = -amplitude * Math.exp(-elapsed / timeConstant);
var isMoving = delta > restDelta || delta < -restDelta;
var current = isMoving ? target + delta : target;
update(current);
if (!isMoving) {
cancelSync.update(process);
complete();
}
}, true);
return {
stop: function () {
return cancelSync.update(process);
}
};
});
};
/*#__PURE__*/createVectorAction(decay, {
from: number.test,
modifyTarget: function (func) {
return typeof func === 'function';
},
velocity: number.test
});
var spring = function (props) {
if (props === void 0) {
props = {};
}
return action(function (_a) {
var update = _a.update,
complete = _a.complete;
var _b = props.velocity,
velocity = _b === void 0 ? 0.0 : _b;
var _c = props.from,
from = _c === void 0 ? 0.0 : _c,
_d = props.to,
to = _d === void 0 ? 0.0 : _d,
_e = props.stiffness,
stiffness = _e === void 0 ? 100 : _e,
_f = props.damping,
damping = _f === void 0 ? 10 : _f,
_g = props.mass,
mass = _g === void 0 ? 1.0 : _g,
_h = props.restSpeed,
restSpeed = _h === void 0 ? 0.01 : _h,
_j = props.restDelta,
restDelta = _j === void 0 ? 0.01 : _j;
var initialVelocity = velocity ? -(velocity / 1000) : 0.0;
var t = 0;
var delta = to - from;
var position = from;
var prevPosition = position;
var process = sync.update(function (_a) {
var timeDelta = _a.delta;
t += timeDelta;
var dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
var angularFreq = Math.sqrt(stiffness / mass) / 1000;
prevPosition = position;
if (dampingRatio < 1) {
var envelope = Math.exp(-dampingRatio * angularFreq * t);
var expoDecay = angularFreq * Math.sqrt(1.0 - dampingRatio * dampingRatio);
position = to - envelope * ((initialVelocity + dampingRatio * angularFreq * delta) / expoDecay * Math.sin(expoDecay * t) + delta * Math.cos(expoDecay * t));
} else {
var envelope = Math.exp(-angularFreq * t);
position = to - envelope * (delta + (initialVelocity + angularFreq * delta) * t);
}
velocity = velocityPerSecond(position - prevPosition, timeDelta);
var isBelowVelocityThreshold = Math.abs(velocity) <= restSpeed;
var isBelowDisplacementThreshold = Math.abs(to - position) <= restDelta;
if (isBelowVelocityThreshold && isBelowDisplacementThreshold) {
position = to;
update(position);
cancelSync.update(process);
complete();
} else {
update(position);
}
}, true);
return {
stop: function () {
return cancelSync.update(process);
}
};
});
};
/*#__PURE__*/createVectorAction(spring, {
from: number.test,
to: number.test,
stiffness: number.test,
damping: number.test,
mass: number.test,
velocity: number.test
});
var inertia = function (_a) {
var _b = _a.from,
from = _b === void 0 ? 0 : _b,
_c = _a.velocity,
velocity = _c === void 0 ? 0 : _c,
min = _a.min,
max = _a.max,
_d = _a.power,
power = _d === void 0 ? 0.8 : _d,
_e = _a.timeConstant,
timeConstant = _e === void 0 ? 700 : _e,
_f = _a.bounceStiffness,
bounceStiffness = _f === void 0 ? 500 : _f,
_g = _a.bounceDamping,
bounceDamping = _g === void 0 ? 10 : _g,
_h = _a.restDelta,
restDelta = _h === void 0 ? 1 : _h,
modifyTarget = _a.modifyTarget;
return action(function (_a) {
var update = _a.update,
complete = _a.complete;
var prev = from;
var current = from;
var activeAnimation;
var isOutOfBounds = function (v) {
return min !== undefined && v < min || max !== undefined && v > max;
};
var boundaryNearest = function (v) {
return Math.abs(min - v) < Math.abs(max - v) ? min : max;
};
var startAnimation = function (animation, next) {
activeAnimation && activeAnimation.stop();
activeAnimation = animation.start({
update: update,
complete: function () {
if (next) {
next();
return;
}
complete();
}
});
};
var startSpring = function (props) {
startAnimation(spring(__assign$2(__assign$2({}, props), {
stiffness: bounceStiffness,
damping: bounceDamping,
restDelta: restDelta
})));
};
if (isOutOfBounds(from)) {
startSpring({
from: from,
velocity: velocity,
to: boundaryNearest(from)
});
} else {
var to = power * velocity + from;
if (typeof modifyTarget !== 'undefined') {
to = modifyTarget(to);
modifyTarget = void 0;
velocity = (to - from) / power;
}
var animation = decay({
from: from,
velocity: velocity,
timeConstant: timeConstant,
power: power,
restDelta: restDelta,
modifyTarget: modifyTarget
});
var next = void 0;
if (isOutOfBounds(to)) {
var boundary_1 = boundaryNearest(to);
var heading_1 = boundary_1 == min ? -1 : 1;
animation = animation.while(function (v) {
prev = current;
velocity = velocityPerSecond(v - prev, getFrameData().delta);
current = v;
return boundary_1 - v * heading_1 > 0;
});
next = function () {
return startSpring({
from: current,
to: boundary_1,
velocity: velocity
});
};
}
startAnimation(animation, next);
}
return {
stop: function () {
return activeAnimation && activeAnimation.stop();
}
};
});
};
/*#__PURE__*/createVectorAction(inertia, {
from: number.test,
velocity: number.test,
min: number.test,
max: number.test,
damping: number.test,
stiffness: number.test,
modifyTarget: function (func) {
return typeof func === 'function';
}
});
var scrubber = function (_a) {
var _b = _a.from,
from = _b === void 0 ? 0 : _b,
_c = _a.to,
to = _c === void 0 ? 1 : _c,
_d = _a.ease,
ease = _d === void 0 ? linear : _d,
_e = _a.reverseEase,
reverseEase = _e === void 0 ? false : _e;
if (reverseEase) {
ease = createReversedEasing(ease);
}
return action(function (_a) {
var update = _a.update;
return {
seek: function (progress) {
return update(progress);
}
};
}).pipe(ease, function (v) {
return mix(from, to, v);
});
};
var vectorScrubber = /*#__PURE__*/createVectorAction(scrubber, {
ease: function (func) {
return typeof func === 'function';
},
from: number.test,
to: number.test
});
var clampProgress = /*#__PURE__*/clamp$1(0, 1);
var tween = function (props) {
if (props === void 0) {
props = {};
}
return action(function (_a) {
var update = _a.update,
complete = _a.complete;
var _b = props.duration,
duration = _b === void 0 ? 300 : _b,
_c = props.ease,
ease = _c === void 0 ? easeOut : _c,
_d = props.flip,
flip = _d === void 0 ? 0 : _d,
_e = props.loop,
loop = _e === void 0 ? 0 : _e,
_f = props.yoyo,
yoyo = _f === void 0 ? 0 : _f,
_g = props.repeatDelay,
repeatDelay = _g === void 0 ? 0 : _g;
var _h = props.from,
from = _h === void 0 ? 0 : _h,
_j = props.to,
to = _j === void 0 ? 1 : _j,
_k = props.elapsed,
elapsed = _k === void 0 ? 0 : _k,
_l = props.flipCount,
flipCount = _l === void 0 ? 0 : _l,
_m = props.yoyoCount,
yoyoCount = _m === void 0 ? 0 : _m,
_o = props.loopCount,
loopCount = _o === void 0 ? 0 : _o;
var playhead = vectorScrubber({
from: from,
to: to,
ease: ease
}).start(update);
var currentProgress = 0;
var process;
var isActive = false;
var reverseAnimation = function (reverseEase) {
var _a;
if (reverseEase === void 0) {
reverseEase = false;
}
_a = [to, from], from = _a[0], to = _a[1];
playhead = vectorScrubber({
from: from,
to: to,
ease: ease,
reverseEase: reverseEase
}).start(update);
};
var isTweenComplete = function () {
var isComplete = isActive && elapsed > duration + repeatDelay;
if (!isComplete) return false;
if (isComplete && !loop && !flip && !yoyo) return true;
elapsed = duration - (elapsed - repeatDelay);
if (loop && loopCount < loop) {
loopCount++;
return false;
} else if (flip && flipCount < flip) {
flipCount++;
reverseAnimation();
return false;
} else if (yoyo && yoyoCount < yoyo) {
yoyoCount++;
reverseAnimation(yoyoCount % 2 !== 0);
return false;
}
return true;
};
var updateTween = function () {
currentProgress = clampProgress(progress(0, duration, elapsed));
playhead.seek(currentProgress);
};
var startTimer = function () {
isActive = true;
process = sync.update(function (_a) {
var delta = _a.delta;
elapsed += delta;
updateTween();
if (isTweenComplete()) {
cancelSync.update(process);
complete && sync.update(complete, false, true);
}
}, true);
};
var stopTimer = function () {
isActive = false;
if (process) cancelSync.update(process);
};
startTimer();
return {
isActive: function () {
return isActive;
},
getElapsed: function () {
return clamp$1(0, duration, elapsed);
},
getProgress: function () {
return currentProgress;
},
stop: function () {
stopTimer();
},
pause: function () {
stopTimer();
return this;
},
resume: function () {
if (!isActive) startTimer();
return this;
},
seek: function (newProgress) {
elapsed = mix(0, duration, newProgress);
sync.update(updateTween, false, true);
return this;
},
reverse: function () {
reverseAnimation();
return this;
}
};
});
};
var physics = function (props) {
if (props === void 0) {
props = {};
}
return action(function (_a) {
var complete = _a.complete,
update = _a.update;
var _b = props.acceleration,
acceleration = _b === void 0 ? 0 : _b,
_c = props.friction,
friction = _c === void 0 ? 0 : _c,
_d = props.velocity,
velocity = _d === void 0 ? 0 : _d,
springStrength = props.springStrength,
to = props.to;
var _e = props.restSpeed,
restSpeed = _e === void 0 ? 0.001 : _e,
_f = props.from,
from = _f === void 0 ? 0 : _f;
var current = from;
var process = sync.update(function (_a) {
var delta = _a.delta;
var elapsed = Math.max(delta, 16);
if (acceleration) velocity += velocityPerFrame(acceleration, elapsed);
if (friction) velocity *= Math.pow(1 - friction, elapsed / 100);
if (springStrength !== undefined && to !== undefined) {
var distanceToTarget = to - current;
velocity += distanceToTarget * velocityPerFrame(springStrength, elapsed);
}
current += velocityPerFrame(velocity, elapsed);
update(current);
var isComplete = restSpeed !== false && (!velocity || Math.abs(velocity) <= restSpeed);
if (isComplete) {
cancelSync.update(process);
complete();
}
}, true);
return {
set: function (v) {
current = v;
return this;
},
setAcceleration: function (v) {
acceleration = v;
return this;
},
setFriction: function (v) {
friction = v;
return this;
},
setSpringStrength: function (v) {
springStrength = v;
return this;
},
setSpringTarget: function (v) {
to = v;
return this;
},
setVelocity: function (v) {
velocity = v;
return this;
},
stop: function () {
return cancelSync.update(process);
}
};
});
};
/*#__PURE__*/createVectorAction(physics, {
acceleration: number.test,
friction: number.test,
velocity: number.test,
from: number.test,
to: number.test,
springStrength: number.test
});
var listen = function (element, events, options) {
return action(function (_a) {
var update = _a.update;
var eventNames = events.split(' ').map(function (eventName) {
element.addEventListener(eventName, update, options);
return eventName;
});
return {
stop: function () {
return eventNames.forEach(function (eventName) {
return element.removeEventListener(eventName, update, options);
});
}
};
});
};
var defaultPointerPos = function () {
return {
clientX: 0,
clientY: 0,
pageX: 0,
pageY: 0,
x: 0,
y: 0
};
};
var eventToPoint = function (e, point) {
if (point === void 0) {
point = defaultPointerPos();
}
point.clientX = point.x = e.clientX;
point.clientY = point.y = e.clientY;
point.pageX = e.pageX;
point.pageY = e.pageY;
return point;
};
var points = [/*#__PURE__*/defaultPointerPos()];
if (typeof document !== 'undefined') {
var updatePointsLocation = function (_a) {
var touches = _a.touches;
var numTouches = touches.length;
points.length = 0;
for (var i = 0; i < numTouches; i++) {
var thisTouch = touches[i];
points.push(eventToPoint(thisTouch));
}
};
listen(document, 'touchstart touchmove', {
passive: true,
capture: true
}).start(updatePointsLocation);
}
var point = /*#__PURE__*/defaultPointerPos();
if (typeof document !== 'undefined') {
var updatePointLocation = function (e) {
eventToPoint(e, point);
};
listen(document, 'mousedown mousemove', true).start(updatePointLocation);
}
/* eslint-disable @typescript-eslint/no-empty-function */
const $149c1bd638913645$var$popmotionEasing = {
anticipate: anticipate,
backIn: backIn,
backInOut: backInOut,
backOut: backOut,
circIn: circIn,
circInOut: circInOut,
circOut: circOut,
easeIn: easeIn,
easeInOut: easeInOut,
easeOut: easeOut,
linear: linear
};
const $149c1bd638913645$var$DATASET_KEY = "animateGridId";
// in order to account for scroll, (which we're not listening for)
// always cache the item's position relative
// to the top and left of the grid container
const $149c1bd638913645$var$getGridAwareBoundingClientRect = (gridBoundingClientRect, el) => {
const {
top: top,
left: left,
width: width,
height: height
} = el.getBoundingClientRect();
const rect = {
top: top,
left: left,
width: width,
height: height
};
rect.top -= gridBoundingClientRect.top;
rect.left -= gridBoundingClientRect.left;
// if an element is display:none it will return top: 0 and left:0
// rather than saying it's still in the containing element
// so we need to use Math.max to make sure the coordinates stay
// within the container
rect.top = Math.max(rect.top, 0);
rect.left = Math.max(rect.left, 0);
return rect;
};
// the function used during the tweening
const $149c1bd638913645$var$applyCoordTransform = (el, {
translateX: translateX,
translateY: translateY,
scaleX: scaleX,
scaleY: scaleY
}, {
immediate: immediate
} = {}) => {
const isFinished = translateX === 0 && translateY === 0 && scaleX === 1 && scaleY === 1;
const styleEl = () => {
el.style.transform = isFinished ? "" : `translateX(${translateX}px) translateY(${translateY}px) scaleX(${scaleX}) scaleY(${scaleY})`;
};
if (immediate) styleEl();else (sync$1).render(styleEl);
const firstChild = el.children[0];
if (firstChild) {
const styleChild = () => {
firstChild.style.transform = isFinished ? "" : `scaleX(${1 / scaleX}) scaleY(${1 / scaleY})`;
};
if (immediate) styleChild();else (sync$1).render(styleChild);
}
};
const $149c1bd638913645$export$cfa74da6327324bf = (container, {
duration = 250,
stagger = 0,
easing = "easeInOut",
onStart = () => {},
onEnd = () => {}
} = {}) => {
if (!$149c1bd638913645$var$popmotionEasing[easing]) throw new Error(`${easing} is not a valid easing name`);
let mutationsDisabled = false;
const disableMutationsWhileFunctionRuns = func => {
mutationsDisabled = true;
func();
setTimeout(() => {
mutationsDisabled = false;
}, 0);
};
// all cached position data, and in-progress tween data, is stored here
const cachedPositionData = {};
// initially and after every transition, record element positions
const recordPositions = elements => {
const gridBoundingClientRect = container.getBoundingClientRect();
Array.from(elements).forEach(el => {
if (typeof el.getBoundingClientRect !== "function") return;
if (!el.dataset[$149c1bd638913645$var$DATASET_KEY]) {
const newId = `${Math.random()}`;
el.dataset[$149c1bd638913645$var$DATASET_KEY] = newId;
}
const animateGridId = el.dataset[$149c1bd638913645$var$DATASET_KEY];
if (!cachedPositionData[animateGridId]) cachedPositionData[animateGridId] = {};
const rect = $149c1bd638913645$var$getGridAwareBoundingClientRect(gridBoundingClientRect, el);
cachedPositionData[animateGridId].rect = rect;
cachedPositionData[animateGridId].gridBoundingClientRect = gridBoundingClientRect;
});
};
recordPositions(container.children);
const throttledResizeListener = (lodash_throttle)(() => {
const bodyElement = document.querySelector("body");
const containerIsNoLongerInPage = bodyElement && !bodyElement.contains(container);
if (!container || containerIsNoLongerInPage) window.removeEventListener("resize", throttledResizeListener);
recordPositions(container.children);
}, 250);
window.addEventListener("resize", throttledResizeListener);
const throttledScrollListener = (lodash_throttle)(() => {
recordPositions(container.children);
}, 20);
container.addEventListener("scroll", throttledScrollListener);
const mutationCallback = mutationsList => {
if (mutationsList !== "forceGridAnimation") {
// check if we care about the mutation
const relevantMutationHappened = mutationsList.filter(m => m.attributeName === "class" || m.addedNodes.length || m.removedNodes.length).length;
if (!relevantMutationHappened) return;
if (mutationsDisabled) return;
}
const gridBoundingClientRect = container.getBoundingClientRect();
const childrenElements = Array.from(container.children);
// stop current transitions and remove transforms on transitioning elements
childrenElements.filter(el => {
const itemPosition = cachedPositionData[el.dataset[$149c1bd638913645$var$DATASET_KEY]];
if (itemPosition && itemPosition.stopTween) {
itemPosition.stopTween();
delete itemPosition.stopTween;
return true;
}
}).forEach(el => {
el.style.transform = "";
const firstChild = el.children[0];
if (firstChild) firstChild.style.transform = "";
});
const animatedGridChildren = childrenElements.map(el => ({
childCoords: {},
el: el,
boundingClientRect: $149c1bd638913645$var$getGridAwareBoundingClientRect(gridBoundingClientRect, el)
})).filter(({
el: el,
boundingClientRect: boundingClientRect
}) => {
const itemPosition = cachedPositionData[el.dataset[$149c1bd638913645$var$DATASET_KEY]];
// don't animate the initial appearance of elements,
// just cache their position so they can be animated later
if (!itemPosition) {
recordPositions([el]);
return false;
} else if (boundingClientRect.top === itemPosition.rect.top && boundingClientRect.left === itemPosition.rect.left && boundingClientRect.width === itemPosition.rect.width && boundingClientRect.height === itemPosition.rect.height)
// if it hasn't moved, dont animate it
return false;
return true;
});
// having more than one child in the animated item is not supported
animatedGridChildren.forEach(({
el: el
}) => {
if (Array.from(el.children).length > 1) throw new Error("Make sure every grid item has a single container element surrounding its children");
});
if (!animatedGridChildren.length) return;
const animatedElements = animatedGridChildren.map(({
el: el
}) => el);
disableMutationsWhileFunctionRuns(() => onStart(animatedElements));
const completionPromises = [];
animatedGridChildren // do this measurement first so as not to cause layout thrashing
.map(data => {
const firstChild = data.el.children[0];
// different transform origins give different effects. "50% 50%" is default
if (firstChild) data.childCoords = $149c1bd638913645$var$getGridAwareBoundingClientRect(gridBoundingClientRect, firstChild);
return data;
}).forEach(({
el: el,
boundingClientRect: {
top: top,
left: left,
width: width,
height: height
},
childCoords: {
top: childTop,
left: childLeft
}
}, i) => {
const firstChild = el.children[0];
const itemPosition = cachedPositionData[el.dataset[$149c1bd638913645$var$DATASET_KEY]];
const coords = {
scaleX: itemPosition.rect.width / width,
scaleY: itemPosition.rect.height / height,
translateX: itemPosition.rect.left - left,
translateY: itemPosition.rect.top - top
};
el.style.transformOrigin = "0 0";
if (firstChild && childLeft === left && childTop === top) firstChild.style.transformOrigin = "0 0";
let cachedResolve;
const completionPromise = new Promise(resolve => {
cachedResolve = resolve;
});
completionPromises.push(completionPromise);
$149c1bd638913645$var$applyCoordTransform(el, coords, {
immediate: true
});
// now start the animation
const startAnimation = () => {
const {
stop: stop
} = (tween)({
from: coords,
to: {
translateX: 0,
translateY: 0,
scaleX: 1,
scaleY: 1
},
duration: duration,
ease: $149c1bd638913645$var$popmotionEasing[easing]
}).start({
update: transforms => {
$149c1bd638913645$var$applyCoordTransform(el, transforms);
// this helps prevent layout thrashing
(sync$1).postRender(() => recordPositions([el]));
},
complete: cachedResolve
});
itemPosition.stopTween = stop;
};
if (typeof stagger !== "number") startAnimation();else {
const timeoutId = setTimeout(() => {
(sync$1).update(startAnimation);
}, stagger * i);
itemPosition.stopTween = () => clearTimeout(timeoutId);
}
});
Promise.all(completionPromises).then(() => {
onEnd(animatedElements);
});
};
const observer = new MutationObserver(mutationCallback);
observer.observe(container, {
childList: true,
attributes: true,
subtree: true,
attributeFilter: ["class"]
});
const unwrapGrid = () => {
window.removeEventListener("resize", throttledResizeListener);
container.removeEventListener("scroll", throttledScrollListener);
observer.disconnect();
};
const forceGridAnimation = () => mutationCallback("forceGridAnimation");
return {
unwrapGrid: unwrapGrid,
forceGridAnimation: forceGridAnimation
};
};
const grid = document.querySelector(".tiles");
$149c1bd638913645$export$cfa74da6327324bf(grid);
//const scroll = new LocomotiveScroll();
document.addEventListener("DOMContentLoaded", function () {
window.addEventListener('scroll', function () {
if (window.scrollY > 57) {
document.getElementById('main-nav').classList.add('fixed-top');
} else {
document.getElementById('main-nav').classList.remove('fixed-top');
}
});
});
jQuery(document).ready(function ($) {
if ($(window).width() > 900) {
$('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left', "-" + $('#content').css('margin-left'));
$('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right', "-" + $('#content').css('margin-right'));
}
window.addEventListener('resize', function () {
if ($(window).width() > 900) {
$('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left', "-" + $('#content').css('margin-left'));
$('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right', "-" + $('#content').css('margin-right'));
}
});
function expandTiles() {
var tiles = $('.tile');
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -6,8 +6,8 @@ import "_count-up";
import { wrapGrid } from 'animate-css-grid'
//const grid = document.querySelector(".tiles");
//wrapGrid(grid);
const grid = document.querySelector(".tiles");
wrapGrid(grid);
//const scroll = new LocomotiveScroll();
......@@ -23,12 +23,19 @@ document.addEventListener("DOMContentLoaded", function() {
jQuery(document).ready(function($) {
$('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left'));
$('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right'));
window.addEventListener('resize', function() {
if ($(window).width() > 900) {
$('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left'));
$('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right'));
}
window.addEventListener('resize', function() {
if ($(window).width() > 900) {
$('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left'));
$('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right'));
}
});
function expandTiles(){
var tiles = $('.tile');
......
......@@ -66,12 +66,12 @@
overflow: hidden;
margin-bottom: 15px;
}
.large{
color: #333333;
font-size: 40px;
line-height: 48px;
}
.large{
color: #333333;
font-size: 40px;
line-height: 48px;
}
}
......@@ -235,14 +235,24 @@
.the-numbers{
margin-left: -12px;
margin-right: -12px;
@media (max-width: 900px) {
margin-left: -50px;
margin-right: -50px;
}
.wp-block-columns{
gap: 0em;
@media (max-width: 900px) {
flex-wrap: wrap!important;
}
}
.wp-block-column{
padding: 50px;
background-color: #7AA6AD;
color: #fff;
@media (max-width: 900px) {
flex-basis: 50% !important;
}
}
.wp-block-column:nth-of-type(2){
background-color: #C2B59B;
......@@ -283,6 +293,7 @@
background-color: #333333;
margin: 0px -25%;
padding: 40px 0%;
h2{
text-transform: uppercase;
color: #fff;
......@@ -290,12 +301,15 @@
line-height: 72px;
font-weight: 400;
margin-bottom: 20px;
padding: 0px 2%;
padding: 0px 25%;
}
p.first-of-type{
color: #fff;
font-size: 20px;
line-height: 24px;
padding: 0px 20%;
padding: 0px 25%;
}
}
......
.tiles{
display: grid;
grid-template-columns: auto auto auto;
column-width: 33%;
grid-template-columns: 33.3% 33.3% 33.3%;
column-width: 33.3%;
column-gap: 0px;
grid-auto-flow: dense;
grid-template-rows: masonry;
margin-top: 40px;
max-width: 100vw;
max-width: 1300px;
margin: auto;
margin-top: 40px;
transition: .5s;
background: #333;
@media (max-width: 1300px) {
max-width:100vw;
}
@media (max-width: 800px) {
width: 100vw;
display: block;
height: auto;
}
}
.tile {
display: inline-grid;
margin: 0px;
......@@ -20,6 +30,10 @@
vertical-align: top;
grid-column-end: span 1;
grid-row-end: span 1;
height: 275px;
@media (max-width: 800px) {
display: block;
}
.tile_image{
background-size: cover;
background-position: center;
......@@ -29,9 +43,132 @@
}
.hover_content{
opacity: 0;
@media (max-width: 800px) {
opacity: 1;
}
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
padding: 20px;
background-color: rgba(0,0,0,0.6);
height: 100%;
h3{
color: #fff;
font-size: 20px;
line-height: 24px;
text-transform: uppercase;
font-family: 'TradeGothic';
text-align: left;
}
p{
color: #fff;
font-size: 20px;
line-height: 24px;
font-weight: 400;
font-family: 'TradeGothic';
max-width: 70%;
text-align: left;
}
}
.tile_content{
display: none;
flex-direction: column;
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
padding: 70px;
@media (max-width: 1300px) {
padding: 40px;
}
h3{
color: #fff;
font-size: 30px;
line-height: 36px;
text-transform: uppercase;
font-family: 'TradeGothic';
text-align: left;
@media (max-width: 800px) {
text-align: center;
font-size: 20px;
line-height: 24px;
margin-bottom: 30px;
}
}
p{
color: #fff;
font-size: 20px;
line-height: 24px;
font-weight: 400;
font-family: 'TradeGothic';
text-align: left;
@media (max-width: 800px) {
text-align: center;
font-size: 16px;
line-height: 19px;
}
}
.image{
height: 100%;
width: 40%;
display: inline-block;
margin-right: 30px;
@media (max-width: 800px) {
width: 80%;
height: auto;
margin: auto;
}
}
.tile_content.mobile{
display: none;
}
.title-mobile{
display: none;
@media (max-width: 800px) {
display: block;
}
}
.text{
display:flex;
flex-direction: column;
width: 55%;
justify-content: space-between;
flex-wrap: wrap;
height: 90%;
@media (max-width: 800px) {
display:block;
margin-top: 30px;
height: auto;
width: 100%;
}
h3{
@media (max-width: 800px) {
display: none;
}
}
.whole-story{
align-items: flex-end;
display: flex;
align-content: flex-end;
flex-wrap: wrap;
font-size: 24px;
line-height: 29px;
color: #fff;
text-decoration: none;
font-weight: 400;
@media (max-width: 800px) {
display: block;
text-align: center;
margin-top: 100px;
}
}
.whole-story:hover{
text-decoration: underline;
}
}
}
}
......@@ -39,8 +176,6 @@
.tile:hover {
.hover_content{
opacity: 1;
background-color: rgba(0,0,0,0.6);
height: 100%;
}
}
......@@ -50,39 +185,56 @@
.tile.expand {
grid-column-end: span 2;
grid-row-end: span 2;
height: 550px;
@media (max-width: 800px) {
height: auto;
}
.hover_content{
display: none;
}
.tile_content{
margin-top: -16px;
display: block;
display: flex;
height: 100%;
background-color: rgba(0,0,0,0.7);
@media (max-width: 800px) {
display: none;
}
}
.tile_image{
height: 550px;
@media (max-width: 800px) {
height: 275px;
}
}
}
.tile.expand:hover {
.hover_content{
.tile_content.mobile{
display: none;
}
.tile_content{
display: block;
height: 100%;
background-color: rgba(0,0,0,0.7);
background-color: #333;
@media (max-width: 800px) {
display: block;
}
}
}
// .last-expand{
// .tile:nth-of-type(4){
// grid-column-end:2;
// .tile.expand:hover {
// .hover_content{
// display: none;
// }
// .tile:nth-of-type(5){
// grid-row-end: 4;
// grid-column-end:2;
// .tile_content{
// display: flex;
// @media (max-width: 800px) {
// display: none;
// }
// }
// }
.last-expand{
.tile:nth-of-type(4){
grid-column-end:2;
}
.tile:nth-of-type(5){
grid-row-end: 4;
grid-column-end:2;
}
}
......