ryanditjia

import React from 'react'

type Props = React.HTMLAttributes<HTMLElement> & {
  as?: 'div' | 'article' | 'section'
}

export const Card: React.FC<Props> = ({
  children,
  as: Component = 'div',
  className,

ryanditjia

/* Document
 * ========================================================================== */

/**
 * Add border box sizing in all browsers (opinionated).
 */

*,
::before,
::after {

ryanditjia

// Example useStaticQuery
// this is src/components/HeaderLogo.tsx

import { graphql, Link, useStaticQuery } from 'gatsby'
import React from 'react'
import { HeaderLogoQuery } from '../types/__generated__/HeaderLogoQuery'

const query = graphql`
  query HeaderLogoQuery {
    contentfulCompanyMetadata {

ryanditjia

import React from 'react'
import { createPortal } from 'react-dom'
import { usePortal } from '../utils/usePortal'

interface Props {
  id: string
}

export const Portal: React.FC<Props> = ({ id, children }) => {
  const target = usePortal(id)

ryanditjia

const fluidFontSize = (minSize, maxSize, minVw, maxVw, unit = 'rem') => {
  const sizeDifference = maxSize - minSize
  const vwDifference = maxVw - minVw
  const minSizeWithUnit = `${minSize}${unit}`
  const maxSizeWithUnit = `${maxSize}${unit}`
  const minVwWithUnit = `${minVw}${unit}`
  const maxVwWithUnit = `${maxVw}${unit}`

  return css`
    /* Minimum font-size */

ryanditjia

/* From https://medium.com/@draganeror/iphone-x-layout-features-with-css-environment-variables-d57423433dec */

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />

padding-top: env(safe-area-inset-top);



// This WILL NOT work.
.selector {

ryanditjia

:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);

  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);

ryanditjia

<?php /* Template Name: Moirae Home */ ?>

<?php get_header(); ?>

<?php
$slider_image_1 = Kirki::get_option( mc, slider_image_1 );
$slider_image_2 = Kirki::get_option( mc, slider_image_2 );
$slider_image_3 = Kirki::get_option( mc, slider_image_3 );
$slider_image_4 = Kirki::get_option( mc, slider_image_4 );
$slider_image_5 = Kirki::get_option( mc, slider_image_5 );

ryanditjia

/*
 * import to your layout/index.js
 */

import { PureComponent } from 'react'
import { performScroll, scrollToHref } from '../../utils/helpers/scroll'

const handleHashChange = () => {
  if (window.location.hash) {
    scrollToHref(window.location.hash)

ryanditjia

import React from 'react'
import { string, node, func, shape } from 'prop-types'

import { scrollToHref } from './helpers'

const handleClick = ({ href, callback, history, event }) => {
  /* prevent normal link behavior */
  event.preventDefault()

  /* call the function */