nicubarbaros

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

  place-items: center;
}

.grid-container {
  display: grid;

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

/*
 * 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

Sass Architecture Structure

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

nicubarbaros

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

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

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

$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

/* 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

// create a bookmark and use this code as the URL, you can now toggle the css on/off
// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
javascript: (function() {
	var domStyle = document.createElement("style");
	domStyle.append(
			'* { color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }\
            * * { background-color: rgba(0,255,0,.2) !important; }\
            * * * { background-color: rgba(0,0,255,.2) !important; }\
            * * * * { background-color: rgba(255,0,255,.2) !important; }\
            * * * * * { background-color: rgba(0,255,255,.2) !important; }\

nicubarbaros

import { convertFromRaw, convertToRaw, ContentState } from 'draft-js';

const getIndicesOf = (searchStr, str, caseSensitive) => {
  let tempStr = str;
  let tempSearchStr = searchStr;
  const searchStrLen = tempSearchStr.length;
  if (searchStrLen === 0) {
    return [];
  }
  let startIndex = 0;