Make the tutorial less fat

Author: laffra

ltk/ltk.css

@@ -440,7 +440,7 @@
     top: -1000px;
     left: -1000px;
     background: lightyellow;
-    border: 5px solid gray;
+    border: 3px solid orange;
     border-radius: 15px;
     overflow: hidden;
     padding: 10px;
@@ -452,9 +452,9 @@
 
 .ltk-step-marker {
     position: absolute;
-    width: 5px;
-    height: 5px;
-    background: gray;
+    width: 3px;
+    height: 3px;
+    background: orange;
     z-index: 10000;
 }
 

ltk/widgets.py

@@ -1028,36 +1028,41 @@ def fix(self):
 
     def add_markers(self):
         self.content.css("visibility", "visible")
+        # the top part
         ltk.find("body").append(ltk.Div()
             .addClass("ltk-step-marker")
             .css("left", self.widget.offset().left)
             .css("top", self.widget.offset().top)
-            .css("width", self.widget.outerWidth())
+            .css("width", self.widget.outerWidth() + 1)
         )
+        # the bottom part
         ltk.find("body").append(ltk.Div()
             .addClass("ltk-step-marker")
             .css("left", self.widget.offset().left)
-            .css("top", self.widget.offset().top + self.widget.outerHeight() - 3)
-            .css("width", self.widget.outerWidth())
+            .css("top", self.widget.offset().top + self.widget.outerHeight() - 2)
+            .css("width", self.widget.outerWidth() + 1)
         )
+        # the left part
         ltk.find("body").append(ltk.Div()
             .addClass("ltk-step-marker")
-            .css("left", self.widget.offset().left - 2)
+            .css("left", self.widget.offset().left)
             .css("top", self.widget.offset().top)
-            .css("height", self.widget.outerHeight() + 2)
+            .css("height", self.widget.outerHeight())
         )
+        # the right part
         ltk.find("body").append(ltk.Div()
             .addClass("ltk-step-marker")
-            .css("left", self.widget.offset().left + self.widget.outerWidth() - 3)
+            .css("left", self.widget.offset().left + self.widget.outerWidth() - 1)
             .css("top", self.widget.offset().top)
-            .css("height", self.widget.outerHeight() + 2)
+            .css("height", self.widget.outerHeight())
         )
+        # the connector
         ltk.find("body").append(ltk.Div()
             .addClass("ltk-step-marker")
-            .css("left", self.widget.offset().left + self.widget.outerWidth() - 3)
+            .css("left", self.widget.offset().left + self.widget.outerWidth() - 1)
             .css("top", self.widget.offset().top + 12)
             .css("width", 32)
-            .css("height", 7)
+            .css("height", 3)
         )
 
     def hide(self):

pyproject.toml

@@ -6,7 +6,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "pyscript-ltk"
-version = "0.1.35"
+version = "0.1.37"
 description = "A little toolkit for writing UIs in PyScript"
 readme = "README.md"
 authors = [{ name = "Chris Laffra", email = "[email protected]" }]