docs update

mzusin · Jul 24, 2023 · d5d9fa1 · d5d9fa1
1 parent 150abe0
commit d5d9fa1
Show file tree

Hide file tree

Showing 22 changed files with 65 additions and 64 deletions.
diff --git a/docs/css/styles.1690186695196.css → docs/css/styles.1690187499715.css b/docs/css/styles.1690186695196.css → docs/css/styles.1690187499715.css
diff --git a/docs/index.html b/docs/index.html
@@ -19,8 +19,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="font-josefin_sans text-lg text-gray-100 hp-bg dark" id="special-page">
@@ -29,8 +29,8 @@
     🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/react-round-slider" class="underline">GitHub repository</a> 🤩</p>
 </div>
 
-<header class="py-4 px-10 flex items-center justify-between">
-  <div class="flex items-center">
+<header class="py-4 px-10 flex items-center justify-between hidden md:flex">
+  <div class="items-center">
     <a href="/" title="" class="inline-flex items-center">
       <svg
               xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
@@ -62,7 +62,7 @@
 <div id="hp-main">
 
   <!-- top section -->
-  <section class="relative max-w-5xl mx-auto pt-20 sm:pt-24 lg:pt-32 mb-20">
+  <section class="relative max-w-5xl mx-auto pt-10 sm:pt-24 lg:pt-32 mb-20">
     <h1 class="text-slate-100 font-extrabold text-4xl sm:text-5xl lg:text-6xl tracking-tight text-center px-4">React Round Slider</h1>
 
     <p class="mt-6 sm:text-2xl lg:text-3x text-slate-400 text-center max-w-3xl mx-auto px-4 pb-14">Experience an accessible and mobile-friendly React Round Slider library, powered by TypeScript and SVG</p>
@@ -276,7 +276,7 @@ <h2 class="mt-8 font-semibold text-sky-500">Styles</h2>
         <a class="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-sky-50 text-sky-600 hover:bg-sky-100 hover:text-sky-700 focus:ring-sky-600 mt-8 pt-px" href="/pages/basic-usage.html">Learn more<svg class="overflow-visible ml-3 text-sky-300 group-hover:text-sky-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg></a>
       </div>
 
-      <div class="max-w-full order-1 lg:order-2 flex items-center justify-center" id="design-slider"></div>
+      <div class="max-w-full order-1 lg:order-2 flex justify-center" id="design-slider"></div>
 
     </div>
   </section>
@@ -400,6 +400,6 @@ <h2 class="mt-8 font-semibold text-sky-500">Free</h2>
 
 </div>
 
-  <script src="/js/index.1690186695196.js"></script>
+  <script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/js/index.1690186695196.js → docs/js/index.1690187499715.js b/docs/js/index.1690186695196.js → docs/js/index.1690187499715.js
diff --git a/docs/js/index.1690186695196.js.map → docs/js/index.1690187499715.js.map b/docs/js/index.1690186695196.js.map → docs/js/index.1690187499715.js.map
diff --git a/docs/pages/animation.html b/docs/pages/animation.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -220,6 +220,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/basic-usage.html b/docs/pages/basic-usage.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -208,6 +208,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/circle-gradient.html b/docs/pages/circle-gradient.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -254,6 +254,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/connection.html b/docs/pages/connection.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -243,6 +243,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/custom-pointer-shape.html b/docs/pages/custom-pointer-shape.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -219,6 +219,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/data-settings.html b/docs/pages/data-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -242,6 +242,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/disabled-state.html b/docs/pages/disabled-state.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -229,6 +229,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/individual-pointer-settings.html b/docs/pages/individual-pointer-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -278,6 +278,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/path-settings.html b/docs/pages/path-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -269,6 +269,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/pointer-and-connection-gradient.html b/docs/pages/pointer-and-connection-gradient.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -238,6 +238,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/pointer-settings.html b/docs/pages/pointer-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -268,6 +268,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/pointers-overlap.html b/docs/pages/pointers-overlap.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -210,6 +210,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/text-values.html b/docs/pages/text-values.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -262,6 +262,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/ticks-settings.html b/docs/pages/ticks-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -266,6 +266,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/ticks-values.html b/docs/pages/ticks-values.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -280,6 +280,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/docs/pages/values-list.html b/docs/pages/values-list.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690186695196.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690186695196.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690187499715.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690187499715.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -225,6 +225,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690186695196.js"></script>
+<script src="/js/index.1690187499715.js"></script>
 </body>
 </html>
diff --git a/src/docs/client-side/js/home-page/home-page.tsx b/src/docs/client-side/js/home-page/home-page.tsx
@@ -275,6 +275,7 @@ const designSlider = () => {
 
                 min={ 0 }
                 max={ 359 }
+                pathRadius={ 120 }
 
                 textColor={ '#94A3B8' }
                 textFontSize={ 40 }