From c4fe6fe87b017840fc866bc576a13c90e75e9cb5 Mon Sep 17 00:00:00 2001 From: Tuan Nguyen Date: Fri, 7 Aug 2020 16:38:56 +1000 Subject: [PATCH] add headline --- gatsby-config.js | 11 + package-lock.json | 282 ++++++++++++++++++++++++++ package.json | 2 + src/components/home/Headline.tsx | 38 +++- src/components/ui/controls/Button.tsx | 24 ++- src/components/ui/groups/Groups.tsx | 21 ++ src/components/ui/icons/Icon.tsx | 30 +-- src/components/ui/images/Avatar.tsx | 18 ++ src/icons/facebook.svg | 3 + src/icons/github.svg | 14 ++ src/icons/linkedin.svg | 3 + src/icons/mail.svg | 4 + src/icons/phone.svg | 4 + src/index.css | 4 + tailwind.config.js | 180 +++++++++++++++- 15 files changed, 613 insertions(+), 25 deletions(-) create mode 100644 src/components/ui/groups/Groups.tsx create mode 100644 src/components/ui/images/Avatar.tsx create mode 100644 src/icons/facebook.svg create mode 100644 src/icons/github.svg create mode 100644 src/icons/linkedin.svg create mode 100644 src/icons/mail.svg create mode 100644 src/icons/phone.svg diff --git a/gatsby-config.js b/gatsby-config.js index d654e5b..c41ad50 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -15,6 +15,17 @@ module.exports = { path: `${__dirname}/src/images`, }, }, + { + resolve: `gatsby-plugin-prefetch-google-fonts`, + options: { + fonts: [ + { + family: `Roboto Slab`, + variants: [`600`, `700`, `800`, `900`], + }, + ], + }, + }, `gatsby-transformer-sharp`, `gatsby-plugin-sharp`, { diff --git a/package-lock.json b/package-lock.json index 2f409c9..3ed6ca9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8946,6 +8946,181 @@ "postcss-loader": "^3.0.0" } }, + "gatsby-plugin-prefetch-google-fonts": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/gatsby-plugin-prefetch-google-fonts/-/gatsby-plugin-prefetch-google-fonts-1.4.3.tgz", + "integrity": "sha512-rrNGpdLkSEQWksM1A1cJnL/wuu9GLfAl8oPQgpn3cmpKd4jnXk+nbLyQOwKQlRYSrzpju59dY8oyf4UfSFbqPg==", + "dev": true, + "requires": { + "@babel/runtime": "^7.2.0", + "clean-css": "^4.2.1", + "download": "^7.1.0", + "fs-extra": "^7.0.0", + "get-urls": "^8.0.0", + "globby": "^8.0.1", + "google-fonts-plugin": "2.0.2", + "object-hash": "^1.3.0" + }, + "dependencies": { + "@nodelib/fs.stat": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", + "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==", + "dev": true + }, + "array-union": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", + "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=", + "dev": true, + "requires": { + "array-uniq": "^1.0.1" + } + }, + "arrify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", + "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=", + "dev": true + }, + "dir-glob": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.0.0.tgz", + "integrity": "sha512-37qirFDz8cA5fimp9feo43fSuRo2gHwaIn6dXL8Ber1dGwUosDrGZeCCXq57WnIqE4aQ+u3eQZzsk1yOzhdwag==", + "dev": true, + "requires": { + "arrify": "^1.0.1", + "path-type": "^3.0.0" + } + }, + "download": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/download/-/download-7.1.0.tgz", + "integrity": "sha512-xqnBTVd/E+GxJVrX5/eUJiLYjCGPwMpdL+jGhGU57BvtcA7wwhtHVbXBeUk51kOpW3S7Jn3BQbN9Q1R1Km2qDQ==", + "dev": true, + "requires": { + "archive-type": "^4.0.0", + "caw": "^2.0.1", + "content-disposition": "^0.5.2", + "decompress": "^4.2.0", + "ext-name": "^5.0.0", + "file-type": "^8.1.0", + "filenamify": "^2.0.0", + "get-stream": "^3.0.0", + "got": "^8.3.1", + "make-dir": "^1.2.0", + "p-event": "^2.1.0", + "pify": "^3.0.0" + } + }, + "fast-glob": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz", + "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==", + "dev": true, + "requires": { + "@mrmlnc/readdir-enhanced": "^2.2.1", + "@nodelib/fs.stat": "^1.1.2", + "glob-parent": "^3.1.0", + "is-glob": "^4.0.0", + "merge2": "^1.2.3", + "micromatch": "^3.1.10" + } + }, + "file-type": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/file-type/-/file-type-8.1.0.tgz", + "integrity": "sha512-qyQ0pzAy78gVoJsmYeNgl8uH8yKhr1lVhW7JbzJmnlRi0I4R2eEDEJZVKG8agpDnLpacwNbDhLNG/LMdxHD2YQ==", + "dev": true + }, + "fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + }, + "get-stream": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", + "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", + "dev": true + }, + "globby": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/globby/-/globby-8.0.2.tgz", + "integrity": "sha512-yTzMmKygLp8RUpG1Ymu2VXPSJQZjNAZPD4ywgYEaG7e4tBJeUQBO8OpXrf1RCNcEs5alsoJYPAMiIHP0cmeC7w==", + "dev": true, + "requires": { + "array-union": "^1.0.1", + "dir-glob": "2.0.0", + "fast-glob": "^2.0.2", + "glob": "^7.1.2", + "ignore": "^3.3.5", + "pify": "^3.0.0", + "slash": "^1.0.0" + } + }, + "ignore": { + "version": "3.3.10", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz", + "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==", + "dev": true + }, + "make-dir": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", + "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==", + "dev": true, + "requires": { + "pify": "^3.0.0" + } + }, + "p-event": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/p-event/-/p-event-2.3.1.tgz", + "integrity": "sha512-NQCqOFhbpVTMX4qMe8PF8lbGtzZ+LCiN7pcNrb/413Na7+TRoe1xkKUzuWa/YEJdGQ0FvKtj35EEbDoVPO2kbA==", + "dev": true, + "requires": { + "p-timeout": "^2.0.1" + } + }, + "p-timeout": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-2.0.1.tgz", + "integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==", + "dev": true, + "requires": { + "p-finally": "^1.0.0" + } + }, + "path-type": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz", + "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==", + "dev": true, + "requires": { + "pify": "^3.0.0" + } + }, + "pify": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", + "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "dev": true + }, + "slash": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz", + "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=", + "dev": true + } + } + }, "gatsby-plugin-react-helmet": { "version": "3.3.10", "resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.3.10.tgz", @@ -9441,6 +9616,16 @@ "pump": "^3.0.0" } }, + "get-urls": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/get-urls/-/get-urls-8.0.0.tgz", + "integrity": "sha512-9c6aVD6HqnpFjqWSoRzSGNo69hNnSa8EevNFVeIRSLYqYlIJNvtHgrqiQ1sUjHwbZPBY5gO1FMlVjmElfdneqw==", + "dev": true, + "requires": { + "normalize-url": "^3.3.0", + "url-regex": "^4.0.0" + } + }, "get-value": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz", @@ -9573,6 +9758,37 @@ "slash": "^3.0.0" } }, + "google-fonts-plugin": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/google-fonts-plugin/-/google-fonts-plugin-2.0.2.tgz", + "integrity": "sha512-pWYFe6zoLA6uIUpSr/pkakf3DwA2fYgpStfe54AmkiKTHMCUILvtqihHaS2f4SqbTpdpEUYVTMMgvs2ur1ge8g==", + "dev": true, + "requires": { + "axios": "^0.18.0", + "cssnano": "^4.0.5", + "mkdirp": "^0.5.1", + "neon-js": "^1.1.2", + "path": "^0.12.7" + }, + "dependencies": { + "axios": { + "version": "0.18.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz", + "integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==", + "dev": true, + "requires": { + "follow-redirects": "1.5.10", + "is-buffer": "^2.0.2" + } + }, + "is-buffer": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz", + "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==", + "dev": true + } + } + }, "got": { "version": "8.3.2", "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz", @@ -13386,6 +13602,12 @@ "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" }, + "neon-js": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/neon-js/-/neon-js-1.1.2.tgz", + "integrity": "sha1-r4XY4ruAmc/H9v4laolqVGSwBiM=", + "dev": true + }, "next-tick": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz", @@ -14247,6 +14469,33 @@ "cross-spawn": "^6.0.5" } }, + "path": { + "version": "0.12.7", + "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz", + "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=", + "dev": true, + "requires": { + "process": "^0.11.1", + "util": "^0.10.3" + }, + "dependencies": { + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "dev": true + }, + "util": { + "version": "0.10.4", + "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", + "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==", + "dev": true, + "requires": { + "inherits": "2.0.3" + } + } + } + }, "path-browserify": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz", @@ -18700,6 +18949,15 @@ } } }, + "tailwindcss-typography": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/tailwindcss-typography/-/tailwindcss-typography-3.1.0.tgz", + "integrity": "sha512-uqovHMt9orPs1kl2U+bidlcO25tmUGJjjluQdI67yRnOy/IlqKe6tYcHHAsQPhehlk3r11/T3CE7Uc0PSUJcNg==", + "dev": true, + "requires": { + "lodash": "^4.17.15" + } + }, "tapable": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", @@ -18928,6 +19186,12 @@ "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=" }, + "tlds": { + "version": "1.208.0", + "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.208.0.tgz", + "integrity": "sha512-6kbY7GJpRQXwBddSOAbVUZXjObbCGFXliWWN+kOSEoRWIOyRWLB6zdeKC/Tguwwenl/KsUx016XR50EdHYsxZw==", + "dev": true + }, "tmp": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz", @@ -19811,6 +20075,24 @@ "prepend-http": "^2.0.0" } }, + "url-regex": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/url-regex/-/url-regex-4.1.1.tgz", + "integrity": "sha512-ViSDgDPNKkrQHI81GLCjdDN+Rsk3tAW/uLXlBOJxtcHzWZjta58Z0APXhfXzS89YszsheMnEvXeDXsWUB53wwA==", + "dev": true, + "requires": { + "ip-regex": "^1.0.1", + "tlds": "^1.187.0" + }, + "dependencies": { + "ip-regex": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-1.0.3.tgz", + "integrity": "sha1-3FiQdvZZ9BnCIgOaMzFvHHOH7/0=", + "dev": true + } + } + }, "url-slug": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/url-slug/-/url-slug-2.0.0.tgz", diff --git a/package.json b/package.json index 1e7b830..2b0f4a0 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "eslint-plugin-react": "^7.20.5", "gatsby-plugin-emotion": "^4.3.10", "gatsby-plugin-postcss": "^2.3.11", + "gatsby-plugin-prefetch-google-fonts": "^1.4.3", "husky": "^4.2.5", "lint-staged": "^10.2.11", "prettier": "2.0.5", @@ -38,6 +39,7 @@ "svg-transform-loader": "^2.0.13", "svgo-loader": "^2.2.1", "tailwindcss": "^1.6.2", + "tailwindcss-typography": "^3.1.0", "twin.macro": "^1.7.0", "typescript": "^3.9.7", "typescript-plugin-tw-template": "^2.0.1", diff --git a/src/components/home/Headline.tsx b/src/components/home/Headline.tsx index c8a7d02..6d2b5ce 100644 --- a/src/components/home/Headline.tsx +++ b/src/components/home/Headline.tsx @@ -1,21 +1,51 @@ import React from 'react'; import tw, { styled } from 'twin.macro'; import { Button } from '~/components/ui/controls/Button'; +import { Avatar } from '~/components/ui/images/Avatar'; +import { Icon } from '~/components/ui/icons/Icon'; +import { Groups } from '~/components/ui/groups/Groups'; const Root = styled.header` - ${tw`bg-gray-200 py-5`} + ${tw`bg-primary py-5 shadow-xs text-white`} `; const Container = styled.div` - ${tw`container flex justify-between items-center`} + ${tw`container flex justify-between items-center px-6`} `; export default function Headline() { return ( - Here - +
+ +
+

