diff --git a/.stylelintrc b/.stylelintrc index 6de0376..d8f06af 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -7,7 +7,9 @@ "ignoreAtRules": [ "extends", "tailwind", - "layer" + "layer", + "screen", + "variants" ] } ], diff --git a/components/Container.tsx b/components/Container.tsx index 4934c17..9e24f5b 100644 --- a/components/Container.tsx +++ b/components/Container.tsx @@ -49,7 +49,7 @@ const Container: React.FC = ({ children, ...customMeta }): JSX.Element => {router.asPath === '/' ? (
{children}
) : ( -
+
{mounted && setTheme(theme === 'dark' ? 'light' : 'dark')} />}
{children}
diff --git a/package-lock.json b/package-lock.json index 6be9994..0bd9feb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "@mdx-js/loader": "^1.6.22", "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", - "@tailwindcss/typography": "^0.4.0", + "@tailwindcss/jit": "^0.1.4", "@types/eslint": "^7.2.7", "@types/eslint-plugin-prettier": "^3.1.0", "@types/mdx-js__react": "^1.5.3", @@ -2625,19 +2625,36 @@ "postcss-syntax": ">=0.36.2" } }, - "node_modules/@tailwindcss/typography": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.4.0.tgz", - "integrity": "sha512-3BfOYT5MYNEq81Ism3L2qu/HRP2Q5vWqZtZRQqQrthHuaTK9qpuPfbMT5WATjAM5J1OePKBaI5pLoX4S1JGNMQ==", + "node_modules/@tailwindcss/jit": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/jit/-/jit-0.1.4.tgz", + "integrity": "sha512-4IGNNBR00dvZ79iQiXNwNWj5UX9lzXW6UWg6eg42rbSox/UlO7sLwyl0tBuaHa32zWAguHfmF1Yptn1y6iF4AQ==", "dev": true, "dependencies": { - "lodash.castarray": "^4.4.0", - "lodash.isplainobject": "^4.0.6", - "lodash.merge": "^4.6.2", - "lodash.uniq": "^4.5.0" + "chokidar": "^3.5.1", + "dlv": "^1.1.3", + "fast-glob": "^3.2.5", + "lodash.topath": "^4.5.2", + "normalize-path": "^3.0.0", + "object-hash": "^2.1.1", + "postcss-selector-parser": "^6.0.4", + "quick-lru": "^5.1.1" }, "peerDependencies": { - "tailwindcss": "2.0.0-alpha.24 || ^2.0.0" + "postcss": "^8.2.6", + "tailwindcss": "^2.0.3" + } + }, + "node_modules/@tailwindcss/jit/node_modules/quick-lru": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", + "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/@types/eslint": { @@ -5608,6 +5625,12 @@ "node": ">=8" } }, + "node_modules/dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -9745,12 +9768,6 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, - "node_modules/lodash.castarray": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", - "integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=", - "dev": true - }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -9774,24 +9791,12 @@ "integrity": "sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=", "dev": true }, - "node_modules/lodash.isplainobject": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", - "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=", - "dev": true - }, "node_modules/lodash.map": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz", "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=", "dev": true }, - "node_modules/lodash.merge": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", - "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", - "dev": true - }, "node_modules/lodash.partialright": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/lodash.partialright/-/lodash.partialright-4.2.1.tgz", @@ -9809,6 +9814,12 @@ "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=", "dev": true }, + "node_modules/lodash.topath": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz", + "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=", + "dev": true + }, "node_modules/lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -18134,16 +18145,28 @@ "unist-util-find-all-after": "^3.0.2" } }, - "@tailwindcss/typography": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.4.0.tgz", - "integrity": "sha512-3BfOYT5MYNEq81Ism3L2qu/HRP2Q5vWqZtZRQqQrthHuaTK9qpuPfbMT5WATjAM5J1OePKBaI5pLoX4S1JGNMQ==", + "@tailwindcss/jit": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/jit/-/jit-0.1.4.tgz", + "integrity": "sha512-4IGNNBR00dvZ79iQiXNwNWj5UX9lzXW6UWg6eg42rbSox/UlO7sLwyl0tBuaHa32zWAguHfmF1Yptn1y6iF4AQ==", "dev": true, "requires": { - "lodash.castarray": "^4.4.0", - "lodash.isplainobject": "^4.0.6", - "lodash.merge": "^4.6.2", - "lodash.uniq": "^4.5.0" + "chokidar": "^3.5.1", + "dlv": "^1.1.3", + "fast-glob": "^3.2.5", + "lodash.topath": "^4.5.2", + "normalize-path": "^3.0.0", + "object-hash": "^2.1.1", + "postcss-selector-parser": "^6.0.4", + "quick-lru": "^5.1.1" + }, + "dependencies": { + "quick-lru": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", + "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", + "dev": true + } } }, "@types/eslint": { @@ -20457,6 +20480,12 @@ "path-type": "^4.0.0" } }, + "dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true + }, "doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -23596,12 +23625,6 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, - "lodash.castarray": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", - "integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=", - "dev": true - }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -23625,24 +23648,12 @@ "integrity": "sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=", "dev": true }, - "lodash.isplainobject": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", - "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=", - "dev": true - }, "lodash.map": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz", "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=", "dev": true }, - "lodash.merge": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", - "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", - "dev": true - }, "lodash.partialright": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/lodash.partialright/-/lodash.partialright-4.2.1.tgz", @@ -23660,6 +23671,12 @@ "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=", "dev": true }, + "lodash.topath": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz", + "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=", + "dev": true + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", diff --git a/package.json b/package.json index 114e52b..6add9b8 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "@mdx-js/loader": "^1.6.22", "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", - "@tailwindcss/typography": "^0.4.0", + "@tailwindcss/jit": "^0.1.4", "@types/eslint": "^7.2.7", "@types/eslint-plugin-prettier": "^3.1.0", "@types/mdx-js__react": "^1.5.3", diff --git a/pages/index.tsx b/pages/index.tsx index bb70c41..339d86c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,9 +6,7 @@ const IndexPage = (): JSX.Element => (

