pigeonfresh

@import "utils/fluid";

.element {
  // Create a fluid value between the viewport widths 375px and 1920px (which are defined as defaults in the function)
  padding: fluid(10px, 40px);
  
  // Create a fluid value between 375px and 1024px
  margin: fluid(10px, 40px, 375px, 1024px);
}

pigeonfresh

https://caniuse.com/

pigeonfresh

if (process.env.NODE_ENV === 'development') {
  import('qa-tools').then((tools: any) => {
    tools.gridOverlay();
  }).catch(() => console.warn('something is wrong 🙄'))
}

pigeonfresh

@function strip-unit($number) {
  @if type-of($number) == "number" and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

@function fluid(
  $startValue,
  $endValue,

pigeonfresh

@mixin light-color-scheme {
  background: #fff;
  color: #111;
}

@mixin dark-color-scheme {
  background: #111;
  color: #fff;
}

pigeonfresh

Atoms:

Type related:

All copy related items to build up a page are managed with this collection of items. Options with an * are mandatory/require configuration by the author or developer

Heading

Authorable options:

• type* (h1 to h6)
• copy* (string|html)

pigeonfresh

import { gsap } from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import AbstractComponent from '../AbstractComponent';

gsap.registerPlugin(ScrollTrigger);

export default class Visual extends AbstractComponent {
  public static readonly displayName: string = 'visual';
  private static readonly offset: number = 200;
  private picture: HTMLPictureElement | null = this.getElement('picture');

pigeonfresh

if (process.env.NODE_ENV === 'development') {
      import('qa-tools').then((tools: any) => {
        const props = {
          maxWidth: 'var(--content-wrapper-max-width)',
          padding: 'var(--content-wrapper-side-padding)',
          gridGap: 'var(--grid-gap)',
          gridColumns: 'var(--columns)',
          color: 'var(--color-violet)',
        };
        tools.gridOverlay(props);

pigeonfresh

import { gsap, Power3 } from 'gsap';

export const baseTransition = (
  elements: HTMLElement | ReadonlyArray<HTMLElement>,
  props?: gsap.AnimationVars,
): gsap.core.Animation =>
  gsap.from(elements, {
    duration: 1.2,
    y: 40,
    ease: Power3.easeOut,

pigeonfresh

import AbstractBlock from '../AbstractBlock';
import { scrollTransition, baseTransition } from '../../../util/transitions';

export default class CTextBlock extends AbstractBlock {
  public static readonly displayName: string = 'c-text-block';

  constructor(el: HTMLElement) {
    super(el);
    const transition = baseTransition(this.getElements('[data-transition-item]'));
    scrollTransition(el, transition);