From d4ab4e27a78119d78cc007f08b202eb9451665fa Mon Sep 17 00:00:00 2001 From: Martin Muda Date: Wed, 27 Sep 2023 17:03:00 -0300 Subject: [PATCH] update example. Gap still buggy --- examples/arcgrid.html | 151 ++++++++++++++++++++++++++++++------------ 1 file changed, 108 insertions(+), 43 deletions(-) diff --git a/examples/arcgrid.html b/examples/arcgrid.html index 618e8ac..849af5b 100644 --- a/examples/arcgrid.html +++ b/examples/arcgrid.html @@ -11,23 +11,36 @@ body { font-family: 'Lucida Sans', Verdana, sans-serif; } + .ring { + border: none + } .capsule { - - margin: auto 0 ; - padding: 10px; + display: grid; + place-items: center right; color: white; - width: 80%; - height: 40px; - border: 1px solid rgb(190, 15, 15); - /*rotate: calc(var(--rotate) * -1);*/ - - + width: var(--half); + /* paddgin right para qeudar fuera de borde mas un espacio*/ + /*padding-right: calc(var(--width) + 10px);*/ + /* paddgin right para qeudar fuera de borde mas un espacio*/ + padding-right: 0px; + + } + .capsule > span { + /*queda mirando para afuera*/ + /* rotate: 270deg;*/ + /* queda mirando para adentro*/ + /*rotate: 90deg;*/ + + /* queda siempre horizontal. default */ + rotate: calc(var(--rotate) * -1); + + /* sin rotate quedan perpendiculares al centro.*/ + /* rotate: 0deg;*/ } - .arc { - --width:12px; + --width:50px; background-color: darkslategray; } @@ -40,38 +53,68 @@
-
-
-
-
-
+
+
+ 😁 +
+
+ 😁 +
+
+ 😁 +
+
+ 😁 +
- hola play + 😁
-
+
+ 😁 +
-
-
-
-
+
+ 😁 +
+
+ 😁 +
+
+ 😁 +
+
+ 😁 +
- hola play + 😁
-
+
+ 😁 +
-
- hola play +
+ 😁
-
-
-
-
-
+
+ 😁 +
+
+ 😁 +
+
+ 😁 +
+
+ 😁 +
+
+ 😁 +
@@ -87,12 +130,24 @@
-
-
-
-
-
-
+
+ 😁 +
+
+ 😁 +
+
+ 😁 +
+
+ 😁 +
+
+ 😁 +
+
+ 😁 +
@@ -102,14 +157,24 @@
-
-
-
-
-
+
+ 😁 +
+
+ 😁 +
+
+ 😁 +
+
+ 😁 +
+
+ 😁 +
- hola play + 😁