Brlaney

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/styles/*": ["./src/styles/*"],
      "@/lib/*": ["./src/lib/*"]
    },
    "target": "esnext",
    "lib": [
      "dom",

Brlaney

import * as React from 'react'
import type { AppProps } from 'next/app'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { ThemeProvider } from '@material-ui/core/styles'
import { CacheProvider } from '@emotion/react'
import CssBaseline from '@material-ui/core/CssBaseline'
import createCache from '@emotion/cache'
import theme from '@/lib/mui-theme/theme'
import '@/styles/globals.scss'

Brlaney

import * as React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document'
import createEmotionServer from '@emotion/server/create-instance'
import createCache from '@emotion/cache'
import { CacheProvider } from '@emotion/react'

function getCache() {
  const cache = createCache({ key: 'css', prepend: true })
  cache.compat = true
  return cache

Brlaney

import {
  createTheme,
  responsiveFontSizes
} from '@mui/material/styles';

const font = "'Rubik', sans-serif";

let theme = createTheme({
  palette: {
    primary: { main: '#1d2031' },

Brlaney

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

$c-primary: '#246EB9';
$c-secondary: '#16ff4c';
$c-error: '#F06543';
$c-warning: '#F5EE9E';
$c-info: '#16c9ff';
$c-bg: '#FDFFFC';
$white: #fff;
$black: #000000;

Brlaney

@import 'themes';

html,
body {
  padding: 0;
  margin: 0;
  background: $c-bg;
  color: #fff;
  font-family: $primary-font-family;
}

Brlaney

@import 'themes';

.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Brlaney

import * as React from 'react'
import type { AppProps /*, AppContext */ } from 'next/app'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { AnimatePresence } from 'framer-motion'
import theme from '@/lib/theme/theme'
import '@/styles/globals.scss'

export default function MyApp (props: AppProps) {
  const { Component, pageProps } = props

Brlaney

$breakpoints: (
  xxs: 575px,
  xs: 650px,
  sm: 725px,
  md: 800px,
  lg: 875px,
  xlg: 960px,
);

@mixin respond-above-height($breakpoint) {

Brlaney

$breakpoints: (
  xs: 600px,
  sm: 800px,
  md: 1000px,
  lg: 1200px,
  xl: 1500px,
);

@mixin respond-above-width($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {