ahmedghazi

import React, { useEffect, useRef, useState } from "react";
// import { GatsbyImage, getImage } from "gatsby-plugin-image";
// import ClosePixelation from "close-pixelate";
import styled from "styled-components";
import clsx from "clsx";
import { useInView } from "react-intersection-observer";

const Figure = styled.figure`
  &.ready {
    img {

ahmedghazi

img{
  width: 100%;
    height: 100%;
    object-fit: cover;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

ahmedghazi

import sanityClient from "@sanity/client";

const client = sanityClient({
  projectId: process.env.GATSBY_SANITY_PROJECT_ID,
  dataset: process.env.GATSBY_SANITY_PROJECT_DATASET,
  apiVersion: "2021-08-29",
  useCdn: false,
  withCredentials: true,
  token: process.env.GATSBY_SANITY_READ_TOKEN,
});

ahmedghazi

export const modulo = (n, length) => {
  n = (n + 1) % length
  return n
}

const index = 0
const length = 20
const nextIndex = modulo(index, length)

ahmedghazi

// Creates an array from 0 to 24
const hours = [...Array(25).keys()]

ahmedghazi

@mixin render-utils-classes {
  @include render-utils-classes-base;
  @include render-utils-classes-by-breakpoint("xs", $xs);
  @include render-utils-classes-by-breakpoint("sm", $sm);
  @include render-utils-classes-by-breakpoint("md", $md);
  @include render-utils-classes-by-breakpoint("lg", $lg);
}

@mixin render-utils-classes-base {
  $spaces: "0", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl", "jumbo";

ahmedghazi

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

ahmedghazi

/** CSS **/
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition-duration: 0s !important;
    }
}

ahmedghazi

@mixin text-crop(
  $line-height: 1.3,
  $top-adjustment: 0px,
  $bottom-adjustment: 0px
) {
  // Configured in Step 1
  $top-crop: 2;
  $bottom-crop: 3;
  $crop-font-size: 12;

ahmedghazi

useEffect(() => {
    document.addEventListener("scroll", _onScroll)

    return () => document.removeEventListener("scroll", _onScroll)
  }, [])

  let prevScrollTop = 0
  const _onScroll = () => {
    // console.log(window.pageYOffset)
    if(window.pageYOffset > prevScrollTop){