Skip to content

Commit

Permalink
fix: style responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
jotyy committed Jun 19, 2023
1 parent 05fcf22 commit 4da61c0
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 124 deletions.
225 changes: 113 additions & 112 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,112 +1,113 @@
{
"name": "mantine-admin",
"version": "1.0.0",
"author": "Joshua Lee <[email protected]>",
"description": "A Modern Admin Dashboard made with Mantine/React/NextJS!",
"lint-staged": {
"src/**/*.+(js|jsx|ts|tsx|json|md)": [
"pnpm run lint:fix"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"scripts": {
"dev": "next dev",
"start": "next start",
"build": "pnpm run partytown && next build",
"partytown": "partytown copylib public/~partytown",
"lint": "next lint",
"lint:fix": "eslint src --fix && pnpm run format",
"test": "jest",
"test:watch": "jest --watch",
"type-check": "tsc --noEmit",
"format": "prettier --write src",
"up": "pnpm up --interactive",
"up-latest": "pnpm up --latest",
"release": "standard-version",
"release-as-major": "pnpm run release --release-as major",
"release-as-minor": "pnpm run release --release-as minor",
"release-as-patch": "pnpm run release --release-as patch",
"push-release": "git push --follow-tags origin main",
"pull": "git rebase origin main -i",
"pre-commit": "pnpm run lint",
"prepare": "husky install",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"dependencies": {
"@builder.io/partytown": "0.8.0",
"@emotion/react": "11.11.0",
"@emotion/styled": "11.11.0",
"@hookform/resolvers": "3.1.1",
"@mantine/core": "^6.0.13",
"@mantine/dates": "^6.0.13",
"@mantine/dropzone": "^6.0.13",
"@mantine/hooks": "^6.0.13",
"@mantine/modals": "^6.0.13",
"@mantine/next": "^6.0.13",
"@mantine/notifications": "^6.0.13",
"@mantine/nprogress": "^6.0.13",
"@tabler/icons-react": "^2.18.0",
"@tanstack/react-query": "4.29.12",
"@tanstack/react-table": "^8.9.1",
"axios": "^1.4.0",
"chart.js": "^4.3.0",
"dayjs": "^1.11.8",
"framer-motion": "10.12.16",
"mantine-react-table": "1.0.0-beta.11",
"next": "13.4.5",
"next-compose-plugins": "2.2.1",
"next-images": "1.8.5",
"react": "18.2.0",
"react-chartjs-2": "^5.2.0",
"react-dom": "18.2.0",
"react-hook-form": "7.44.3",
"react-use": "17.4.0",
"sharp": "0.32.1",
"stylis-plugin-rtl": "^2.1.1",
"zod": "^3.21.4",
"zustand": "4.3.8"
},
"devDependencies": {
"@commitlint/cli": "17.6.5",
"@commitlint/config-conventional": "17.6.5",
"@next/eslint-plugin-next": "13.4.5",
"@storybook/addon-essentials": "^7.0.20",
"@storybook/addon-interactions": "^7.0.20",
"@storybook/addon-links": "^7.0.20",
"@storybook/blocks": "^7.0.20",
"@storybook/nextjs": "^7.0.20",
"@storybook/react": "^7.0.20",
"@storybook/testing-library": "^0.1.0",
"@tanstack/react-query-devtools": "^4.29.12",
"@testing-library/dom": "9.3.0",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "14.0.0",
"@testing-library/user-event": "14.4.3",
"@types/http-proxy": "^1.17.11",
"@types/jest": "29.5.2",
"@types/node": "20.3.1",
"@types/react": "18.2.12",
"@typescript-eslint/eslint-plugin": "5.59.11",
"@typescript-eslint/parser": "5.59.11",
"eslint": "8.42.0",
"eslint-config-next": "13.4.5",
"eslint-config-prettier": "8.8.0",
"eslint-plugin-jest": "27.2.1",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-testing-library": "5.11.0",
"husky": "8.0.3",
"jest": "29.5.0",
"jest-environment-jsdom": "29.5.0",
"lint-staged": "13.2.2",
"prettier": "2.8.8",
"standard-version": "9.5.0",
"storybook": "^7.0.20",
"storybook-dark-mode": "^3.0.0",
"typescript": "5.1.3"
}
}
{
"name": "mantine-admin",
"version": "1.0.0",
"author": "Joshua Lee <[email protected]>",
"description": "A Modern Admin Dashboard made with Mantine/React/NextJS!",
"lint-staged": {
"src/**/*.+(js|jsx|ts|tsx|json|md)": [
"pnpm run lint:fix"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"scripts": {
"dev": "next dev",
"start": "next start",
"build": "pnpm run partytown && next build",
"partytown": "partytown copylib public/~partytown",
"lint": "next lint",
"lint:fix": "eslint src --fix && pnpm run format",
"test": "jest",
"test:watch": "jest --watch",
"type-check": "tsc --noEmit",
"format": "prettier --write src",
"up": "pnpm up --interactive",
"up-latest": "pnpm up --latest",
"release": "standard-version",
"release-as-major": "pnpm run release --release-as major",
"release-as-minor": "pnpm run release --release-as minor",
"release-as-patch": "pnpm run release --release-as patch",
"push-release": "git push --follow-tags origin main",
"pull": "git rebase origin main -i",
"pre-commit": "pnpm run lint",
"prepare": "husky install",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"dependencies": {
"@builder.io/partytown": "0.8.0",
"@emotion/react": "11.11.0",
"@emotion/styled": "11.11.0",
"@hookform/resolvers": "3.1.1",
"@mantine/core": "^6.0.13",
"@mantine/dates": "^6.0.13",
"@mantine/dropzone": "^6.0.13",
"@mantine/hooks": "^6.0.13",
"@mantine/modals": "^6.0.13",
"@mantine/next": "^6.0.13",
"@mantine/notifications": "^6.0.13",
"@mantine/nprogress": "^6.0.13",
"@tabler/icons-react": "^2.18.0",
"@tanstack/react-query": "4.29.12",
"@tanstack/react-table": "^8.9.1",
"axios": "^1.4.0",
"chart.js": "^4.3.0",
"dayjs": "^1.11.8",
"framer-motion": "10.12.16",
"mantine-react-table": "1.0.0-beta.11",
"next": "13.4.5",
"next-compose-plugins": "2.2.1",
"next-images": "1.8.5",
"react": "18.2.0",
"react-chartjs-2": "^5.2.0",
"react-dom": "18.2.0",
"react-hook-form": "7.44.3",
"react-parallax-tilt": "^1.7.147",
"react-use": "17.4.0",
"sharp": "0.32.1",
"stylis-plugin-rtl": "^2.1.1",
"zod": "^3.21.4",
"zustand": "4.3.8"
},
"devDependencies": {
"@commitlint/cli": "17.6.5",
"@commitlint/config-conventional": "17.6.5",
"@next/eslint-plugin-next": "13.4.5",
"@storybook/addon-essentials": "^7.0.20",
"@storybook/addon-interactions": "^7.0.20",
"@storybook/addon-links": "^7.0.20",
"@storybook/blocks": "^7.0.20",
"@storybook/nextjs": "^7.0.20",
"@storybook/react": "^7.0.20",
"@storybook/testing-library": "^0.1.0",
"@tanstack/react-query-devtools": "^4.29.12",
"@testing-library/dom": "9.3.0",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "14.0.0",
"@testing-library/user-event": "14.4.3",
"@types/http-proxy": "^1.17.11",
"@types/jest": "29.5.2",
"@types/node": "20.3.1",
"@types/react": "18.2.12",
"@typescript-eslint/eslint-plugin": "5.59.11",
"@typescript-eslint/parser": "5.59.11",
"eslint": "8.42.0",
"eslint-config-next": "13.4.5",
"eslint-config-prettier": "8.8.0",
"eslint-plugin-jest": "27.2.1",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-testing-library": "5.11.0",
"husky": "8.0.3",
"jest": "29.5.0",
"jest-environment-jsdom": "29.5.0",
"lint-staged": "13.2.2",
"prettier": "2.8.8",
"standard-version": "9.5.0",
"storybook": "^7.0.20",
"storybook-dark-mode": "^3.0.0",
"typescript": "5.1.3"
}
}
13 changes: 13 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions src/components/Landing/EmailSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const useStyles = createStyles(theme => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-around',
padding: `calc(${theme.spacing.xl} * 2) 0`,
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,

[theme.fn.smallerThan('sm')]: {
Expand All @@ -31,6 +32,7 @@ const useStyles = createStyles(theme => ({
paddingRight: `calc(${theme.spacing.xl} * 4)`,

[theme.fn.smallerThan('sm')]: {
maxWidth: '90%',
paddingRight: 0,
marginTop: theme.spacing.xl,
},
Expand Down
27 changes: 15 additions & 12 deletions src/components/Landing/FeaturesSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
IconBrandPlanetscale,
IconBrandReact,
} from '@tabler/icons-react';
import Tilt from 'react-parallax-tilt';

export const featuresData = [
{
Expand Down Expand Up @@ -55,17 +56,19 @@ interface FeatureProps {

export function Feature({ icon: Icon, title, description }: FeatureProps) {
return (
<Paper shadow="md" px="lg" py="sm" radius="md" withBorder>
<ThemeIcon variant="light" size={60} radius={60}>
<Icon size="2rem" stroke={1.5} />
</ThemeIcon>
<Text mt="sm" mb={7} fw="600">
{title}
</Text>
<Text size="sm" color="dimmed" sx={{ lineHeight: 1.6 }}>
{description}
</Text>
</Paper>
<Tilt>
<Paper h="100%" shadow="md" px="lg" py="sm" radius="md" withBorder>
<ThemeIcon variant="light" size={60} radius={60}>
<Icon size="2rem" stroke={1.5} />
</ThemeIcon>
<Text mt="sm" mb={7} fw="600">
{title}
</Text>
<Text size="sm" color="dimmed" sx={{ lineHeight: 1.6 }}>
{description}
</Text>
</Paper>
</Tilt>
);
}

Expand All @@ -82,7 +85,7 @@ const useStyles = createStyles(theme => ({
fontFamily: `Greycliff CF, ${theme.fontFamily}`,
fontWeight: 900,
lineHeight: 1.05,
fontSize: rem(64),
fontSize: rem(60),

[theme.fn.smallerThan('md')]: {
maxWidth: '100%',
Expand Down

0 comments on commit 4da61c0

Please sign in to comment.