BroFox86

@mixin triangle($direction, $color, $sizeW, $sizeH: $sizeW) {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;

  @if $direction == top {
    border-width: 0 ($sizeW / 2) $sizeH ($sizeW / 2);
    border-color: transparent transparent $color transparent;

BroFox86

// Pause current track when another track starts playing.
document.addEventListener("play", ({ target }) => {
    const audios = document.querySelectorAll("audio");

    for ( const audio of audios ) {

      if ( audio !== target ) {
        audio.pause();
      }
    }

BroFox86

{% macro respImg(
  class,
  srcset,
  sizes,
  src,
  width = "", 
  height = "", 
  loading = "",
  alt = ""
)%}

BroFox86

function isInViewportArea( element ) {
  const coords = getCoords( element );
  const viewportTop = pageYOffset;
  const viewportBottom = pageYOffset + document.documentElement.clientHeight;
  
  // If an element has appeared on the bottom.
  if ( viewportBottom > coords.top ) {
    return true;
  }
  

BroFox86

/* ==========================================================================
   Constructor for instantiating new DOM mutation observers.
   More info here: https://developer.mozilla.org/ru/docs/Web/API/MutationObserver
   Objects list:   https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord
   ========================================================================== */

// Select the node that will be observed for mutations
var target = document.getElementById('some-id');
 
// Create the MutationObserver

BroFox86

// 
// Responsive background image via media queries. More info here: 
// developers.google.com/web/fundamentals/design-and-ux/responsive/images
// 

.block {
  // Mobile standard image.
  background-image: url("../images/mobile.png");
  background-repeat: no-repeat;
  background-size: contain;

BroFox86

<div class="container">
  <div data-toggle="map"></div>
</div>

BroFox86

.semicircle {
  width: 200px;
  height: 100px;
  border: 10px solid gray; 
  background-color: gold;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom: 0;
  box-sizing: border-box; 
}

BroFox86

const documentHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

BroFox86

function isNumber( x ) {
  return !isNaN( parseFloat( x ) ) && isFinite( x );
}