cvan

    // References used:
    // - https://yesviz.com/devices.php
    // - https://ricostacruz.com/til/css-media-query-breakpoints
    // - https://tailwindcss.com/docs/responsive-design/#customizing-breakpoints
    screens: {
      xs: { max: '575px' }, // Mobile (iPhone 3 - iPhone XS Max).
      sm: { min: '576px', max: '897px' }, // Mobile (matches max: iPhone 11 Pro Max landscape @ 896px).
      md: { min: '898px', max: '1199px' }, // Tablet (matches max: iPad Pro @ 1112px).
      lg: { min: '1200px' }, // Desktop smallest.
      xl: { min: '1159px' }, // Desktop wide.

cvan

    // References used:
    // - https://yesviz.com/devices.php
    // - https://ricostacruz.com/til/css-media-query-breakpoints
    // - https://tailwindcss.com/docs/responsive-design/#customizing-breakpoints
    screens: {
      xs: { max: '575px' }, // Mobile (iPhone 3 - iPhone XS Max).
      sm: { min: '576px', max: '897px' }, // Mobile (matches max: iPhone 11 Pro Max landscape @ 896px).
      md: { min: '898px', max: '1199px' }, // Tablet (matches max: iPad Pro @ 1112px).
      lg: { min: '1200px' }, // Desktop smallest.
      xl: { min: '1159px' }, // Desktop wide.

cvan

.grid {
  display: grid;
}

.grid-dense {
  grid-auto-flow: dense;
}

.grid-gap-0 {

cvan

$spacings: (
  xxl: 110,
  xl: 80,
  l: 60,
  m: 40,
  s: 20,
  xs: 10,
  xx: 8,
);

cvan

[data-font-size]:after {
  background: rgba(255,50,190,.9);
  color: #fff;
  content: attr(data-font-size);
}

cvan

(async function () {
  async function loadFonts () {
    if (!('FontFace' in window)) {
      return;
    }

    const fonts = [
      new FontFace('theinhardt', 'url(/fonts/akzidenz-grotesk/AkzidenzGrotesk-Light.woff2)'),  // 400
      new FontFace('theinhardt', 'url(/fonts/akzidenz-grotesk/AkzidenzGrotesk-Regular.woff2)'),  // 500
      new FontFace('theinhardt', 'url(/fonts/akzidenz-grotesk/AkzidenzGrotesk-Medium.woff2)'), // 600

cvan

[data-debug-mode='true'] * {
  outline: 1px solid cyan !important;
}

[data-debug-mode='true'] body:before {
  background: rgb(0,0,0,.85);
  color: #fff;
  content: 'standard';
  transition: all 1s;
  font-weight: 100;

cvan

const getOrigin = str => str.replace(/.*\/\//, '').replace(/:.+/, '').replace(/\/.+/, '');

const getOriginRoot = (str) => {
  const originFull = getOrigin(str);
  if (!originFull.includes('.')) {
    return str;
  }
  const originFullChunks = originFull.split('.');
  const originRoot = originFullChunks.slice(originFullChunks.length - 2, originFullChunks.length).join('.');
  return originRoot;

cvan

Self-Hosted

• tutorial using web-push npm package
• tutorial using web-push npm package
• PWA using express + gcm
• custom express app

SaaS

• tutorial using Pusher
• project using Firebase
• tutorial using Firebase

cvan

window.addEventListener('click', evt => {
  if (evt.shiftKey || evt.altKey || evt.metaKey) {
    return;
  }
  const linkEl = evt.target && evt.target.closest('a[href]');
  if (linkEl && linkEl.hostname.endsWith('vimeo.com')) {
    evt.preventDefault();
    evt.stopPropagation();
    window.location.href = linkEl.href;
  }