feat: allow for carton scaling and save off preference to localStorage (

#8)

README.md

@@ -1,6 +1,4 @@
-## Getting Started
-
-First, run the development server:
+## Running locally
 
 ```bash
 nvm use
@@ -12,7 +10,7 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Deploy
 
-Deploying a static site (no server) using github actions.
+Deployed via github actions.
 
 Sources:
 

src/app/page.tsx

@@ -18,6 +18,8 @@ import { GlobalCss } from '../components/globalCss';
 import { useTelemetryDeck } from '../hooks/useTelemetryDeck';
 import { useIsFirefox } from '../hooks/useIsFirefox';
 import { DarkModeProvider } from '../hooks/useDarkMode';
+import { Pagination } from '../components/pagination';
+import { startCameraPosArray } from '../components/verticalCenterWithMargin';
 
 const DesktopFeaturesDiv = styled.div`
   text-align: left;
@@ -81,33 +83,33 @@ const DesktopCanvasDiv = styled.div`
   top: 0;
   z-index: 0;
   touch-action: none;
+  * {
+    touch-action: none;
+  }
 `;
 
 const MobileCanvasDiv = styled.div`
   position: absolute;
   left: 0;
-  top: -50px; /// making room for features div
-  height: 100dvh;
   width: 100vw;
   z-index: 0;
   touch-action: none;
+  * {
+    touch-action: none;
+  }
 `;
 
-const cameraDesktop = {
-  // position: [-77, -40.2, 242],
-  position: [-77, -30, 242],
+const camera = {
+  position: startCameraPosArray,
   fov: 56,
-  near: 0.1,
-  far: 10000, // seems a bit much... TODO: double check
+  near: 120,
+  far: 450,
 } as const;
 
 const cameraMobile = {
-  // position: [-77, -40.2, 242],
-  position: [-77, -30, 242],
+  ...camera,
   fov: 60,
-  near: 0.1,
-  far: 10000, // seems a bit much... TODO: double check
-} as const;
+};
 
 export default function Home() {
   const { width, height } = useWindowSize();
@@ -139,10 +141,16 @@ export default function Home() {
         <DarkModeProvider>
           <GlobalCss />
           <ErrorModal />
-          <MobileCanvasDiv>
-            <Canvas flat camera={cameraMobile} style={{ touchAction: 'none' }}>
+          <MobileCanvasDiv
+            style={{
+              height: '100dvh',
+              bottom: closedHeight,
+            }}
+          >
+            <Canvas flat camera={cameraMobile}>
               <Experience />
             </Canvas>
+            <Pagination />
           </MobileCanvasDiv>
           <LinksDiv>
             <Links />
@@ -194,15 +202,10 @@ export default function Home() {
               height: '100dvh',
             }}
           >
-            <Canvas
-              style={{
-                touchAction: 'none',
-              }}
-              flat
-              camera={cameraDesktop}
-            >
+            <Canvas flat camera={camera}>
               <Experience />
             </Canvas>
+            <Pagination />
           </div>
         </DesktopCanvasDiv>
         <DesktopIntroDiv>

src/components/about.tsx

@@ -37,17 +37,30 @@ const FAQ = [
     'What data source are you using?',
     'iOS404 uses [caniuse.com](https://caniuse.com) ([caniuse github](https://github.com/Fyrd/caniuse/tree/main)) data. In the future, hoping to expand to MDN data as well --- there are even more missing iOS features in MDN data.',
   ],
+  [
+    'What browsers can I compare to iOS WebKit?',
+    'You can select from Chrome for Android, Firefox for Android, and/or Safari Desktop. Click on the browser icon to select or deselect a browser. The default comparison browser is Chrome for Android.',
+  ],
+  [
+    'How do I filter out non-standard specifications?',
+    'Click on the filter icon to remove less-standard or non-standard specifications from your search.',
+  ],
   [
     'How do you determine if something is not supported?',
-    'If the selected comparison browser(s) (Chrome for Android is the default but others may be selected) supports a feature more than iOS WebKit, then that feature is consider missing with special note if support is "Partial". You can also use the filtering icon to remove less-standard or non-standard specifications from your search.',
+    'If the selected comparison browser(s) supports a feature more than iOS WebKit, then that feature is consider missing with special note if support is "Partial".',
   ],
+
   [
-    'Who are you?',
-    "Hi! 👋 I'm Shalanah Dawson a developer that believes the web should be powerful, approachable, and fun. Find me on [Twitter](https://twitter.com/shalanahfaith), [GitHub](https://github.com/shalanah), or [LinkedIn](https://linkedin.com/in/shalanah).",
+    'How do I report a bug or ask a feature for iOS404?',
+    'Thank you for your help in making iOS404 better! Open an issue on [GitHub](https://github.com/shalanah/iOS404/issues).',
   ],
   [
     'Do you track me?',
-    'iOS404 uses TelemetryDeck. TelemetryDeck does not collect any personally identifiable information. iOS404 sends a best guess on timezone and device type (phone|tablet|desktop) and on load sends which site feature and filters are active. This helps to understand how our users are using the website and how we can improve it. You can read more about [TelemetryDeck’s privacy policy](https://telemetrydeck.com/privacy)',
+    'iOS404 uses TelemetryDeck. TelemetryDeck does not collect any personally identifiable information. iOS404 sends a best guess on timezone and device type ("phone", "tablet" or "desktop") and on load sends which site feature and specification filters are active. This helps to understand how our users are using the website and how we can improve it. You can read more about [TelemetryDeck’s privacy policy](https://telemetrydeck.com/privacy)',
+  ],
+  [
+    'Who are you?',
+    "Hi! 👋 I'm Shalanah Dawson a developer that believes the web should be powerful, approachable, and fun. Find me on [Twitter](https://twitter.com/shalanahfaith), [GitHub](https://github.com/shalanah), or [LinkedIn](https://linkedin.com/in/shalanah).",
   ],
   ['', 'Copyright 2024. All Rights Reserved - Shalanah Dawson'],
 ];

src/components/arrow.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import styled from 'styled-components';
 
 const Span = styled.span`
-  width: 15px;
-  height: 15px;
   opacity: 1;
   transform-origin: center;
   border: 2px solid var(--titleFg);
@@ -12,16 +10,20 @@ const Span = styled.span`
 `;
 
 export const Arrow = ({
+  size = 15,
   left = false,
   right = false,
 }: {
+  size?: number;
   left?: boolean;
   right?: boolean;
 }) => {
   let isLeft = left !== undefined ? left : right === false;
   return (
     <Span
       style={{
+        width: size,
+        height: size,
         transform: `translateX(${isLeft ? 3 : -3}px) rotate(${
           isLeft ? -45 : 135
         }deg) `,