Fix Tailwind breakpoints

woofers · Jul 23, 2024 · 33c61fd · 33c61fd
1 parent a05df75
commit 33c61fd
Show file tree

Hide file tree

Showing 7 changed files with 479 additions and 30 deletions.
diff --git a/packages/website/package.json b/packages/website/package.json
@@ -27,6 +27,8 @@
     "@svgr/webpack": "^8.0.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@tailwindcss/cli": "4.0.0-alpha.14",
+    "@tailwindcss/postcss": "4.0.0-alpha.14",
     "babel-plugin-react-compiler": "^0.0.0-experimental-938cd9a-20240601",
     "eslint": "^8.25.0",
     "eslint-config-next": "^14.2.3",

diff --git a/packages/website/src/app/global.css b/packages/website/src/app/global.css
@@ -26,3 +26,36 @@
   background: var(--color-selection);
 }
 
+@media (min-width:405px) {
+  .xxs\:text-xs {
+    font-size: 0.75rem;
+    line-height: normal;
+  }
+
+  .xxs\:text-\[66px\] {
+    font-size: 66px;
+  }
+}
+
+@media (min-width:550px) {
+  .xs\:text-base {
+    font-size: 1rem;
+    line-height: normal;
+  }
+
+  .xs\:mt-\[88px\] {
+    margin-top: 88px;
+  }
+
+  .xs\:mb-\[40px\] {
+    margin-bottom: 40px;
+  }
+
+  .xs\:h-\[400px\] {
+    height: 400px;
+  }
+
+  .xs\:text-\[88px\] {
+    font-size: 88px;
+  }
+}
diff --git a/packages/website/src/app/layout.tsx b/packages/website/src/app/layout.tsx
@@ -1,23 +1,21 @@
 import './global.css'
-//import { Quicksand } from 'next/font/google'
+import { Quicksand } from 'next/font/google'
+
 
-/*
 const quicksand = Quicksand({
   subsets: ['latin'],
   weight: ['700'],
   variable: '--fonts-title',
   preload: true,
   display: 'swap'
 })
-  */
- //className={quicksand.variable}
 
 const RootLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   <html lang="en">
     <head />
     <body>
       <div id="__next">
-        <div >{children}</div>
+        <div className={quicksand.variable}>{children}</div>
       </div>
     </body>
   </html>

diff --git a/packages/website/src/components/pause.tsx b/packages/website/src/components/pause.tsx
@@ -26,12 +26,13 @@ const Pause: React.FC<PauseProps> = ({ paused, onClick, className, ...rest }) =>
       onMouseUp={handleClick}
       title={label}
       aria-label={label}
-      className={clsx("text-[75px] border-0 text-[var(--color-primary)] bg-transparent [-webkit-tap-highlight-color:rgba(0,0,0,0)] hover:bg-[var(--color-primaryHover)]", className)}
+      className={clsx("text-[75px] border-0 text-[var(--color-primary)] bg-transparent [-webkit-tap-highlight-color:rgba(0,0,0,0)] hover:text-[var(--color-primaryHover)]", className)}
       {...rest}
     >
-      {paused ? <PlayIcon className="w-[14px]" /> : <PauseIcon className="w-[14px]" />}
+      {paused ? <PlayIcon className="w-[66px]" /> : <PauseIcon className="w-[66px]" />}
     </button>
   )
 }
 
 export default Pause
+
diff --git a/packages/website/src/components/root.tsx b/packages/website/src/components/root.tsx
@@ -22,7 +22,7 @@ const Text: React.FC<React.ComponentProps<'span'>> = ({
 }) => (
   <span
     className={clsx(
-      'font-bold mt-0 mb-0 text-[88px] [font-family:var(--fonts-title)] [letter-spacing:-0.3px]',
+      'font-bold mt-0 mb-0 text-[44px] [font-family:var(--fonts-title)] tracking-[-3px] xs:text-[88px] xxs:text-[66px]',
       className
     )}
     {...rest}
@@ -32,7 +32,7 @@ const Text: React.FC<React.ComponentProps<'span'>> = ({
 const Link: React.FC<React.ComponentProps<'a'>> = ({ className, ...rest }) => (
   <a
     className={clsx(
-      'no-underline text-[8px] text-[var(--color-primary)] hover:text-[var(--color-primaryHover)] xs:text-base xxs:text-xs',
+      '[line-height:normal] no-underline text-[8px] text-[var(--color-primary)] hover:text-[var(--color-primaryHover)] xs:text-base xxs:text-xs',
       className
     )}
     {...rest}

diff --git a/packages/website/src/components/wave.tsx b/packages/website/src/components/wave.tsx
@@ -9,7 +9,7 @@ const WaveSection: React.FC<Nothing> = () => {
   const togglePaused = () => setPause(!isPaused)
   return (
     <>
-      <div className="flex justify-center">
+      <div className="flex justify-center mb-4">
         <Pause onClick={togglePaused} paused={isPaused} />
       </div>
       <Wave