crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-04 12:11:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Base layout

Browse Source
This commit is contained in:
Jonatan Schultz 2021-08-24 18:08:35 +02:00
parent 55a261a890
commit 60da0bf0ba
5 changed files with 37 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
assets/base.css
View File

@ -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,

1
components/common/Layout/Layout.module.css
View File

@ -1,4 +1,3 @@
.root {
@apply h-full bg-primary mx-auto transition-colors duration-150;
max-width: 2460px;
}

2
components/ui/Container/Container.tsx
View File

@ -15,7 +15,7 @@ const Container: FC<ContainerProps> = ({
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<React.HTMLAttributes<HTMLDivElement>> =

7
pages/_document.tsx
View File

@ -4,7 +4,12 @@ class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;700&display=swap"
rel="stylesheet"
/>
</Head>
<body className="loading">
<Main />
<NextScript />

11
tailwind.config.js
View File

@ -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',
},