davidhellmann

/*

// build the clamp property
const clamp = (multiMin = 0, multiMax = null) => {
  const _calcMulti = calcMulti(multiMin, multiMax || multiMin)
  const _fsMin = _calcMulti.fsMin
  const _fsMax = _calcMulti.fsMax
  return `clamp(${_fsMin}rem, calc(${_fsMin}rem + (${_fsMax} - ${_fsMin}) * ((100vw - ${screenMin}rem) / (${screenMax} - ${screenMin}))), ${_fsMax}rem)`
}
*/

davidhellmann

const path = require('path');
const fs = require('fs');
const glob = require('glob');

const srcDir = path.resolve(path.join(process.cwd(), 'src', 'components/_svg'));
const distDir = path.resolve(path.join(process.cwd(), 'src', 'components/_svg'));

function readSVG(file) {
    return fs.readFileSync(file, 'utf-8');
}

davidhellmann

/*
 * Tailwind Prose Settings
 */

const settings = require('./tailwind.settings');
const settingsColors = require('./tailwind.settings.colors');

const colorMap = {
  colorDefault: settingsColors.gray['700'],
  colorLead: settingsColors.gray['600'],

davidhellmann

.foo {
    @for $i from 1 through 24 {
        @if $i % 2 == 0 {
            &--size-#{$i} {
              grid-column: #{(24 - $i) / 2} / span #{$i};
              grid-row: #{(24 - $i) / 2} / span #{$i};
            }
        }
    }
}

davidhellmann

export const initLazyloading = (selector: string): void => {
  let images = document.querySelectorAll(selector);

  if ('IntersectionObserver' in window) {
    // Create new observer object
    let lazyImageObserver = new IntersectionObserver((entries, observer) => {
      // Loop through IntersectionObserverEntry objects
      entries.forEach((entry) => {
        // Do these if the target intersects with the root
        if (entry.isIntersecting) {

davidhellmann

.foo {
    @for $i from 1 through 24 {
        @if $i % 2 == 0 {
            &--size-#{$i} {
              grid-column: #{(24 - $i) / 2} / span #{$i};
              grid-row: #{(24 - $i) / 2} / span #{$i};
            }
        }
    }
}

davidhellmann

.foo {
    @for $i from 1 through 24 {
        &--size-#{$i} {
          grid-column: #{(24 - $i) / 2} / span #{$i};
          grid-row: #{(24 - $i) / 2} / span #{$i};
        }
    }
}

davidhellmann

// Colors
@import '../02-tools/tools.mixin.create-css-vars';

$colors: (
  'black': '#000',
  'white': '#fff',
  'ci': (
    'blue': '#0095DB',
    'blue-light': '#B9E4FA',
    'black': '#222',

davidhellmann

.foo {
 @for $i from 1 through 24 {
    &--size-#{$i} {
      grid-column: calc(#{ 25 - $i} /2) / span #{$i};
      grid-row:  calc(#{25 - $i} / 2) / span #{$i};
    }
  }
}

davidhellmann

 @for $i from 1 through 24 {
    &--size-#{$i} {
      grid-column: calc((25 - #{$i}) /2) / span #{$i};
      grid-row:  calc((25 - #{$i}) / 2) / span #{$i};
    }
  }