thexmanxyz

{# retrieve configuration #}
{{ dump(gantry.config) }}

{# retrieve styles configuration #}
{{ dump(gantry.config.styles) }}

{# retrieve breakpoint configuration #}
{{ dump(gantry.config.styles.breakpoints) }}

{# you can also obtain particle configurations via gantry.particles #}

thexmanxyz

function multiply(arr, n) {
  if (n <= 0) { // return 0 if count is 0 or negative
    return 0;
  } else { // sum up the next n - 1 elements with the current element
    return multiply(arr, n - 1) + arr[n - 1];
  }
}

thexmanxyz

/* credits @ https://www.w3schools.com/howto/howto_css_overlay.asp */
.g-simple-overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

thexmanxyz

/* All 8 CSS-Loader (plus small version for each) pure CSS loaders in one file */
/* Uses black on white and not white on turquise like the original */
/* Add <div class="load1 loader">Loading...</div> to your HTML markup */
/* You can change the spinner with the classes load1 - load8 and load1-small - load8-small */
/* credits @ https://github.com/lukehaas/css-loaders */

/* load1 */
.async-gmaps-spinner.load1.loader,
.async-gmaps-spinner.load1-small.loader,
.async-gmaps-spinner.load1.loader:before,

thexmanxyz

/* All 12 Loading.io (plus small version for each) pure CSS loaders in one file, combined with $primary using e.g. template primary-color */
/* You can change the spinner with the classes load1 - load8 and load1-small - load8-small */
/* credits @ https://loading.io and https://github.com/loadingio/css-spinner/ */

/* circle */
.lds-circle, .lds-circle-small {
  display: inline-block;
  width: 64px;
  height: 64px;
  margin: 8px;

thexmanxyz

// If you want to explicitly trigger an animation for certain WOW.js elements again. No need to call `init()` and also not wanted (all elements are reset):
var triggerAnimation = function(selector, animation) {
  var $element = $(selector); // get element

  // re-apply animation (style and class)
  var applyAnimation = function(){
    $element = $(selector);
    $element.addClass('wow ' + animation + ' animated');
    $element.attr('style', 'visibility: visible; animation-name: ' + animation + ';');
  };

thexmanxyz

// This snippet dynamically resets animation after passing the viewport (scrolling, resizing), hence they are reanimated when viewing them again
// Helper function for adding elements to box list in WOW, credits @ https://github.com/matthieua/WOW/issues/46#issuecomment-133760823
WOW.prototype.addBox = function(element) {
  this.boxes.push(element);
};
wow = new WOW();
wow.init();

var checkWOWJsReset = function() {    
  var resetWOWJsAnimation = function() {

thexmanxyz

// If you want to explicitly trigger an animation for certain WOW.js elements again. No need to call `init()` and also not wanted (all elements are reset):
var triggerAnimation = function(selector, animation) {
  var $element = $(selector); // get element
  var element = $element[0]; // get JS element
  var newone = element.cloneNode(true); // clone it
  element.parentNode.replaceChild(newone, element); // and replace the old with clone

  $element = $(selector); // get cloned jQ element
  $element.addClass('wow ' + animation + ' animated'); // apply animations
  $element.attr('style', 'visibility: visible; animation-name: ' + animation + ';'); // and styles

thexmanxyz

<div class="lazy-load-ctn">
  <div class="spinner-grow loading-img" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <img data-src="img/yourimage.png" class="img-fluid lazy">
</div>

thexmanxyz

.opening-hours-section {
  &.cta {
    padding: 3rem 0 2.5rem 0;
    background-color: fade-out($primary, 0.1);
    .cta-inner {
      position: relative;
      padding: 2rem;
      margin: 0.5rem;
      background-color: fade-out($white, 0.15);
      &:before {