commit 4e058a848d4701600a77044eb31660ff84634cd5
parent 58f53250d01f63cb738d81d5c7d526d2c3b0b349
Author: MTRNord <mtrnord1@gmail.com>
Date: Wed, 5 Jan 2022 19:44:30 +0100
Optimize react-spinners away in favor of a pure css loader
Diffstat:
8 files changed, 149 insertions(+), 487 deletions(-)
diff --git a/.babelrc b/.babelrc
@@ -1,14 +0,0 @@
-{
- "presets": [
- "next/babel"
- ],
- "plugins": [
- "@emotion",
- [
- "@babel/plugin-transform-typescript",
- {
- "allowDeclareFields": true
- }
- ]
- ]
-}
-\ No newline at end of file
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -8,14 +8,14 @@ export default class Header extends PureComponent {
return (
<>
<header className='bg-[#f8f8f8] dark:bg-[#06070D] flex fixed top-0 left-0 right-0 bottom-0 lg:h-20 h-52 z-[100] items-center lg:flex-row flex-col shadow-black drop-shadow-xl'>
- <span className='flex items-center h-full lg:mx-10 my-4 text-gray-900 dark:text-gray-200 font-bold'><Link href="/">Matrix Art</Link></span>
+ <span className='flex items-center h-full lg:mx-10 my-auto text-gray-900 dark:text-gray-200 font-bold'><Link href="/">Matrix Art</Link></span>
<div className='flex flex-1 items-center lg:flex-row flex-col'>
<div className='flex grow-[1] h-full relative items-center'>
<form className='w-52 text-gray-900 dark:text-gray-200'>
<div className='flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400'>
<input className='bg-transparent min-w-[1.25rem] focus:outline-none flex-[1] border-none' type="text" placeholder='Search & Discover' />
<span className='inline-flex items-center justify-center cursor-pointer'>
- <svg xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" className='fill-gray-900 dark:fill-gray-200'><path d="M0 0h24v24H0z" fill="none" /><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" className='fill-gray-900 dark:fill-gray-200'><path d="M0 0h24v24H0z" fill="none" /><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>
</span>
</div>
</form>
diff --git a/package-lock.json b/package-lock.json
@@ -13,26 +13,24 @@
"node-localstorage": "^2.2.1",
"pouchdb": "^7.2.2",
"react": "17.0.2",
- "react-dom": "17.0.2",
- "react-spinners": "^0.11.0"
+ "react-dom": "17.0.2"
},
"devDependencies": {
"@babel/plugin-transform-typescript": "^7.16.7",
- "@emotion/babel-plugin": "^11.7.2",
"@playwright/test": "^1.17.1",
"@types/cors": "^2.8.12",
- "@types/node": "17.0.5",
+ "@types/node": "17.0.8",
"@types/node-localstorage": "^1.3.0",
"@types/pouchdb": "^6.4.0",
"@types/react": "17.0.38",
- "autoprefixer": "^10.4.0",
+ "autoprefixer": "^10.4.1",
"cross-env": "^7.0.3",
"eslint": "^8.6.0",
"eslint-config-next": "12.0.7",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-unicorn": "^40.0.0",
"postcss": "^8.4.5",
- "tailwindcss": "^3.0.7",
+ "tailwindcss": "^3.0.11",
"typescript": "4.5.4"
}
},
@@ -1125,141 +1123,6 @@
"node": ">=6.9.0"
}
},
- "node_modules/@emotion/babel-plugin": {
- "version": "11.7.2",
- "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
- "integrity": "sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==",
- "dev": true,
- "dependencies": {
- "@babel/helper-module-imports": "^7.12.13",
- "@babel/plugin-syntax-jsx": "^7.12.13",
- "@babel/runtime": "^7.13.10",
- "@emotion/hash": "^0.8.0",
- "@emotion/memoize": "^0.7.5",
- "@emotion/serialize": "^1.0.2",
- "babel-plugin-macros": "^2.6.1",
- "convert-source-map": "^1.5.0",
- "escape-string-regexp": "^4.0.0",
- "find-root": "^1.1.0",
- "source-map": "^0.5.7",
- "stylis": "4.0.13"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0"
- }
- },
- "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
- "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
- "dev": true,
- "engines": {
- "node": ">=10"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
- "node_modules/@emotion/babel-plugin/node_modules/source-map": {
- "version": "0.5.7",
- "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
- "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
- "dev": true,
- "engines": {
- "node": ">=0.10.0"
- }
- },
- "node_modules/@emotion/babel-plugin/node_modules/stylis": {
- "version": "4.0.13",
- "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
- "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==",
- "dev": true
- },
- "node_modules/@emotion/cache": {
- "version": "11.7.1",
- "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
- "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
- "dependencies": {
- "@emotion/memoize": "^0.7.4",
- "@emotion/sheet": "^1.1.0",
- "@emotion/utils": "^1.0.0",
- "@emotion/weak-memoize": "^0.2.5",
- "stylis": "4.0.13"
- }
- },
- "node_modules/@emotion/cache/node_modules/stylis": {
- "version": "4.0.13",
- "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
- "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
- },
- "node_modules/@emotion/hash": {
- "version": "0.8.0",
- "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
- "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
- },
- "node_modules/@emotion/memoize": {
- "version": "0.7.5",
- "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
- "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
- },
- "node_modules/@emotion/react": {
- "version": "11.7.1",
- "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.7.1.tgz",
- "integrity": "sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==",
- "dependencies": {
- "@babel/runtime": "^7.13.10",
- "@emotion/cache": "^11.7.1",
- "@emotion/serialize": "^1.0.2",
- "@emotion/sheet": "^1.1.0",
- "@emotion/utils": "^1.0.0",
- "@emotion/weak-memoize": "^0.2.5",
- "hoist-non-react-statics": "^3.3.1"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0",
- "react": ">=16.8.0"
- },
- "peerDependenciesMeta": {
- "@babel/core": {
- "optional": true
- },
- "@types/react": {
- "optional": true
- }
- }
- },
- "node_modules/@emotion/serialize": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
- "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
- "dependencies": {
- "@emotion/hash": "^0.8.0",
- "@emotion/memoize": "^0.7.4",
- "@emotion/unitless": "^0.7.5",
- "@emotion/utils": "^1.0.0",
- "csstype": "^3.0.2"
- }
- },
- "node_modules/@emotion/sheet": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
- "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
- },
- "node_modules/@emotion/unitless": {
- "version": "0.7.5",
- "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
- "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
- },
- "node_modules/@emotion/utils": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
- "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
- },
- "node_modules/@emotion/weak-memoize": {
- "version": "0.2.5",
- "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
- "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
- },
"node_modules/@eslint/eslintrc": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz",
@@ -1965,9 +1828,9 @@
"dev": true
},
"node_modules/@types/node": {
- "version": "17.0.5",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.5.tgz",
- "integrity": "sha512-w3mrvNXLeDYV1GKTZorGJQivK6XLCoGwpnyJFbJVK/aTBQUxOCaa/GlFAAN3OTDFcb7h5tiFG+YXCO2By+riZw=="
+ "version": "17.0.8",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.8.tgz",
+ "integrity": "sha512-YofkM6fGv4gDJq78g4j0mMuGMkZVxZDgtU0JRdx6FgiJDG+0fY0GKVolOV8WqVmEhLCXkQRjwDdKyPxJp/uucg=="
},
"node_modules/@types/node-localstorage": {
"version": "1.3.0",
@@ -2686,17 +2549,17 @@
"dev": true
},
"node_modules/autoprefixer": {
- "version": "10.4.0",
- "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz",
- "integrity": "sha512-7FdJ1ONtwzV1G43GDD0kpVMn/qbiNqyOPMFTX5nRffI+7vgWoFEc6DcXOxHJxrWNDXrZh18eDsZjvZGUljSRGA==",
+ "version": "10.4.1",
+ "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.1.tgz",
+ "integrity": "sha512-B3ZEG7wtzXDRCEFsan7HmR2AeNsxdJB0+sEC0Hc5/c2NbhJqPwuZm+tn233GBVw82L+6CtD6IPSfVruwKjfV3A==",
"dev": true,
"dependencies": {
- "browserslist": "^4.17.5",
- "caniuse-lite": "^1.0.30001272",
- "fraction.js": "^4.1.1",
+ "browserslist": "^4.19.1",
+ "caniuse-lite": "^1.0.30001294",
+ "fraction.js": "^4.1.2",
"normalize-range": "^0.1.2",
"picocolors": "^1.0.0",
- "postcss-value-parser": "^4.1.0"
+ "postcss-value-parser": "^4.2.0"
},
"bin": {
"autoprefixer": "bin/autoprefixer"
@@ -2776,33 +2639,6 @@
"object.assign": "^4.1.0"
}
},
- "node_modules/babel-plugin-macros": {
- "version": "2.8.0",
- "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
- "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
- "dev": true,
- "dependencies": {
- "@babel/runtime": "^7.7.2",
- "cosmiconfig": "^6.0.0",
- "resolve": "^1.12.0"
- }
- },
- "node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
- "version": "6.0.0",
- "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
- "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
- "dev": true,
- "dependencies": {
- "@types/parse-json": "^4.0.0",
- "import-fresh": "^3.1.0",
- "parse-json": "^5.0.0",
- "path-type": "^4.0.0",
- "yaml": "^1.7.2"
- },
- "engines": {
- "node": ">=8"
- }
- },
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3048,9 +2884,9 @@
}
},
"node_modules/caniuse-lite": {
- "version": "1.0.30001292",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001292.tgz",
- "integrity": "sha512-jnT4Tq0Q4ma+6nncYQVe7d73kmDmE9C3OGTx3MvW7lBM/eY1S1DZTMBON7dqV481RhNiS5OxD7k9JQvmDOTirw==",
+ "version": "1.0.30001296",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001296.tgz",
+ "integrity": "sha512-WfrtPEoNSoeATDlf4y3QvkwiELl9GyPLISV5GejTbbQRtQx4LhsXmc9IQ6XCL2d7UxCyEzToEZNMeqR79OUw8Q==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
@@ -3385,7 +3221,8 @@
"node_modules/csstype": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
- "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+ "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
+ "dev": true
},
"node_modules/damerau-levenshtein": {
"version": "1.0.7",
@@ -4671,12 +4508,6 @@
"url": "https://github.com/avajs/find-cache-dir?sponsor=1"
}
},
- "node_modules/find-root": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
- "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
- "dev": true
- },
"node_modules/find-up": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -4985,19 +4816,6 @@
"minimalistic-crypto-utils": "^1.0.1"
}
},
- "node_modules/hoist-non-react-statics": {
- "version": "3.3.2",
- "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
- "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
- "dependencies": {
- "react-is": "^16.7.0"
- }
- },
- "node_modules/hoist-non-react-statics/node_modules/react-is": {
- "version": "16.13.1",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
- },
"node_modules/hosted-git-info": {
"version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -7025,20 +6843,22 @@
}
},
"node_modules/postcss-js": {
- "version": "3.0.3",
- "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
- "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+ "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
"dev": true,
"dependencies": {
- "camelcase-css": "^2.0.1",
- "postcss": "^8.1.6"
+ "camelcase-css": "^2.0.1"
},
"engines": {
- "node": ">=10.0"
+ "node": "^12 || ^14 || >= 16"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
+ },
+ "peerDependencies": {
+ "postcss": "^8.3.3"
}
},
"node_modules/postcss-load-config": {
@@ -7417,18 +7237,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/react-spinners": {
- "version": "0.11.0",
- "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.11.0.tgz",
- "integrity": "sha512-rDZc0ABWn/M1OryboGsWVmIPg8uYWl0L35jPUhr40+Yg+syVPjeHwvnB7XWaRpaKus3M0cG9BiJA+ZB0dAwWyw==",
- "dependencies": {
- "@emotion/react": "^11.1.4"
- },
- "peerDependencies": {
- "react": "^16.0.0 || ^17.0.0",
- "react-dom": "^16.0.0 || ^17.0.0"
- }
- },
"node_modules/read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -8129,9 +7937,9 @@
}
},
"node_modules/tailwindcss": {
- "version": "3.0.7",
- "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.7.tgz",
- "integrity": "sha512-rZdKNHtC64jcQncLoWOuCzj4lQDTAgLtgK3WmQS88tTdpHh9OwLqULTQxI3tw9AMJsqSpCKlmcjW/8CSnni6zQ==",
+ "version": "3.0.11",
+ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.11.tgz",
+ "integrity": "sha512-JyMsQ2kPqpOvG8ow535XpauXj3wz3nQqcy2tVlXj4FQ0eNlsdzvlAqpRA3q5rPLboWirNG6r2DqKczwjW2uc8Q==",
"dev": true,
"dependencies": {
"arg": "^5.0.1",
@@ -8147,14 +7955,13 @@
"is-glob": "^4.0.3",
"normalize-path": "^3.0.0",
"object-hash": "^2.2.0",
- "postcss-js": "^3.0.3",
+ "postcss-js": "^4.0.0",
"postcss-load-config": "^3.1.0",
"postcss-nested": "5.0.6",
"postcss-selector-parser": "^6.0.7",
"postcss-value-parser": "^4.2.0",
"quick-lru": "^5.1.1",
- "resolve": "^1.20.0",
- "tmp": "^0.2.1"
+ "resolve": "^1.20.0"
},
"bin": {
"tailwind": "lib/cli.js",
@@ -8321,18 +8128,6 @@
"node": ">=0.6.0"
}
},
- "node_modules/tmp": {
- "version": "0.2.1",
- "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
- "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
- "dev": true,
- "dependencies": {
- "rimraf": "^3.0.0"
- },
- "engines": {
- "node": ">=8.17.0"
- }
- },
"node_modules/to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -9576,121 +9371,6 @@
"to-fast-properties": "^2.0.0"
}
},
- "@emotion/babel-plugin": {
- "version": "11.7.2",
- "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
- "integrity": "sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==",
- "dev": true,
- "requires": {
- "@babel/helper-module-imports": "^7.12.13",
- "@babel/plugin-syntax-jsx": "^7.12.13",
- "@babel/runtime": "^7.13.10",
- "@emotion/hash": "^0.8.0",
- "@emotion/memoize": "^0.7.5",
- "@emotion/serialize": "^1.0.2",
- "babel-plugin-macros": "^2.6.1",
- "convert-source-map": "^1.5.0",
- "escape-string-regexp": "^4.0.0",
- "find-root": "^1.1.0",
- "source-map": "^0.5.7",
- "stylis": "4.0.13"
- },
- "dependencies": {
- "escape-string-regexp": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
- "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
- "dev": true
- },
- "source-map": {
- "version": "0.5.7",
- "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
- "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
- "dev": true
- },
- "stylis": {
- "version": "4.0.13",
- "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
- "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==",
- "dev": true
- }
- }
- },
- "@emotion/cache": {
- "version": "11.7.1",
- "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
- "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
- "requires": {
- "@emotion/memoize": "^0.7.4",
- "@emotion/sheet": "^1.1.0",
- "@emotion/utils": "^1.0.0",
- "@emotion/weak-memoize": "^0.2.5",
- "stylis": "4.0.13"
- },
- "dependencies": {
- "stylis": {
- "version": "4.0.13",
- "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
- "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
- }
- }
- },
- "@emotion/hash": {
- "version": "0.8.0",
- "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
- "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
- },
- "@emotion/memoize": {
- "version": "0.7.5",
- "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
- "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
- },
- "@emotion/react": {
- "version": "11.7.1",
- "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.7.1.tgz",
- "integrity": "sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==",
- "requires": {
- "@babel/runtime": "^7.13.10",
- "@emotion/cache": "^11.7.1",
- "@emotion/serialize": "^1.0.2",
- "@emotion/sheet": "^1.1.0",
- "@emotion/utils": "^1.0.0",
- "@emotion/weak-memoize": "^0.2.5",
- "hoist-non-react-statics": "^3.3.1"
- }
- },
- "@emotion/serialize": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
- "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
- "requires": {
- "@emotion/hash": "^0.8.0",
- "@emotion/memoize": "^0.7.4",
- "@emotion/unitless": "^0.7.5",
- "@emotion/utils": "^1.0.0",
- "csstype": "^3.0.2"
- }
- },
- "@emotion/sheet": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
- "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
- },
- "@emotion/unitless": {
- "version": "0.7.5",
- "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
- "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
- },
- "@emotion/utils": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
- "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
- },
- "@emotion/weak-memoize": {
- "version": "0.2.5",
- "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
- "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
- },
"@eslint/eslintrc": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz",
@@ -10186,9 +9866,9 @@
"dev": true
},
"@types/node": {
- "version": "17.0.5",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.5.tgz",
- "integrity": "sha512-w3mrvNXLeDYV1GKTZorGJQivK6XLCoGwpnyJFbJVK/aTBQUxOCaa/GlFAAN3OTDFcb7h5tiFG+YXCO2By+riZw=="
+ "version": "17.0.8",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.8.tgz",
+ "integrity": "sha512-YofkM6fGv4gDJq78g4j0mMuGMkZVxZDgtU0JRdx6FgiJDG+0fY0GKVolOV8WqVmEhLCXkQRjwDdKyPxJp/uucg=="
},
"@types/node-localstorage": {
"version": "1.3.0",
@@ -10773,17 +10453,17 @@
"dev": true
},
"autoprefixer": {
- "version": "10.4.0",
- "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz",
- "integrity": "sha512-7FdJ1ONtwzV1G43GDD0kpVMn/qbiNqyOPMFTX5nRffI+7vgWoFEc6DcXOxHJxrWNDXrZh18eDsZjvZGUljSRGA==",
+ "version": "10.4.1",
+ "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.1.tgz",
+ "integrity": "sha512-B3ZEG7wtzXDRCEFsan7HmR2AeNsxdJB0+sEC0Hc5/c2NbhJqPwuZm+tn233GBVw82L+6CtD6IPSfVruwKjfV3A==",
"dev": true,
"requires": {
- "browserslist": "^4.17.5",
- "caniuse-lite": "^1.0.30001272",
- "fraction.js": "^4.1.1",
+ "browserslist": "^4.19.1",
+ "caniuse-lite": "^1.0.30001294",
+ "fraction.js": "^4.1.2",
"normalize-range": "^0.1.2",
"picocolors": "^1.0.0",
- "postcss-value-parser": "^4.1.0"
+ "postcss-value-parser": "^4.2.0"
},
"dependencies": {
"browserslist": {
@@ -10833,32 +10513,6 @@
"object.assign": "^4.1.0"
}
},
- "babel-plugin-macros": {
- "version": "2.8.0",
- "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
- "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
- "dev": true,
- "requires": {
- "@babel/runtime": "^7.7.2",
- "cosmiconfig": "^6.0.0",
- "resolve": "^1.12.0"
- },
- "dependencies": {
- "cosmiconfig": {
- "version": "6.0.0",
- "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
- "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
- "dev": true,
- "requires": {
- "@types/parse-json": "^4.0.0",
- "import-fresh": "^3.1.0",
- "parse-json": "^5.0.0",
- "path-type": "^4.0.0",
- "yaml": "^1.7.2"
- }
- }
- }
- },
"balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -11050,9 +10704,9 @@
"dev": true
},
"caniuse-lite": {
- "version": "1.0.30001292",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001292.tgz",
- "integrity": "sha512-jnT4Tq0Q4ma+6nncYQVe7d73kmDmE9C3OGTx3MvW7lBM/eY1S1DZTMBON7dqV481RhNiS5OxD7k9JQvmDOTirw=="
+ "version": "1.0.30001296",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001296.tgz",
+ "integrity": "sha512-WfrtPEoNSoeATDlf4y3QvkwiELl9GyPLISV5GejTbbQRtQx4LhsXmc9IQ6XCL2d7UxCyEzToEZNMeqR79OUw8Q=="
},
"chalk": {
"version": "2.4.2",
@@ -11324,7 +10978,8 @@
"csstype": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
- "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+ "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
+ "dev": true
},
"damerau-levenshtein": {
"version": "1.0.7",
@@ -12317,12 +11972,6 @@
"pkg-dir": "^4.1.0"
}
},
- "find-root": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
- "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
- "dev": true
- },
"find-up": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -12547,21 +12196,6 @@
"minimalistic-crypto-utils": "^1.0.1"
}
},
- "hoist-non-react-statics": {
- "version": "3.3.2",
- "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
- "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
- "requires": {
- "react-is": "^16.7.0"
- },
- "dependencies": {
- "react-is": {
- "version": "16.13.1",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
- }
- }
- },
"hosted-git-info": {
"version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -14046,13 +13680,12 @@
}
},
"postcss-js": {
- "version": "3.0.3",
- "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
- "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+ "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
"dev": true,
"requires": {
- "camelcase-css": "^2.0.1",
- "postcss": "^8.1.6"
+ "camelcase-css": "^2.0.1"
}
},
"postcss-load-config": {
@@ -14351,14 +13984,6 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
"integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
},
- "react-spinners": {
- "version": "0.11.0",
- "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.11.0.tgz",
- "integrity": "sha512-rDZc0ABWn/M1OryboGsWVmIPg8uYWl0L35jPUhr40+Yg+syVPjeHwvnB7XWaRpaKus3M0cG9BiJA+ZB0dAwWyw==",
- "requires": {
- "@emotion/react": "^11.1.4"
- }
- },
"read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -14884,9 +14509,9 @@
}
},
"tailwindcss": {
- "version": "3.0.7",
- "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.7.tgz",
- "integrity": "sha512-rZdKNHtC64jcQncLoWOuCzj4lQDTAgLtgK3WmQS88tTdpHh9OwLqULTQxI3tw9AMJsqSpCKlmcjW/8CSnni6zQ==",
+ "version": "3.0.11",
+ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.11.tgz",
+ "integrity": "sha512-JyMsQ2kPqpOvG8ow535XpauXj3wz3nQqcy2tVlXj4FQ0eNlsdzvlAqpRA3q5rPLboWirNG6r2DqKczwjW2uc8Q==",
"dev": true,
"requires": {
"arg": "^5.0.1",
@@ -14902,14 +14527,13 @@
"is-glob": "^4.0.3",
"normalize-path": "^3.0.0",
"object-hash": "^2.2.0",
- "postcss-js": "^3.0.3",
+ "postcss-js": "^4.0.0",
"postcss-load-config": "^3.1.0",
"postcss-nested": "5.0.6",
"postcss-selector-parser": "^6.0.7",
"postcss-value-parser": "^4.2.0",
"quick-lru": "^5.1.1",
- "resolve": "^1.20.0",
- "tmp": "^0.2.1"
+ "resolve": "^1.20.0"
},
"dependencies": {
"ansi-styles": {
@@ -15031,15 +14655,6 @@
"setimmediate": "^1.0.4"
}
},
- "tmp": {
- "version": "0.2.1",
- "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
- "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
- "dev": true,
- "requires": {
- "rimraf": "^3.0.0"
- }
- },
"to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
diff --git a/package.json b/package.json
@@ -18,26 +18,24 @@
"node-localstorage": "^2.2.1",
"pouchdb": "^7.2.2",
"react": "17.0.2",
- "react-dom": "17.0.2",
- "react-spinners": "^0.11.0"
+ "react-dom": "17.0.2"
},
"devDependencies": {
"@babel/plugin-transform-typescript": "^7.16.7",
- "@emotion/babel-plugin": "^11.7.2",
"@playwright/test": "^1.17.1",
"@types/cors": "^2.8.12",
- "@types/node": "17.0.5",
+ "@types/node": "17.0.8",
"@types/node-localstorage": "^1.3.0",
"@types/pouchdb": "^6.4.0",
"@types/react": "17.0.38",
- "autoprefixer": "^10.4.0",
+ "autoprefixer": "^10.4.1",
"cross-env": "^7.0.3",
"eslint": "^8.6.0",
"eslint-config-next": "12.0.7",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-unicorn": "^40.0.0",
"postcss": "^8.4.5",
- "tailwindcss": "^3.0.7",
+ "tailwindcss": "^3.0.11",
"typescript": "4.5.4"
}
}
diff --git a/pages/Home.tsx b/pages/Home.tsx
@@ -1,5 +1,4 @@
import React, { PureComponent } from 'react';
-import { RingLoader } from 'react-spinners';
import { MatrixEventBase, MatrixImageEvents } from '../helpers/event_types';
import Head from 'next/head';
import Header from '../components/Header';
@@ -21,12 +20,6 @@ type State = {
image_events: MatrixImageEvents[] | [];
};
-export const centerSpinner = `
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-`;
export default class Home extends PureComponent<Props, State>{
declare context: React.ContextType<typeof ClientContext>;
@@ -124,10 +117,18 @@ export default class Home extends PureComponent<Props, State>{
);
} else if (!hasFullyLoaded) {
return (
- <div className="flex h-screen">
- <div className="m-auto">
- <RingLoader css={centerSpinner} size={150} color={"#123abc"} loading={!hasFullyLoaded} />
- </div>
+ <div className='h-full bg-[#f8f8f8] dark:bg-[#06070D]'>
+ <Head>
+ <title key="title">Matrix Art | Home</title>
+ <meta property="og:title" content="Matrix Art | Home" key="og-title" />
+ <meta property="og:type" content="website" key="og-type" />
+ </Head>
+ <Header></Header>
+ <main className='w-full lg:pt-20 pt-52 z-0'>
+ <div className="m-0 w-full">
+ <div className="loader fixed top-[50%] left-[50%] transform translate-x-[-50%] translate-y-[-50%]">Loading...</div>
+ </div>
+ </main>
</div>
);
} else {
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -8,7 +8,6 @@ import { GetServerSideProps, InferGetServerSidePropsType } from "next";
import Head from "next/head";
import { NextRouter, withRouter } from "next/router";
import { PureComponent, ReactNode } from "react";
-import { RingLoader } from "react-spinners";
import { ClientContext } from "../../components/ClientContext";
import Header from "../../components/Header";
import { ImageEvent, ImageGalleryEvent, MatrixEventBase, MatrixImageEvents } from "../../helpers/event_types";
@@ -18,13 +17,6 @@ import { isImageEvent, isImageGalleryEvent } from '../../components/FrontPageIma
import Link from 'next/link';
import Footer from '../../components/Footer';
-const centerSpinner = `
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-`;
-
type Props = InferGetServerSidePropsType<typeof getServerSideProps> & {
router: NextRouter;
};
@@ -116,10 +108,20 @@ class Post extends PureComponent<Props, State> {
if (!hasFullyLoaded) {
return (
- <div className="flex h-screen">
- <div className="m-auto">
- <RingLoader css={centerSpinner} size={150} color={"#123abc"} loading={!hasFullyLoaded} />
- </div>
+ <div className='h-full bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
+ <Head>
+ <title key="title">Matrix Art | Post not Found</title>
+ <meta property="og:title" content="Matrix Art | Post not Found" key="og-title" />
+ <meta name="twitter:card" content="summary_large_image" key="og-twitter" />
+ <meta name="twitter:title" content="Matrix Art | Post not Found" key="og-twitter-title" />
+ <meta property="og:type" content="website" key="og-type" />
+ </Head>
+ <Header></Header>
+ <main className='w-full lg:pt-20 pt-52 z-0'>
+ <div className="m-0 w-full">
+ <div className="loader fixed top-[50%] left-[50%] transform translate-x-[-50%] translate-y-[-50%]">Loading...</div>
+ </div>
+ </main>
</div>
);
}
diff --git a/styles/globals.css b/styles/globals.css
@@ -49,4 +49,64 @@ html, body, #__next {
#reflection:hover::before {
left: 50%;
opacity: .5;
+}
+
+.loader,
+.loader:before,
+.loader:after {
+ background: #ffffff;
+ -webkit-animation: load1 1s infinite ease-in-out;
+ animation: load1 1s infinite ease-in-out;
+ width: 1em;
+ height: 4em;
+}
+.loader {
+ color: #ffffff;
+ text-indent: -9999em;
+ margin: 88px auto;
+ position: relative;
+ font-size: 11px;
+ -webkit-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-animation-delay: -0.16s;
+ animation-delay: -0.16s;
+}
+.loader:before,
+.loader:after {
+ position: absolute;
+ top: 0;
+ content: '';
+}
+.loader:before {
+ left: -1.5em;
+ -webkit-animation-delay: -0.32s;
+ animation-delay: -0.32s;
+}
+.loader:after {
+ left: 1.5em;
+}
+@-webkit-keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 4em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 5em;
+ }
+}
+@keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 4em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 5em;
+ }
}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,6 @@
module.exports = {
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}",],
+ important: true,
theme: {
extend: {},
},
