Correct layouts

package.json

@@ -8,7 +8,7 @@
     "build": "cross-env NODE_ENV=production yarn generate-css-types && tsc && vite build",
     "pretty": "prettier --check src",
     "lint": "yarn pretty && eslint --max-warnings 0 ./src/",
-    "generate-css-types": "tailwindcss-classnames -o src/classnames/tailwind.ts && prettier --write src/classnames/tailwind.ts",
+    "generate-css-types": "tailwindcss-classnames -o src/classnames/tailwind.ts && yarn prettier --write src/classnames/tailwind.ts",
     "update": "yarn build && git add . && git commit -m 'update' && git push",
     "preview": "yarn build && yarn vite preview"
   },

src/classnames/tailwind.ts

@@ -7483,8 +7483,6 @@ export type TRotate =
   | 'rotate-45'
   | 'rotate-90'
   | 'rotate-180'
-  | '-rotate-20'
-  | '-rotate-90'
 
 export type TTranslate =
   | 'translate-x-0'

src/components/MainPage/BigWhaleLabs.tsx

@@ -22,7 +22,7 @@ const wrapper = classnames(
   display('flex'),
   alignItems('items-center'),
   justifyContent('justify-center'),
-  padding('px-6', 'md:px-0')
+  padding('px-6', 'sm:px-0')
 )
 const imageStyles = classNamesToString(
   position('relative'),
@@ -34,7 +34,7 @@ const imageStyles = classNamesToString(
 )
 const videoStyles = classnames(
   position('absolute'),
-  inset('-right-2', 'top-4', 'md:right-2', 'md:top-8'),
+  inset('-right-2', 'top-4', 'sm:right-2', 'sm:top-8'),
   width('w-40', 'sm:w-48', 'md:w-60'),
   aspectRatio('aspect-square'),
   borderRadius('rounded-full'),

src/components/MainPage/InfoBlock.tsx

@@ -20,7 +20,7 @@ const wrapper = classnames(
   width('w-full'),
   gap('gap-y-8', 'md:gap-x-20'),
   padding('md:px-8'),
-  margin('md:mb-8', 'md:mb-16', 'mt-16', 'md:mt-8')
+  margin('sm:mb-8', 'sm:mb-16', 'mt-16', 'md:mt-8')
 )
 
 export default function () {

src/components/MainPage/MobileInfoBlock.tsx

@@ -11,8 +11,8 @@ import classnames, {
   width,
 } from 'classnames/tailwind'
 
-const hideOnBig = display('md:hidden')
-const wrapper = classnames(hideOnBig, margin('mb-8'))
+const hideOnBig = display('sm:hidden')
+const wrapper = classnames(hideOnBig, margin('mb-8', 'md:mx-8'))
 const crystal = classnames(
   width('w-full'),
   display('flex'),

src/components/NavbarLinks.tsx

@@ -9,7 +9,7 @@ import classnames, {
 } from 'classnames/tailwind'
 
 const navLinkContainer = classnames(
-  display('hidden', 'md:flex'),
+  display('hidden', 'sm:flex'),
   flexDirection('flex-row'),
   alignItems('items-center'),
   justifyContent('justify-center'),

tailwind.config.js

@@ -6,10 +6,6 @@ module.exports = {
       primary: ['"Space Grotesk"', 'sans-serif'],
     },
     extend: {
-      rotate: {
-        '-20': '-20deg',
-        '-90': '-90deg',
-      },
       animation: {
         float: 'float 18s ease-in-out infinite',
       },
@@ -71,7 +67,7 @@ module.exports = {
         se: '23.5rem',
         tablet: '31.25rem',
         md: '37.5rem',
-        sm: '40rem',
+        sm: '42.1875rem',
         lg: '64rem',
         xl: '80rem',
       },