Claude sonnet understands CSS even more poorly than I do

MichaelDiBernardo · Aug 25, 2024 · e8612f5 · e8612f5
1 parent b160373
commit e8612f5
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -87,6 +87,8 @@
   </head>
 
   <body>
-    <div id="scrollable-area"></div>
+    <div id="scrollable-area">
+      <div id="center-point"></div>
+    </div>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,20 +1,5 @@
-const viewportDimensions = {
-  x: 50000,
-  y: 50000,
-};
-
 document.addEventListener("load", function () {
   const scrollableArea = document.getElementById("scrollable-area");
-  const viewportWidth = window.innerWidth;
-  const viewportHeight = window.innerHeight;
-
-  // Calculate the center position
-  const scrollToX = (viewportDimensions.x - viewportWidth) / 2;
-  const scrollToY = (viewportDimensions.y - viewportHeight) / 2;
-
-  console.log(`Center is: ${scrollToX}, ${scrollToY}`);
-  // Set the initial scroll position
-  window.scrollTo(scrollToX, scrollToY);
 
   // Prevent default touch behavior to allow custom scrolling
   scrollableArea.addEventListener(
@@ -41,4 +26,13 @@ document.addEventListener("load", function () {
     const walkY = (y - startY) * 2;
     window.scrollTo(scrollLeft - walkX, scrollTop - walkY);
   });
+
+  const centerPoint = document.getElementById("center-point");
+
+  // Scroll to the center point
+  centerPoint.scrollIntoView({
+    behavior: "auto",
+    block: "center",
+    inline: "center",
+  });
 });
diff --git a/style.css b/style.css
@@ -85,6 +85,15 @@ body {
 #scrollable-area {
   width: 50000px;
   height: 50000px;
+  position: relative;
   background-image: url("./img/forest-tile-512x512.jpg");
   background-repeat: repeat;
 }
+
+#center-point {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1px;
+  height: 1px;
+}