Hello Next.js 👋

- - Blog again - + Blog again

diff --git a/postcss.config.js b/postcss.config.js index 33ad091..0a4ec09 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,6 @@ module.exports = { plugins: { - tailwindcss: {}, + '@tailwindcss/jit': {}, autoprefixer: {}, }, } diff --git a/styles/globals.css b/styles/globals.css index 375e1f2..a84e72e 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -8,7 +8,7 @@ font-style: normal; font-weight: normal; font-display: swap; - src: url(../public/fonts/Objectivity-Regular.woff2) format('woff2'); + src: url('/fonts/Objectivity-Regular.woff2') format('woff2'); } @font-face { @@ -16,7 +16,7 @@ font-style: normal; font-weight: bold; font-display: swap; - src: url(../public/fonts/Objectivity-Bold.woff2) format('woff2'); + src: url('/fonts/Objectivity-Bold.woff2') format('woff2'); } :root { @@ -32,12 +32,45 @@ min-width: 320px; } - table { - display: block; - overflow-y: scroll; + /* Remove Safari input shadow on mobile */ + input[type='text'], + input[type='email'] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + } + + h1 { + @apply font-extrabold text-gray-900 dark:text-gray-100; + } + + h2 { + @apply font-bold text-gray-900 dark:text-gray-100; + } + + h3, h4 { + @apply font-semibold text-gray-900 dark:text-gray-100; + } + + :is(h2, h3, h4) + * { + @apply mt-0; + } + + a { + @apply relative font-bold no-underline text-brand hover:text-brand dark:text-brand-secondary dark:hover:text-brand-secondary; + } + + a::after { + @apply absolute left-0 w-full h-1 transition-transform duration-500 origin-right transform scale-x-0 bg-current -bottom-1; + content: ""; + } + + :is(a:hover, a:focus)::after { + @apply origin-left scale-x-100; } pre { + @apply px-3 py-2 my-5 overflow-x-auto text-gray-800 border border-gray-200 rounded bg-gray-50 md:my-6 2xl:my-8 md:px-4 md:py-3 2xl:px-8 2xl:py-7; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } @@ -46,31 +79,405 @@ display: none; } - /* Remove Safari input shadow on mobile */ - input[type='text'], - input[type='email'] { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + code { + @apply text-xs font-semibold text-gray-900 bg-gray-50 md:text-base 2xl:text-xl; } -} -/*** @tailwind/typography prose ***/ -.prose a::after { - content: ""; - @apply absolute left-0 w-full h-1 transition-transform duration-500 origin-right transform scale-x-0 bg-current -bottom-1; -} + @variants dark { + pre { + @apply dark:bg-gray-900 dark:border-gray-700 dark:text-gray-50; + } -.prose :is(a:hover, a:focus)::after { - @apply origin-left scale-x-100; -} + code { + @apply dark:bg-gray-900 dark:text-gray-200; + } + } + + a code { + @apply text-brand dark:text-blue-400; + } + + h2 code { + font-size: calc(18em / 20); + } + + h3 code { + font-size: calc(16em / 18) + } + + ol, ul { + margin-top: calc(16em / 14); + margin-bottom: calc(16em / 14); + } + + li { + margin-top: calc(4em / 14); + margin-bottom: clac(4em / 14); + } + + :is(ol, ul) > li { + @apply relative; + padding-left: calc(22em / 14); + } + + ol > li::before { + @apply absolute left-0 font-normal text-gray-500; + content: counter(list-item, decimal) "."; + } + + ul > li::before { + @apply absolute bg-gray-300 rounded-full; + content: ''; + width: calc(5em / 14); + height: calc(5em / 14); + top: calc(5.5em / 14); + left: calc(3em / 14); + } + + ul > li p { + margin-top: calc(8em / 14); + margin-bottom: calc(8em / 14); + } + + :is(ol, ul) > li > *:first-child { + margin-top: calc(16em / 14); + } -.prose pre { - @apply px-3 py-2 my-5 overflow-x-auto border border-gray-200 rounded bg-gray-50 dark:bg-gray-900 dark:border-gray-700 md:my-6 2xl:my-8 md:px-4 md:py-3 2xl:px-8 2xl:py-7; + :is(ol, ul) > li > *:last-child { + margin-bottom: calc(16em / 14); + } + + ul ul, ul ol, ol ul, ol ol { + margin-top: calc(8em / 14); + margin-bottom: calc(8em / 14); + } + + @screen md { + ol, ul { + margin-top: calc(20em / 16); + margin-bottom: calc(20em / 16); + } + + li { + margin-top: calc(8em / 16); + margin-bottom: clac(8em / 16); + } + + :is(ol, ul) > li { + padding-left: calc(28em / 16); + } + + ul > li::before { + width: calc(6em / 16); + height: calc(6em / 16); + top: calc(8.5em / 16); + left: calc(4em / 16); + } + + > ul > li p { + margin-top: calc(12em / 16); + margin-bottom: calc(12em / 16); + } + + > :is(ol, ul) > li > *:first-child { + margin-top: calc(20em / 16); + } + + > :is(ol, ul) > li > *:last-child { + margin-bottom: calc(20em / 16); + } + + ul ul, ul ol, ol ul, ol ol { + margin-top: calc(12em / 16); + margin-bottom: calc(12em / 16); + } + + h2 code { + font-size: calc(21em / 24); + } + + h3 code { + font-size: calc(18em / 20) + } + } + + @screen 2xl { + ol, ul { + margin-top: calc(32em / 24); + margin-bottom: calc(32em / 24); + } + + li { + margin-top: calc(12em / 24); + margin-bottom: clac(12em / 24); + } + + :is(ol, ul) > li { + padding-left: calc(40em / 24); + } + + ul > li::before { + width: calc(8em / 24); + height: calc(8em / 24); + top: calc(10.5em / 24); + left: calc(6em / 24); + } + + > ul > li p { + margin-top: calc(20em / 24); + margin-bottom: calc(20em / 24); + } + + > :is(ol, ul) > li > *:first-child { + margin-top: calc(32em / 24); + } + + > :is(ol, ul) > li > *:last-child { + margin-bottom: calc(32em / 24); + } + + ul ul, ul ol, ol ul, ol ol { + margin-top: calc(16em / 24); + margin-bottom: calc(16em / 24); + } + + h2 code { + font-size: calc(42em / 48); + } + + h3 code { + font-size: calc(32em / 36); + } + } } -.prose code { - @apply text-xs text-gray-900 bg-gray-50 dark:bg-gray-900 dark:text-gray-200 md:text-base 2xl:text-xl; +@layer components { + .prose { + @apply text-sm text-gray-700; + line-height: calc(24 / 14); + } + + @variants dark { + .prose { + @apply dark:text-gray-300; + } + } + + .prose p { + margin-top: calc(16em / 14); + margin-bottom: calc(16em / 14); + } + + .prose h1 { + font-size: calc(30em / 14); + line-height: calc(36 / 30); + margin-top: 0; + margin-bottom: calc(24em / 30); + } + + .prose h2 { + font-size: calc(20em / 14); + line-height: calc(28 / 20); + margin-top: calc(32em / 20); + margin-bottom: calc(8em / 20); + } + + .prose h3 { + font-size: calc(18em / 14); + line-height: calc(28 / 18); + margin-top: calc(28em / 18); + margin-bottom: calc(8em / 18); + } + + .prose h4 { + line-height: calc(20 / 14); + margin-top: calc(20em / 14); + margin-bottom: calc(8em / 14); + } + + .prose :is(h2, h3, h4) { + scroll-margin-top: 8rem; + } + + .prose blockquote { + @apply italic font-medium text-gray-900 border-l-4 border-gray-200 dark:border-gray-700 dark:text-gray-300; + quotes: "\\201C" "\\201D" "\\2018" "\\2019"; + margin-top: calc(24em / 18); + margin-bottom: calc(24em / 18); + padding-left: calc(20em / 18); + } + + .prose :is(img, video, figure) { + margin-top: calc(24em / 14); + margin-bottom: calc(24em / 14); + } + + .prose figure > * { + margin-top: 0; + margin-bottom: 0; + } + + .prose figure figcaption { + font-size: calc(12em / 14); + line-height: calc(16 / 12); + margin-top: calc(8em / 12); + } + + .prose table { + @apply block w-full overflow-y-scroll text-left; + margin-top: calc(32em / 16); + margin-bottom: calc(32em / 16); + font-size: calc(12em / 14); + line-height: calc(18 / 12); + } + + .prose thead { + @apply font-black text-gray-900 border-b-2 border-gray-300 dark:text-gray-100; + } + + .prose thead th { + @apply pb-3 pl-4 pr-4 md:pb-2 md:pl-2 md:pr-2 2xl:pb-4 2xl:pl-3 2xl:pr-3; + vertical-align: bottom; + } + + .prose thead tr { + @apply border-gray-200 dark:border-gray-700; + border-bottom-width: 1px; + } + + .prose tbody td { + @apply p-2 2xl:p-4; + vertical-align: top; + } + + .prose thead th:first-child, .prose tbody td:first-child { + @apply pl-0; + } + + .prose thead th:last-child, .prose tbody td:last-child { + @apply pr-0; + } + + @screen md { + .prose { + @apply text-base; + line-height: calc(28 / 16); + } + + .prose p { + margin-top: calc(20em / 16); + margin-bottom: calc(20em / 16); + } + + .prose h1 { + font-size: calc(36em / 16); + line-height: calc(40 / 36); + margin-bottom: calc(32em / 36); + } + + .prose h2 { + font-size: calc(24em / 16); + line-height: calc(32 / 24); + margin-top: calc(48em / 24); + margin-bottom: calc(24em / 24); + } + + .prose h3 { + font-size: calc(20em / 16); + line-height: calc(32 / 20); + margin-top: calc(32em / 20); + margin-bottom: calc(12em / 20); + } + + .prose h4 { + line-height: calc(24 / 16); + margin-top: calc(24em / 16); + margin-bottom: calc(8em / 16); + } + + .prose blockquote { + margin-top: calc(32em / 20); + margin-bottom: calc(32em / 20); + padding-left: calc(20em / 20); + } + + .prose :is(img, video, figure) { + margin-top: calc(32em / 16); + margin-bottom: calc(32em / 16); + } + + .prose figure figcaption { + @apply text-gray-500; + font-size: calc(14em / 16); + line-height: calc(20 / 14); + margin-top: calc(12em / 14); + } + + .prose table { + font-size: calc(14em / 16); + line-height: calc(24em / 14); + } + } + + @screen 2xl { + .prose { + @apply text-2xl; + line-height: calc(40 / 24); + } + + .prose p { + margin-top: calc(32em / 24); + margin-bottom: calc(32em / 24); + } + + .prose h1 { + font-size: calc(64em / 24); + line-height: calc(64 / 64); + margin-bottom: calc(56em / 64); + } + + .prose h2 { + font-size: calc(48em / 24); + line-height: calc(52 / 48); + margin-top: calc(72em / 48); + margin-bottom: calc(40em / 48); + } + + .prose h3 { + font-size: calc(36em / 24); + line-height: calc(44 / 36); + margin-top: calc(56em / 36); + margin-bottom: calc(24em / 36); + } + + .prose h4 { + line-height: calc(36 / 24); + margin-top: calc(40em / 24); + margin-bottom: calc(16em / 24); + } + + .prose blockquote { + margin-top: calc(64em / 36); + margin-bottom: calc(64em / 36); + padding-left: calc(40em / 36); + } + + .prose :is(img, video, figure) { + margin-top: calc(48em / 24); + margin-bottom: calc(48em / 24); + } + + .prose figure figcaption { + font-size: calc(20em / 24); + line-height: calc(32 / 20); + margin-top: calc(20em / 20); + } + + .prose table { + font-size: calc(20em / 24); + line-height: calc(28em / 20); + } + } } /*** remark-code-title ***/ @@ -83,10 +490,7 @@ } /*** mdxPrism code highlighting ***/ -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { +.token:is(.comment,.prolog,.doctype,.cdata) { @apply text-gray-700 dark:text-gray-300; } @@ -94,55 +498,31 @@ @apply text-gray-700 dark:text-gray-300; } -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.constant, -.token.symbol, -.token.deleted { +.token:is(.property,.tag,.boolean,.number,.constant,.symbol,.deleted) { @apply text-green-500; } -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { +.token:is(.selector,.attr-name,.string,.char,.builtin,.inserted) { @apply text-purple-500; } -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string { +.token:is(.operator,.entity,.url), +:is(.language-css,.style) .token.string { @apply text-yellow-500; } -.token.atrule, -.token.attr-value, -.token.keyword { +.token:is(.atrule,.attr-value,.keyword) { @apply text-blue-500; } -.token.function, -.token.class-name { +.token:is(.function,.class-name) { @apply text-pink-500; } -.token.regex, -.token.important, -.token.variable { +.token:is(.regex,.important,.variable) { @apply text-yellow-500; } -code[class*='language-'], -pre[class*='language-'] { - @apply text-gray-800 dark:text-gray-50; -} - /*** remark-hint styling ***/ .hint { @apply p-4 my-4 border; @@ -173,11 +553,11 @@ pre[class*='language-'] { } /*** remark-autolink-headings - link hash, similar to GitHub ones ***/ -:is(h1, h2, h3, h4):hover > a.icon-link { +:is(h1, h2, h3, h4):hover > .icon-link { @apply opacity-100; } -.prose a.icon-link { +.prose .icon-link { @apply absolute -ml-6 text-gray-400 no-underline shadow-none opacity-0 2xl:-ml-12 hover:text-gray-400 hover:no-underline; } diff --git a/tailwind.config.js b/tailwind.config.js index b910abd..f2b80b3 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,15 +1,13 @@ -const { spacing, fontFamily } = require('tailwindcss/defaultTheme') -const typography = require('@tailwindcss/typography') +const { fontFamily } = require('tailwindcss/defaultTheme') const colors = require('tailwindcss/colors') -const resetPreCode = { - pre: false, - code: false, - 'pre code': false, -} - module.exports = { - purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], + purge: { + content: ['./pages/**/*.{js,ts,jsx,tsx,.mdx}', './components/**/*.{js,ts,jsx,tsx,.mdx}'], + options: { + keyframes: true, + }, + }, darkMode: 'class', theme: { screens: { @@ -29,77 +27,8 @@ module.exports = { fontFamily: { sans: ['Objectivity', ...fontFamily.sans], }, - typography: (theme) => ({ - DEFAULT: { - css: { - a: { - color: theme('colors.brand.DEFAULT'), - fontWeight: 'bold', - textDecoration: 'none', - position: 'relative', - '&:hover': { color: theme('colors.brand.DEFAULT') }, - code: { color: theme('colors.brand.DEFAULT') }, - }, - 'h2,h3,h4': { - 'scroll-margin-top': spacing[32], - }, - 'blockquote p:first-of-type::before': false, - 'blockquote p:last-of-type::after': false, - ...resetPreCode, - }, - }, - sm: { - css: { - ...resetPreCode, - }, - }, - '2xl': { - css: { - ...resetPreCode, - }, - }, - dark: { - css: { - color: theme('colors.gray.300'), - a: { - color: theme('colors.brand.secondary'), - '&:hover': { color: theme('colors.brand.secondary') }, - code: { color: theme('colors.blue.400') }, - }, - blockquote: { - borderLeftColor: theme('colors.gray.700'), - color: theme('colors.gray.300'), - }, - 'h1,h2,h3,h4': { - color: theme('colors.gray.100'), - }, - hr: { borderColor: theme('colors.gray.700') }, - ol: { - li: { - '&:before': { color: theme('colors.gray.500') }, - }, - }, - ul: { - li: { - '&:before': { backgroundColor: theme('colors.gray.500') }, - }, - }, - strong: { color: theme('colors.gray.300') }, - thead: { - color: theme('colors.gray.100'), - }, - tbody: { - tr: { - borderBottomColor: theme('colors.gray.700'), - }, - }, - }, - }, - }), }, }, - variants: { - typography: ['responsive', 'dark'], - }, - plugins: [typography({ modifiers: ['sm', '2xl'] })], + variants: {}, + plugins: [], }