pigeonfresh

/*
 * This mixin is used to calculate the max-width of an element within it's wrapper.
 *
 * The columns have a flexible width
 * The columns are divided by a gutter
 * The gutters have a fixed width of 40px
 * 
 */

@mixin column($columnsWanted, $total: 12) {

pigeonfresh

import { TimelineMax, TimelineLite, TweenMax } from 'gsap';

export default class LerpedTimeline {
  public progress: number = 0;
  public readonly timeline: TimelineMax | TimelineLite;
  private readonly ease: number;
  private currentProgress: number = 0;

  constructor(timeline, ease: number = 0.1) {
    this.timeline = timeline;

pigeonfresh

:root {
  font-size: 100%;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

pigeonfresh

const formatNumber = number => (num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,'))
console.info(formatNumber(2665)) // 2,665
console.info(formatNumber(102665)) // 102,665
console.info(formatNumber(111102665)) // 111,102,665

pigeonfresh

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
quote_type = single

pigeonfresh

# For the Hero the author has the option to upload 3 images
# Appropriate labels could be Mobile, Tablet and Desktop
# Mobile (dimensions: 1024x768) would be the default image
# Tablet (dimensions: 1400x1024) would be visible for viewports >= 768
# Desktop (dimension: 1920x1080) would be for viewports >= 1024

hero-image:
  source:
    - srcset: "http://placehold.it/1920x1080"
      media: "(min-width: 1024px)"

pigeonfresh

$mediaQueryHacks: (maxWidth767, '(max-width: 767px)');

@mixin respond-to($name, $list: $mediaQueries) {
  @if map-has-key($mediaQueries, $name) {
    @media #{map-get($mediaQueries, $name)} {
      @content;
    }
  } @else {
    @error "MediaQuery #{$name} does not exist";
  }

pigeonfresh

import { MubanTransitionController, IMubanTransitionMixin } from 'muban-transition-component';
import { TimelineMax } from 'gsap';
import C02TitleAndText from './C02TitleAndText';
import { verticalFadeIn } from '../../../util/transition-helpers';

class C02TitleAndTextTransitionController extends MubanTransitionController {
  protected setupTransitionInTimeline(
    timeline: TimelineMax,
    parent: C02TitleAndText,
    id: string,

pigeonfresh

yarn config set ignore-scripts false; yarn; yarn config set ignore-scripts true; yarn dev;
yarn add muban-transition-component;
yarn add gsap@2.1.3;
yarn add body-scroll-lock;
yarn add @types/body-scroll-lock;

pigeonfresh

.grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: map_get($gridSpacing, SMALL) * -0.5;
  margin-right: map_get($gridSpacing, SMALL) * -0.5;
}
.col {
  flex: 0 0 auto;
  width: 100%;
  padding-right: (map_get($gridSpacing, SMALL) / 2);