diff --git a/assets/base.css b/assets/base.css index 05a234a73..eb303268d 100644 --- a/assets/base.css +++ b/assets/base.css @@ -1,35 +1,25 @@ :root { --primary: #ffffff; - --primary-2: #f1f3f5; + --primary-2: #f4f4f4; --secondary: #000000; --secondary-2: #111; - --selection: var(--cyan); + --selection: var(--red); --text-base: #000000; --text-primary: #000000; - --text-secondary: white; + --text-secondary: #ffffff; --hover: rgba(0, 0, 0, 0.075); --hover-1: rgba(0, 0, 0, 0.15); --hover-2: rgba(0, 0, 0, 0.25); - --cyan: #22b8cf; - --green: #37b679; - --red: #da3c3c; - --purple: #f81ce5; - --blue: #0070f3; - - --pink: #ff0080; - --pink-light: #ff379c; - - --magenta: #eb367f; - - --violet: #7928ca; - --violet-dark: #4c2889; + --red: #fc3f1d; + --blue: #4628f0; + --yellow: #fab413; --accent-0: #fff; --accent-1: #fafafa; --accent-2: #eaeaea; - --accent-3: #999999; + --accent-3: #b4afaf; --accent-4: #888888; --accent-5: #666666; --accent-6: #444444; @@ -37,34 +27,16 @@ --accent-8: #111111; --accent-9: #000; - --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue', - 'Helvetica', sans-serif; -} + --font-sans: 'Inter', sans-serif; -[data-theme='dark'] { - --primary: #000000; - --primary-2: #111; - --secondary: #ffffff; - --secondary-2: #f1f3f5; - --hover: rgba(255, 255, 255, 0.075); - --hover-1: rgba(255, 255, 255, 0.15); - --hover-2: rgba(255, 255, 255, 0.25); - --selection: var(--purple); - - --text-base: white; - --text-primary: white; - --text-secondary: black; - - --accent-9: #fff; - --accent-8: #fafafa; - --accent-7: #eaeaea; - --accent-6: #999999; - --accent-5: #888888; - --accent-4: #666666; - --accent-3: #444444; - --accent-2: #333333; - --accent-1: #111111; - --accent-0: #000; + --cyan: #22b8cf; + --green: #37b679; + --purple: #f81ce5; + --pink: #ff0080; + --pink-light: #ff379c; + --magenta: #eb367f; + --violet: #7928ca; + --violet-dark: #4c2889; } *, @@ -80,6 +52,12 @@ html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + @apply text-html; +} +@screen lg { + html { + @apply text-html-lg; + } } html, diff --git a/components/common/Layout/Layout.module.css b/components/common/Layout/Layout.module.css index bb90675a6..f5ee03482 100644 --- a/components/common/Layout/Layout.module.css +++ b/components/common/Layout/Layout.module.css @@ -1,4 +1,3 @@ .root { @apply h-full bg-primary mx-auto transition-colors duration-150; - max-width: 2460px; } diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx index 538b1cac7..5c38e1a3e 100644 --- a/components/ui/Container/Container.tsx +++ b/components/ui/Container/Container.tsx @@ -15,7 +15,7 @@ const Container: FC = ({ clean, }) => { const rootClassName = cn(className, { - 'mx-auto max-w-8xl px-6': !clean, + 'mx-auto max-w-8xl px-4 lg:px-6': !clean, }) let Component: React.ComponentType> = diff --git a/pages/_document.tsx b/pages/_document.tsx index dcd214e4f..65d197499 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -4,7 +4,12 @@ class MyDocument extends Document { render() { return ( - + + +
diff --git a/tailwind.config.js b/tailwind.config.js index 25f9d8e38..5467f9270 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -17,7 +17,7 @@ module.exports = { theme: { extend: { maxWidth: { - '8xl': '1920px', + '8xl': '2560px', }, colors: { primary: 'var(--primary)', @@ -37,15 +37,16 @@ module.exports = { 'accent-7': 'var(--accent-7)', 'accent-8': 'var(--accent-8)', 'accent-9': 'var(--accent-9)', + blue: 'var(--blue)', + red: 'var(--red)', + yellow: 'var(--yellow)', violet: 'var(--violet)', 'violet-light': 'var(--violet-light)', 'violet-dark': 'var(--violet-dark)', pink: 'var(--pink)', 'pink-light': 'var(--pink-light)', cyan: 'var(--cyan)', - blue: 'var(--blue)', green: 'var(--green)', - red: 'var(--red)', }, textColor: { base: 'var(--text-base)', @@ -57,6 +58,10 @@ module.exports = { magical: 'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px', }, + fontSize: { + html: '15px', + 'html-lg': '18px', + }, lineHeight: { 'extra-loose': '2.2', },