test element alignment

zumerlab · Feb 27, 2023 · 58c2251 · 58c2251
1 parent 5c8e357
commit 58c2251
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/index.css b/index.css
@@ -1,7 +1,7 @@
 :root {
     --angle: 1;
-    --distance: 100px;
-    --distance2: 190px;
+    --distance: 90px;
+    --distance2: 220px;
     --xxs: 8px;
     --xs: 18px;
     --sm: 30px;
@@ -86,6 +86,12 @@
     justify-items: center;
     grid-area: 1/1/1/1;
   }
+  .orbit {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    justify-items: center;
+  }
   .level-1 {
     width: calc(var(--distance) * 2);
     height: calc(var(--distance) * 2);
@@ -130,7 +136,7 @@
       translate(var(--distance), 0)
       rotate(calc(var(--angle) * var(--item-number) * 1deg * -1));
   }
-  .item.orbit,
+  .item.orbit, .pepe.orbit,
   .item.level-1.orbit {
     --p1: calc(var(--angle) * var(--item-number) * 1deg);
     transform: rotate(var(--p1))
@@ -157,7 +163,7 @@
     --angle: 77;
   }
   .item.s,
-  item.sm {
+  .item.sm {
     width: var(--sm);
     height: var(--sm);
   }

diff --git a/index.html b/index.html
@@ -10,12 +10,16 @@
 <body>
     <div class="ring">
         <div class="level-1 items-3">
-          <div class="item m">one</div>
+          <div class="item m">
+            <div class="line"></div>
+            <div class="content">One</div>
+          </div>
           <div class="item m items-1">
             <div class="item xs d50 transparent orbit">
-              <svg width='50' height='1'><line x1='0' y1='0' x2='50' y2='0' stroke='red'/></svg>
+              <svg  width='50' height='1'><line x1='0' y1='0' x2='50' y2='0' stroke='red'/></svg>
               <span style="transform: rotate(90deg); color: red">⧩</span>
             </div>
+
 
           </div>
           <div class="item m items-4">