mirror of
https://github.com/status-im/status-web.git
synced 2025-02-02 15:54:27 +00:00
a7e9b1f9e3
* add illustrations assets * add stickers assets * add communities assets * add create community assets * rename messenger assets * unify messenger assets * add homepage assets * add communities page * add create community page * add assets relative path * update messenger page * remove routes * update homepage * update app layout * unify illustrations * add images path * update featre feature pages sections * update stickers * add titles to tailwind.config * update homepage * update features pages * remove arbitrary font values from titles * update links * move arbitrary values to config * update app layout * update titles * update assets * fix tw linting * changes * update homepage assets * add size to stickers * update app layout * add tokens assets * update homepage * fix colors * update section * update sections * add explore dapps section * add parallax circles * improve parallax hook * use react-scroll-parallax * update parallax circle * make section responsive * fix hero, add desktop screenshot section * remove snap * sections * update footer icon * update wallet assets paths * add moar stickers * add tailwind helpers * extract feature list * use container * update assets * use new assets * feature list * update illustrations in help * fix typing * add community cards * update hero images * update hero images * use wallet image * THE DARK --------- Co-authored-by: Jakub Kotula <520927+jkbktl@users.noreply.github.com>
122 lines
2.5 KiB
JavaScript
122 lines
2.5 KiB
JavaScript
// eslint-disable-next-line eslint-comments/disable-enable-pair
|
|
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
const { fontFamily } = require('tailwindcss/defaultTheme')
|
|
const colors = require('@status-im/colors')
|
|
const plugin = require('tailwindcss/plugin')
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
'./src/**/*.{js,ts,jsx,tsx,mdx}',
|
|
// './app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
theme: {
|
|
fontFamily: {
|
|
sans: ['var(--font-inter)', ...fontFamily.sans],
|
|
},
|
|
|
|
// use <Text /> from @status-im/components or arbitrary values
|
|
fontSize: {
|
|
88: [
|
|
'5.5rem',
|
|
{
|
|
lineHeight: '5.25rem',
|
|
letterSpacing: '-0.1155rem',
|
|
fontWeight: '700',
|
|
},
|
|
],
|
|
64: [
|
|
'4rem',
|
|
{
|
|
lineHeight: '4.25rem',
|
|
letterSpacing: '-0.08rem',
|
|
fontWeight: '700',
|
|
},
|
|
],
|
|
48: [
|
|
'3rem',
|
|
{
|
|
lineHeight: '3.125rem',
|
|
letterSpacing: '-0.06rem',
|
|
fontWeight: '700',
|
|
},
|
|
],
|
|
40: [
|
|
'2.5rem',
|
|
{
|
|
lineHeight: '2.75rem',
|
|
letterSpacing: '-0.05rem',
|
|
fontWeight: '700',
|
|
},
|
|
],
|
|
27: [
|
|
'1.6875rem',
|
|
{
|
|
lineHeight: '2rem',
|
|
letterSpacing: '-0.03544rem',
|
|
fontWeight: '600',
|
|
},
|
|
],
|
|
},
|
|
|
|
colors: colors,
|
|
|
|
fontWeight: {
|
|
regular: '400',
|
|
medium: '500',
|
|
semibold: '600',
|
|
bold: '700',
|
|
},
|
|
boxShadow: {
|
|
1: '0px 2px 20px rgba(9, 16, 28, 0.04)',
|
|
3: '0px 8px 30px rgba(9, 16, 28, 0.12);',
|
|
},
|
|
|
|
extend: {
|
|
spacing: {
|
|
30: '7.5rem',
|
|
},
|
|
|
|
maxWidth: {
|
|
page: 1504,
|
|
},
|
|
|
|
transitionProperty: {
|
|
height: 'height',
|
|
},
|
|
|
|
screens: {
|
|
'md-lg': { raw: '(min-width: 868px)' },
|
|
},
|
|
|
|
keyframes: {
|
|
heightIn: {
|
|
from: { height: 0 },
|
|
// to: { height: 296 },
|
|
to: { height: 'var(--radix-navigation-menu-viewport-height)' },
|
|
},
|
|
heightOut: {
|
|
from: { height: 'var(--radix-navigation-menu-viewport-height)' },
|
|
// from: { height: 296 },
|
|
to: { height: 0 },
|
|
},
|
|
},
|
|
},
|
|
|
|
animation: {
|
|
heightIn: 'heightIn 250ms ease',
|
|
heightOut: 'heightOut 250ms ease',
|
|
},
|
|
},
|
|
plugins: [
|
|
require('tailwindcss-animate'),
|
|
plugin(({ matchUtilities }) => {
|
|
matchUtilities({
|
|
perspective: value => ({
|
|
perspective: value,
|
|
}),
|
|
})
|
|
}),
|
|
],
|
|
}
|