CHORE

pubkey · pubkey · Sep 18, 2025 · Sep 5, 2025 · Sep 5, 2025 · Sep 5, 2025
commit fe7b868efabf6b6ceb435a7534cc405f7d53113c
diff --git a/docs-src/src/components/checked-list.tsx b/docs-src/src/components/checked-list.tsx
@@ -23,13 +23,11 @@ const defaultStyles: Record<string, CSSProperties> = {
   icon: {
     color: "#fff",
     width: 37,
-    height: 26,
     flexShrink: 0,
     alignSelf: "center",
   },
   text: {
     flex: 1,
-    marginLeft: 10,
     fontStyle: 'normal',
     fontWeight: 700,
     lineHeight: 'normal',
@@ -48,8 +46,8 @@ export function CheckedList({ children, style, className }: FeatureListProps) {
     <ul className={className} style={{ ...defaultStyles.list, ...style }}>
       {items.map((child, i) => (
         <li key={i} style={defaultStyles.item} className='font-20-16'>
-          <IconCheck style={defaultStyles.icon} />
-          <div style={defaultStyles.text}>{child}</div>
+          <IconCheck style={defaultStyles.icon} className='height-26-21' />
+          <div style={defaultStyles.text} className='margin-left-10-0'>{child}</div>
         </li>
       ))}
     </ul>

diff --git a/docs-src/src/components/emoji-chat-message.tsx b/docs-src/src/components/emoji-chat-message.tsx
@@ -13,6 +13,7 @@ type EmojiMessageBoxProps = {
   direction: "left" | "right" | "button";
   /** Optional click handler (used when direction = "button"). */
   onClick?: MouseEventHandler<HTMLDivElement>;
+  simulateClicks: boolean;
 };
 
 const usedEvents = new WeakSet<CustomEvent>();
@@ -21,6 +22,7 @@ export function EmojiMessageBox({
   emoji,
   direction,
   onClick,
+  simulateClicks
 }: EmojiMessageBoxProps) {
   const [isClicked, setIsClicked] = useState(false);
 
@@ -32,7 +34,11 @@ export function EmojiMessageBox({
 
   useEffect(() => {
     function handleHeartbeat(e) {
-      if (direction === "button" && Math.random() < 0.3) {
+      if (
+        simulateClicks &&
+        direction === "button" &&
+        Math.random() < 0.16
+      ) {
         if (usedEvents.has(e)) {
           return;
         }

diff --git a/docs-src/src/components/emoji-chat.tsx b/docs-src/src/components/emoji-chat.tsx
@@ -18,14 +18,16 @@ type EmojiChatProps = {
   onButtonClick?: (index: number, emoji: string) => void;
   buttonEmojis?: [string, string, string];
   /** Optional class for the outer frame */
-  className?: string;               // ✅ NEW
+  className?: string;
+  simulateClicks: boolean;
 };
 
 export function EmojiChat({
   items,
   onButtonClick,
   buttonEmojis = ["👾", "👨‍💻", "💡"],
-  className,                       // ✅ NEW
+  className,
+  simulateClicks
 }: EmojiChatProps) {
   const frame: CSSProperties = {
     width: 230,
@@ -90,6 +92,7 @@ export function EmojiChat({
               key={i}
               direction={item.direction}
               emoji={item.emoji}
+              simulateClicks={false}
             />
           ))}
         </div>
@@ -102,6 +105,7 @@ export function EmojiChat({
               direction="button"
               emoji={emoji}
               onClick={() => onButtonClick?.(i, emoji)}
+              simulateClicks={simulateClicks}
             />
           ))}
         </div>
@@ -114,14 +118,16 @@ type EmojiChatStatefulProps = {
   online: boolean;
   chatId: string;
   buttonEmojis?: [string, string, string];
-  className?: string;               // ✅ allow passing through
+  className?: string;
+  simulateClicks: boolean;
 };
 
 export function EmojiChatStateful({
   online,
   chatId,
   buttonEmojis,
-  className,                         // ✅ receive it
+  className,
+  simulateClicks
 }: EmojiChatStatefulProps) {
   const unsynced = useRef<ChatItem[]>([]);
   const lastOnlineAt = useRef<number | null>(null);
@@ -178,7 +184,8 @@ export function EmojiChatStateful({
     <EmojiChat
       items={mappedItems}
       buttonEmojis={buttonEmojis}
-      className={className}        
+      className={className}
+      simulateClicks={simulateClicks}
       onButtonClick={(_, emoji) => {
         handleAdd(emoji);
       }}

diff --git a/docs-src/src/components/features-section.tsx b/docs-src/src/components/features-section.tsx
@@ -62,7 +62,7 @@ export function FeaturesSection() {
     }
 
     return (
-        <div className="block features dark tropy-before">
+        <div className="block features dark trophy-before">
             <div className="content">
                 <h2 style={{ textAlign: 'center' }}>
                     All the <b>Features</b> You'll Ever Need
@@ -71,8 +71,9 @@ export function FeaturesSection() {
                     style={{
                         marginTop: 35,
                         marginBottom: 0,
-                        width: '100%',
-                        maxWidth: 1200,
+                        maxWidth: '90%',
+                        marginLeft: 'auto',
+                        marginRight: 'auto',
                         padding: 10,
                         textAlign: 'center',
                     }}

diff --git a/docs-src/src/components/hero-section/T4_hero_b.tsx b/docs-src/src/components/hero-section/T4_hero_b.tsx
@@ -84,7 +84,11 @@ export function HeroSection_B(props: {
                         gap: 20
                     }}
                 >
-                    <EmojiChatStateful online={online} chatId='hero_left' />
+                    <EmojiChatStateful
+                        online={online}
+                        chatId='hero_left'
+                        simulateClicks={true}
+                    />
                     <div
                         className='hide-mobile'
                         style={{
@@ -100,9 +104,8 @@ export function HeroSection_B(props: {
                         online={online}
                         chatId='hero_right'
                         buttonEmojis={['🧩', '👩🏼‍💻', '🔥']}
-
+                        simulateClicks={true}
                     />
-
                     <div
                         className='hide-desktop'
                         style={{

diff --git a/docs-src/src/components/offline-section.tsx b/docs-src/src/components/offline-section.tsx
@@ -17,7 +17,7 @@ export function OfflineSection(props: {
 
   return (
     <div
-      className={'block offline-first ' + (props.dark ? 'dark' : '') + ' tropy-before'}
+      className={'block offline-first ' + (props.dark ? 'dark' : '') + ' trophy-before trophy-after'}
       id="offline"
       ref={props.offlineRef}
       style={{
@@ -32,7 +32,7 @@ export function OfflineSection(props: {
         </h2>
         <div className="inner">
           <div className="half left">
-            <p className='font-16-14'>
+            <p className='font-16-14 centered-mobile-p'>
               RxDB adopts an{' '}
               <a href="/offline-first.html" target="_blank">
                 offline-first
@@ -86,7 +86,11 @@ export function OfflineSection(props: {
               />
               <PixelToggle checked={online} onChange={setOnline} />
             </div>
-            <EmojiChatStateful online={online} chatId="offline" />
+            <EmojiChatStateful
+              online={online}
+              chatId="offline"
+              simulateClicks={false}
+            />
           </div>
         </div>
       </div>

diff --git a/docs-src/src/components/runtimes.tsx b/docs-src/src/components/runtimes.tsx
@@ -13,7 +13,6 @@ const styles: Record<string, CSSProperties> = {
     alignItems: "center",
     justifyContent: "center",
     gap: "2rem",
-    paddingTop: 64,
     paddingLeft: 31,
     paddingRight: 31
   },
@@ -26,7 +25,6 @@ const styles: Record<string, CSSProperties> = {
     display: "flex",
     alignItems: "center",
     justifyContent: 'center',
-    gap: "1.5rem",
     flexWrap: "wrap",
   },
   icon: {
@@ -70,7 +68,7 @@ export function HeroRuntimes() {
   const text = hovered !== null ? rows[hovered].label : "these Frameworks";
 
   return (
-    <div style={styles.container} className='column-mobile'>
+    <div style={styles.container} className='column-mobile padding-top-64-28'>
       <div
         className='font-20-14'
         style={{
@@ -86,7 +84,7 @@ export function HeroRuntimes() {
 
         >{text}</span>
       </div>
-      <div style={styles.iconsRow}>
+      <div style={styles.iconsRow} className='gap-24-20'>
         {rows.map((item, i) => {
           const defaultFilter = item.invert
             ? "grayscale(100%) brightness(1.8) invert(1)"

diff --git a/docs-src/src/components/slider.tsx b/docs-src/src/components/slider.tsx
@@ -224,7 +224,6 @@ export function NextArrow(props: any) {
         alignItems: 'center',
         justifyContent: 'center',
         cursor: 'pointer',
-        zIndex: 10,
       }}
       onClick={onClick}
     >
@@ -248,7 +247,6 @@ export function PrevArrow(props: any) {
         alignItems: 'center',
         justifyContent: 'center',
         cursor: 'pointer',
-        zIndex: 10,
       }}
       onClick={onClick}
     >

diff --git a/docs-src/src/components/sync-section.tsx b/docs-src/src/components/sync-section.tsx
@@ -64,7 +64,7 @@ export function SyncSection(props: {
 }) {
   return (
     <div
-      className={'block replication ' + (props.dark ? 'dark' : '') + ' tropy-before'}
+      className={'block replication ' + (props.dark ? 'dark' : '') + ' trophy-before trophy-after'}
       id="replication"
       ref={props.replicationRef}
       style={{ order: props.order }}
@@ -76,7 +76,7 @@ export function SyncSection(props: {
 
         <div className="inner" >
           <div className="half left">
-            <p className='font-16-14'>
+            <p className='font-16-14 centered-mobile-p'>
               RxDB's simple and high-performance{' '}
               <a href="/replication.html" target="_blank">
                 Sync Engine
@@ -85,7 +85,7 @@ export function SyncSection(props: {
               Either use one of our prebuild replication plugins...
             </p>
 
-            <p>
+            <p className='centered-mobile-p'>
               {replicationLinks.map(link => (
                 <a key={link.url} href={link.url} target="_blank">
                   <Tag img={link.iconUrl}>{link.label}</Tag>

diff --git a/docs-src/src/components/tag.tsx b/docs-src/src/components/tag.tsx
@@ -21,13 +21,13 @@ export function Tag(props: {
                 width: "auto",
                 marginRight: 12,
                 marginBottom: 12,
-                fontSize: 16,
                 fontWeight: hasImg ? 800 : 500,
                 whiteSpace: "nowrap",
                 boxSizing: "border-box",
                 userSelect: "none",
                 border: props.border ? '2px solid var(--White, #FFF)' : 'none'
             }}
+            className='font-16-14'
         >
             {hasImg &&
                 (typeof props.img === "string" ? (

diff --git a/docs-src/src/components/video-section.tsx b/docs-src/src/components/video-section.tsx
@@ -98,7 +98,7 @@ const padding = 50;
 export function VideoSection(_props: {
     sem?: SemPage;
 }) {
-    return <div className="block reviews" id="videos" style={{ paddingTop: padding }}>
+    return <div className="block reviews trophy-after" id="videos" style={{ paddingTop: padding }}>
         <div className="content centered" style={{
             marginBottom: 50
         }}>