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
- type* (h1 to h6)
- copy* (string|html)
@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); | |
} |
https://caniuse.com/ |
if (process.env.NODE_ENV === 'development') { | |
import('qa-tools').then((tools: any) => { | |
tools.gridOverlay(); | |
}).catch(() => console.warn('something is wrong 🙄')) | |
} |
@function strip-unit($number) { | |
@if type-of($number) == "number" and not unitless($number) { | |
@return $number / ($number * 0 + 1); | |
} | |
@return $number; | |
} | |
@function fluid( | |
$startValue, | |
$endValue, |
@mixin light-color-scheme { | |
background: #fff; | |
color: #111; | |
} | |
@mixin dark-color-scheme { | |
background: #111; | |
color: #fff; | |
} |
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'); |
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); |
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, |
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); |