Better docs website

README.md

@@ -12,6 +12,8 @@ This project is a port of [react-wrap-balancer](https://github.com/shuding/react
 
 Simple Solid.js Component That Makes Titles More Readable
 
+![Example](/example.png)
+
 ## Introduction
 
 [**Solid Wrap Balancer**](https://solid-wrap-balancer.vercel.app) is a simple Solid Component that makes your titles more readable in different viewport sizes. It improves the wrapping to avoid situations like a single word in the last line, makes the content more “balanced”:
@@ -69,6 +71,6 @@ For full documentation and use cases, please visit [**solid-wrap-balancer.vercel
 
 This project is a port of [react-wrap-balancer](https://github.com/shuding/react-wrap-balancer) made by [Shu Ding](https://twitter.com/shuding_) to solid.js
 
-
 ## Flow
+
 If there is a context - it initialize it with realyout function. The Rebalancer init script for each element, but if it has a context - it uses its existing relayout function from the global window context. In SSR it inject hte ratio prop to the element. When the component load it search for the script and call it with the component id. The script is a resizable observer that try to rebalance text according to ratio. If Decrease it's with to see if the height changes and go to the smallest width that the height keep the same. When unmount / ratio changes - clean observer and element function.

dev/css.d.ts

@@ -0,0 +1,7 @@
+import * as CSS from "csstype";
+
+declare module "csstype" {
+  interface Properties<TLength = (string & {}) | 0> {
+    "--w"?: CSS.Property.Width<TLength>;
+  }
+}

dev/package.json

@@ -32,14 +32,10 @@
   "dependencies": {
     "@solidjs/meta": "^0.28.2",
     "@solidjs/router": "^0.6.0",
-    "@trpc/client": "10.7.0",
-    "@trpc/server": "10.7.0",
     "copy-to-clipboard": "^3.3.3",
     "solid-devtools": "^0.24.7",
     "solid-js": "^1.6.8",
-    "solid-spring": "^0.0.7",
     "solid-start": "^0.2.11",
-    "solid-start-trpc": "^0.0.16",
     "undici": "5.14.0",
     "zod": "^3.20.2"
   },

dev/src/root.css

@@ -13,6 +13,10 @@ body {
   height: 100%;
 }
 
+.break {
+  word-break: break-word;
+}
+
 p,
 h1,
 h2 {
@@ -131,17 +135,6 @@ h3 {
   font-weight: 400;
 }
 
-h3 > span::before {
-  content: "";
-  width: 0;
-  height: 0;
-  border-left: 0.35em solid transparent;
-  border-right: 0.35em solid transparent;
-  border-bottom: 0.6em solid currentColor;
-  display: inline-block;
-  margin-right: 0.4em;
-}
-
 h3 + .headline {
   margin-top: 10px;
 }
@@ -364,6 +357,8 @@ h2 {
 }
 
 .tooltip-trigger {
+  display: flex;
+  justify-content: center;
   margin-top: 120px;
   margin-bottom: 10px;
   padding: 4px;