feat: add light mode + rewrite in Tailwind CSS (#15)

pages/_app.tsx

@@ -1,32 +1,23 @@
+import { useEffect } from 'react'
 import { AppProps } from 'next/app'
-import Router from 'next/router'
-import NProgress from 'nprogress'
+import { ThemeProvider } from 'next-themes'
 import useTranslation from 'next-translate/useTranslation'
 import UniversalCookie from 'universal-cookie'
 
-import 'normalize.css/normalize.css'
+import 'tailwindcss/tailwind.css'
 import '@fontsource/montserrat/400.css'
 import '@fontsource/montserrat/500.css'
 import '@fontsource/montserrat/600.css'
 import '@fontsource/montserrat/700.css'
 
-import 'styles/grid.scss'
-import 'styles/general.scss'
-import 'styles/nprogress.scss'
-
 import { Header } from 'components/Header'
 import { Footer } from 'components/Footer'
-import { useEffect } from 'react'
 
 const universalCookie = new UniversalCookie()
 
 /** how long in seconds, until the cookie expires (10 years) */
 const COOKIE_MAX_AGE = 10 * 365.25 * 24 * 60 * 60
 
-Router.events.on('routeChangeStart', () => NProgress.start())
-Router.events.on('routeChangeComplete', () => NProgress.done())
-Router.events.on('routeChangeError', () => NProgress.done())
-
 const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
   const { lang } = useTranslation()
 
@@ -38,13 +29,13 @@ const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
   }, [lang])
 
   return (
-    <>
+    <ThemeProvider attribute='class' defaultTheme='dark'>
       <Header />
-      <main className='content container'>
+      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
         <Component {...pageProps} />
       </main>
       <Footer />
-    </>
+    </ThemeProvider>
   )
 }