Tuan Nguyen

+
Software Developer
+
+ + vdtn359@gmail.com +
+
+ + 0450082978 +
+ + + + + +
+
+ ); diff --git a/src/components/ui/controls/Button.tsx b/src/components/ui/controls/Button.tsx index d20ba80..2f157c9 100644 --- a/src/components/ui/controls/Button.tsx +++ b/src/components/ui/controls/Button.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import 'twin.macro'; +import React, { HTMLAttributes } from 'react'; +import { css } from 'twin.macro'; import { Icon, SvgIcon } from '~/components/ui/icons/Icon'; type Props = { @@ -9,7 +9,8 @@ type Props = { textColor?: string; children: any; icon?: SvgIcon; -}; +} & HTMLAttributes; + export const Button: React.FC = ({ size = 'sm', bgColor = 'cta', @@ -17,6 +18,7 @@ export const Button: React.FC = ({ children, rounded = true, icon, + ...props }) => { const sizeClass = { @@ -31,12 +33,24 @@ export const Button: React.FC = ({ return ( diff --git a/src/components/ui/groups/Groups.tsx b/src/components/ui/groups/Groups.tsx new file mode 100644 index 0000000..de69325 --- /dev/null +++ b/src/components/ui/groups/Groups.tsx @@ -0,0 +1,21 @@ +import React, { HTMLAttributes } from 'react'; +import { css } from 'twin.macro'; +type Props = { + size: number; + children: any; +} & HTMLAttributes; + +export function Groups({ size, children, ...props }: Props) { + return ( +
*:not(last-child) { + margin-right: ${size}em; + } + `} + > + {children} +
+ ); +} diff --git a/src/components/ui/icons/Icon.tsx b/src/components/ui/icons/Icon.tsx index 57213a1..4ae410e 100644 --- a/src/components/ui/icons/Icon.tsx +++ b/src/components/ui/icons/Icon.tsx @@ -1,35 +1,37 @@ -import React from 'react'; +import React, { HTMLAttributes } from 'react'; const iconsContext = require.context('~/icons/', true, /svg$/); -export type SvgIcon = 'close' | 'chevron-down' | 'send'; - -export function Icon({ - name, - width, - height, - size, - color, - ...props -}: { +type Props = { name: SvgIcon; width?: number; height?: number; size?: number; color?: string; - className?: string; -}) { +} & HTMLAttributes; + +export type SvgIcon = + | 'close' + | 'chevron-down' + | 'send' + | 'mail' + | 'phone' + | 'github' + | 'facebook' + | 'linkedin'; + +export function Icon({ name, width, height, size, color, ...props }: Props) { if (size) { width = height = size; } const icon = iconsContext(`./${name}.svg`).default; return ( diff --git a/src/components/ui/images/Avatar.tsx b/src/components/ui/images/Avatar.tsx new file mode 100644 index 0000000..130c746 --- /dev/null +++ b/src/components/ui/images/Avatar.tsx @@ -0,0 +1,18 @@ +import React, { HTMLAttributes } from 'react'; + +type Props = { size: number; src: string; rounded?: boolean } & HTMLAttributes< + HTMLImageElement +>; + +export function Avatar({ size, src, rounded = true, ...props }: Props) { + return ( + {'avatar'} + ); +} diff --git a/src/icons/facebook.svg b/src/icons/facebook.svg new file mode 100644 index 0000000..9a07755 --- /dev/null +++ b/src/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/github.svg b/src/icons/github.svg new file mode 100644 index 0000000..ea2817a --- /dev/null +++ b/src/icons/github.svg @@ -0,0 +1,14 @@ + + + + github [#142] + Created with Sketch. + + + + + + + + + diff --git a/src/icons/linkedin.svg b/src/icons/linkedin.svg new file mode 100644 index 0000000..7f4594d --- /dev/null +++ b/src/icons/linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/mail.svg b/src/icons/mail.svg new file mode 100644 index 0000000..a336b1b --- /dev/null +++ b/src/icons/mail.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/icons/phone.svg b/src/icons/phone.svg new file mode 100644 index 0000000..62897fc --- /dev/null +++ b/src/icons/phone.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/index.css b/src/index.css index b5c61c9..caa88de 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,7 @@ @tailwind base; @tailwind components; @tailwind utilities; + +body { + font-family: 'Roboto Slab', sans-serif; +} diff --git a/tailwind.config.js b/tailwind.config.js index 8973dc9..bbe725e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,159 @@ module.exports = { purge: ['./src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx'], theme: { + textIndent: { + // defaults to {} + '1': '0.25rem', + '2': '0.5rem', + }, + textShadow: { + // defaults to {} + default: '0 2px 5px rgba(0, 0, 0, 0.5)', + lg: '0 2px 10px rgba(0, 0, 0, 0.5)', + }, + textDecorationStyle: { + // defaults to these values + solid: 'solid', + double: 'double', + dotted: 'dotted', + dashed: 'dashed', + wavy: 'wavy', + }, + textDecorationColor: { + // defaults to theme => theme('colors') + red: '#f00', + green: '#0f0', + blue: '#00f', + }, + fontVariantCaps: { + // defaults to these values + normal: 'normal', + small: 'small-caps', + 'all-small': 'all-small-caps', + petite: 'petite-caps', + unicase: 'unicase', + titling: 'titling-caps', + }, + fontVariantNumeric: { + // defaults to these values + normal: 'normal', + ordinal: 'ordinal', + 'slashed-zero': 'slashed-zero', + lining: 'lining-nums', + oldstyle: 'oldstyle-nums', + proportional: 'proportional-nums', + tabular: 'tabular-nums', + 'diagonal-fractions': 'diagonal-fractions', + 'stacked-fractions': 'stacked-fractions', + }, + fontVariantLigatures: { + // defaults to these values + normal: 'normal', + none: 'none', + common: 'common-ligatures', + 'no-common': 'no-common-ligatures', + discretionary: 'discretionary-ligatures', + 'no-discretionary': 'no-discretionary-ligatures', + historical: 'historical-ligatures', + 'no-historical': 'no-historical-ligatures', + contextual: 'contextual', + 'no-contextual': 'no-contextual', + }, + textRendering: { + // defaults to these values + 'rendering-auto': 'auto', + 'optimize-legibility': 'optimizeLegibility', + 'optimize-speed': 'optimizeSpeed', + 'geometric-precision': 'geometricPrecision', + }, + textStyles: (theme) => ({ + // defaults to {} + heading: { + output: false, // this means there won't be a "heading" component in the CSS, but it can be extended + fontWeight: theme('fontWeight.bold'), + lineHeight: theme('lineHeight.tight'), + }, + h1: { + extends: 'heading', // this means all the styles in "heading" will be copied here; "extends" can also be an array to extend multiple text styles + fontSize: theme('fontSize.5xl'), + '@screen sm': { + fontSize: theme('fontSize.6xl'), + }, + }, + h2: { + extends: 'heading', + fontSize: theme('fontSize.4xl'), + '@screen sm': { + fontSize: theme('fontSize.5xl'), + }, + }, + h3: { + extends: 'heading', + fontSize: theme('fontSize.4xl'), + }, + h4: { + extends: 'heading', + fontSize: theme('fontSize.3xl'), + }, + h5: { + extends: 'heading', + fontSize: theme('fontSize.2xl'), + }, + h6: { + extends: 'heading', + fontSize: theme('fontSize.xl'), + }, + link: { + fontWeight: theme('fontWeight.bold'), + color: theme('colors.blue.400'), + '&:hover': { + color: theme('colors.blue.600'), + textDecoration: 'underline', + }, + }, + richText: { + fontWeight: theme('fontWeight.normal'), + fontSize: theme('fontSize.base'), + lineHeight: theme('lineHeight.relaxed'), + '> * + *': { + marginTop: '1em', + }, + h1: { + extends: 'h1', + }, + h2: { + extends: 'h2', + }, + h3: { + extends: 'h3', + }, + h4: { + extends: 'h4', + }, + h5: { + extends: 'h5', + }, + h6: { + extends: 'h6', + }, + ul: { + listStyleType: 'disc', + }, + ol: { + listStyleType: 'decimal', + }, + a: { + extends: 'link', + }, + 'b, strong': { + fontWeight: theme('fontWeight.bold'), + }, + 'i, em': { + fontStyle: 'italic', + }, + }, + }), + extend: { colors: { secondary: '#d1e0f4', @@ -16,9 +169,32 @@ module.exports = { center: true, }, }, + variants: { + // all the following default to ['responsive'] + textIndent: ['responsive'], + textShadow: ['responsive'], + textDecorationStyle: ['responsive'], + textDecorationColor: ['responsive'], + ellipsis: ['responsive'], + hyphens: ['responsive'], + kerning: ['responsive'], + textUnset: ['responsive'], + fontVariantCaps: ['responsive'], + fontVariantNumeric: ['responsive'], + fontVariantLigatures: ['responsive'], + textRendering: ['responsive'], + }, corePlugins: { container: true, }, - variants: {}, - plugins: [], + plugins: [ + require('tailwindcss-typography')({ + // all these options default to the values specified here + ellipsis: true, // whether to generate ellipsis utilities + hyphens: true, // whether to generate hyphenation utilities + kerning: true, // whether to generate kerning utilities + textUnset: true, // whether to generate utilities to unset text properties + componentPrefix: 'type-', // the prefix to use for text style classes + }), + ], };