anova

/** @return IntersectionObserver */
function createObserver(p_threshold) {
  return new IntersectionObserver(
    (entries) => {
      entries.forEach((/** @type IntersectionObserverEntry */ entry) => {
        if (entry.isIntersecting) {
          const eventIntersecting = new CustomEvent("intersecting");
          entry.target.dispatchEvent(eventIntersecting);
          return;
        }

anova

// define the observer
const observer = new IntersectionObserver((entries) => {
    entries.forEach((/** @type IntersectionObserverEntry */ entry) => {
      if (entry.isIntersecting) {
        const eventIntersecting = new CustomEvent("intersecting");
        entry.target.dispatchEvent(eventIntersecting);
        return;
      }
      const eventNotIntersecting = new CustomEvent("not-intersecting");
      entry.target.dispatchEvent(eventNotIntersecting);

anova

const the_form = document.getElementById('the_form');
const formData = new FormData(the_form);
fetch('the-handler.php',{
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => {
  console.log('data is:', data);
});

anova

<style>
.instagram-link {
  display: block;
  background-image: linear-gradient(49.12deg, #fd5 6.61%, #FF543E 50.05%, #C837AB 93.49%);
  border-radius: 50%;
  width: 45px;
  height: 45px;
}
</style>

anova

function documentScrolled() {
  console.log('document is scrolled');
  document.removeEventListener('scroll', documentScrolled);
}
document.addEventListener('scroll', documentScrolled);

anova

<?php
// get_pages
$pages = get_pages( [
  'child_of' => $id,
  //'sort_column' => 'rand',
  'sort_column' => 'menu_order',
  'post_status' => 'publish,draft',
] );

// WP_Query

anova

const breakpoint_lg = window.matchMedia('(min-width: 992px)');
breakpoint_lg.addEventListener('change', () => {
  if(breakpoint_lg.matches) {
    console.log('lg');
    return;
  }
  console.log('not lg');
});

anova

/*
Usage:
<span class="u-font-size" style="--min: 15px; --max: 50px;">Example font size</span>
*/
.u-font-size[style*="--min"][style*="--max"]{
    font-size: calc(calc(var(--min) * 1px) + (var(--max) - var(--min)) * ((100vw - 300px) / (1600 - 300)));
}

anova

/*
Usage:
<div class="u-spacer" style="--xs: 10px; --sm: 15px; --md: 20px; --lg: 25px; --xl: 40px; --xxl: 50px;"></div>

Note:
xs, sm, md, lg, xl, xxl breakpoints taken from bootstrap
https://getbootstrap.com/docs/5.1/layout/breakpoints/#available-breakpoints
*/
.u-spacer {
    &[style*="--xs"] {

anova

:root {
  --color-cultured-white: 242, 244, 247;
}

.element {
  /*
  How do I apply opacity to a CSS color variable?
  https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable
  https://stackoverflow.com/a/41265350 - BoltClock's answer
  */