Tina Tarighian
commited on
Commit
·
1d3a8d7
1
Parent(s):
bb6831d
scrolling
Browse files- pages/index.js +3 -3
- styles/globals.css +14 -0
pages/index.js
CHANGED
|
@@ -11,7 +11,7 @@ const inter = Inter({ subsets: ['latin'] });
|
|
| 11 |
|
| 12 |
const Header = () => {
|
| 13 |
return (
|
| 14 |
-
<div className="
|
| 15 |
<div className="w-full flex justify-between items-center text-base max-w-7xl mx-auto">
|
| 16 |
<div className="text-gray-500">
|
| 17 |
<span className="text-black font-bold text-lg mr-2">HandSpew</span>
|
|
@@ -42,12 +42,12 @@ export default function Home() {
|
|
| 42 |
<Head>
|
| 43 |
<title>HandSpew</title>
|
| 44 |
<meta name="description" content="Generate thoughts based on hand gestures using MediaPipe and Gemini" />
|
| 45 |
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
| 46 |
<link rel="icon" href="/favicon.ico" />
|
| 47 |
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" />
|
| 48 |
</Head>
|
| 49 |
<Header />
|
| 50 |
-
<main className="flex
|
| 51 |
<HandDetector />
|
| 52 |
</main>
|
| 53 |
</>
|
|
|
|
| 11 |
|
| 12 |
const Header = () => {
|
| 13 |
return (
|
| 14 |
+
<div className="sticky top-0 left-0 right-0 w-full bg-white p-4 z-50 shadow-sm">
|
| 15 |
<div className="w-full flex justify-between items-center text-base max-w-7xl mx-auto">
|
| 16 |
<div className="text-gray-500">
|
| 17 |
<span className="text-black font-bold text-lg mr-2">HandSpew</span>
|
|
|
|
| 42 |
<Head>
|
| 43 |
<title>HandSpew</title>
|
| 44 |
<meta name="description" content="Generate thoughts based on hand gestures using MediaPipe and Gemini" />
|
| 45 |
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
| 46 |
<link rel="icon" href="/favicon.ico" />
|
| 47 |
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" />
|
| 48 |
</Head>
|
| 49 |
<Header />
|
| 50 |
+
<main className="flex flex-col items-center p-4 bg-white font-['Google_Sans',sans-serif] pt-20 overflow-y-auto">
|
| 51 |
<HandDetector />
|
| 52 |
</main>
|
| 53 |
</>
|
styles/globals.css
CHANGED
|
@@ -16,10 +16,24 @@
|
|
| 16 |
}
|
| 17 |
}
|
| 18 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
body {
|
| 20 |
color: var(--foreground);
|
| 21 |
background: var(--background);
|
| 22 |
font-family: 'Google Sans', Arial, Helvetica, sans-serif;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 23 |
}
|
| 24 |
|
| 25 |
/* Minimal thought bubble styling */
|
|
|
|
| 16 |
}
|
| 17 |
}
|
| 18 |
|
| 19 |
+
html, body {
|
| 20 |
+
height: 100%;
|
| 21 |
+
overflow-x: hidden;
|
| 22 |
+
position: relative;
|
| 23 |
+
}
|
| 24 |
+
|
| 25 |
body {
|
| 26 |
color: var(--foreground);
|
| 27 |
background: var(--background);
|
| 28 |
font-family: 'Google Sans', Arial, Helvetica, sans-serif;
|
| 29 |
+
-webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS */
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
/* Fix for iOS Safari 100vh issue */
|
| 33 |
+
@supports (-webkit-touch-callout: none) {
|
| 34 |
+
.min-h-screen {
|
| 35 |
+
height: -webkit-fill-available;
|
| 36 |
+
}
|
| 37 |
}
|
| 38 |
|
| 39 |
/* Minimal thought bubble styling */
|