jeffemmett
/
web3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[site/theme][m]: implement dark mode and default to it (purple background). 

* upgraded tailwind to >= 3.0.0 and typography to >= 0.5.
* (accidental): move web3.html to public so it works
This commit is contained in:
Rufus Pollock 2022-03-04 16:00:56 +01:00
parent 54d863ce50
commit 7538c4f26b
7 changed files with 483 additions and 1108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
site/components/Layout.js
View File

@ -22,22 +22,24 @@ export default function Layout({ children, title='' }) {
<link rel="preload" href="/fonts/Restora/RestoraBold.ttf" as="font" crossOrigin="" />
<link rel="preload" href="/fonts/Restora/RestoraExtraLight.otf" as="font" crossOrigin="" />
</Head>
<Nav />
<main>
{children}
</main>
<footer className="flex items-center justify-center w-full h-24 border-t mt-16">
<p className="flex items-center justify-center">
Created by
<a
href={siteConfig.authorUrl}
target="_blank"
rel="noopener noreferrer"
>
<img src={siteConfig.authorLogo} alt={siteConfig.author} className="ml-2 h-6 block" />
</a>
</p>
</footer>
<body className="dark:bg-[#4a4e7d]">
<Nav />
<main>
{children}
</main>
<footer className="flex items-center justify-center w-full h-24 border-t mt-16">
<p className="flex items-center justify-center">
Created by
<a
href={siteConfig.authorUrl}
target="_blank"
rel="noopener noreferrer"
>
<img src={siteConfig.authorLogo} alt={siteConfig.author} className="ml-2 h-6 block" />
</a>
</p>
</footer>
</body>
</>
)
}

2
site/components/MDX.js
View File

@ -11,7 +11,7 @@ export default function MdxPage({ children }) {
const { Component, pageProps } = children
return (
<article className="prose mx-auto p-6">
<article className="prose dark:prose-invert mx-auto p-6">
<header>
<div className="mb-6">
<h1>{pageProps.title}</h1>

1543
site/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
site/package.json
View File

@ -12,10 +12,11 @@
"@mdx-js/loader": "^2.0.0",
"@next/mdx": "^12.1.0",
"@silvenon/remark-smartypants": "^1.0.0",
"@tailwindcss/typography": "^0.4.1",
"@tailwindcss/typography": "^0.5.2",
"gray-matter": "^4.0.3",
"next": "^12.1.0",
"next-seo": "^4.28.1",
"next-themes": "^0.1.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"remark-gfm": "^3.0.0",
@ -25,6 +26,6 @@
"devDependencies": {
"autoprefixer": "^10.2.6",
"postcss": "^8.3.5",
"tailwindcss": "^2.2.4"
"tailwindcss": "^3.0.0"
}
}

5
site/pages/_app.js
View File

@ -3,6 +3,7 @@ import Script from 'next/script'
import { useRouter } from 'next/router'
import { DefaultSeo } from 'next-seo'
import 'tailwindcss/tailwind.css'
import { ThemeProvider } from 'next-themes'
import siteConfig from '../config/siteConfig.js'
import Layout from '../components/Layout'
@ -26,7 +27,7 @@ function MyApp({ Component, pageProps }) {
// end Google Analytics
return (
<>
<ThemeProvider attribute="class" defaultTheme="dark">
<DefaultSeo
titleTemplate={'%s | ' + siteConfig.title}
defaultTitle={siteConfig.title}
@ -64,7 +65,7 @@ function MyApp({ Component, pageProps }) {
<MdxPage children={{ Component, pageProps }} />
}
</Layout>
</>
</ThemeProvider>
)
}

0
site/pages/web3.html → site/public/web3.html
View File

2
site/tailwind.config.js
View File

@ -6,7 +6,7 @@ module.exports = {
"./pages/**/*.{js,ts,jsx,tsx,md,mdx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
darkMode: false, // or 'media' or 'class'
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
fontFamily: {