nicubarbaros

/* eslint-disable */
!(function(D, u) {
  "object" == typeof exports && "undefined" != typeof module
    ? u(exports)
    : "function" == typeof define && define.amd
    ? define(["exports"], u)
    : u(((D = D || self).window = D.window || {}));
})(this, function(e) {
  "use strict";
  var v = "";

nicubarbaros

$breakpoints: (
  'phone': 400px,
  'phone-wide': 480px,
  'phablet': 560px,
  'tablet-small': 640px,
  'tablet': 768px,
  'tablet-wide': 1024px,
  'desktop': 1248px,
  'desktop-wide': 1440px,
  'desktop-large': 1680px

nicubarbaros

import { useEffect, useRef } from "react";
import LocomotiveScroll, {
  LocomotiveScrollOptions,
  Scroll,
} from "locomotive-scroll";
import "locomotive-scroll/src/locomotive-scroll.scss";

type UseLocomotiveScrollHook = [React.RefObject<Scroll>];

type Props = {

nicubarbaros

import React from "react";
import "../styles/home.scss";
import Home from "../containers/Home";

const Index = () => {
  return (
    <>
      <Home />
    </>
  );

nicubarbaros

Sass Architecture Structure

sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   ...                  # Etc…
|

nicubarbaros

/*
 * Easing Functions - inspired from http://gizma.com/easing/
 * only considering the t value for the range [0, 1] => [0, 1]
 */
EasingFunctions = {
  // no easing, no acceleration
  linear: t => t,
  // accelerating from zero velocity
  easeInQuad: t => t*t,
  // decelerating to zero velocity

nicubarbaros

@function z($name) {
    @if index($z-indexes, $name) {
        @return (length($z-indexes) - index($z-indexes, $name)) + 1;
    } @else {
        @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
        @return null;
    }
}
$z-indexes: (
    "outdated-browser",

nicubarbaros

.placement-container {
  display: grid;
  width: 100vw;
  height: 100vh;

  place-items: center;
}

.grid-container {
  display: grid;